{localize('com_ui_subagent_thread_history_truncated')}
diff --git a/client/src/components/Chat/Subagents/SubagentThreadPanel.test.tsx b/client/src/components/Chat/Subagents/SubagentThreadPanel.test.tsx
index 98aad64b86..4e429803fc 100644
--- a/client/src/components/Chat/Subagents/SubagentThreadPanel.test.tsx
+++ b/client/src/components/Chat/Subagents/SubagentThreadPanel.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { RecoilRoot, useRecoilValue } from 'recoil';
import { ContentTypes, ForkOptions } from 'librechat-data-provider';
+import { RecoilRoot, useRecoilValue, useSetRecoilState } from 'recoil';
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
import type {
ParentSubagentSummary,
@@ -19,6 +19,7 @@ import SubagentThreadPanel from './SubagentThreadPanel';
const mockUseSubagentThreadQuery = jest.fn();
const mockUseSubagentActivityStream = jest.fn();
const mockForkMutate = jest.fn();
+const mockControlMutate = jest.fn();
const mockNavigateToConvo = jest.fn();
const mockShowToast = jest.fn();
const mockApprovalProviderMounted = jest.fn();
@@ -43,6 +44,17 @@ jest.mock('~/data-provider', () => ({
mutate: (payload: unknown) => mockForkMutate(payload, options),
isLoading: false,
}),
+ useSubagentControlMutation: (options: {
+ onSuccess: (result: unknown, variables: unknown) => void;
+ onError: (error: unknown, variables: unknown) => void;
+ }) => ({
+ mutate: (variables: unknown) =>
+ mockControlMutate(variables, {
+ onSuccess: (result: unknown) => options.onSuccess(result, variables),
+ onError: (error: unknown) => options.onError(error, variables),
+ }),
+ isLoading: false,
+ }),
}));
jest.mock('~/data-provider/Subagents/useSubagentActivityStream', () => ({
@@ -97,21 +109,39 @@ jest.mock('./SubagentActivity', () => ({
activity,
activityId,
state,
+ onCancelControl,
}: {
- activity: { status: string; prompt?: string; items: Array<{ type: string; text?: string }> };
+ activity: {
+ status: string;
+ prompt?: string;
+ items: Array<{ type: string; text?: string }>;
+ controls?: Array<{ invocationId: string; status: string }>;
+ };
activityId?: string;
state: string;
+ onCancelControl?: (controlId: string) => void;
}) => (
{activity.prompt}
{activity.items.map((item, index) => (
{item.text ?? item.type}
))}
+ {activity.controls?.map((control) => (
+ {control.status}
+ ))}
+ {onCancelControl != null && (
+
),
}));
@@ -120,6 +150,11 @@ jest.mock('@librechat/client', () => {
const mockReact = jest.requireActual
('react');
const MockSelectContext = mockReact.createContext((_value: string): void => {});
return {
+ Alert: ({ children, ...props }: React.ComponentProps<'div'>) => (
+
+ {children}
+
+ ),
Button: ({ children, ...props }: React.ComponentProps<'button'>) => (
),
@@ -151,6 +186,7 @@ jest.mock('@librechat/client', () => {
);
},
+ Textarea: (props: React.ComponentProps<'textarea'>) => ,
useMediaQuery: () => mockIsMobile,
useToastContext: () => ({ showToast: mockShowToast }),
};
@@ -159,11 +195,15 @@ jest.mock('@librechat/client', () => {
jest.mock('lucide-react', () => ({
AlertCircle: () => null,
Bot: () => null,
+ CornerDownRight: () => null,
CheckCircle2: () => null,
Clock3: () => null,
+ ListEnd: () => null,
MessagesSquare: () => null,
+ OctagonX: () => null,
X: () => null,
XCircle: () => null,
+ Zap: () => null,
}));
const selection: ActiveSubagentPanel = {
@@ -210,10 +250,12 @@ const completedView: SubagentThreadView = {
describe('SubagentThreadPanel', () => {
beforeEach(() => {
+ window.sessionStorage.clear();
mockIsMobile = false;
mockApprovalProviderMounted.mockClear();
mockApprovalProviderUnmounted.mockClear();
mockForkMutate.mockClear();
+ mockControlMutate.mockClear();
mockNavigateToConvo.mockClear();
mockShowToast.mockClear();
mockRefreshParentChildren.mockClear();
@@ -270,6 +312,499 @@ describe('SubagentThreadPanel', () => {
);
});
+ it('submits one command invocation, blocks duplicate clicks, and shows its receipt', async () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Check the primary source.' },
+ });
+ const queue = screen.getByRole('button', { name: 'com_ui_queue' });
+ fireEvent.click(queue);
+ fireEvent.click(queue);
+
+ expect(mockControlMutate).toHaveBeenCalledTimes(1);
+ const [variables, callbacks] = mockControlMutate.mock.calls[0] as [
+ {
+ parentConversationId: string;
+ threadId: string;
+ command: { taskId: string; invocationId: string; action: string; message: string };
+ },
+ { onSuccess: (value: unknown) => void },
+ ];
+ expect(variables).toEqual({
+ parentConversationId: 'parent-conversation',
+ threadId: 'child-thread',
+ submittedAt: expect.any(String),
+ command: {
+ taskId: 'task',
+ invocationId: expect.any(String),
+ action: 'queue',
+ message: 'Check the primary source.',
+ },
+ });
+ act(() => {
+ callbacks.onSuccess({
+ receipt: {
+ invocationId: variables.command.invocationId,
+ controlId: 'control-1',
+ action: 'queue',
+ status: 'accepted',
+ createdAt: '2026-08-24T12:00:00.000Z',
+ updatedAt: '2026-08-24T12:00:00.000Z',
+ },
+ });
+ });
+ expect(screen.getByText('accepted')).toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'true');
+ });
+
+ it('retries an unavailable owner with the same authoritative invocation id', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Use the primary source.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_steer' }));
+ const firstCommand = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+
+ expect(screen.getByLabelText('com_ui_subagent_control_message')).toBeDisabled();
+ expect(screen.getByRole('button', { name: 'com_ui_subagent_cancel_task' })).toBeDisabled();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'false');
+
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_retry' }));
+
+ expect(mockControlMutate).toHaveBeenCalledTimes(2);
+ expect(mockControlMutate.mock.calls[1][0].command).toEqual(firstCommand);
+ });
+
+ it('releases the composer after a definitive policy rejection', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Blocked guidance.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_steer' }));
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 400 } });
+ });
+
+ expect(screen.getByText('com_ui_subagent_control_reason_invalid_command')).toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'com_ui_retry' })).not.toBeInTheDocument();
+ expect(screen.getByLabelText('com_ui_subagent_control_message')).toBeEnabled();
+ expect(screen.getByRole('button', { name: 'com_ui_subagent_cancel_task' })).toBeEnabled();
+ });
+
+ it('retains an ambiguous invocation across closing and reopening the panel', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ const PanelHost = () => {
+ const current = useRecoilValue(activeSubagentPanel);
+ const setCurrent = useSetRecoilState(activeSubagentPanel);
+ return current == null ? (
+
+ ) : (
+
+ );
+ };
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Use the primary source.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_queue' }));
+ const firstCommand = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_close' }));
+ fireEvent.click(screen.getByRole('button', { name: selection.subagentType }));
+
+ expect(screen.getByRole('button', { name: 'com_ui_retry' })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_retry' }));
+ expect(mockControlMutate.mock.calls[1][0].command).toEqual(firstCommand);
+ });
+
+ it('retains an ambiguous invocation across a full page-state reload', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ const first = render(
+
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Keep the same invocation.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_queue' }));
+ const firstCommand = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+ first.unmount();
+
+ render(
+
+
+ ,
+ );
+ expect(screen.getByRole('button', { name: 'com_ui_retry' })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_retry' }));
+ expect(mockControlMutate.mock.calls[1][0].command).toEqual(firstCommand);
+ });
+
+ it('records an ambiguous result after the panel closes before the mutation settles', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ const PanelHost = () => {
+ const current = useRecoilValue(activeSubagentPanel);
+ const setCurrent = useSetRecoilState(activeSubagentPanel);
+ return current == null ? (
+
+ ) : (
+
+ );
+ };
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Retry after closing.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_queue' }));
+ const firstCommand = mockControlMutate.mock.calls[0][0].command;
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_close' }));
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+ fireEvent.click(screen.getByRole('button', { name: selection.subagentType }));
+
+ expect(screen.getByRole('button', { name: 'com_ui_retry' })).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_retry' }));
+ expect(mockControlMutate.mock.calls[1][0].command).toEqual(firstCommand);
+ });
+
+ it('keeps an unavailable-owner retry visible if the child settles before the receipt appears', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ const { rerender } = render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Use the primary source.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_steer' }));
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: completedView,
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ rerender(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ expect(
+ screen.getByText('com_ui_subagent_control_reason_owner_unavailable'),
+ ).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'com_ui_retry' })).toBeInTheDocument();
+ expect(screen.queryByLabelText('com_ui_subagent_control_message')).not.toBeInTheDocument();
+ });
+
+ it('preserves drafted guidance when withdrawing an accepted control', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: {
+ ...completedView,
+ status: 'running',
+ controlReceipts: [
+ {
+ invocationId: 'accepted-control',
+ controlId: 'control-1',
+ action: 'queue',
+ status: 'accepted',
+ createdAt: '2026-08-24T12:00:00.000Z',
+ updatedAt: '2026-08-24T12:00:00.000Z',
+ },
+ ],
+ },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ const composer = screen.getByLabelText('com_ui_subagent_control_message');
+ fireEvent.change(composer, { target: { value: 'Keep this draft.' } });
+ fireEvent.click(screen.getByTestId('withdraw-control'));
+ const command = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onSuccess({
+ receipt: {
+ invocationId: command.invocationId,
+ controlId: 'control-1',
+ action: 'cancel_message',
+ status: 'applied',
+ createdAt: '2026-08-24T12:00:01.000Z',
+ updatedAt: '2026-08-24T12:00:01.000Z',
+ },
+ });
+ });
+
+ expect(composer).toHaveValue('Keep this draft.');
+ });
+
+ it('clears transient retry state when refresh returns the same durable invocation', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ const { rerender } = render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.change(screen.getByLabelText('com_ui_subagent_control_message'), {
+ target: { value: 'Use the primary source.' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_steer' }));
+ const command = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 503 } });
+ });
+ expect(screen.getByRole('button', { name: 'com_ui_retry' })).toBeInTheDocument();
+ expect(window.sessionStorage.length).toBe(1);
+
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: {
+ ...completedView,
+ status: 'running',
+ controlReceipts: [
+ {
+ invocationId: command.invocationId,
+ action: 'steer',
+ status: 'applied',
+ createdAt: '2026-08-24T12:00:00.000Z',
+ updatedAt: '2026-08-24T12:00:01.000Z',
+ },
+ ],
+ },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ rerender(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ expect(screen.getByText('applied')).toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'com_ui_retry' })).not.toBeInTheDocument();
+ expect(screen.getByLabelText('com_ui_subagent_control_message')).toHaveValue('');
+ expect(
+ screen.queryByText('com_ui_subagent_control_reason_owner_unavailable'),
+ ).not.toBeInTheDocument();
+ expect(window.sessionStorage.length).toBe(0);
+ });
+
+ it('closes stale running controls after task cancellation is applied', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_subagent_cancel_task' }));
+ const command = mockControlMutate.mock.calls[0][0].command;
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onSuccess({
+ receipt: {
+ invocationId: command.invocationId,
+ action: 'cancel',
+ status: 'applied',
+ createdAt: '2026-08-24T12:00:00.000Z',
+ updatedAt: '2026-08-24T12:00:01.000Z',
+ },
+ });
+ });
+
+ expect(screen.queryByLabelText('com_ui_subagent_control_message')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('button', { name: 'com_ui_subagent_cancel_task' }),
+ ).not.toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'false');
+ });
+
+ it('reports an inaccessible task without offering a misleading retry', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: { ...completedView, status: 'running', controlReceipts: [] },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ fireEvent.click(screen.getByRole('button', { name: 'com_ui_subagent_cancel_task' }));
+ act(() => {
+ mockControlMutate.mock.calls[0][1].onError({ response: { status: 404 } });
+ });
+
+ expect(
+ screen.getByText('com_ui_subagent_control_reason_task_inaccessible'),
+ ).toBeInTheDocument();
+ expect(screen.queryByRole('button', { name: 'com_ui_retry' })).not.toBeInTheDocument();
+ expect(screen.queryByLabelText('com_ui_subagent_control_message')).not.toBeInTheDocument();
+ expect(
+ screen.queryByRole('button', { name: 'com_ui_subagent_cancel_task' }),
+ ).not.toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'false');
+ });
+
+ it('renders rejected and refreshed applied receipts independently from child status', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: {
+ ...completedView,
+ status: 'running',
+ controlReceipts: [
+ {
+ invocationId: 'persisted',
+ action: 'interrupt',
+ status: 'applied',
+ createdAt: '2026-08-24T12:00:00.000Z',
+ updatedAt: '2026-08-24T12:00:01.000Z',
+ },
+ {
+ invocationId: 'terminal-race',
+ action: 'steer',
+ status: 'rejected',
+ createdAt: '2026-08-24T12:00:02.000Z',
+ updatedAt: '2026-08-24T12:00:03.000Z',
+ reason: 'task_completed',
+ },
+ ],
+ },
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ expect(screen.getByText('applied')).toBeInTheDocument();
+ expect(screen.getByText('rejected')).toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-status', 'running');
+ expect(screen.queryByLabelText('com_ui_subagent_control_message')).not.toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'false');
+ });
+
+ it('does not expose task controls after the selected child is terminal', () => {
+ mockUseSubagentThreadQuery.mockReturnValue({
+ data: completedView,
+ isLoading: false,
+ isError: false,
+ isReadinessPending: false,
+ });
+
+ render(
+ set(activeSubagentPanel, selection)}>
+
+ ,
+ );
+
+ expect(screen.queryByLabelText('com_ui_subagent_control_message')).not.toBeInTheDocument();
+ expect(screen.getByTestId('shared-activity')).toHaveAttribute('data-can-withdraw', 'false');
+ });
+
it('renders foreground persisted activity through the same shared panel without a durable read', () => {
mockUseSubagentThreadQuery.mockReturnValue({
data: undefined,
diff --git a/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx b/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
index 714c5dbe36..59b1ec8755 100644
--- a/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
+++ b/client/src/components/Chat/Subagents/SubagentThreadPanel.tsx
@@ -1,28 +1,45 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Bot, MessagesSquare, X } from 'lucide-react';
+import { v4 } from 'uuid';
import { ForkOptions } from 'librechat-data-provider';
-import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
+import { Bot, CornerDownRight, ListEnd, MessagesSquare, OctagonX, X, Zap } from 'lucide-react';
+import {
+ useRecoilCallback,
+ useRecoilState,
+ useRecoilValue,
+ useResetRecoilState,
+ useSetRecoilState,
+} from 'recoil';
import {
Button,
+ Alert,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
+ Textarea,
useMediaQuery,
useToastContext,
} from '@librechat/client';
-import type { ParentSubagentTaskSummary } from 'librechat-data-provider';
+import type {
+ ParentSubagentTaskSummary,
+ SubagentControlAction,
+ SubagentControlReceipt,
+ SubagentControlRequest,
+} from 'librechat-data-provider';
import type { ReactNode } from 'react';
-import type { ActiveSubagentPanel } from '~/store/subagents';
+import type { ActiveSubagentPanel, SubagentControlUiState } from '~/store/subagents';
import {
ACTIVE_THREAD_REFRESH_MS,
subagentThreadHasTaskEvidence,
useForkConvoMutation,
+ useSubagentControlMutation,
useSubagentThreadQuery,
} from '~/data-provider';
import {
activeSubagentPanel,
+ subagentControlStateByTask,
+ subagentControlStateKey,
subagentProgressByToolCallId,
subagentProgressKey,
} from '~/store/subagents';
@@ -36,6 +53,45 @@ import { eventSubagentSelection } from './eventSelection';
import { useAgentsMapContext } from '~/Providers';
const EVENT_TASK_PAGE_SIZE = 3;
+const TERMINAL_CONTROL_REASONS = new Set([
+ 'task_not_running',
+ 'task_completed',
+ 'task_cancelled',
+ 'task_failed',
+]);
+
+const isTerminalControlReason = (reason?: string): boolean =>
+ reason != null && TERMINAL_CONTROL_REASONS.has(reason);
+
+const closesTaskControls = (receipt: SubagentControlReceipt): boolean =>
+ isTerminalControlReason(receipt.reason) ||
+ (receipt.action === 'cancel' && receipt.status === 'applied');
+
+const responseStatus = (error: unknown): number | undefined =>
+ typeof error === 'object' &&
+ error != null &&
+ 'response' in error &&
+ typeof error.response === 'object' &&
+ error.response != null &&
+ 'status' in error.response &&
+ typeof error.response.status === 'number'
+ ? error.response.status
+ : undefined;
+
+const failedControlReason = (
+ inaccessible: boolean,
+ retryable: boolean,
+): 'task_inaccessible' | 'owner_unavailable' | 'invalid_command' => {
+ if (inaccessible) return 'task_inaccessible';
+ if (retryable) return 'owner_unavailable';
+ return 'invalid_command';
+};
+
+const failedControlLocaleKey = (reason?: string) => {
+ if (reason === 'task_inaccessible') return 'com_ui_subagent_control_reason_task_inaccessible';
+ if (reason === 'owner_unavailable') return 'com_ui_subagent_control_reason_owner_unavailable';
+ return 'com_ui_subagent_control_reason_invalid_command';
+};
export default function SubagentThreadPanel({ selection }: { selection: ActiveSubagentPanel }) {
const localize = useLocalize();
@@ -62,6 +118,18 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
: localize('com_ui_subagent_dialog_title', { 0: selection.subagentType });
const threadId = selection.durable?.threadId ?? '';
const taskId = selection.durable?.taskId ?? '';
+ const controlIdentity = subagentControlStateKey(selection.parentConversationId, threadId, taskId);
+ const [controlState, setControlState] = useRecoilState(
+ subagentControlStateByTask(controlIdentity),
+ );
+ const setControlStateForIdentity = useRecoilCallback(
+ ({ set }) =>
+ (identity: string, state: SubagentControlUiState | null) =>
+ set(subagentControlStateByTask(identity), state),
+ [],
+ );
+ const transientControl = controlState?.receipt ?? null;
+ const retryControl = controlState?.retry ?? null;
const eventSummary = selection.event == null ? undefined : byThreadId.get(threadId);
const eventTaskCount = eventSummary?.tasks.length ?? 0;
const [eventTaskWindow, setEventTaskWindow] = useState(() => ({
@@ -168,6 +236,170 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
showToast({ message: localize('com_ui_continue_chat_error'), status: 'error' });
},
});
+ const [controlMessage, setControlMessage] = useState('');
+ const [controlInaccessible, setControlInaccessible] = useState(false);
+ const [controlsClosed, setControlsClosed] = useState(false);
+ const controlInFlightRef = useRef(false);
+ const controlSelectionRef = useRef(controlIdentity);
+ useEffect(() => {
+ controlSelectionRef.current = controlIdentity;
+ setControlMessage('');
+ setControlInaccessible(false);
+ setControlsClosed(false);
+ controlInFlightRef.current = false;
+ return () => {
+ controlSelectionRef.current = '';
+ };
+ }, [controlIdentity]);
+
+ const controlTask = useSubagentControlMutation({
+ onSuccess: ({ receipt }, variables) => {
+ const submittedSelection = subagentControlStateKey(
+ variables.parentConversationId,
+ variables.threadId,
+ variables.command.taskId,
+ );
+ setControlStateForIdentity(submittedSelection, { receipt });
+ if (controlSelectionRef.current !== submittedSelection) return;
+ controlInFlightRef.current = false;
+ if (closesTaskControls(receipt)) setControlsClosed(true);
+ if (
+ variables.command.action !== 'cancel_message' &&
+ (receipt.status === 'accepted' || receipt.status === 'applied')
+ ) {
+ setControlMessage('');
+ }
+ },
+ onError: (error, variables) => {
+ const status = responseStatus(error);
+ const inaccessible = status === 404;
+ const retryable = status == null || status >= 500;
+ const command = variables.command;
+ const submittedSelection = subagentControlStateKey(
+ variables.parentConversationId,
+ variables.threadId,
+ command.taskId,
+ );
+ setControlStateForIdentity(submittedSelection, {
+ receipt: {
+ invocationId: command.invocationId,
+ ...(command.controlId == null ? {} : { controlId: command.controlId }),
+ action: command.action,
+ status: 'failed',
+ createdAt: variables.submittedAt,
+ updatedAt: new Date().toISOString(),
+ ...(command.message == null ? {} : { message: command.message }),
+ reason: failedControlReason(inaccessible, retryable),
+ },
+ ...(retryable ? { retry: command } : {}),
+ });
+ if (controlSelectionRef.current !== submittedSelection) return;
+ controlInFlightRef.current = false;
+ if (inaccessible) {
+ setControlInaccessible(true);
+ setControlsClosed(true);
+ }
+ },
+ });
+
+ useEffect(() => {
+ if (transientControl == null) return;
+ const durableReceipt = data?.controlReceipts?.find(
+ (receipt) => receipt.invocationId === transientControl.invocationId,
+ );
+ if (durableReceipt == null) return;
+ /** The durable view is authoritative after refresh. Drop mutation-only state
+ * once the same invocation appears there so stale failure/retry UI cannot
+ * outlive a successfully persisted receipt. */
+ if (
+ retryControl != null &&
+ retryControl.action !== 'cancel' &&
+ retryControl.action !== 'cancel_message' &&
+ (durableReceipt.status === 'accepted' || durableReceipt.status === 'applied')
+ ) {
+ setControlMessage((current) => (current === retryControl.message ? '' : current));
+ }
+ if (closesTaskControls(durableReceipt)) setControlsClosed(true);
+ setControlState(null);
+ }, [data?.controlReceipts, retryControl, setControlState, transientControl]);
+
+ useEffect(() => {
+ if (data?.controlReceipts?.some(closesTaskControls)) {
+ setControlsClosed(true);
+ }
+ }, [data?.controlReceipts]);
+
+ const submitControl = useCallback(
+ (action: SubagentControlAction, controlId?: string, retry?: SubagentControlRequest) => {
+ if (
+ selection.durable == null ||
+ controlTask.isLoading ||
+ controlInFlightRef.current ||
+ (retryControl != null && retry == null)
+ ) {
+ return;
+ }
+ let command: SubagentControlRequest;
+ if (retry != null) {
+ command = retry;
+ } else if (action === 'cancel_message') {
+ command = {
+ taskId: selection.durable.taskId,
+ invocationId: v4(),
+ action,
+ controlId,
+ };
+ } else if (action === 'cancel') {
+ command = {
+ taskId: selection.durable.taskId,
+ invocationId: v4(),
+ action,
+ };
+ } else {
+ command = {
+ taskId: selection.durable.taskId,
+ invocationId: v4(),
+ action,
+ message: controlMessage.trim(),
+ };
+ }
+ if (
+ action !== 'cancel' &&
+ action !== 'cancel_message' &&
+ (command.message == null || command.message === '')
+ ) {
+ return;
+ }
+ const now = new Date().toISOString();
+ setControlState({
+ receipt: {
+ invocationId: command.invocationId,
+ ...(command.controlId == null ? {} : { controlId: command.controlId }),
+ action: command.action,
+ status: 'submitted',
+ createdAt: now,
+ updatedAt: now,
+ ...(command.message == null ? {} : { message: command.message }),
+ },
+ retry: command,
+ });
+ controlInFlightRef.current = true;
+ controlTask.mutate({
+ parentConversationId: selection.parentConversationId,
+ threadId: selection.durable.threadId,
+ command,
+ submittedAt: now,
+ });
+ },
+ [
+ controlMessage,
+ controlTask,
+ retryControl,
+ selection.durable,
+ selection.parentConversationId,
+ setControlState,
+ ],
+ );
const close = useCallback(() => {
resetSelection();
@@ -215,25 +447,40 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
const activity = useMemo(() => {
if (selection.durable == null) return liveActivity;
if (data == null) {
- return progress == null ? { ...liveActivity, status: 'dispatched' as const } : liveActivity;
+ const activityWithoutData =
+ progress == null ? { ...liveActivity, status: 'dispatched' as const } : liveActivity;
+ return transientControl == null
+ ? activityWithoutData
+ : { ...activityWithoutData, controls: [transientControl] };
}
const durable = adaptDurableThreadActivity(data, selection.durable.taskId);
- if (
+ const useLiveItems =
(durable.status === 'running' || durable.status === 'dispatched') &&
- liveActivity.items.length > 0
- ) {
- return {
- ...durable,
- prompt: durable.prompt ?? liveActivity.prompt,
- items: liveActivity.items,
- };
- }
- return {
+ liveActivity.items.length > 0;
+ const mergedItems =
+ !useLiveItems && durable.items.length > 0 ? durable.items : liveActivity.items;
+ const merged = {
...durable,
prompt: durable.prompt ?? liveActivity.prompt,
- items: durable.items.length > 0 ? durable.items : liveActivity.items,
+ items: mergedItems,
};
- }, [data, liveActivity, progress, selection.durable]);
+ if (
+ transientControl == null ||
+ (merged.controls ?? []).some(
+ (receipt) => receipt.invocationId === transientControl.invocationId,
+ )
+ ) {
+ return merged;
+ }
+ return { ...merged, controls: [...(merged.controls ?? []), transientControl] };
+ }, [data, liveActivity, progress, selection.durable, transientControl]);
+ const taskInaccessible = controlInaccessible || transientControl?.reason === 'task_inaccessible';
+ const controlAvailable =
+ selection.durable != null && data?.status === 'running' && !taskInaccessible && !controlsClosed;
+ const controlPending =
+ controlTask.isLoading || transientControl?.status === 'submitted' || retryControl != null;
+ const showControlFooter =
+ controlAvailable || retryControl != null || transientControl?.reason === 'task_inaccessible';
const canContinueAsChat =
selection.host === 'conversation' &&
selection.durable != null &&
@@ -288,6 +535,11 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
activity={activity}
state={panelState}
embedded
+ onCancelControl={
+ controlAvailable && !controlPending
+ ? (controlId) => submitControl('cancel_message', controlId)
+ : undefined
+ }
/>
);
}
@@ -417,9 +669,94 @@ export default function SubagentThreadPanel({ selection }: { selection: ActiveSu
activityId={`${selection.parentMessageId}\u0000${selection.toolCallId}\u0000${selection.partIndex}`}
activity={activity}
state={panelState}
+ onCancelControl={
+ controlAvailable && !controlPending
+ ? (controlId) => submitControl('cancel_message', controlId)
+ : undefined
+ }
/>
)}
+ {showControlFooter && (
+
+ {transientControl?.status === 'failed' && (
+
+
+ {localize(failedControlLocaleKey(transientControl.reason))}
+
+ {retryControl != null && (
+
+ )}
+
+ )}
+ {controlAvailable && (
+ <>
+