← All changes | src/Agent/Agent.jsx +464 -135 3.1.1 → trunk View file →

		@@ -1,21 +1,37 @@
1	1	import {
2	2	callTool,
	3	+ handleCanvas,
3	4	handleWorkflow,
4	5	pickWorkflow,
5	6	recordAgentActivity,
6	7	} from '@agent/api';
7	8	import { Chat } from '@agent/Chat';
	9	+import {
	10	+ Canvas,
	11	+ useCanvasAssist,
	12	+ useCanvasOpen,
	13	+} from '@agent/components/Canvas';
8	14	import { ChatInput } from '@agent/components/ChatInput';
9	15	import { ChatMessages } from '@agent/components/ChatMessages';
10	16	import { UsageMessage } from '@agent/components/messages/UsageMessage';
11		-import { PageDocument } from '@agent/components/PageDocument';
12	17	import { useLockPost } from '@agent/hooks/useLockPost';
	18	+import { isAbilityTool, isAbilityWorkflow } from '@agent/lib/abilities';
	19	+import {
	20	+ getClientToolFallbackReply,
	21	+ getClientTools,
	22	+} from '@agent/lib/client-tools';
	23	+import { localPickWorkflow } from '@agent/lib/local-pick';
13	24	import { getRedirectUrl } from '@agent/lib/redirects';
	25	+import { doReload } from '@agent/lib/reload';
	26	+import { useCanvasStore } from '@agent/state/canvas';
14	27	import { useChatStore } from '@agent/state/chat';
15	28	import { useGlobalStore } from '@agent/state/global';
	29	+import { useStatusStore } from '@agent/state/status';
16	30	import { useSuggestionsStore } from '@agent/state/suggestions';
17	31	import { useWorkflowStore } from '@agent/state/workflows';
	32	+import { hasRunComponent } from '@agent/workflows/abilities/components/run';
	33	+import startOnboardingWorkflow from '@agent/workflows/misc/start-onboarding';
18	34	import { useQuickEditStore } from '@quick-edit/state/store';
19	35	import { digest } from '@shared/api/digest';
20	36	import {
21	37	useCallback,
		@@ -23,17 +39,38 @@
23	39	useMemo,
24	40	useRef,
25	41	useState,
26	42	} from '@wordpress/element';
27		-import { __ } from '@wordpress/i18n';
	43	+import { __, _n, sprintf } from '@wordpress/i18n';
28	44
29	45	const devmode = window.extSharedData.devbuild;
	46	+// Logged with tool errors: the banner sends users here and support needs to
	47	+// know which site the console they paste came from.
	48	+const { siteId } = window.extSharedData;
30	49	// Used to abort when wf canceled - reset in cleanup()
31	50	let controller = new AbortController();
32	51	const { postId } = window?.extAgentData?.context || {};
33	52
	53	+// Floor a resolution so its result doesn't re-render over the still-animating
	54	+// scroll-to-top, which leaves the chat scrolled to the wrong place.
	55	+const withMinDuration = async (promise, ms) => {
	56	+ const [result] = await Promise.all([
	57	+ promise,
	58	+ new Promise((resolve) => setTimeout(resolve, ms)),
	59	+ ]);
	60	+ return result;
	61	+};
	62	+
	63	+// cleanup() swaps in a fresh controller; a signal read after the wait is never aborted.
	64	+const canceledDuring = async (ms) => {
	65	+ const { signal } = controller;
	66	+ await new Promise((resolve) => setTimeout(resolve, ms));
	67	+ return signal.aborted;
	68	+};
	69	+
34	70	export const Agent = () => {
35		- const { addMessage, popMessage } = useChatStore();
	71	+ const { addMessage, updateMessage, popMessage, messages } = useChatStore();
	72	+ const { pushStatus, clearStatuses, leavingPage } = useStatusStore();
36	73	const {
37	74	mergeWorkflowData,
38	75	getWorkflow,
39	76	getWorkflowByExample,
		@@ -41,12 +78,12 @@
41	78	setWorkflow,
42	79	setWhenFinishedToolProps,
43	80	whenFinishedToolProps,
44	81	getAvailableWorkflows,
	82	+ requireBlock,
45	83	} = useWorkflowStore();
46	84	const block = useQuickEditStore((s) => s.agentBlock);
47	85	const setBlock = useQuickEditStore((s) => s.setAgentBlock);
48		- const workflowIds = getAvailableWorkflows().map((w) => w.id);
49	86	const { open, setOpen, updateRetryAfter, isChatAvailable } = useGlobalStore();
50	87	useLockPost({ postId, enabled: !!open });
51	88	const [canType, setCanType] = useState(true);
52	89	const agentWorking = useRef(false);
		@@ -51,67 +88,104 @@
51	88	const [canType, setCanType] = useState(true);
52	89	const agentWorking = useRef(false);
53	90	const toolWorking = useRef(false);
54	91	const retrying = useRef(false);
55		- const [waitingOnToolOrUser, setWaitingOnToolOrUser] = useState(false);
	92	+ // Starting false would re-run the agent's last turn on every reload.
	93	+ const [waitingOnToolOrUser, setWaitingOnToolOrUser] = useState(() => {
	94	+ const last = useChatStore.getState().messages.at(-1);
	95	+ if (last?.type === 'tool') return !('result' in (last.details ?? {}));
	96	+ return last?.type === 'message' && last.details?.role === 'assistant';
	97	+ });
56	98	const [loop, setLoop] = useState(0);
57	99	const workflow = getWorkflow();
	100	+ const canvasOpen = useCanvasOpen();
	101	+ const canvasAssist = useCanvasAssist();
	102	+ const canvasNoticeShown = useRef(false);
58	103	const chatAvailable = useMemo(() => isChatAvailable(), [isChatAvailable]);
59	104	const { addSuggestions, getSuggestions } = useSuggestionsStore();
	105	+ // Options render only while their message is last; a reply dismisses them.
	106	+ const lastMessage = messages.at(-1);
	107	+ const qaSuggestions =
	108	+ lastMessage?.type === 'message' &&
	109	+ lastMessage.details?.role === 'assistant' &&
	110	+ Array.isArray(lastMessage.details?.qaSuggestions)
	111	+ ? lastMessage.details.qaSuggestions
	112	+ : null;
60	113
	114	+ // Without this the input stays disabled for as long as the canvas is open.
	115	+ useEffect(() => {
	116	+ if (canvasOpen && canvasAssist) setCanType(true);
	117	+ // A workflow reached by example carries no sessionId to key this on.
	118	+ if (!canvasOpen) canvasNoticeShown.current = false;
	119	+ }, [canvasOpen, canvasAssist]);
	120	+
61	121	const cleanup = useCallback(() => {
62	122	setCanType(true);
63	123	agentWorking.current = false;
64	124	setWaitingOnToolOrUser(false);
65	125	controller = new AbortController();
66		- block && setBlock(null);
	126	+ const { agentBlock, setCommittedSelection } = useQuickEditStore.getState();
	127	+ agentBlock && setBlock(null);
	128	+ // A class or pin left up freezes Quick Edit hover site-wide.
	129	+ document
	130	+ .querySelector('.wp-site-blocks')
	131	+ ?.classList.remove('extendify-agent-working', 'extendify-agent-busy');
	132	+ setCommittedSelection(null);
	133	+ clearStatuses();
67	134	window.dispatchEvent(new Event('extendify-agent:remove-block-highlight'));
68		- // scrollIntoView below walks up and scrolls the page itself,
69		- // fighting useLayoutShift's scroll restore when closing.
70		- if (!useGlobalStore.getState().open) return;
71		- const c = Array.from(
72		- document.querySelectorAll(
73		- '#extendify-agent-chat-scroll-area div:last-child',
74		- ),
75		- )?.at(-1);
76		- c?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
77		- c?.scrollBy({ top: -5, behavior: 'smooth' });
78		- }, [setBlock, block]);
	135	+ }, [setBlock, clearStatuses]);
79	136
	137	+ useEffect(() => {
	138	+ const handle = ({ detail }) => {
	139	+ if (!detail?.id) return;
	140	+ updateMessage(detail.id, { result: detail.result });
	141	+ setWaitingOnToolOrUser(false);
	142	+ agentWorking.current = false;
	143	+ // The main loop parks on a staged tool; leaving one strands the run.
	144	+ setWhenFinishedToolProps(null);
	145	+ setLoop((prev) => prev + 1);
	146	+ };
	147	+ window.addEventListener('extendify-agent:client-tool-done', handle);
	148	+ return () =>
	149	+ window.removeEventListener('extendify-agent:client-tool-done', handle);
	150	+ }, [updateMessage, setWhenFinishedToolProps]);
	151	+
80	152	const findAgent = useCallback(
81	153	async (options = {}) => {
82		- addMessage('status', { type: 'calling-agent' });
83		- const response = await pickWorkflow({
84		- workflows: workflowIds,
85		- options: { signal: controller.signal, ...options },
86		- }).catch(async (error) => {
87		- devmode && console.error(error);
88		- if (error?.response?.status === 429) {
89		- updateRetryAfter(error?.response?.headers?.get('Retry-After'));
90		- setCanType(false);
91		- addMessage('status', { type: 'credits-exhausted' });
	154	+ pushStatus('calling-agent');
	155	+ const { signal } = controller;
	156	+ const response = await withMinDuration(
	157	+ pickWorkflow({
	158	+ // A mid-turn drop clears the block after this closure was made.
	159	+ workflows: getAvailableWorkflows().map((w) => w.id),
	160	+ options: { signal, ...options },
	161	+ }).catch(async (error) => {
	162	+ devmode && console.error(error);
	163	+ if (error?.response?.status === 429) {
	164	+ updateRetryAfter(error?.response?.headers?.get('Retry-After'));
	165	+ setCanType(false);
	166	+ pushStatus('credits-exhausted');
	167	+ return;
	168	+ }
	169	+ setCanType(true);
	170	+ if (error === 'Workflow aborted') return;
	171	+
	172	+ await new Promise((resolve) => setTimeout(resolve, 1000));
	173	+ addMessage('message', {
	174	+ role: 'assistant',
	175	+ // translators: This message is shown when the AI agent fails to find a suitable workflow.
	176	+ content: __(
	177	+ 'Something went wrong while trying to start this request. Please try again.',
	178	+ 'extendify-local',
	179	+ ),
	180	+ error: true,
	181	+ });
92	182	return;
93		- }
94		- setCanType(true);
95		- if (error === 'Workflow aborted') {
96		- addMessage('status', { type: 'workflow-canceled' });
97		- return;
98		- }
	183	+ }),
	184	+ 500,
	185	+ );
	186	+ if (!response || signal.aborted) return;
99	187
100		- await new Promise((resolve) => setTimeout(resolve, 1000));
101		- addMessage('message', {
102		- role: 'assistant',
103		- // translators: This message is shown when the AI agent fails to find a suitable workflow.
104		- content: __(
105		- 'Something went wrong while trying to start this request. Please try again.',
106		- 'extendify-local',
107		- ),
108		- error: true,
109		- });
110		- return;
111		- });
112		- if (!response) return;
113		-
114	188	const { workflow: wf, reply } = response;
115	189	if (wf?.id) setWorkflow(wf);
116	190	if (reply) {
117	191	const data = { role: 'assistant', content: reply, agent: wf?.agent };
		@@ -118,26 +192,120 @@
118	192	addMessage('message', data);
119	193	}
120	194	if (!wf?.id) setCanType(true);
121	195	},
122		- [addMessage, updateRetryAfter, setWorkflow, workflowIds],
	196	+ [
	197	+ addMessage,
	198	+ pushStatus,
	199	+ updateRetryAfter,
	200	+ setWorkflow,
	201	+ getAvailableWorkflows,
	202	+ ],
123	203	);
124	204
	205	+ // The backend caps tool runs; nothing here bounds the loop.
	206	+ const handleCanvasMessage = useCallback(async () => {
	207	+ setCanType(false);
	208	+ // cleanup() replaces the controller, so a cancel is lost between passes.
	209	+ const { signal } = controller;
	210	+ while (!signal.aborted) {
	211	+ pushStatus('agent-working');
	212	+ const response = await handleCanvas({
	213	+ toolId: whenFinishedToolProps?.id,
	214	+ sessionId: workflow?.sessionId,
	215	+ abilities: workflow?.abilities,
	216	+ options: { signal },
	217	+ }).catch((error) => {
	218	+ if (error === 'Workflow aborted') return null;
	219	+ const { sessionId } = workflow || {};
	220	+ digest({
	221	+ error,
	222	+ details: { source: 'agent', caller: 'handle-canvas', sessionId },
	223	+ });
	224	+ devmode && console.error(error);
	225	+ return { error: error.message };
	226	+ });
	227	+ // A request that settled before the abort still resolves with a reply.
	228	+ if (!response || signal.aborted) break;
	229	+ if (response.error) {
	230	+ addMessage('message', {
	231	+ role: 'assistant',
	232	+ // translators: Shown when the AI agent could not answer a question about the form it has open on screen.
	233	+ content: __(
	234	+ 'Sorry, something went wrong. Please try asking again.',
	235	+ 'extendify-local',
	236	+ ),
	237	+ error: true,
	238	+ });
	239	+ break;
	240	+ }
	241	+ if (response.reply) {
	242	+ addMessage('message', {
	243	+ role: 'assistant',
	244	+ content: response.reply,
	245	+ followup: !!response.tool,
	246	+ agent: workflow?.agent,
	247	+ });
	248	+ }
	249	+ // The model is never told what is on screen around the canvas.
	250	+ if (response.cannotHelp && !canvasNoticeShown.current) {
	251	+ canvasNoticeShown.current = true;
	252	+ addMessage('canvas-notice', {});
	253	+ }
	254	+ if (!response.tool) break;
	255	+ const { id, inputs, labels } = response.tool;
	256	+ pushStatus('tool-started', labels?.started);
	257	+ const result = await callTool({
	258	+ tool: id,
	259	+ inputs,
	260	+ abilities: workflow?.abilities,
	261	+ }).catch((error) => {
	262	+ const { sessionId } = workflow || {};
	263	+ digest({
	264	+ error,
	265	+ details: { source: 'agent', caller: `canvas: ${id}`, sessionId },
	266	+ });
	267	+ console.error(`Extendify agent tool error: ${id}`, { siteId, error });
	268	+ return { error: { message: error?.message, code: error?.code } };
	269	+ });
	270	+ addMessage('tool', { id, inputs, result, label: labels?.confirm });
	271	+ }
	272	+ setCanType(true);
	273	+ }, [addMessage, pushStatus, whenFinishedToolProps, workflow]);
	274	+
125	275	const handleSubmit = useCallback(
126		- async (message) => {
127		- // Save any in-flight QE canvas edits before the agent runs so
128		- // the user doesn't lose their work to a workflow that touches
129		- // the same block. No-op when no QE canvas is mounted.
130		- window.dispatchEvent(
131		- new CustomEvent('extendify-quick-edit:agent-submit'),
132		- );
	276	+ async (message, { hidden = false } = {}) => {
	277	+ // Suggestions reach the agent without the textarea; disabling it isn't enough.
	278	+ if (useQuickEditStore.getState().selected) return;
133	279	setWaitingOnToolOrUser(false);
134	280	agentWorking.current = false;
135		- addMessage('message', { role: 'user', content: message });
	281	+ addMessage('message', { role: 'user', content: message, hidden });
136	282
	283	+ // Without this a typed message would drop the workflow and close the canvas.
	284	+ if (canvasOpen && canvasAssist) return handleCanvasMessage();
	285	+
	286	+ // A staged tool the user walked away from still owes its receipt.
	287	+ if (workflow?.id && whenFinishedToolProps?.id) {
	288	+ const { answerId, whenFinishedTool } =
	289	+ whenFinishedToolProps.agentResponse || {};
	290	+ addMessage('workflow', {
	291	+ status: 'canceled',
	292	+ label: whenFinishedTool?.labels?.cancel,
	293	+ agent: workflow.agent,
	294	+ workflowId: workflow.id,
	295	+ answerId,
	296	+ suggestions: getSuggestions(),
	297	+ });
	298	+ }
	299	+
137	300	// Let some phrases auto load workflows
138	301	const bypass = getWorkflowByExample(message);
139		- if (bypass?.example?.agentResponse) return handleBypass(bypass);
	302	+ if (bypass?.example?.agentResponse) {
	303	+ // whenFinishedTool → inline input UI; none → ask for a typed reply.
	304	+ return bypass.example.agentResponse.whenFinishedTool
	305	+ ? handleBypass(bypass)
	306	+ : handleInstantAsk(bypass);
	307	+ }
140	308
141	309	setCanType(false);
142	310	// If they typed while waiting on a redirect, reset the workflow
143	311	const redirect = workflow?.needsRedirect?.();
		@@ -154,13 +322,25 @@
154	322	mergeWorkflowData(wfData);
155	323	return;
156	324	}
157	325
	326	+ // Skip the network find-agent when the staged block makes the edit certain.
	327	+ const localPick = localPickWorkflow({ block });
	328	+ if (localPick) {
	329	+ if (await canceledDuring(500)) return;
	330	+ setWorkflow(localPick);
	331	+ return;
	332	+ }
	333	+
158	334	await findAgent().catch((e) => devmode && console.error(e));
159	335	},
160	336	[
161	337	addMessage,
	338	+ block,
	339	+ canvasAssist,
	340	+ canvasOpen,
162	341	findAgent,
	342	+ handleCanvasMessage,
163	343	mergeWorkflowData,
164	344	whenFinishedToolProps,
165	345	setWorkflow,
166	346	workflow,
		@@ -165,8 +345,9 @@
165	345	setWorkflow,
166	346	workflow,
167	347	workflowData,
168	348	getAvailableWorkflows,
	349	+ getSuggestions,
169	350	],
170	351	);
171	352
172	353	// Used to inject a workflow final state
		@@ -176,9 +357,9 @@
176	357	if (!agentResponse) return;
177	358	setWorkflow(workflow);
178	359	setCanType(false);
179	360	agentWorking.current = true;
180		- await new Promise((resolve) => setTimeout(resolve, 750));
	361	+ if (await canceledDuring(750)) return;
181	362	addMessage('message', {
182	363	role: 'assistant',
183	364	content: agentResponse.reply,
184	365	});
		@@ -192,22 +373,60 @@
192	373	value: { workflow: workflow?.id },
193	374	});
194	375	}, []);
195	376
	377	+ // Ask the user, then let the normal loop handle their typed reply.
	378	+ const handleInstantAsk = useCallback(async (workflow) => {
	379	+ const agentResponse = workflow.example?.agentResponse;
	380	+ cleanup();
	381	+ if (!agentResponse) return;
	382	+ setWorkflow(workflow);
	383	+ // Without this the loop calls the backend before the user has typed.
	384	+ setWaitingOnToolOrUser(true);
	385	+ setCanType(false);
	386	+ agentWorking.current = true;
	387	+ if (await canceledDuring(750)) return;
	388	+ addMessage('message', {
	389	+ role: 'assistant',
	390	+ content: agentResponse.reply,
	391	+ // A workflow example can carry its own suggestions; none still asks.
	392	+ qaSuggestions: agentResponse.qaSuggestions ?? [],
	393	+ });
	394	+ agentWorking.current = false;
	395	+ setCanType(true);
	396	+ recordAgentActivity({
	397	+ sessionId: workflow?.sessionId,
	398	+ action: 'workflow_instant_ask',
	399	+ value: { workflow: workflow?.id },
	400	+ });
	401	+ }, []);
	402	+
196	403	useEffect(() => {
197	404	// Allow external messages to trigger the agent
198	405	const handleMessage = ({ detail }) => {
199	406	if (!detail?.message) return;
200		- handleSubmit(detail.message);
	407	+ handleSubmit(detail.message, { hidden: detail.hidden });
201	408	};
202	409	// Allow external code to clear the block and workflow
203	410	const handleCleanup = () => {
	411	+ // cleanup() resets canType and agentWorking, so read them before it runs.
	412	+ const interrupted = agentWorking.current || !canType;
204	413	controller.abort('Workflow aborted');
205	414	cleanup();
	415	+ // Deferred a frame: the input stays disabled until the cancel lands.
	416	+ requestAnimationFrame(() =>
	417	+ document.querySelector('#extendify-agent-chat-textarea')?.focus(),
	418	+ );
206	419
207		- if (!workflow?.id) return;
	420	+ // An options panel can outlive its workflow; cancel must still clear it.
	421	+ if (!workflow?.id && !qaSuggestions && !interrupted) return;
208	422	setWorkflow(null);
209		- addMessage('status', { type: 'workflow-canceled' });
	423	+ addMessage('workflow', {
	424	+ status: 'canceled',
	425	+ agent: workflow?.agent,
	426	+ workflowId: workflow?.id,
	427	+ suggestions: getSuggestions(),
	428	+ });
210	429	return;
211	430	};
212	431	window.addEventListener('extendify-agent:cancel-workflow', handleCleanup);
213	432	window.addEventListener('extendify-agent:chat-submit', handleMessage);
		@@ -217,16 +436,34 @@
217	436	handleCleanup,
218	437	);
219	438	window.removeEventListener('extendify-agent:chat-submit', handleMessage);
220	439	};
221		- }, [handleSubmit, cleanup, setWorkflow, addMessage, workflow]);
	440	+ }, [
	441	+ handleSubmit,
	442	+ cleanup,
	443	+ setWorkflow,
	444	+ addMessage,
	445	+ workflow,
	446	+ qaSuggestions,
	447	+ getSuggestions,
	448	+ canType,
	449	+ ]);
222	450
	451	+ // Dispatching before chat-submit has a listener drops the workflow.
	452	+ useEffect(() => {
	453	+ if (!startOnboardingWorkflow.available()) return;
	454	+ window.dispatchEvent(
	455	+ new CustomEvent('extendify-agent:chat-submit', {
	456	+ detail: { message: startOnboardingWorkflow.example.text, hidden: true },
	457	+ }),
	458	+ );
	459	+ }, []);
	460	+
223	461	// Handle whenFinished component confirm/cancel
224	462	useEffect(() => {
225	463	const handleConfirm = async ({ detail }) => {
226	464	if (toolWorking.current) return;
227	465	setWhenFinishedToolProps(null);
228		- addMessage('status', { type: 'workflow-tool-processing' });
229	466	toolWorking.current = true;
230	467	const { data, whenFinishedToolProps, shouldRefreshPage, redirectUrl } =
231	468	detail ?? {};
232	469	const { whenFinishedTool, answerId, redirectTo } =
		@@ -231,8 +468,11 @@
231	468	detail ?? {};
232	469	const { whenFinishedTool, answerId, redirectTo } =
233	470	whenFinishedToolProps?.agentResponse || {};
234	471	const { id, labels } = whenFinishedTool || {};
	472	+ // Staged unanswered so its own component can show the run in progress.
	473	+ const runMessageId = id ? addMessage('tool', { id, inputs: data }) : null;
	474	+ if (!hasRunComponent(id)) pushStatus('workflow-tool-processing');
235	475	// Not all workflows have a tool at the end (e.g. tours)
236	476	const toolResponse = await callTool?.({ tool: id, inputs: data }).catch(
237	477	(error) => {
238	478	const { sessionId } = workflow || {};
		@@ -243,22 +483,32 @@
243	483	caller: `when-finished: ${id}`,
244	484	sessionId,
245	485	},
246	486	});
247		- devmode && console.error(error);
248		- return { error: error.message };
	487	+ console.error(`Extendify agent tool error: ${id}`, { siteId, error });
	488	+ return { error: { message: error?.message, code: error?.code } };
249	489	},
250	490	);
251	491	toolWorking.current = false;
252		- if (toolResponse?.error) {
	492	+ if (runMessageId) updateMessage(runMessageId, { result: toolResponse });
	493	+ if (toolResponse?.refused) {
253	494	await new Promise((resolve) => setTimeout(resolve, 1000));
	495	+ const refusalMessages = {
	496	+ // translators: Shown when the AI agent's edit produced no change to the block, which is unexpected.
	497	+ 'no-op': __(
	498	+ "That edit came back unchanged, which wasn't expected. Please try rephrasing what you'd like to change.",
	499	+ 'extendify-local',
	500	+ ),
	501	+ };
254	502	addMessage('message', {
255	503	role: 'assistant',
256		- // translators: This message is shown when the AI agent fails to confirm an action.
257		- content: __(
258		- 'Sorry, something went wrong attempting to call the tool. Please try again.',
259		- 'extendify-local',
260		- ),
	504	+ content:
	505	+ refusalMessages[toolResponse.reason] ??
	506	+ // translators: Shown when the AI agent could not safely apply an edit to the selected block.
	507	+ __(
	508	+ "I couldn't safely apply that edit to the selected block. Please re-select the block and try again.",
	509	+ 'extendify-local',
	510	+ ),
261	511	error: true,
262	512	});
263	513	setWorkflow(null);
264	514	cleanup();
		@@ -263,48 +513,69 @@
263	513	setWorkflow(null);
264	514	cleanup();
265	515	return;
266	516	}
267		- addMessage('status', {
268		- label: labels?.confirm,
269		- type: 'workflow-tool-completed',
270		- });
	517	+ // Only loop back on error, so the model can recover. A clean
	518	+ // whenFinished tool means the workflow is done.
	519	+ if (toolResponse?.error) {
	520	+ setWaitingOnToolOrUser(false);
	521	+ agentWorking.current = false;
	522	+ setLoop((prev) => prev + 1);
	523	+ return;
	524	+ }
	525	+
271	526	addSuggestions(whenFinishedToolProps.agentResponse?.recommendations);
272	527	addMessage('workflow', {
273	528	status: 'completed',
	529	+ label: labels?.confirm,
274	530	agent: workflow.agent,
	531	+ workflowId: workflow.id,
275	532	answerId,
276	533	suggestions: getSuggestions(),
277	534	});
	535	+ // A chat message persists, so the next turn's model knows the save was partial.
	536	+ const refusedCount = toolResponse?.refusedOperations?.length;
	537	+ if (refusedCount) {
	538	+ addMessage('message', {
	539	+ role: 'assistant',
	540	+ content: sprintf(
	541	+ // translators: %d is how many of the requested edits were not applied.
	542	+ _n(
	543	+ "Heads up — %d of those changes couldn't be applied. If something still looks the same, ask me to redo just that part.",
	544	+ "Heads up — %d of those changes couldn't be applied. If something still looks the same, ask me to redo just those parts.",
	545	+ refusedCount,
	546	+ 'extendify-local',
	547	+ ),
	548	+ refusedCount,
	549	+ ),
	550	+ });
	551	+ }
278	552	setWorkflow(null);
	553	+ useCanvasStore.getState().endSession();
279	554
280	555	const url = getRedirectUrl(redirectTo, whenFinishedToolProps?.inputs);
281		-
282		- if (url || redirectUrl || shouldRefreshPage) {
283		- await new Promise((resolve) => setTimeout(resolve, 1000));
	556	+ const refreshForAbility = isAbilityTool(id);
	557	+ if (url || redirectUrl || shouldRefreshPage || refreshForAbility) {
	558	+ return doReload(url || redirectUrl);
284	559	}
285		-
286		- if (url) return window.location.assign(url);
287		- if (redirectUrl) return window.location.assign(redirectUrl);
288		- if (shouldRefreshPage) return window.location.reload();
289		- // Clean up if not redirecting
290	560	cleanup();
291	561	};
292	562	const handleCancel = ({ detail }) => {
293	563	if (toolWorking.current) return;
	564	+ // Without this a canvas closed mid-turn keeps replying into the chat.
	565	+ controller.abort('Workflow aborted');
294	566	const { answerId, whenFinishedTool } =
295	567	detail.whenFinishedToolProps?.agentResponse || {};
296		- addMessage('status', {
297		- type: 'workflow-canceled',
298		- label: whenFinishedTool?.labels?.cancel,
299		- });
300	568	addMessage('workflow', {
301	569	status: 'canceled',
	570	+ label: whenFinishedTool?.labels?.cancel,
302	571	agent: workflow.agent,
	572	+ workflowId: workflow.id,
303	573	answerId,
304	574	suggestions: getSuggestions(),
305	575	});
306	576	setWorkflow(null);
	577	+ useCanvasStore.getState().endSession();
307	578	cleanup();
308	579	};
309	580	const handleRetry = () => {
310	581	popMessage();
		@@ -328,8 +599,9 @@
328	599	window.removeEventListener('extendify-agent:workflow-retry', handleRetry);
329	600	};
330	601	}, [
331	602	addMessage,
	603	+ pushStatus,
332	604	popMessage,
333	605	cleanup,
334	606	setWorkflow,
335	607	workflow,
		@@ -368,8 +640,9 @@
368	640	if (cancelWorkflow) {
369	641	addMessage('workflow', {
370	642	status: 'canceled',
371	643	agent: workflow.agent,
	644	+ workflowId: workflow.id,
372	645	suggestions: getSuggestions(),
373	646	});
374	647	setWorkflow(null);
375	648	cleanup();
		@@ -386,20 +659,16 @@
386	659	if (agentWorking.current) return; // Prevent multiple calls
387	660	if (toolWorking.current) return;
388	661	setCanType(false);
389	662	agentWorking.current = true;
390		- addMessage('status', { type: 'agent-working' });
	663	+ pushStatus('agent-working');
391	664	const agentResponse = await handleWorkflow({
392	665	workflow,
393	666	workflowData,
394	667	options: { signal: controller.signal, retry: retrying.current },
395	668	}).catch((error) => {
396		- if (error === 'Workflow aborted') {
397		- addMessage('status', { type: 'workflow-canceled' });
398		- setWorkflow(null);
399		- cleanup();
400		- return;
401		- }
	669	+ // handleCleanup already added the canceled message
	670	+ if (error === 'Workflow aborted') return;
402	671	const { sessionId } = workflow || {};
403	672	digest({
404	673	error,
405	674	details: { source: 'agent', caller: `handle-workflow`, sessionId },
		@@ -418,14 +687,20 @@
418	687	window.extAgentData.failedWorkflows.add(workflow.id);
419	688	throw new Error(`Error handling workflow: ${agentResponse.error}`);
420	689	}
421	690	// The ai sent back some text to show to the user
422		- if (agentResponse.reply) {
	691	+ const reply =
	692	+ agentResponse.reply ??
	693	+ (agentResponse.tool
	694	+ ? getClientToolFallbackReply(agentResponse.tool.id)
	695	+ : null);
	696	+ if (reply) {
423	697	addMessage('message', {
424	698	role: 'assistant',
425		- content: agentResponse.reply,
	699	+ content: reply,
426	700	followup: !!agentResponse.tool,
427	701	pageSuggestion: agentResponse.pageSuggestion,
	702	+ qaSuggestions: agentResponse.qaSuggestions,
428	703	agent: workflow.agent,
429	704	sessionId: workflow?.sessionId,
430	705	workflowId: workflow?.id,
431	706	language: workflow?.language,
		@@ -430,8 +705,26 @@
430	705	workflowId: workflow?.id,
431	706	language: workflow?.language,
432	707	});
433	708	}
	709	+ // Set when the request needs something no block edit can do.
	710	+ if (agentResponse.dropSelection) {
	711	+ setBlock(null);
	712	+ window.dispatchEvent(
	713	+ new Event('extendify-agent:remove-block-highlight'),
	714	+ );
	715	+ setWorkflow(null);
	716	+ pushStatus(
	717	+ 'tool-started',
	718	+ // translators: Shown while the AI agent deselects a block that can't serve the request.
	719	+ __('Removing selected block', 'extendify-local'),
	720	+ );
	721	+ // findAgent pushes its own status right away; let this one read first.
	722	+ if (await canceledDuring(2500)) return;
	723	+ agentWorking.current = false;
	724	+ await findAgent();
	725	+ return;
	726	+ }
434	727	// This is at the end of the workflow
435	728	// and we are about to execute the final tool
436	729	if (agentResponse.whenFinishedTool?.id) {
437	730	setWhenFinishedToolProps({
		@@ -439,15 +732,22 @@
439	732	agentResponse,
440	733	});
441	734	// If static, add it as a message
442	735	const { id, inputs, static: staticC } = agentResponse.whenFinishedTool;
443		- if (staticC) {
444		- addMessage('workflow-component', { id, status: 'completed', inputs });
	736	+ // A canvas workflow renders in the canvas and ends on close or submit.
	737	+ if (staticC && !workflow.whenFinished?.canvas) {
	738	+ addMessage('workflow-component', {
	739	+ id,
	740	+ status: 'completed',
	741	+ inputs,
	742	+ workflowId: workflow.id,
	743	+ });
445	744	addSuggestions(agentResponse.recommendations);
446	745	setWorkflow(null);
447	746	addMessage('workflow', {
448	747	status: 'completed',
449	748	agent: workflow.agent,
	749	+ workflowId: workflow.id,
450	750	answerId,
451	751	suggestions: getSuggestions(),
452	752	});
453	753	cleanup();
		@@ -463,8 +763,9 @@
463	763	cleanup();
464	764	addMessage('workflow', {
465	765	status: isCompleted ? 'completed' : 'canceled',
466	766	agent: workflow.agent,
	767	+ workflowId: workflow.id,
467	768	answerId,
468	769	suggestions: getSuggestions(),
469	770	});
470	771	return;
		@@ -477,9 +778,18 @@
477	778	mergeWorkflowData(agentResponse.inputs);
478	779	// Agent needs more info from a
479	780	if (agentResponse.tool) {
480	781	const { id, inputs, labels } = agentResponse.tool;
481		- addMessage('status', { label: labels?.started, type: 'tool-started' });
	782	+ // A client tool is answered by in-chat UI, so the turn ends here.
	783	+ if (getClientTools().includes(id)) {
	784	+ addMessage('tool', { id, inputs });
	785	+ // Clearing agentWorking here fires a second turn: the wait flag
	786	+ // has not committed yet.
	787	+ setWaitingOnToolOrUser(true);
	788	+ setCanType(false);
	789	+ return;
	790	+ }
	791	+ pushStatus('tool-started', labels?.started);
482	792	const toolData = await Promise.all([
483	793	callTool({ tool: id, inputs }),
484	794	new Promise((resolve) => setTimeout(resolve, 3000)),
485	795	])
		@@ -493,17 +803,26 @@
493	803	caller: `in-progress: ${id}`,
494	804	sessionId,
495	805	},
496	806	});
497		- devmode && console.error(error);
498		- throw error;
	807	+ console.error(`Extendify agent tool error: ${id}`, {
	808	+ siteId,
	809	+ error,
	810	+ });
	811	+ // Don't throw; the loop hands the error to the model.
	812	+ return { error: { message: error?.message, code: error?.code } };
499	813	});
500		- addMessage('status', {
	814	+ // do-when-finished spreads first-class workflowData into the tool.
	815	+ if (!toolData?.error && !isAbilityWorkflow(workflow.id)) {
	816	+ mergeWorkflowData(toolData);
	817	+ }
	818	+ if (toolData?.stagedBlockIds?.length) requireBlock();
	819	+ addMessage('tool', {
	820	+ id,
	821	+ inputs,
	822	+ result: toolData,
501	823	label: labels?.confirm,
502		- type: 'tool-completed',
503	824	});
504		- await new Promise((resolve) => setTimeout(resolve, 1000));
505		- mergeWorkflowData(toolData);
506	825	setWaitingOnToolOrUser(false);
507	826	agentWorking.current = false;
508	827	setLoop((prev) => prev + 1); // Trigger next loop
509	828	return;
		@@ -536,16 +855,20 @@
536	855	open,
537	856	workflow,
538	857	workflowData,
539	858	addMessage,
	859	+ pushStatus,
540	860	setWorkflow,
541	861	agentWorking,
542	862	waitingOnToolOrUser,
543	863	mergeWorkflowData,
	864	+ requireBlock,
544	865	canType,
545	866	whenFinishedToolProps,
546	867	setWhenFinishedToolProps,
547	868	block,
	869	+ setBlock,
	870	+ findAgent,
548	871	addSuggestions,
549	872	getSuggestions,
550	873	]);
551	874
		@@ -554,40 +877,46 @@
554	877	document.querySelector('#extendify-agent-chat-textarea')?.focus();
555	878	}, [canType]);
556	879
557	880	const busy = !canType || !chatAvailable || workflow?.id;
	881	+ // `busy` is true at rest; 429 is blocked, not working.
	882	+ const working = !canType && chatAvailable;
558	883
559	884	return (
560		- <Chat busy={busy}>
561		- <div className="relative z-50 flex h-full flex-col justify-between overflow-auto">
562		- <ChatMessages
563		- redirectComponent={
564		- workflow?.needsRedirect?.() ? workflow.redirectComponent : null
565		- }
566		- />
567		- <div>
568		- <div className="relative flex flex-col px-4 pb-2 pt-2.5 shadow-lg-flipped">
569		- {block ? <PageDocument busy={busy} blockId={block.id} /> : null}
570		- <UsageMessage
571		- onReady={() => {
572		- cleanup();
573		- addMessage('status', { type: 'credits-restored' });
574		- }}
575		- />
	885	+ <>
	886	+ <Canvas />
	887	+ <Chat busy={busy} working={working}>
	888	+ <div className="relative z-50 flex h-full flex-col justify-between overflow-auto">
	889	+ <ChatMessages
	890	+ redirectComponent={
	891	+ workflow?.needsRedirect?.() ? workflow.redirectComponent : null
	892	+ }
	893	+ />
	894	+ <div>
	895	+ <div className="relative flex flex-col px-4 pb-2 pt-2.5 shadow-lg-flipped">
	896	+ <UsageMessage
	897	+ onReady={() => {
	898	+ cleanup();
	899	+ pushStatus('credits-restored');
	900	+ }}
	901	+ />
	902	+ </div>
	903	+ <div className="p-4 pb-2 pt-0">
	904	+ <ChatInput
	905	+ disabled={
	906	+ !canType || !chatAvailable || !!qaSuggestions || leavingPage
	907	+ }
	908	+ handleSubmit={handleSubmit}
	909	+ />
	910	+ </div>
	911	+ <div className="text-pretty px-4 pb-2 text-center text-xss leading-none text-gray-700">
	912	+ {__(
	913	+ 'AI Agent can make mistakes. Check changes before saving.',
	914	+ 'extendify-local',
	915	+ )}
	916	+ </div>
576	917	</div>
577		- <div className="p-4 pb-2 pt-0">
578		- <ChatInput
579		- disabled={!canType || !chatAvailable}
580		- handleSubmit={handleSubmit}
581		- />
582		- </div>
583		- <div className="text-pretty px-4 pb-2 text-center text-xss leading-none text-gray-700">
584		- {__(
585		- 'AI Agent can make mistakes. Check changes before saving.',
586		- 'extendify-local',
587		- )}
588		- </div>
589	918	</div>
590		- </div>
591		- </Chat>
	919	+ </Chat>
	920	+ </>
592	921	);
593	922	};