WIP

Author: philippfromme

demo/fixtures/diagram.bpmn

@@ -156,7 +156,7 @@
           <zeebe:input source="" target="provider.openai.authentication.apiKey" />
           <zeebe:input source="gpt-4o" target="provider.openai.model.model" />
           <zeebe:input source="=&#34;You are **TaskAgent**, a helpful, generic chat agent that can handle a wide variety of customer requests using your own domain knowledge **and** any tools explicitly provided to you at runtime.&#10;&#10;If tools are provided, you should prefer them instead of guessing an answer. You can call the same tool multiple times by providing different input values. Don&#39;t guess any tools which were not explicitly configured. If no tool matches the request, try to generate an answer. If you&#39;re not able to find a good answer, return with a message stating why you&#39;re not able to.&#10;&#10;Wrap minimal, inspectable reasoning in *exactly* this XML template:&#10;&#10;&#60;thinking&#62;&#10;&#60;context&#62;…briefly state the customer’s need and current state…&#60;/context&#62;&#10;&#60;reflection&#62;…list candidate tools, justify which you will call next and why…&#60;/reflection&#62;&#10;&#60;/thinking&#62;&#10;&#10;Reveal **no** additional private reasoning outside these tags.&#34;" target="data.systemPrompt.prompt" />
-          <zeebe:input source="=&#34;Answer the question: What is the meaning of life? and create a haiku based on the answer. I&#39;m only interested in the haiku!&#34;" target="data.userPrompt.prompt" />
+          <zeebe:input source="=&#34;Answer the question: What is the meaning of life? and create 3 different haikus based on the answer. Then rank them and show me the ranking&#34;" target="data.userPrompt.prompt" />
           <zeebe:input target="agentContext" />
           <zeebe:input source="in-process" target="data.memory.storage.type" />
           <zeebe:input source="=20" target="data.memory.contextWindowSize" />

lib/TaskExecution.js

@@ -340,6 +340,14 @@ export default class TaskExecution extends EventEmitter {
       clearInterval(this._interval);
     }
 
+    if (isExecuting && reason === TASK_EXECUTION_REASON.USER_CANCEL) {
+      this.emit('taskExecution.log', {
+        type: 'status',
+        status: 'canceled',
+        timestamp: Date.now()
+      });
+    }
+
     this._changeStatus('idle');
 
     if (isExecuting && reason) {

lib/components/Output/ExecutionLog.jsx

@@ -17,7 +17,8 @@ const STATUS_LABELS = {
   'starting-instance': 'Process instance created',
   executing: null,
   completed: 'Process instance completed',
-  incident: 'Incident'
+  incident: 'Incident',
+  canceled: 'Test canceled'
 };
 
 const WAITING_ITEM_LABELS = {
@@ -231,9 +232,9 @@ export function ExecutionLog({ entries, tasklistBaseUrl, currentOperateUrl, onSe
 
   const lastEntry = entries[entries.length - 1];
 
-  // Check if execution has finished (completed or incident)
+  // Check if execution has finished (completed, incident, or canceled)
   const isFinished = entries.some(
-    e => e.type === 'status' && (e.status === 'completed' || e.status === 'incident')
+    e => e.type === 'status' && (e.status === 'completed' || e.status === 'incident' || e.status === 'canceled')
   );
 
   // Filter out 'executing' status once finished - it's just a temporary placeholder
@@ -286,10 +287,13 @@ function StatusEntry({ entry, isLast }) {
   }
 
   const isIncident = entry.status === 'incident';
+  const isCanceled = entry.status === 'canceled';
 
   let dotClass = 'execution-log__dot';
   if (isIncident) {
     dotClass += ' execution-log__dot--error';
+  } else if (isCanceled) {
+    dotClass += ' execution-log__dot--canceled';
   }
 
   return (

lib/components/Output/Output.jsx

@@ -11,7 +11,8 @@ import {
   CheckmarkFilled,
   ChevronDown,
   ChevronRight,
-  Launch
+  Launch,
+  StopFilledAlt
 } from '@carbon/icons-react';
 
 import { isFunction } from 'min-dash';
@@ -60,12 +61,14 @@ export default function Output({
 
   const isError = output?.error || output?.incident;
   const isSuccess = output?.success && !isError;
+  const isCanceled = output?.canceled;
 
   const bannerVariant = useMemo(() => {
     if (isError) return 'error';
     if (isSuccess) return 'success';
+    if (isCanceled) return 'warning';
     return null;
-  }, [ isError, isSuccess ]);
+  }, [ isError, isSuccess, isCanceled ]);
 
   const statusIcon = useMemo(() => {
     if (isError) {
@@ -76,8 +79,12 @@ export default function Output({
       return <CheckmarkFilled />;
     }
 
+    if (isCanceled) {
+      return <StopFilledAlt />;
+    }
+
     return null;
-  }, [ isError, isSuccess ]);
+  }, [ isError, isSuccess, isCanceled ]);
 
   const headerText = useMemo(() => {
     if (output) {
@@ -92,6 +99,10 @@ export default function Output({
       if (output.success) {
         return 'Success';
       }
+
+      if (output.canceled) {
+        return 'Test canceled';
+      }
     }
 
     return null;
@@ -446,6 +457,11 @@ function VariablesSection({ title, scope, output, liveVariables, isTaskExecuting
       return pickVariables(output.variables, scope);
     }
 
+    // After cancellation, show unscoped variables (best-effort snapshot)
+    if (output && output.canceled && output.variables) {
+      return output.variables;
+    }
+
     return null;
   }, [ isTaskExecuting, liveVariables, output, scope ]);
 

lib/components/TaskTesting/TaskTesting.js

@@ -149,6 +149,7 @@ export default function TaskTesting({
   const executionStartTimeRef = useRef(null);
 
   const [ liveVariables, setLiveVariables ] = useState(null);
+  const liveVariablesRef = useRef(null);
 
   const [ executionCompleted, setExecutionCompleted ] = useState(false);
 
@@ -285,7 +286,18 @@ export default function TaskTesting({
           startedAt: executionStartTimeRef.current,
           finishedAt: Date.now()
         });
+      } else if (result.reason === TASK_EXECUTION_REASON.USER_CANCEL) {
+        elementConfigRef?.current?.setOutputConfigForElement(element, {
+          success: false,
+          canceled: true,
+          variables: liveVariablesRef.current,
+          operateUrl: currentOperateUrl,
+          executionLog: log,
+          startedAt: executionStartTimeRef.current,
+          finishedAt: Date.now()
+        });
       }
+
       setExecutionCompleted(true);
       onTaskExecutionFinished(element, result);
     };
@@ -319,6 +331,7 @@ export default function TaskTesting({
 
     /** @param {Object} variables */
     const handleVariables = (variables) => {
+      liveVariablesRef.current = variables;
       setLiveVariables(variables);
     };
 
@@ -384,6 +397,7 @@ export default function TaskTesting({
     setExecutionLog([]);
     executionLogRef.current = [];
     setLiveVariables(null);
+    liveVariablesRef.current = null;
     executionStartTimeRef.current = Date.now();
 
     const inputConfig = elementConfigRef.current.getInputConfigForElement(element);
@@ -599,6 +613,7 @@ function getHeaderStateClass({ isTaskExecuting, isConnectionConfigured, output }
   if (isTaskExecuting) return 'task-testing__container--header-executing';
   if (output?.error || output?.incident || !isConnectionConfigured) return 'task-testing__container--header-error';
   if (output?.success) return 'task-testing__container--header-success';
+  if (output?.canceled) return 'task-testing__container--header-canceled';
   return '';
 }
 
@@ -611,6 +626,10 @@ function HeaderStatusIcon({ isTaskExecuting, isConnectionConfigured, output }) {
     return <CheckmarkFilled size={ 16 } className="task-testing__status-icon--success" />;
   }
 
+  if (output?.canceled) {
+    return <StopFilledAlt size={ 16 } className="task-testing__status-icon--canceled" />;
+  }
+
   return null;
 }
 
@@ -631,6 +650,10 @@ function HeaderStatusText({ isTaskExecuting, isConnectionConfigured, taskExecuti
     if (output.success) {
       return 'Success';
     }
+
+    if (output.canceled) {
+      return 'Test canceled';
+    }
   }
 
   return null;

lib/style/style.scss

@@ -98,6 +98,10 @@
       background: #defbe6;
     }
 
+    &.task-testing__container--header-canceled {
+      background: #fdf6dd;
+    }
+
     .task-testing__header-status {
       display: flex;
       align-items: center;
@@ -125,6 +129,11 @@
         flex-shrink: 0;
       }
 
+      .task-testing__status-icon--canceled {
+        fill: #f1c21b;
+        flex-shrink: 0;
+      }
+
       .task-testing__header-status-text {
         font-size: 14px;
         font-weight: 600;
@@ -240,6 +249,16 @@
         }
       }
 
+      &.output__banner--warning {
+        background-color: #fdf6dd;
+        border: 1px solid #f1c21b;
+        color: #8a6d00;
+
+        .output__banner-icon svg {
+          fill: #f1c21b;
+        }
+      }
+
       .output__banner-header {
         display: flex;
         align-items: center;
@@ -594,6 +613,10 @@
       background-color: #da1e28;
     }
 
+    .execution-log__dot--canceled {
+      background-color: #f1c21b;
+    }
+
     .execution-log__entry {
       display: flex;
       align-items: center;

lib/types.d.ts

@@ -137,7 +137,9 @@ export type TaskExecutionStatus =
   'deploying' |
   'starting-instance' |
   'executing' |
-  'completed';
+  'completed' |
+  'canceled';
+  'canceled';
 
 export type TaskExecutionEvents = 
   'taskExecution.status.changed' |