@camunda/task-testing 0.1.1 → 0.2.1

package/dist/index.js

@@ -26,12 +26,16 @@ const DEFAULT_CONFIG = {
   output: {}
 };
 const SUPPORTED_ELEMENT_TYPES = ['bpmn:Task'];
-const DEFAULT_OUTPUT = null;
+const DEFAULT_OUTPUT = undefined;
 class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   constructor(injector, elementVariables, config = DEFAULT_CONFIG) {
     super();
     this._injector = injector;
     this._elementVariables = elementVariables;
+
+    /**
+     * @type {import('./types').Config}
+     */
     this._config = {
       ...DEFAULT_CONFIG,
       ...config
@@ -103,6 +107,11 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     }
     return this._config.input[element.id];
   }
+
+  /**
+   * @param {import('./types').Element} element
+   * @returns {import('./types').ElementOutput}
+   */
   getOutputConfigForElement(element) {
     if (!(0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(element, SUPPORTED_ELEMENT_TYPES)) {
       throw new Error(`Unsupported element type: ${element.type}`);
@@ -338,6 +347,7 @@ class ElementVariables extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   INTERVAL_MS: () => (/* binding */ INTERVAL_MS),
 /* harmony export */   "default": () => (/* binding */ TaskExecution)
 /* harmony export */ });
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! events */ "./node_modules/events/events.js");
@@ -352,74 +362,49 @@ __webpack_require__.r(__webpack_exports__);
  * except in compliance with the MIT License.
  */
 
+/**
+ * @import {
+ * TaskExecutionApi,
+ * TaskExecutionResult,
+ * TaskExecutionError,
+ * TaskExecutionStatus } from './types';
+ */
+
+/**
+ * @import {
+ * CreateProcessInstanceResponse,
+ * DeployResourceResponse
+ * } from '@camunda8/sdk/dist/c8/lib/C8Dto';
+ */
+
 
 const INTERVAL_MS = 1000;
+
+/**
+ * Emits:
+ * - `taskExecution.status.changed` with one of {@link TaskExecutionStatus}
+ * - `taskExecution.finished` with {@link TaskExecutionResult}
+ * - `taskExecution.error` with {@link TaskExecutionError}
+ * - `taskExecution.interrupted` when execution is interrupted by switching focus
+ */
 class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   /**
    * @param {Object} injector
-   * @param {import('./types').TaskExecutionApi} api
+   * @param {TaskExecutionApi} api
    */
   constructor(injector, api) {
     super();
-    this._injector = injector;
 
-    /** @type {import('./types').TaskExecutionApi} */
+    /** @type {TaskExecutionApi} */
     this._api = api;
+    this._interval = null;
+
+    /** @type {TaskExecutionStatus} */
+    this._status = 'idle';
     const eventBus = injector.get('eventBus');
     eventBus.on(['selection.changed', 'commandStack.changed'], () => {
       this.cancelTaskExecution();
-    });
-    this._currentTaskExecution = null;
-  }
-  async _cancelTaskExecution() {
-    if (!this._currentTaskExecution) {
-      return;
-    }
-    const {
-      interval,
-      processInstanceKey,
-      processDefinitionKey
-    } = this._currentTaskExecution;
-    if (interval) {
-      clearInterval(interval);
-    }
-    if (processInstanceKey) {
-
-      // TODO: delete process instance
-    }
-    if (processDefinitionKey) {
-
-      // TODO: delete process definition
-    }
-
-    // TODO: cancel deploy and start instance if they are in progress
-
-    this._currentTaskExecution = null;
-  }
-  async cancelTaskExecution() {
-    if (!this._currentTaskExecution) {
-      return;
-    }
-    await this._cancelTaskExecution();
-
-    /** @type {import('./types').TaskExecutionEvents.Cancelled} */
-    this.emit('taskExecution.cancelled');
-  }
-  async endTaskExecution() {
-    if (!this._currentTaskExecution) {
-      return;
-    }
-    const {
-      incident,
-      variables
-    } = this._currentTaskExecution;
-    await this._cancelTaskExecution();
-
-    /** @type {import('./types').TaskExecutionEvents.End} */
-    this.emit('taskExecution.end', {
-      incident,
-      success: !incident,
-      variables
+      this.emit('taskExecution.interrupted');
     });
   }
 
@@ -432,113 +417,141 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
    * @returns {Promise<void>}
    */
   async executeTask(elementId, variables) {
-    await this.cancelTaskExecution();
-    this._currentTaskExecution = {
-      incident: null,
-      /** @type {null | ReturnType<typeof setInterval>} */
-      interval: null,
-      /** @type {string|null} */
-      processDefinitionKey: null,
-      /** @type {string|null} */
-      processInstanceKey: null,
-      /** @type {Object<string, any>|null} */
-      variables: null
-    };
-
-    /** @type {import('./types').TaskExecutionEvents.Start} */
-    this.emit('taskExecution.start');
-    const deploymentResponse = await this._api.deploy();
-    if (!deploymentResponse.success) {
-      /** @type {import('./types').TaskExecutionEvents.Error} */
-      this.emit('taskExecution.error', {
-        message: 'Failed to deploy process definition',
-        response: deploymentResponse
-      });
-      await this.cancelTaskExecution();
+    this._changeStatus('deploying');
+    const deploymentResult = await this._api.deploy();
+    if (this._status === 'idle') {
+      // Execution was canceled in the meantime
       return;
     }
-    const processId = getProcessId(deploymentResponse.response);
+    if (!deploymentResult.success) {
+      this._emitError('Failed to deploy process definition', deploymentResult.error);
+      this.cancelTaskExecution();
+      return;
+    }
+    const processId = getProcessId(deploymentResult.response);
     if (!processId) {
-      /** @type {import('./types').TaskExecutionEvents.Error} */
-      this.emit('taskExecution.error', {
-        message: 'Failed to retrieve process ID from deployment response',
-        response: deploymentResponse
-      });
-      await this.cancelTaskExecution();
+      this._emitError('Failed to retrieve process ID from deployment response');
+      this.cancelTaskExecution();
       return;
     }
-    this._currentTaskExecution.processDefinitionKey = getProcessDefinitionKey(deploymentResponse.response);
-    const startInstanceResponse = await this._api.startInstance(processId, elementId, variables);
-    if (!startInstanceResponse.success) {
-      /** @type {import('./types').TaskExecutionEvents.Error} */
-      this.emit('taskExecution.error', {
-        message: 'Failed to start process instance',
-        response: startInstanceResponse
-      });
-      await this.cancelTaskExecution();
+    this._changeStatus('starting-instance');
+    const startInstanceResult = await this._api.startInstance(processId, elementId, variables);
+    if (/** @type {TaskExecutionStatus} */this._status === 'idle') {
+      // Execution was canceled in the meantime
       return;
     }
-    const {
-      processInstanceKey
-    } = startInstanceResponse.response;
-    this._currentTaskExecution.processInstanceKey = processInstanceKey;
+    if (!startInstanceResult.success) {
+      this._emitError('Failed to start process instance', startInstanceResult.error);
+      this.cancelTaskExecution();
+      return;
+    }
+    const processInstanceKey = getProcessInstanceKey(startInstanceResult.response);
+    if (!processInstanceKey) {
+      this._emitError('Failed to retrieve process instance key from start instance response');
+      this.cancelTaskExecution();
+      return;
+    }
+    this._changeStatus('executing', processInstanceKey);
     const intervalCallback = async () => {
       const getProcessInstanceResult = await this._api.getProcessInstance(processInstanceKey);
+      if (this._status === 'idle') {
+        // Execution was canceled in the meantime
+        this.cancelTaskExecution();
+        return;
+      }
       if (!getProcessInstanceResult.success) {
-        /** @type {import('./types').TaskExecutionEvents.Error} */
-        this.emit('taskExecution.error', {
-          message: 'Failed to get process instance',
-          response: getProcessInstanceResult
-        });
+        this._emitError('Failed to get process instance', getProcessInstanceResult.error);
         return;
       }
-      const processInstance = getProcessInstance(getProcessInstanceResult.response);
+      const processInstance = getProcessInstance(getProcessInstanceResult.response, processInstanceKey);
       if (!processInstance) {
         // No process instance found, try again
         return;
       }
-      const state = getProcessInstanceState(getProcessInstanceResult.response),
-        hasIncident = hasProcessInstanceIncident(getProcessInstanceResult.response);
+      const state = getProcessInstanceState(getProcessInstanceResult.response, processInstanceKey);
+      const hasIncident = hasProcessInstanceIncident(getProcessInstanceResult.response, processInstanceKey);
+      let incident = null;
       if (hasIncident) {
         const getProcessInstanceIncidentResult = await this._api.getProcessInstanceIncident(processInstanceKey);
-        if (!getProcessInstanceIncidentResult.success) {
-          /** @type {import('./types').TaskExecutionEvents.Error} */
-          this.emit('taskExecution.error', {
-            message: 'Failed to get process instance incident',
-            response: getProcessInstanceIncidentResult
-          });
+        if (/** @type {TaskExecutionStatus} */this._status === 'idle') {
+          // Execution was canceled in the meantime
+          this.cancelTaskExecution();
           return;
         }
-        const incident = getIncident(getProcessInstanceIncidentResult.response);
-        if (this._currentTaskExecution) {
-          this._currentTaskExecution.incident = incident;
+        if (!getProcessInstanceIncidentResult.success) {
+          this._emitError('Failed to get process instance incident', getProcessInstanceIncidentResult.error);
+          return;
         }
-        this.endTaskExecution();
-        return;
+        incident = getIncident(getProcessInstanceIncidentResult.response);
       }
-      if (['TERMINATED', 'COMPLETED', 'CANCELED'].includes(state)) {
+      const isCompleted = ['COMPLETED', 'TERMINATED', 'CANCELED'].includes(state);
+      if (isCompleted || hasIncident) {
         const getProcessInstanceVariablesResult = await this._api.getProcessInstanceVariables(processInstanceKey);
+        if (/** @type {TaskExecutionStatus} */this._status === 'idle') {
+          // Execution was canceled in the meantime
+          this.cancelTaskExecution();
+          return;
+        }
         if (!getProcessInstanceVariablesResult.success) {
-          this.emit('taskExecution.error', {
-            message: 'Failed to get process instance variables',
-            response: getProcessInstanceVariablesResult
-          });
-        } else {
-          if (this._currentTaskExecution) {
-            this._currentTaskExecution.variables = getVariables(getProcessInstanceVariablesResult.response);
-          }
+          this._emitError('Failed to get process instance variables', getProcessInstanceVariablesResult.error);
+          return;
         }
-        this.endTaskExecution();
+        const variables = getVariables(getProcessInstanceVariablesResult.response);
+        this.emit('taskExecution.finished', {
+          success: !incident,
+          incident,
+          variables
+        });
+        this.cancelTaskExecution();
       }
     };
-    this._currentTaskExecution.interval = setInterval(intervalCallback, INTERVAL_MS);
+    this._interval = setInterval(intervalCallback, INTERVAL_MS);
+  }
+
+  /**
+   * Cancel current task execution, clean up and change status to `idle`.
+   */
+  async cancelTaskExecution() {
+    // TODO: Proper clean up:
+    // - delete process instance
+    // - delete process definition
+    // - cancel deploy and start instance if they are in progress
+
+    if (this._interval) {
+      clearInterval(this._interval);
+    }
+    this._changeStatus('idle');
+  }
+
+  /**
+   * Emit `taskExecution.error` event.
+   *
+   * @param {string} message
+   * @param {any} [response]
+   */
+  _emitError(message, response) {
+    /** @type {import('./types').TaskExecutionError} */
+    const error = {
+      message,
+      response
+    };
+    this.emit('taskExecution.error', error);
+  }
+
+  /** @param {TaskExecutionStatus} status */
+  _changeStatus(status, ...args) {
+    if (this._status === status) {
+      return;
+    }
+    this._status = status;
+    this.emit('taskExecution.status.changed', status, ...args);
   }
 }
 
 /**
  * Get the process ID from the deployment response.
  *
- * @param {import('./types').DeploymentResponse} response
+ * @param {DeployResourceResponse} response
  *
  * @returns {string|null} The process ID or null if not found.
  */
@@ -555,41 +568,36 @@ function getProcessId(response) {
 }
 
 /**
- * Get the process definition key from the deployment response.
+ * Get the process instance key from the response.
  *
- * @param {import('./types').DeploymentResponse} response
+ * @param {CreateProcessInstanceResponse} response
  *
- * @returns {string|null} The process definition key or null if not found.
+ * @returns {string|null} The process instance key or null if not found.
  */
-function getProcessDefinitionKey(response) {
+function getProcessInstanceKey(response) {
   const {
-    processes = []
+    processInstanceKey
   } = response;
-  for (const process of processes) {
-    if (process) {
-      return process.processDefinitionKey;
-    }
-  }
-  return null;
+  return processInstanceKey || null;
 }
-function getProcessInstance(response) {
+function getProcessInstance(response, processInstanceKey) {
   const {
     items = []
   } = response;
   if (!items.length) {
     return null;
   }
-  return items[0];
+  return items.find(item => item.processInstanceKey === processInstanceKey) || null;
 }
-function getProcessInstanceState(response) {
-  const processInstance = getProcessInstance(response);
+function getProcessInstanceState(response, processInstanceKey) {
+  const processInstance = getProcessInstance(response, processInstanceKey);
   if (!processInstance) {
     return null;
   }
   return processInstance.state;
 }
-function hasProcessInstanceIncident(response) {
-  const processInstance = getProcessInstance(response);
+function hasProcessInstanceIncident(response, processInstanceKey) {
+  const processInstance = getProcessInstance(response, processInstanceKey);
   if (!processInstance) {
     return false;
   }
@@ -605,7 +613,11 @@ function getVariables(response) {
       name,
       value
     } = item;
-    variables[name] = JSON.parse(value);
+    try {
+      variables[name] = JSON.parse(value);
+    } catch {
+      variables[name] = value;
+    }
   }
   return variables;
 }
@@ -643,7 +655,6 @@ __webpack_require__.r(__webpack_exports__);
 
 function Input({
   allOutputs,
-  element,
   input,
   onErrorChange,
   onResetInput,
@@ -673,9 +684,8 @@ function Input({
           children: "Reset"
         })
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_InputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    }), input && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_InputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
       allOutputs: allOutputs,
-      element: element,
       value: input,
       onChange: onSetInput,
       onErrorChange: onErrorChange,
@@ -694,6 +704,7 @@ function Input({
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   INVALID_JSON_ERROR: () => (/* binding */ INVALID_JSON_ERROR),
 /* harmony export */   PLACEHOLDER_TEXT: () => (/* binding */ PLACEHOLDER_TEXT),
 /* harmony export */   "default": () => (/* binding */ InputEditor)
 /* harmony export */ });
@@ -708,7 +719,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _codemirror_lang_json__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @codemirror/lang-json */ "./node_modules/@codemirror/lang-json/dist/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _InputEditorTheme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./InputEditorTheme */ "./lib/components/Input/InputEditorTheme.js");
+/* harmony import */ var _shared_CodeMirrorTheme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/CodeMirrorTheme */ "./lib/components/shared/CodeMirrorTheme.js");
 /* harmony import */ var _utils_autocompletion__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../utils/autocompletion */ "./lib/utils/autocompletion.js");
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
 
@@ -727,11 +738,11 @@ __webpack_require__.r(__webpack_exports__);
 const fromPropAnnotation = _codemirror_state__WEBPACK_IMPORTED_MODULE_6__.Annotation.define();
 const autocompletionCompartment = new _codemirror_state__WEBPACK_IMPORTED_MODULE_6__.Compartment();
 const PLACEHOLDER_TEXT = 'Enter process variables in JSON format';
+const INVALID_JSON_ERROR = 'JSON contains errors';
 const DEFAULT_ALL_OUTPUTS = {},
   DEFAULT_VARIABLES_FOR_ELEMENT = [];
 function InputEditor({
   allOutputs = DEFAULT_ALL_OUTPUTS,
-  element,
   value,
   onChange,
   onErrorChange,
@@ -786,8 +797,8 @@ function InputEditor({
     const source = view => {
       const errors = (0,_codemirror_lang_json__WEBPACK_IMPORTED_MODULE_7__.jsonParseLinter)()(view);
       const hasError = errors && errors.length > 0;
-      onErrorChange(hasError ? 'Invalid JSON' : null);
-      setError(hasError ? 'Invalid JSON' : null);
+      onErrorChange(hasError ? INVALID_JSON_ERROR : null);
+      setError(hasError ? INVALID_JSON_ERROR : null);
       return errors;
     };
     const editorState = _codemirror_state__WEBPACK_IMPORTED_MODULE_6__.EditorState.create({
@@ -797,7 +808,7 @@ function InputEditor({
         'tabindex': '0'
       }), (0,_codemirror_lint__WEBPACK_IMPORTED_MODULE_12__.linter)(source, {
         delay: 300
-      }), autocompletionCompartment.of((0,_utils_autocompletion__WEBPACK_IMPORTED_MODULE_4__.getAutocompletionExtensions)(autocompletions)), (0,_codemirror_view__WEBPACK_IMPORTED_MODULE_10__.placeholder)(PLACEHOLDER_TEXT), _InputEditorTheme__WEBPACK_IMPORTED_MODULE_3__["default"], _codemirror_view__WEBPACK_IMPORTED_MODULE_10__.EditorView.lineWrapping, _codemirror_view__WEBPACK_IMPORTED_MODULE_10__.EditorView.updateListener.of(update => {
+      }), autocompletionCompartment.of((0,_utils_autocompletion__WEBPACK_IMPORTED_MODULE_4__.getAutocompletionExtensions)(autocompletions)), (0,_codemirror_view__WEBPACK_IMPORTED_MODULE_10__.placeholder)(PLACEHOLDER_TEXT), _shared_CodeMirrorTheme__WEBPACK_IMPORTED_MODULE_3__["default"], _codemirror_view__WEBPACK_IMPORTED_MODULE_10__.EditorView.lineWrapping, _codemirror_view__WEBPACK_IMPORTED_MODULE_10__.EditorView.updateListener.of(update => {
         if (update.docChanged) {
           if (update.transactions.some(transaction => transaction.annotation(fromPropAnnotation))) {
             return;
@@ -815,7 +826,7 @@ function InputEditor({
     return () => {
       view.destroy();
     };
-  }, []);
+  }, [onChange]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!editorView) return;
     editorView.dispatch({
@@ -837,17 +848,17 @@ function InputEditor({
     }
   }, [editorView, value]);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
-    className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('input__editor', {
-      'input__editor--error': error
+    className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('code__editor', {
+      'code__editor--error': error
     }),
     children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-      className: "input__editor-codemirror",
+      className: "code__editor-codemirror",
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
         ref: ref,
-        className: "input__editor-codemirror-inner"
+        className: "code__editor-codemirror-inner"
       })
     }), error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
-      className: "input__editor-error",
+      className: "code__editor-error",
       children: error
     })]
   });
@@ -914,122 +925,6 @@ function getDetail(value) {
 
 /***/ }),
 
-/***/ "./lib/components/Input/InputEditorTheme.js":
-/*!**************************************************!*\
-  !*** ./lib/components/Input/InputEditorTheme.js ***!
-  \**************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   baseTheme: () => (/* binding */ baseTheme),
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
-/* harmony export */   highlightTheme: () => (/* binding */ highlightTheme),
-/* harmony export */   syntaxClasses: () => (/* binding */ syntaxClasses)
-/* harmony export */ });
-/* harmony import */ var _codemirror_language__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @codemirror/language */ "./node_modules/@codemirror/language/dist/index.js");
-/* harmony import */ var _codemirror_view__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @codemirror/view */ "./node_modules/@codemirror/view/dist/index.js");
-/* harmony import */ var _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @lezer/highlight */ "./node_modules/@lezer/highlight/dist/index.js");
-
-
-
-const baseTheme = _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.theme({
-  '&': {
-    height: '100%',
-    width: '100%'
-  },
-  '.cm-scroller': {
-    overflow: 'auto'
-  },
-  '& .cm-content': {
-    padding: '0px'
-  },
-  '& .cm-line': {
-    padding: '0px'
-  },
-  '&.cm-editor.cm-focused': {
-    outline: 'none'
-  },
-  '& .cm-completionInfo': {
-    whiteSpace: 'pre-wrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
-  },
-  '&.cm-editor': {
-    height: '100%'
-  },
-  // Don't wrap whitespace for custom HTML
-  '& .cm-completionInfo > *': {
-    whiteSpace: 'normal'
-  },
-  '& .cm-completionInfo ul': {
-    margin: 0,
-    paddingLeft: '15px'
-  },
-  '& .cm-completionInfo pre': {
-    marginBottom: 0,
-    whiteSpace: 'pre-wrap'
-  },
-  '& .cm-completionInfo p': {
-    marginTop: 0
-  },
-  '& .cm-completionInfo p:not(:last-of-type)': {
-    marginBottom: 0
-  }
-});
-const highlightTheme = _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.baseTheme({
-  '& .variableName': {
-    color: '#10f'
-  },
-  '& .number': {
-    color: '#164'
-  },
-  '& .string': {
-    color: '#a11'
-  },
-  '& .bool': {
-    color: '#219'
-  },
-  '& .function': {
-    color: '#aa3731',
-    fontWeight: 'bold'
-  },
-  '& .control': {
-    color: '#708'
-  }
-});
-const syntaxClasses = (0,_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.syntaxHighlighting)(_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.HighlightStyle.define([{
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName,
-  class: 'variableName'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.name,
-  class: 'variableName'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.number,
-  class: 'number'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.string,
-  class: 'string'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.bool,
-  class: 'bool'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.function(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName),
-  class: 'function'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.function(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.special(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName)),
-  class: 'function'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.controlKeyword,
-  class: 'control'
-}, {
-  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.operatorKeyword,
-  class: 'control'
-}]));
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([baseTheme, highlightTheme, syntaxClasses]);
-
-/***/ }),
-
 /***/ "./lib/components/Output/Output.jsx":
 /*!******************************************!*\
   !*** ./lib/components/Output/Output.jsx ***!
@@ -1038,197 +933,263 @@ const syntaxClasses = (0,_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.synta
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   TASK_EXECUTION_STATUS_LABEL: () => (/* binding */ TASK_EXECUTION_STATUS_LABEL),
 /* harmony export */   "default": () => (/* binding */ Output)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var _carbon_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @carbon/react */ "@carbon/react");
 /* harmony import */ var _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-react */ "@carbon/icons-react");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+/* harmony import */ var _OutputEditor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./OutputEditor */ "./lib/components/Output/OutputEditor.jsx");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+
+
 
 
 
+const TASK_EXECUTION_STATUS_LABEL = {
+  deploying: 'Deploying...',
+  'starting-instance': 'Starting instance...',
+  executing: 'Waiting for task to be completed...'
+};
 
+/**
+ * @param {Object} props
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
+ * @param {boolean} props.isTaskExecuting
+ * @param {import('../../types').ElementOutput} props.output
+ * @param {Function} props.onResetOutput
+ * @param {import('../../types').TaskExecutionStatus} props.taskExecutionStatus
+ */
 function Output({
   isConnectionConfigured,
+  configureConnectionBannerTitle,
+  configureConnectionBannerDescription,
+  configureConnectionLabel,
   onConfigureConnection,
   isTaskExecuting,
   output,
-  onResetOutput
+  onResetOutput,
+  taskExecutionStatus
 }) {
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
+  const statusIcon = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => {
+    if (output !== null && output !== void 0 && output.error || output !== null && output !== void 0 && output.incident || !isConnectionConfigured) {
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.ErrorFilled, {
+        className: "output__status-icon--error"
+      });
+    }
+    if (output !== null && output !== void 0 && output.success) {
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.CheckmarkFilled, {
+        className: "output__status-icon--success"
+      });
+    }
+    if (isTaskExecuting) {
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.InlineLoading, {});
+    }
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.InProgress, {
+      className: "output__status-icon--ready"
+    });
+  }, [output, isTaskExecuting, isConnectionConfigured]);
+  const showResetButton = isConnectionConfigured && ((output === null || output === void 0 ? void 0 : output.success) || (output === null || output === void 0 ? void 0 : output.error) || (output === null || output === void 0 ? void 0 : output.incident));
+  const headerText = isTaskExecuting ? TASK_EXECUTION_STATUS_LABEL[taskExecutionStatus] : 'Results';
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
     className: "output",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
       className: "output__header",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
         className: "output__header--title",
-        children: "Results"
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-        className: "output__header--buttons",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
-          kind: "ghost",
-          onClick: onResetOutput,
-          size: "sm",
-          renderIcon: _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Reset,
-          hasIconOnly: true,
-          tooltipPosition: "right",
-          iconDescription: "Reset output",
-          children: "Reset"
-        })
+        children: [statusIcon, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+          children: headerText
+        })]
+      }), showResetButton && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
+        kind: "ghost",
+        onClick: () => onResetOutput(),
+        size: "sm",
+        renderIcon: _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Reset,
+        hasIconOnly: true,
+        tooltipPosition: "right",
+        iconDescription: "Reset output",
+        children: "Reset"
+      }), (output === null || output === void 0 ? void 0 : output.operateUrl) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
+        href: output.operateUrl,
+        target: "_blank",
+        className: "output__header--button-operate",
+        children: "View in Operate"
       })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
       className: "output__body",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-        className: "output__body--inner",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ConfigureConnection, {
-          isConnectionConfigured: isConnectionConfigured,
-          onConfigureConnection: onConfigureConnection
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(NoResults, {
-          isConnectionConfigured: isConnectionConfigured,
-          isTaskExecuting: isTaskExecuting,
-          output: output
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Success, {
-          isConnectionConfigured: isConnectionConfigured,
-          isTaskExecuting: isTaskExecuting,
-          output: output
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Error, {
-          isConnectionConfigured: isConnectionConfigured,
-          isTaskExecuting: isTaskExecuting,
-          output: output
-        })]
-      })
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(OutputBanner, {
+        isConnectionConfigured: isConnectionConfigured,
+        configureConnectionBannerTitle: configureConnectionBannerTitle,
+        configureConnectionBannerDescription: configureConnectionBannerDescription,
+        configureConnectionLabel: configureConnectionLabel,
+        onConfigureConnection: onConfigureConnection,
+        output: output
+      }), isConnectionConfigured && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(OutputVariables, {
+        isTaskExecuting: isTaskExecuting,
+        output: output
+      })]
     })]
   });
 }
-function ConfigureConnection(props) {
-  const {
-    isConnectionConfigured,
-    onConfigureConnection
-  } = props;
-  if (isConnectionConfigured) {
-    return null;
+function OutputBanner({
+  isConnectionConfigured,
+  configureConnectionBannerTitle,
+  configureConnectionBannerDescription,
+  configureConnectionLabel,
+  onConfigureConnection,
+  output
+}) {
+  if (!isConnectionConfigured) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ErrorBanner, {
+      title: configureConnectionBannerTitle,
+      description: configureConnectionBannerDescription,
+      actionLabel: configureConnectionLabel,
+      onActionClick: onConfigureConnection
+    });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-      className: "output__state output__state--error",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-        className: "output__state-icon",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.ErrorFilled, {
-          className: "output__status-icon"
-        })
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-        className: "output__state-content",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-          className: "output__state-title",
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            children: "Connection required"
-          }), onConfigureConnection && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
-            onClick: onConfigureConnection,
-            children: "Configure"
-          })]
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-          className: "output__state-details",
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            children: "Configure a connection to start testing."
-          })
-        })]
-      })]
-    })
-  });
-}
-function NoResults(props) {
-  const {
-    isConnectionConfigured,
-    isTaskExecuting,
-    output
-  } = props;
-  if (!isConnectionConfigured || isTaskExecuting || output) {
-    return null;
+  if (output !== null && output !== void 0 && output.error) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ErrorBanner, {
+      title: "Task execution failed",
+      description: `Error: ${output.error.message}`
+    });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-    className: "output__variables output__variables--no-results",
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.CodeSnippet, {
-      type: "multi",
-      hideCopyButton: true,
-      maxCollapsedNumberOfRows: 100,
-      children: 'Test task to see results'
-    })
-  });
+  if (output !== null && output !== void 0 && output.incident) {
+    const action = output.incident.operateUrl ? {
+      actionLabel: 'View in Operate',
+      actionUrl: output.incident.operateUrl
+    } : {};
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(ErrorBanner, {
+      title: "Task execution failed",
+      description: `Incident: ${output.incident.type}`,
+      ...action
+    });
+  }
+  return null;
 }
-function Success({
-  isConnectionConfigured,
+function OutputVariables({
   isTaskExecuting,
   output
 }) {
-  if (!isConnectionConfigured || isTaskExecuting || !output || !output.success) {
-    return null;
+  if (isTaskExecuting) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.CodeSnippetSkeleton, {
+      className: "output__variables--skeleton",
+      type: "multi"
+    });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-    className: "output__variables",
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.CodeSnippet, {
-      type: "multi",
-      feedback: "Copied to clipboard",
-      hideCopyButton: false,
-      maxCollapsedNumberOfRows: 100,
-      align: "left",
-      children: JSON.stringify(output.variables, null, 2)
+  if (output !== null && output !== void 0 && output.success) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_OutputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+      value: JSON.stringify(output.variables, null, 2)
+    });
+
+    // TODO: Introduce tabs when able to filter variables by `scopeKey`
+    // return (
+    //   <Tabs>
+    //     <TabList>
+    //       <Tab>Process variables</Tab>
+    //       <Tab>Task variables</Tab>
+    //     </TabList>
+    //     <TabPanels>
+    //       <TabPanel>
+    //         <OutputEditor value={ JSON.stringify(output.variables, null, 2) } />
+    //       </TabPanel>
+    //       <TabPanel>
+    //         <OutputEditor value={ JSON.stringify(output.variables, null, 2) } />
+    //       </TabPanel>
+    //     </TabPanels>
+    //   </Tabs>
+    // );
+  }
+  if (output !== null && output !== void 0 && output.error) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_OutputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+      value: (output === null || output === void 0 ? void 0 : output.error.response) || 'No error details available'
+    });
+  }
+  if (output !== null && output !== void 0 && output.incident) {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tabs, {
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.TabList, {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tab, {
+          children: "Incident"
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tab, {
+          children: "Process variables"
+        })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.TabPanels, {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.TabPanel, {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_OutputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+            value: printIncident(output.incident)
+          })
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.TabPanel, {
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_OutputEditor__WEBPACK_IMPORTED_MODULE_3__["default"], {
+            value: JSON.stringify(output.variables, null, 2)
+          })
+        })]
+      })]
+    });
+  }
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+    className: "output__variables--empty",
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+      children: ["Enter input variables, then click ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+        className: "output__variables--empty-action",
+        children: "Test task"
+      }), " to see results."]
     })
   });
 }
-function Error({
-  isConnectionConfigured,
-  isTaskExecuting,
-  output
+
+/**
+ *
+ * @param {Object} props
+ * @param {string} props.title
+ * @param {string} props.description
+ * @param {string} [props.actionLabel]
+ * @param {string} [props.actionUrl]
+ * @param {Function} [props.onActionClick]
+ */
+function ErrorBanner({
+  title,
+  description,
+  actionLabel,
+  actionUrl = '#',
+  onActionClick = () => {}
 }) {
-  if (!isConnectionConfigured || isTaskExecuting || !output || output.success) {
-    return null;
-  }
-  const {
-    error,
-    incident
-  } = output;
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-      className: "output__state output__state--error",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-        className: "output__state-icon",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.ErrorFilled, {
-          className: "output__status-icon"
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+    className: "output__error",
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+      className: "output__error--title",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+        children: title
+      }), actionLabel && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+        className: "output__error--action",
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
+          href: actionUrl,
+          onClick: () => onActionClick(),
+          children: actionLabel
         })
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-        className: "output__state-content",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-          className: "output__state-title",
-          children: "Task execution failed"
-        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-          className: "output__state-details",
-          children: [incident && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("span", {
-            children: ["Incident: ", incident.type]
-          }), error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("span", {
-            children: ["Error: ", error.message]
-          })]
-        })]
       })]
-    }), incident && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.CodeSnippet, {
-      type: "multi",
-      feedback: "Copied to clipboard",
-      hideCopyButton: false,
-      maxCollapsedNumberOfRows: 100,
-      align: "left",
-      children: printError(incident)
-    }), error && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.CodeSnippet, {
-      type: "multi",
-      feedback: "Copied to clipboard",
-      hideCopyButton: false,
-      maxCollapsedNumberOfRows: 100,
-      align: "left",
-      children: printError(error)
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+      className: "output__error--content",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("span", {
+        children: description
+      })
     })]
   });
 }
-function printError(error) {
+
+/**
+ * Print the details of an incident.
+ *
+ * @param {Object} incident
+ *
+ * @returns {string}
+ */
+function printIncident(incident) {
   let text = '';
-  Object.keys(error).forEach(key => {
-    text += `${capitalize(key)}: ${JSON.stringify(error[key], null, 2)}\n`;
+  Object.keys(incident).forEach(key => {
+    text += `${capitalize(key)}: ${JSON.stringify(incident[key], null, 2)}\n`;
   });
   return text;
 }
@@ -1250,6 +1211,95 @@ function capitalize(string) {
 
 /***/ }),
 
+/***/ "./lib/components/Output/OutputEditor.jsx":
+/*!************************************************!*\
+  !*** ./lib/components/Output/OutputEditor.jsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ OutputEditor)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var _carbon_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @carbon/react */ "@carbon/react");
+/* harmony import */ var _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-react */ "@carbon/icons-react");
+/* harmony import */ var _codemirror_state__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @codemirror/state */ "./node_modules/@codemirror/state/dist/index.js");
+/* harmony import */ var _codemirror_view__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @codemirror/view */ "./node_modules/@codemirror/view/dist/index.js");
+/* harmony import */ var _codemirror_lang_json__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @codemirror/lang-json */ "./node_modules/@codemirror/lang-json/dist/index.js");
+/* harmony import */ var _shared_CodeMirrorTheme__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../shared/CodeMirrorTheme */ "./lib/components/shared/CodeMirrorTheme.js");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+
+
+
+
+
+
+
+
+function OutputEditor({
+  value
+}) {
+  const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+
+  /**
+   * @type {ReturnType<typeof useState<EditorView>>}
+   */
+  const [editorView, setEditorView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!ref.current) {
+      return;
+    }
+    const editorState = _codemirror_state__WEBPACK_IMPORTED_MODULE_5__.EditorState.create({
+      doc: value,
+      extensions: [(0,_codemirror_lang_json__WEBPACK_IMPORTED_MODULE_6__.json)(), _codemirror_state__WEBPACK_IMPORTED_MODULE_5__.EditorState.tabSize.of(2), _codemirror_state__WEBPACK_IMPORTED_MODULE_5__.EditorState.readOnly.of(true), _codemirror_view__WEBPACK_IMPORTED_MODULE_7__.EditorView.editable.of(false), _codemirror_view__WEBPACK_IMPORTED_MODULE_7__.EditorView.lineWrapping, _shared_CodeMirrorTheme__WEBPACK_IMPORTED_MODULE_3__["default"]]
+    });
+    const view = new _codemirror_view__WEBPACK_IMPORTED_MODULE_7__.EditorView({
+      state: editorState,
+      parent: ref.current
+    });
+    setEditorView(view);
+    return () => {
+      view.destroy();
+    };
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!editorView) return;
+    const editorValue = editorView.state.doc.toString();
+    if (value !== editorValue) {
+      editorView.dispatch({
+        changes: {
+          from: 0,
+          to: editorValue.length,
+          insert: value
+        }
+      });
+    }
+  }, [editorView, value]);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
+    className: "code__editor",
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
+      className: "code__editor-copy-button",
+      renderIcon: _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Copy,
+      iconDescription: "Copy to clipboard",
+      size: "sm",
+      kind: "ghost",
+      hasIconOnly: true,
+      onClick: () => {
+        navigator.clipboard.writeText(value);
+      }
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+      className: "code__editor-codemirror",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", {
+        ref: ref,
+        className: "code__editor-codemirror-inner"
+      })
+    })]
+  });
+}
+
+/***/ }),
+
 /***/ "./lib/components/TaskTesting/TaskTesting.js":
 /*!***************************************************!*\
   !*** ./lib/components/TaskTesting/TaskTesting.js ***!
@@ -1264,15 +1314,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var _carbon_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @carbon/react */ "@carbon/react");
 /* harmony import */ var _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-react */ "@carbon/icons-react");
-/* harmony import */ var _hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks/useSelectedElement */ "./lib/hooks/useSelectedElement.js");
-/* harmony import */ var _ElementConfig__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../ElementConfig */ "./lib/ElementConfig.js");
-/* harmony import */ var _ElementVariables__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../ElementVariables */ "./lib/ElementVariables.js");
-/* harmony import */ var _Input_Input__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Input/Input */ "./lib/components/Input/Input.jsx");
-/* harmony import */ var _Output_Output__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Output/Output */ "./lib/components/Output/Output.jsx");
-/* harmony import */ var _TaskExecution__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../TaskExecution */ "./lib/TaskExecution.js");
-/* harmony import */ var _utils_element__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils/element */ "./lib/utils/element.js");
-/* harmony import */ var _style_style_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../style/style.scss */ "./lib/style/style.scss");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks/useSelectedElement */ "./lib/hooks/useSelectedElement.js");
+/* harmony import */ var _ElementConfig__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../ElementConfig */ "./lib/ElementConfig.js");
+/* harmony import */ var _ElementVariables__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../ElementVariables */ "./lib/ElementVariables.js");
+/* harmony import */ var _Input_Input__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Input/Input */ "./lib/components/Input/Input.jsx");
+/* harmony import */ var _Output_Output__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Output/Output */ "./lib/components/Output/Output.jsx");
+/* harmony import */ var _TaskExecution__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../TaskExecution */ "./lib/TaskExecution.js");
+/* harmony import */ var _utils_element__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../utils/element */ "./lib/utils/element.js");
+/* harmony import */ var _style_style_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../style/style.scss */ "./lib/style/style.scss");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
+
 
 
 
@@ -1291,54 +1344,84 @@ const NO_ELEMENT_TEXT = 'Select a task to start testing';
  * @param {Object} props
  * @param {Object} props.injector
  * @param {import('../../types').TaskExecutionApi} props.api
- * @param {boolean} [props.isConnectionConfigured]
- * @param {string} [props.onConfigureConnection]
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
  * @param {import('../../types').Config|undefined} [props.config]
  * @param {Function} [props.onConfigChanged=() => {}]
+ * @param {string} [props.operateBaseUrl]
+ * @param {Function} [props.onTaskExecution=() => {}]
+ * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
  */
 function TaskTesting({
   injector,
   api,
   isConnectionConfigured,
+  configureConnectionBannerTitle = 'Connection required',
+  configureConnectionBannerDescription = 'Configure a connection to start testing.',
+  configureConnectionLabel = 'Configure',
   onConfigureConnection,
   config,
-  onConfigChanged = () => {}
+  onConfigChanged = () => {},
+  operateBaseUrl,
+  onTaskExecution = () => {},
+  onTaskExecutionInterrupted = () => {}
 }) {
   /**
-   * @type {React.RefObject<ElementVariables?>}
+   * @type {React.RefObject<ElementVariables?>}
+   */
+  const elementVariablesRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+
+  /**
+   * @type {React.RefObject<ElementConfig?>}
+   */
+  const elementConfigRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const [variablesForElement, setVariablesForElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
+
+  /**
+   * @type {ReturnType<typeof useState<import('../../types').TaskExecutionStatus>>}
+   */
+  const [taskExecutionStatus, setTaskExecutionStatus] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
+
+  /**
+   * @type {ReturnType<typeof useState<string>>}
    */
-  const elementVariablesRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  const [input, setInput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
   /**
-   * @type {React.RefObject<ElementConfig?>}
+   * @type {ReturnType<typeof useState<import('../../types').ElementOutput>>}
    */
-  const elementConfigRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  const [variablesForElement, setVariablesForElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
-  const [isTaskExecuting, setIsTaskExecuting] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
-  const [input, setInput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('{}');
-  const [output, setOutput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
+  const [output, setOutput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   const [allOutputs, setAllOutputs] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
   const [inputError, setInputError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
-  const element = (0,_hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_3__.useSelectedElement)(injector);
+  const element = (0,_hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_4__.useSelectedElement)(injector);
 
   /**
    * @type {React.RefObject<TaskExecution?>}
    */
   const taskExecutionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+
+  // Initialize services once the injector is available
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    const elementVariables = new _ElementVariables__WEBPACK_IMPORTED_MODULE_5__.ElementVariables(injector);
+    const elementVariables = new _ElementVariables__WEBPACK_IMPORTED_MODULE_6__.ElementVariables(injector);
     elementVariablesRef.current = elementVariables;
-    const elementConfig = new _ElementConfig__WEBPACK_IMPORTED_MODULE_4__.ElementConfig(injector, elementVariables, config);
+    const elementConfig = new _ElementConfig__WEBPACK_IMPORTED_MODULE_5__.ElementConfig(injector, elementVariables, config);
     elementConfigRef.current = elementConfig;
-    const taskExecution = new _TaskExecution__WEBPACK_IMPORTED_MODULE_8__["default"](injector, api);
+    const taskExecution = new _TaskExecution__WEBPACK_IMPORTED_MODULE_9__["default"](injector, api);
     taskExecutionRef.current = taskExecution;
   }, [injector]);
+
+  // Get input variables for the selected element
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!element || !elementVariablesRef.current) {
       return;
     }
     elementVariablesRef.current.getVariablesForElement(element).then(variables => setVariablesForElement(variables));
   }, [element]);
+
+  // Subscribe to `variables.changed` event fired by the Variables Resolver
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!elementVariablesRef.current) {
       return;
@@ -1357,6 +1440,8 @@ function TaskTesting({
       }
     };
   }, [element]);
+
+  // Listen for changes in the config from the modeler
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (!elementConfigRef.current) {
       return;
@@ -1380,61 +1465,55 @@ function TaskTesting({
       }
     };
   }, [element, onConfigChanged, setAllOutputs, setInput, setOutput]);
+
+  // Subscribe to task execution events
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (!taskExecutionRef.current) {
-      return;
-    }
-    const handleTaskExecutionStart = () => {
-      setIsTaskExecuting(true);
-      if (!element || !elementConfigRef.current) {
-        return;
-      }
-      elementConfigRef.current.setOutputConfigForElement(element, null);
-    };
-    taskExecutionRef.current.on('taskExecution.start', handleTaskExecutionStart);
-    const handleTaskExecutionError = ({
-      message,
-      response
-    }) => {
-      setIsTaskExecuting(false);
-      if (!element || !elementConfigRef.current) {
-        return;
-      }
-      elementConfigRef.current.setOutputConfigForElement(element, {
+    var _taskExecutionRef$cur, _taskExecutionRef$cur2, _taskExecutionRef$cur3, _taskExecutionRef$cur4;
+    /** @param {import('../../types').TaskExecutionError} error */
+    const handleError = error => {
+      var _elementConfigRef$cur;
+      elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur = elementConfigRef.current) === null || _elementConfigRef$cur === void 0 || _elementConfigRef$cur.setOutputConfigForElement(element, {
         success: false,
-        error: {
-          message,
-          response
-        }
+        error
       });
     };
-    taskExecutionRef.current.on('taskExecution.error', handleTaskExecutionError);
-    const handleTaskExecutionCancelled = () => {
-      setIsTaskExecuting(false);
-    };
-    taskExecutionRef.current.on('taskExecution.cancelled', handleTaskExecutionCancelled);
-    const handleTaskExecutionEnd = ({
-      incident,
-      success,
-      variables
-    }) => {
-      setIsTaskExecuting(false);
-      if (!element || !elementConfigRef.current) {
-        return;
+
+    /**
+     * @param {import('../../types').TaskExecutionStatus} status
+     * @param {string} [processInstanceKey]
+     */
+    const handleStatusChange = (status, processInstanceKey) => {
+      setTaskExecutionStatus(status);
+      if (processInstanceKey) {
+        var _elementConfigRef$cur2;
+        const operateUrl = operateBaseUrl ? `${operateBaseUrl}/processes/${processInstanceKey}` : null;
+        elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur2 = elementConfigRef.current) === null || _elementConfigRef$cur2 === void 0 || _elementConfigRef$cur2.setOutputConfigForElement(element, {
+          operateUrl
+        });
       }
-      elementConfigRef.current.setOutputConfigForElement(element, {
-        success,
-        incident,
-        variables
+    };
+
+    /** @param {import('../../types').ElementOutput} output */
+    const handleFinished = output => {
+      var _elementConfigRef$cur3, _elementConfigRef$cur4;
+      const {
+        operateUrl
+      } = (elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur3 = elementConfigRef.current) === null || _elementConfigRef$cur3 === void 0 ? void 0 : _elementConfigRef$cur3.getOutputConfigForElement(element)) || {};
+      elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur4 = elementConfigRef.current) === null || _elementConfigRef$cur4 === void 0 || _elementConfigRef$cur4.setOutputConfigForElement(element, {
+        ...output,
+        operateUrl
       });
     };
-    taskExecutionRef.current.on('taskExecution.end', handleTaskExecutionEnd);
+    taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur = taskExecutionRef.current) === null || _taskExecutionRef$cur === void 0 || _taskExecutionRef$cur.on('taskExecution.finished', handleFinished);
+    taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur2 = taskExecutionRef.current) === null || _taskExecutionRef$cur2 === void 0 || _taskExecutionRef$cur2.on('taskExecution.status.changed', handleStatusChange);
+    taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur3 = taskExecutionRef.current) === null || _taskExecutionRef$cur3 === void 0 || _taskExecutionRef$cur3.on('taskExecution.error', handleError);
+    taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur4 = taskExecutionRef.current) === null || _taskExecutionRef$cur4 === void 0 || _taskExecutionRef$cur4.on('taskExecution.interrupted', () => onTaskExecutionInterrupted());
     return () => {
       if (taskExecutionRef.current) {
-        taskExecutionRef.current.off('taskExecution.start', handleTaskExecutionStart);
-        taskExecutionRef.current.off('taskExecution.error', handleTaskExecutionError);
-        taskExecutionRef.current.off('taskExecution.cancelled', handleTaskExecutionCancelled);
-        taskExecutionRef.current.off('taskExecution.end', handleTaskExecutionEnd);
+        taskExecutionRef.current.off('taskExecution.finished', handleFinished);
+        taskExecutionRef.current.off('taskExecution.status.changed', handleStatusChange);
+        taskExecutionRef.current.off('taskExecution.error', handleError);
+        taskExecutionRef.current.off('taskExecution.interrupted', () => onTaskExecutionInterrupted());
       }
     };
   }, [element]);
@@ -1446,10 +1525,13 @@ function TaskTesting({
     }
   }, [config]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
-    if (element && elementConfigRef.current) {
-      elementConfigRef.current.getInputConfigForElement(element).then(setInput);
-      setOutput(elementConfigRef.current.getOutputConfigForElement(element));
+    var _elementConfigRef$cur5, _elementConfigRef$cur6;
+    if (!element) {
+      setInput(undefined);
+      return;
     }
+    elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur5 = elementConfigRef.current) === null || _elementConfigRef$cur5 === void 0 || _elementConfigRef$cur5.getInputConfigForElement(element).then(setInput);
+    setOutput(elementConfigRef === null || elementConfigRef === void 0 || (_elementConfigRef$cur6 = elementConfigRef.current) === null || _elementConfigRef$cur6 === void 0 ? void 0 : _elementConfigRef$cur6.getOutputConfigForElement(element));
   }, [element]);
   const handleSetInput = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(newInput => {
     if (element && elementConfigRef.current) {
@@ -1466,7 +1548,9 @@ function TaskTesting({
       return;
     }
     const inputConfig = await elementConfigRef.current.getInputConfigForElement(element);
+    elementConfigRef.current.setOutputConfigForElement(element, null);
     taskExecutionRef.current.executeTask(element.id, JSON.parse(inputConfig));
+    onTaskExecution();
   };
   const handleCancelTaskExecution = () => {
     if (taskExecutionRef.current) {
@@ -1479,84 +1563,202 @@ function TaskTesting({
     }
   }, [element]);
   if (!config) {
-    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div", {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
       className: "task-testing__container task-testing__container--empty",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
         className: "task-testing__container-no-config",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.InlineLoading, {}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("span", {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.InlineLoading, {}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
           children: "Configuring..."
         })]
       })
     });
   }
   if (!element) {
-    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div", {
+    return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
       className: "task-testing__container task-testing__container--empty",
-      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
         className: "task-testing__container-no-element",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Cursor_1, {}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("span", {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Cursor_1, {}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
           children: NO_ELEMENT_TEXT
         })]
       })
     });
   }
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
+  const showTooltip = !isConnectionConfigured || !!inputError;
+  const tooltipLabel = !isConnectionConfigured ? 'Connection not configured' : inputError;
+  const isTaskExecuting = !!taskExecutionStatus && taskExecutionStatus !== 'idle';
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
     className: "task-testing__container",
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
-      className: "task-testing__container--header",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
-        className: "task-testing__container--header--left",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Chemistry, {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
-          children: ["Test task ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("span", {
-            className: "task-testing__container--header-task-name",
-            children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_9__.getName)(element)
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
+      className: "task-testing__container--left",
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
+        className: "task-testing__container--header",
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
+          className: "task-header",
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+            className: "task-type",
+            children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_10__.getType)(element)
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+            children: (0,_utils_element__WEBPACK_IMPORTED_MODULE_10__.getName)(element)
           })]
-        })]
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div", {
-        className: "task-testing__container--header--right",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tooltip, {
-          className: !isConnectionConfigured || inputError ? 'has-error' : '',
-          label: "Cannot test task",
+        }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Tooltip, {
+          className: classnames__WEBPACK_IMPORTED_MODULE_3___default()({
+            'has-error': showTooltip
+          }),
+          label: tooltipLabel,
           align: "left-start",
-          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
-            kind: isConnectionConfigured && !inputError && !isTaskExecuting ? 'primary' : 'tertiary',
+          children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Button, {
+            className: "btn-execute",
+            kind: "primary",
             size: "sm",
+            renderIcon: isTaskExecuting ? _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.StopFilledAlt : _carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.PlayFilledAlt,
             onClick: isTaskExecuting ? handleCancelTaskExecution : handleExecuteTask,
-            children: [isTaskExecuting && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.InlineLoading, {
-              status: "active"
-            }), isTaskExecuting ? 'Testing...' : 'Test task']
+            children: isTaskExecuting ? 'Cancel' : 'Test task'
           })
-        })
-      })]
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsxs)("div", {
-      className: "task-testing__container--main",
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div", {
-        className: "task-testing__container--main--left",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_Input_Input__WEBPACK_IMPORTED_MODULE_6__["default"], {
-          allOutputs: allOutputs,
-          element: element,
-          input: input,
-          onErrorChange: setInputError,
-          onResetInput: handleResetInput,
-          onSetInput: handleSetInput,
-          variablesForElement: variablesForElement
-        })
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)("div", {
-        className: "task-testing__container--main--right",
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_Output_Output__WEBPACK_IMPORTED_MODULE_7__["default"], {
-          isConnectionConfigured: isConnectionConfigured,
-          onConfigureConnection: onConfigureConnection,
-          isTaskExecuting: isTaskExecuting,
-          output: output,
-          onResetOutput: handleResetOutput
-        })
+        })]
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Input_Input__WEBPACK_IMPORTED_MODULE_7__["default"], {
+        allOutputs: allOutputs,
+        input: input,
+        onErrorChange: setInputError,
+        onResetInput: handleResetInput,
+        onSetInput: handleSetInput,
+        variablesForElement: variablesForElement
       })]
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
+      className: "task-testing__container--right",
+      children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_Output_Output__WEBPACK_IMPORTED_MODULE_8__["default"], {
+        isConnectionConfigured: isConnectionConfigured,
+        configureConnectionBannerTitle: configureConnectionBannerTitle,
+        configureConnectionBannerDescription: configureConnectionBannerDescription,
+        configureConnectionLabel: configureConnectionLabel,
+        onConfigureConnection: onConfigureConnection,
+        isTaskExecuting: isTaskExecuting,
+        output: output,
+        onResetOutput: handleResetOutput,
+        taskExecutionStatus: taskExecutionStatus || 'idle'
+      })
     })]
   });
 }
 
 /***/ }),
 
+/***/ "./lib/components/shared/CodeMirrorTheme.js":
+/*!**************************************************!*\
+  !*** ./lib/components/shared/CodeMirrorTheme.js ***!
+  \**************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   baseTheme: () => (/* binding */ baseTheme),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   highlightTheme: () => (/* binding */ highlightTheme),
+/* harmony export */   syntaxClasses: () => (/* binding */ syntaxClasses)
+/* harmony export */ });
+/* harmony import */ var _codemirror_language__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @codemirror/language */ "./node_modules/@codemirror/language/dist/index.js");
+/* harmony import */ var _codemirror_view__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @codemirror/view */ "./node_modules/@codemirror/view/dist/index.js");
+/* harmony import */ var _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @lezer/highlight */ "./node_modules/@lezer/highlight/dist/index.js");
+
+
+
+const baseTheme = _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.theme({
+  '&': {
+    height: '100%',
+    width: '100%'
+  },
+  '.cm-scroller': {
+    overflow: 'auto'
+  },
+  '& .cm-content': {
+    padding: '0px'
+  },
+  '& .cm-line': {
+    padding: '0px'
+  },
+  '&.cm-editor.cm-focused': {
+    outline: 'none'
+  },
+  '& .cm-completionInfo': {
+    whiteSpace: 'pre-wrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  },
+  '&.cm-editor': {
+    height: '100%'
+  },
+  // Don't wrap whitespace for custom HTML
+  '& .cm-completionInfo > *': {
+    whiteSpace: 'normal'
+  },
+  '& .cm-completionInfo ul': {
+    margin: 0,
+    paddingLeft: '15px'
+  },
+  '& .cm-completionInfo pre': {
+    marginBottom: 0,
+    whiteSpace: 'pre-wrap'
+  },
+  '& .cm-completionInfo p': {
+    marginTop: 0
+  },
+  '& .cm-completionInfo p:not(:last-of-type)': {
+    marginBottom: 0
+  }
+});
+const highlightTheme = _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.baseTheme({
+  '& .variableName': {
+    color: '#10f'
+  },
+  '& .number': {
+    color: '#164'
+  },
+  '& .string': {
+    color: '#a11'
+  },
+  '& .bool': {
+    color: '#219'
+  },
+  '& .function': {
+    color: '#aa3731',
+    fontWeight: 'bold'
+  },
+  '& .control': {
+    color: '#708'
+  }
+});
+const syntaxClasses = (0,_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.syntaxHighlighting)(_codemirror_language__WEBPACK_IMPORTED_MODULE_2__.HighlightStyle.define([{
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName,
+  class: 'variableName'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.name,
+  class: 'variableName'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.number,
+  class: 'number'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.string,
+  class: 'string'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.bool,
+  class: 'bool'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.function(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName),
+  class: 'function'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.function(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.special(_lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.variableName)),
+  class: 'function'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.controlKeyword,
+  class: 'control'
+}, {
+  tag: _lezer_highlight__WEBPACK_IMPORTED_MODULE_0__.tags.operatorKeyword,
+  class: 'control'
+}]));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ([baseTheme, highlightTheme, syntaxClasses]);
+
+/***/ }),
+
 /***/ "./lib/hooks/useSelectedElement.js":
 /*!*****************************************!*\
   !*** ./lib/hooks/useSelectedElement.js ***!
@@ -1840,7 +2042,8 @@ function hasPropertyAfter(state, pos) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   getName: () => (/* binding */ getName)
+/* harmony export */   getName: () => (/* binding */ getName),
+/* harmony export */   getType: () => (/* binding */ getType)
 /* harmony export */ });
 /* harmony import */ var bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bpmn-js/lib/util/ModelUtil */ "./node_modules/bpmn-js/lib/util/ModelUtil.js");
 
@@ -1861,6 +2064,40 @@ function getName(element) {
   return name;
 }
 
+/**
+ * Get the name of a BPMN element.
+ *
+ * @param {import('../types').Element} element
+ *
+ * @returns {string}
+ */
+function getType(element) {
+  const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.getBusinessObject)(element);
+  const {
+    $type: type
+  } = businessObject;
+  switch (type) {
+    case 'bpmn:Task':
+      return 'Task';
+    case 'bpmn:UserTask':
+      return 'User Task';
+    case 'bpmn:ScriptTask':
+      return 'Script Task';
+    case 'bpmn:ServiceTask':
+      return 'Service Task';
+    case 'bpmn:BusinessRuleTask':
+      return 'Business Rule Task';
+    case 'bpmn:SendTask':
+      return 'Send Task';
+    case 'bpmn:ManualTask':
+      return 'Manual Task';
+    case 'bpmn:ReceiveTask':
+      return 'Receive Task';
+    default:
+      return 'Task';
+  }
+}
+
 /***/ }),
 
 /***/ "./node_modules/@bpmn-io/extract-process-variables/zeebe/index.mjs":
@@ -32324,7 +32561,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 // Module
 ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   height: 100%;
   width: 100%;
   padding: 10px;
@@ -32342,47 +32579,47 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
   inline-size: initial;
   min-block-size: initial;
 }
-.task-testing__container .task-testing__container--header {
+.task-testing__container .task-testing__container--left {
+  width: 50%;
   display: flex;
-  flex-direction: row;
-  gap: 12px;
+  flex-direction: column;
+  border-right: 1px solid #E0E0E0;
+  padding-right: 6px;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--left,
-.task-testing__container .task-testing__container--header .task-testing__container--header--right {
-  display: flex;
-  align-items: center;
+.task-testing__container .task-testing__container--right {
   width: 50%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 6px;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--left {
+.task-testing__container .task-testing__container--header {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 5px;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+}
+.task-testing__container .task-testing__container--header .task-header {
+  display: flex;
+  gap: 6px;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--left .task-testing__container--header-task-name {
+.task-testing__container .task-testing__container--header .task-header .task-type {
   font-weight: bold;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--right {
-  justify-content: flex-end;
+.task-testing__container .task-testing__container--header .btn-execute {
+  width: 138px;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--right .cds--popover-container:not(.has-error) .cds--popover {
+.task-testing__container .task-testing__container--header .cds--popover-container:not(.has-error) .cds--popover {
   display: none;
 }
-.task-testing__container .task-testing__container--header .task-testing__container--header--right .cds--btn .cds--inline-loading {
+.task-testing__container .task-testing__container--header .cds--tooltip-content {
+  padding: 12px;
+}
+.task-testing__container .task-testing__container--header .cds--btn .cds--inline-loading {
   inline-size: initial;
   min-block-size: initial;
 }
-.task-testing__container .task-testing__container--main {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  flex-grow: 1;
-}
-.task-testing__container .task-testing__container--main .task-testing__container--main--left,
-.task-testing__container .task-testing__container--main .task-testing__container--main--right {
-  display: flex;
-  flex-direction: column;
-  width: 50%;
-}
 .task-testing__container .input {
   flex-grow: 1;
   display: flex;
@@ -32394,6 +32631,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
   align-items: center;
   gap: 5px;
 }
+.task-testing__container .input .input__header--title {
+  color: #525252;
+}
 .task-testing__container .output {
   flex-grow: 1;
   display: flex;
@@ -32403,126 +32643,156 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
 .task-testing__container .output .output__header {
   display: flex;
   align-items: center;
-  gap: 5px;
+  height: 32px;
+  width: 100%;
+}
+.task-testing__container .output .output__header--title {
+  color: #525252;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.task-testing__container .output .output__header--title svg.output__status-icon--ready {
+  fill: #0043ce;
+}
+.task-testing__container .output .output__header--title svg.output__status-icon--success {
+  fill: #24a148;
+}
+.task-testing__container .output .output__header--title svg.output__status-icon--error {
+  fill: #da1e28;
+}
+.task-testing__container .output .output__header--title .cds--inline-loading {
+  inline-size: 16px;
+  min-block-size: initial;
+}
+.task-testing__container .output .output__header--button-operate {
+  margin-left: auto;
 }
 .task-testing__container .output .output__body {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
   position: relative;
 }
-.task-testing__container .output .output__body .output__body--inner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
+.task-testing__container .output .output__body .cds--tabs {
+  --cds-layout-size-height-local: 32px;
+}
+.task-testing__container .output .output__body .cds--tab-content {
+  padding: 0;
+  height: calc(100% - 20px);
+}
+.task-testing__container .output .output__body .cds--tab-content:not([hidden]) {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
 }
-.task-testing__container .output .output__state {
+.task-testing__container .output .output__body .cds--popover {
+  display: none;
+}
+.task-testing__container .output .output__error {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 12px;
   padding: 12px;
-  border: 1px solid transparent;
+  margin-bottom: 12px;
+  border: 1px solid #da1e28;
   border-left-width: 3px;
+  background-color: #fff1f1;
 }
-.task-testing__container .output .output__state .output__state-content {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex-grow: 1;
-  margin-top: 1px;
-}
-.task-testing__container .output .output__state .output__state-content .output__state-title {
+.task-testing__container .output .output__error .output__error--title {
   display: flex;
-  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
   font-weight: bold;
 }
-.task-testing__container .output .output__state .output__state-content .output__state-title .cds--link {
-  cursor: pointer;
-}
-.task-testing__container .output .output__state.output__state--error {
-  border-color: #da1e28;
-  background-color: #fff1f1;
-}
-.task-testing__container .output .output__state.output__state--error .output__state-icon svg {
+.task-testing__container .output .output__error .output__error--title svg {
   fill: #da1e28;
 }
-.task-testing__container .output .output__variables.output__variables--no-results .cds--snippet-container {
-  min-height: 0 !important;
-  outline: none;
+.task-testing__container .output .output__error .output__error--title .output__error--action {
+  margin-left: auto;
 }
-.task-testing__container .output .output__variables .output__variables--title {
-  margin-bottom: 12px;
+.task-testing__container .output .output__variables--empty {
+  height: 32px;
+  display: flex;
+  align-items: center;
+  color: #525252;
+}
+.task-testing__container .output .output__variables--empty-action {
+  font-weight: bold;
 }
-.task-testing__container .output .output__variables .cds--snippet-container {
+.task-testing__container .output .cds--snippet-container {
   width: 100%;
 }
-.task-testing__container .output .output__variables .cds--snippet {
+.task-testing__container .output .cds--snippet {
   max-inline-size: 100%;
+  height: 100%;
 }
 .task-testing__container .output code {
   font-size: 14px;
 }
 
-.input__editor {
+.code__editor {
   position: relative;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
-.input__editor.input__editor--error .input__editor-codemirror .input__editor-codemirror-inner .cm-editor {
+.code__editor.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {
   outline: 1px solid #da1e28;
   outline-offset: -1px;
-  background-color: #fff1f1;
 }
-.input__editor .input__editor-codemirror {
+.code__editor .code__editor-codemirror {
   position: relative;
   flex-grow: 1;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .cm-editor {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {
   height: 100%;
   background-color: var(--cds-layer, #f4f4f4);
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .cm-scroller {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .cm-scroller {
   overflow-y: auto !important;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .cm-content {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .cm-content {
   padding: 15px;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .cm-focused {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .cm-focused {
   outline: none;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .cm-tooltip {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .cm-tooltip {
   font-size: 14px;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .info {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .info {
   padding: 5px;
   font-family: monospace;
   font-size: 12px;
   max-width: 300px;
   word-wrap: break-word;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .info span {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .info span {
   font-style: italic;
 }
-.input__editor .input__editor-codemirror .input__editor-codemirror-inner .info pre {
+.code__editor .code__editor-codemirror .code__editor-codemirror-inner .info pre {
   margin-top: 5px;
 }
-.input__editor .input__editor-error {
+.code__editor .code__editor-error {
   color: #da1e28;
   font-size: 13px;
   margin-top: 5px;
-}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,aAAA;EACA,mBAAA;EACA,SAAA;AAFJ;AAII;;EAEE,aAAA;EACA,mBAAA;EACA,UAAA;AAFN;AAKI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAHN;AAKM;EACE,iBAAA;AAHR;AAOI;EACE,yBAAA;AALN;AAOM;EACE,aAAA;AALR;AAQM;EACE,oBAAA;EACA,uBAAA;AANR;AAWE;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,YAAA;AATJ;AAWI;;EAEE,aAAA;EACA,sBAAA;EACA,UAAA;AATN;AAaE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAXJ;AAaI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAXN;AAeE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAbJ;AAeI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAbN;AAgBI;EACE,YAAA;EACA,kBAAA;AAdN;AAgBM;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;AAdR;AAkBI;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,aAAA;EACA,6BAAA;EACA,sBAAA;AAhBN;AAkBM;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,YAAA;EACA,eAAA;AAhBR;AAkBQ;EACE,aAAA;EACA,8BAAA;EACA,iBAAA;AAhBV;AAkBU;EACE,eAAA;AAhBZ;AAqBM;EACE,qBAAA;EACA,yBAAA;AAnBR;AAqBQ;EACE,aAAA;AAnBV;AAyBM;EACE,wBAAA;EACA,aAAA;AAvBR;AA0BM;EACE,mBAAA;AAxBR;AA2BM;EACE,WAAA;AAzBR;AA4BM;EACE,qBAAA;AA1BR;AA8BI;EACE,eAAA;AA5BN;;AAiCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AA9BF;AAgCE;EACE,0BAAA;EACA,oBAAA;EACA,yBAAA;AA9BJ;AAiCE;EACE,kBAAA;EACA,YAAA;AA/BJ;AAiCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AA/BN;AAiCM;EACE,YAAA;EACA,2CAAA;AA/BR;AAkCM;EACE,2BAAA;AAhCR;AAmCM;EACE,aAAA;AAjCR;AAoCM;EACE,aAAA;AAlCR;AAqCM;EACE,eAAA;AAnCR;AAsCM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AApCR;AAsCQ;EACE,kBAAA;AApCV;AAuCQ;EACE,eAAA;AArCV;AA2CE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAzCJ","sourcesContent":[".task-testing__container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  padding: 10px;\n  font-size: 14px;\n\n  &.task-testing__container--empty {\n    .task-testing__container-no-config,\n    .task-testing__container-no-element {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 32px;\n\n      .cds--inline-loading {\n        inline-size: initial;\n        min-block-size: initial;\n      }\n    }\n  }\n\n  .task-testing__container--header {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n\n    .task-testing__container--header--left,\n    .task-testing__container--header--right {\n      display: flex;\n      align-items: center;\n      width: 50%;\n    }\n\n    .task-testing__container--header--left {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n\n      .task-testing__container--header-task-name {\n        font-weight: bold;\n      }\n    }\n\n    .task-testing__container--header--right {\n      justify-content: flex-end;\n\n      .cds--popover-container:not(.has-error) .cds--popover {\n        display: none;\n      }\n\n      .cds--btn .cds--inline-loading {\n        inline-size: initial;\n        min-block-size: initial;\n      }\n    } \n  }\n\n  .task-testing__container--main {\n    display: flex;\n    flex-direction: row;\n    gap: 12px;\n    flex-grow: 1;\n\n    .task-testing__container--main--left,\n    .task-testing__container--main--right {\n      display: flex;\n      flex-direction: column;\n      width: 50%;\n    }\n  }\n\n  .input {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .input__header {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n  }\n\n  .output {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .output__header {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .output__body {\n      flex-grow: 1;\n      position: relative;\n\n      .output__body--inner {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        overflow: auto;\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n    }\n\n    .output__state {\n      display: flex;\n      flex-direction: row;\n      gap: 12px;\n      padding: 12px;\n      border: 1px solid transparent;\n      border-left-width: 3px;\n\n      .output__state-content {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        flex-grow: 1;\n        margin-top: 1px;\n\n        .output__state-title {\n          display: flex;\n          justify-content: space-between;\n          font-weight: bold;\n\n          .cds--link {\n            cursor: pointer;\n          }\n        }\n      }\n\n      &.output__state--error {\n        border-color: #da1e28;\n        background-color: #fff1f1;\n\n        .output__state-icon svg {\n          fill: #da1e28;\n        }\n      }\n    }\n\n    .output__variables {\n      &.output__variables--no-results .cds--snippet-container {\n        min-height: 0 !important;\n        outline: none;\n      }\n\n      .output__variables--title {\n        margin-bottom: 12px;\n      }\n\n      .cds--snippet-container {\n        width: 100%;\n      }\n\n      .cds--snippet {\n        max-inline-size: 100%\n      }\n    }\n\n    code {\n      font-size: 14px;\n    }\n  }\n}\n\n.input__editor {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.input__editor--error .input__editor-codemirror .input__editor-codemirror-inner .cm-editor {\n    outline: 1px solid #da1e28;\n    outline-offset: -1px;\n    background-color: #fff1f1;\n  }\n\n  .input__editor-codemirror {\n    position: relative;\n    flex-grow: 1;\n\n    .input__editor-codemirror-inner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n\n      .cm-editor {\n        height: 100%;\n        background-color: var(--cds-layer, #f4f4f4);\n      }\n\n      .cm-scroller {\n        overflow-y: auto !important;\n      }\n\n      .cm-content {\n        padding: 15px;\n      }\n\n      .cm-focused {\n        outline: none;\n      }\n\n      .cm-tooltip {\n        font-size: 14px;\n      }\n\n      .info {\n        padding: 5px;\n        font-family: monospace;\n        font-size: 12px;\n        max-width: 300px;\n        word-wrap: break-word;\n\n        span {\n          font-style: italic;\n        }\n\n        pre {\n          margin-top: 5px;\n        }\n      }\n    }\n  }\n\n  .input__editor-error {\n    color: #da1e28;\n    font-size: 13px;\n    margin-top: 5px;\n  }\n}"],"sourceRoot":""}]);
+}
+.code__editor .code__editor-copy-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+}
+.code__editor .code__editor-copy-button svg {
+  fill: #525252;
+}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,+BAAA;EACA,kBAAA;AAFJ;AAKE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;AAHJ;AAME;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,SAAA;EACA,WAAA;AAJJ;AAMI;EACE,aAAA;EACA,QAAA;AAJN;AAMM;EACE,iBAAA;AAJR;AAQI;EACE,YAAA;AANN;AASI;EACE,aAAA;AAPN;AAUI;EACE,aAAA;AARN;AAWI;EACE,oBAAA;EACA,uBAAA;AATN;AAaE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAXJ;AAaI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAXN;AAcI;EACE,cAAA;AAZN;AAgBE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAdJ;AAgBI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAdN;AAiBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAfN;AAiBM;EACE,aAAA;AAfR;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,aAAA;AAjBR;AAoBM;EACE,iBAAA;EACA,uBAAA;AAlBR;AAsBI;EACE,iBAAA;AApBN;AAuBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AArBN;AAuBM;EACE,oCAAA;AArBR;AAwBM;EACE,UAAA;EACA,yBAAA;AAtBR;AAyBM;EACE,aAAA;AAvBR;AA2BM;EACE,aAAA;AAzBR;AA6BI;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA3BN;AA6BM;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;AA3BR;AA6BQ;EACE,aAAA;AA3BV;AA8BQ;EACE,iBAAA;AA5BV;AAiCI;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AA/BN;AAkCI;EACE,iBAAA;AAhCN;AAmCI;EACE,WAAA;AAjCN;AAoCI;EACE,qBAAA;EACA,YAAA;AAlCN;AAqCI;EACE,eAAA;AAnCN;;AAwCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AArCF;AAuCE;EACE,0BAAA;EACA,oBAAA;AArCJ;AAwCE;EACE,kBAAA;EACA,YAAA;AAtCJ;AAwCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAtCN;AAwCM;EACE,YAAA;EACA,2CAAA;AAtCR;AAyCM;EACE,2BAAA;AAvCR;AA0CM;EACE,aAAA;AAxCR;AA2CM;EACE,aAAA;AAzCR;AA4CM;EACE,eAAA;AA1CR;AA6CM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AA3CR;AA6CQ;EACE,kBAAA;AA3CV;AA8CQ;EACE,eAAA;AA5CV;AAkDE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAhDJ;AAmDE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;AAjDJ;AAmDI;EACE,aAAA;AAjDN","sourcesContent":[".task-testing__container {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n  padding: 10px;\n  font-size: 14px;\n\n  &.task-testing__container--empty {\n    .task-testing__container-no-config,\n    .task-testing__container-no-element {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 32px;\n\n      .cds--inline-loading {\n        inline-size: initial;\n        min-block-size: initial;\n      }\n    }\n  }\n\n  .task-testing__container--left {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #E0E0E0;\n    padding-right: 6px;\n  }\n\n  .task-testing__container--right {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    padding-left: 6px;\n  }\n\n  .task-testing__container--header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    width: 100%;\n\n    .task-header {\n      display: flex;\n      gap: 6px;\n      \n      .task-type {\n        font-weight: bold;\n      }\n    }\n\n    .btn-execute {\n      width: 138px;\n    }\n\n    .cds--popover-container:not(.has-error) .cds--popover {\n      display: none;\n    }\n\n    .cds--tooltip-content {\n      padding: 12px;\n    }\n\n    .cds--btn .cds--inline-loading {\n      inline-size: initial;\n      min-block-size: initial;\n    }\n  }\n\n  .input {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .input__header {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .input__header--title {\n      color: #525252;\n    }\n  }\n\n  .output {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .output__header {\n      display: flex;\n      align-items: center;\n      height: 32px;\n      width: 100%;\n    }\n\n    .output__header--title {\n      color: #525252;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      svg.output__status-icon--ready {\n        fill: #0043ce;\n      }\n\n      svg.output__status-icon--success {\n        fill: #24a148;\n      }\n\n      svg.output__status-icon--error {\n        fill: #da1e28;\n      }\n\n      .cds--inline-loading {\n        inline-size: 16px;\n        min-block-size: initial;\n      }\n    }\n\n    .output__header--button-operate {\n      margin-left: auto;\n    }\n\n    .output__body {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 1;\n      position: relative;\n\n      .cds--tabs {\n        --cds-layout-size-height-local: 32px;\n      }\n      \n      .cds--tab-content {\n        padding: 0;\n        height: calc(100% - 20px);\n      }\n\n      .cds--tab-content:not([hidden]) {\n        display: flex;\n      }\n\n      // Tooltip on Carbon Button with absolute position is broken.\n      .cds--popover {\n        display: none;\n      }\n    }\n\n    .output__error {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 12px;\n      margin-bottom: 12px;\n      border: 1px solid #da1e28;\n      border-left-width: 3px;\n      background-color: #fff1f1;\n\n      .output__error--title {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-weight: bold;\n\n        svg {\n          fill: #da1e28;\n        }\n\n        .output__error--action {\n          margin-left: auto;\n        }\n      }\n    }\n\n    .output__variables--empty {\n      height: 32px;\n      display: flex;\n      align-items: center;\n      color: #525252;\n    }\n\n    .output__variables--empty-action {\n      font-weight: bold;\n    }\n\n    .cds--snippet-container {\n      width: 100%;\n    }\n\n    .cds--snippet {\n      max-inline-size: 100%;\n      height: 100%;\n    }\n\n    code {\n      font-size: 14px;\n    }\n  }\n}\n\n.code__editor {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {\n    outline: 1px solid #da1e28;\n    outline-offset: -1px;\n  }\n\n  .code__editor-codemirror {\n    position: relative;\n    flex-grow: 1;\n\n    .code__editor-codemirror-inner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n\n      .cm-editor {\n        height: 100%;\n        background-color: var(--cds-layer, #f4f4f4);\n      }\n\n      .cm-scroller {\n        overflow-y: auto !important;\n      }\n\n      .cm-content {\n        padding: 15px;\n      }\n\n      .cm-focused {\n        outline: none;\n      }\n\n      .cm-tooltip {\n        font-size: 14px;\n      }\n\n      .info {\n        padding: 5px;\n        font-family: monospace;\n        font-size: 12px;\n        max-width: 300px;\n        word-wrap: break-word;\n\n        span {\n          font-style: italic;\n        }\n\n        pre {\n          margin-top: 5px;\n        }\n      }\n    }\n  }\n\n  .code__editor-error {\n    color: #da1e28;\n    font-size: 13px;\n    margin-top: 5px;\n  }\n\n  .code__editor-copy-button {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 10;\n\n    svg {\n      fill: #525252;\n    }\n  }\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);