diff --git a/gadget-code/frontend/src/lib/api.ts b/gadget-code/frontend/src/lib/api.ts
index 5eea22c..9720604 100644
--- a/gadget-code/frontend/src/lib/api.ts
+++ b/gadget-code/frontend/src/lib/api.ts
@@ -408,7 +408,7 @@ export interface ChatTurn {
provider: string | AiProvider;
llm: string;
mode: ChatSessionMode;
- status: "processing" | "finished" | "error";
+ status: "processing" | "finished" | "aborted" | "error";
prompts: ChatTurnPrompts;
blocks: ChatTurnBlock[];
errorMessage?: string;
diff --git a/gadget-code/frontend/src/lib/socket.ts b/gadget-code/frontend/src/lib/socket.ts
index 5fa3cd4..444b7d3 100644
--- a/gadget-code/frontend/src/lib/socket.ts
+++ b/gadget-code/frontend/src/lib/socket.ts
@@ -42,6 +42,7 @@ export interface ServerToClientEvents {
export interface ClientToServerEvents {
submitPrompt: (content: string) => void;
+ abortWorkOrder: (cb: (success: boolean, message?: string) => void) => void;
requestSessionLock: (
registration: any,
project: any,
@@ -353,6 +354,16 @@ class SocketClient {
}
}
+ abortWorkOrder(cb?: (success: boolean, message?: string) => void): void {
+ if (this._socket?.connected) {
+ this._socket.emit('abortWorkOrder', (success: boolean, message?: string) => {
+ cb?.(success, message);
+ });
+ } else {
+ cb?.(false, 'Socket not connected');
+ }
+ }
+
requestSessionLock(
registration: any,
project: any,
diff --git a/gadget-code/frontend/src/pages/ChatSessionView.tsx b/gadget-code/frontend/src/pages/ChatSessionView.tsx
index 4765db4..608f1de 100644
--- a/gadget-code/frontend/src/pages/ChatSessionView.tsx
+++ b/gadget-code/frontend/src/pages/ChatSessionView.tsx
@@ -50,6 +50,7 @@ export default function ChatSessionView() {
const [turns, setTurns] = useState
([]);
const [promptInput, setPromptInput] = useState('');
const [isProcessing, setIsProcessing] = useState(false);
+ const [isAborting, setIsAborting] = useState(false);
const [loading, setLoading] = useState(true);
const [error, setError] = useState('');
const [sessionLocked, setSessionLocked] = useState(true);
@@ -81,6 +82,8 @@ export default function ChatSessionView() {
const updateRafRef = useRef(null);
const currentTurnIdRef = useRef(null);
const streamingStateRef = useRef>(new Map());
+ const escTimerRef = useRef | null>(null);
+ const escFlagRef = useRef(false);
const subagentStateRef = useRef>(new Map());
const sessionRef = useRef(null);
const projectRef = useRef(null);
@@ -534,6 +537,16 @@ export default function ChatSessionView() {
scheduleUpdate();
}, [mergePendingUpdate, scheduleUpdate]);
+ const showToast = useCallback((message: string) => {
+ setToast(message);
+ if (toastTimerRef.current) {
+ clearTimeout(toastTimerRef.current);
+ }
+ toastTimerRef.current = setTimeout(() => {
+ setToast(null);
+ }, 4000);
+ }, []);
+
const handleWorkOrderComplete = useCallback((turnId: string, success: boolean, message?: string) => {
// Backend has already flushed and persisted all streaming content
// Just clean up frontend streaming state and update status
@@ -551,19 +564,38 @@ export default function ChatSessionView() {
subagentStateRef.current.delete(agentId);
}
- setTurns(prevTurns =>
- prevTurns.map(turn =>
- turn._id === turnId
- ? { ...turn, status: success ? 'finished' : 'error', errorMessage: message && !success ? message : turn.errorMessage }
- : turn
- )
- );
+ if (success && message === 'aborted') {
+ setTurns(prevTurns =>
+ prevTurns.map(turn =>
+ turn._id === turnId
+ ? { ...turn, status: 'aborted', errorMessage: 'The turn was aborted by you.' }
+ : turn
+ )
+ );
+ showToast('The turn was aborted by you.');
+ } else {
+ setTurns(prevTurns =>
+ prevTurns.map(turn =>
+ turn._id === turnId
+ ? { ...turn, status: success ? 'finished' : 'error', errorMessage: message && !success ? message : turn.errorMessage }
+ : turn
+ )
+ );
+ if (!success) {
+ setError(message || 'Work order failed');
+ }
+ }
+
+ // Clean up abort state
+ if (escTimerRef.current) {
+ clearTimeout(escTimerRef.current);
+ escTimerRef.current = null;
+ }
+ escFlagRef.current = false;
+ setIsAborting(false);
setIsProcessing(false);
currentTurnIdRef.current = null;
- if (!success) {
- setError(message || 'Work order failed');
- }
- }, []);
+ }, [showToast]);
const handleWorkspaceModeChanged = useCallback((mode: string) => {
setWorkspaceMode(mode as WorkspaceMode);
@@ -712,16 +744,6 @@ export default function ChatSessionView() {
});
}, [updateSubagentBlock]);
- const showToast = useCallback((message: string) => {
- setToast(message);
- if (toastTimerRef.current) {
- clearTimeout(toastTimerRef.current);
- }
- toastTimerRef.current = setTimeout(() => {
- setToast(null);
- }, 4000);
- }, []);
-
const handleWorkspaceModeChange = async (mode: WorkspaceMode) => {
if (!session || !project) return;
@@ -936,6 +958,64 @@ export default function ChatSessionView() {
});
};
+ const handleCancel = useCallback(() => {
+ if (isAborting) return;
+ setIsAborting(true);
+ socketClient.abortWorkOrder((success, message) => {
+ if (success) {
+ showToast('Aborting Agentic Workflow Loop...');
+ } else {
+ showToast(message || 'Failed to abort');
+ setIsAborting(false);
+ }
+ });
+ }, [isAborting, showToast]);
+
+ // Global Esc key handler for abort: first Esc shows prompt, second Esc within 3s aborts
+ useEffect(() => {
+ if (!isProcessing) {
+ if (escTimerRef.current) {
+ clearTimeout(escTimerRef.current);
+ escTimerRef.current = null;
+ }
+ escFlagRef.current = false;
+ return;
+ }
+
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key !== 'Escape') return;
+ e.preventDefault();
+
+ if (!escFlagRef.current) {
+ escFlagRef.current = true;
+ showToast('Press Esc again to abort');
+ escTimerRef.current = setTimeout(() => {
+ escFlagRef.current = false;
+ setToast(null);
+ escTimerRef.current = null;
+ }, 3000);
+ } else {
+ if (escTimerRef.current) {
+ clearTimeout(escTimerRef.current);
+ escTimerRef.current = null;
+ }
+ escFlagRef.current = false;
+ setToast(null);
+ handleCancel();
+ }
+ };
+
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ if (escTimerRef.current) {
+ clearTimeout(escTimerRef.current);
+ escTimerRef.current = null;
+ }
+ escFlagRef.current = false;
+ };
+ }, [isProcessing, showToast, handleCancel]);
+
const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};
@@ -1037,13 +1117,24 @@ export default function ChatSessionView() {
rows={3}
disabled={promptDisabled}
/>
-
+ {isProcessing ? (
+
+ ) : (
+
+ )}