feat: mark running workflow

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.27.3",
+  "version": "1.27.0",
   "description": "An extension for automating your browser by connecting blocks",
   "repository": {
     "type": "git",

src/components/block/BlockBase.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="block-base relative w-48" @dblclick.stop="$emit('edit')">
+  <div
+    class="block-base relative w-48"
+    :data-block-id="blockId"
+    @dblclick.stop="$emit('edit')"
+  >
     <div
       class="block-menu-container absolute top-0 hidden w-full"
       style="transform: translateY(-100%)"

src/components/newtab/workflow/editor/EditorDebugging.vue

@@ -89,10 +89,11 @@
   </ui-card>
 </template>
 <script setup>
-import { defineAsyncComponent, computed } from 'vue';
+import { defineAsyncComponent, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import dayjs from '@/lib/dayjs';
 import { tasks } from '@/utils/shared';
+import { debounce } from '@/utils/helper';
 import { sendMessage } from '@/utils/message';
 
 const SharedCodemirror = defineAsyncComponent(() =>
@@ -111,6 +112,8 @@ const props = defineProps({
 });
 defineEmits(['goToBlock']);
 
+let currentRunningEls = [];
+
 const { t, te } = useI18n();
 
 const workflowState = computed(() => props.states[0]);
@@ -160,10 +163,36 @@ function nextBlock() {
     'background'
   );
 }
+
+watch(
+  workflowState,
+  debounce(() => {
+    currentRunningEls.forEach((element) => {
+      element.classList.remove('current-running');
+    });
+
+    if (!workflowState.value?.state?.currentBlock) return;
+
+    const selectors = workflowState.value.state.currentBlock
+      .map((block) => `.vue-flow [data-block-id="${block.id}"]`)
+      .join(',');
+    const elements = document.querySelectorAll(selectors);
+
+    currentRunningEls = elements;
+    elements.forEach((el) => {
+      el.classList.add('current-running');
+    });
+  }, 200),
+  { immediate: true }
+);
 </script>
 <style>
 .breakpoint-data .cm-editor {
   font-size: 13px;
   padding-bottom: 0;
 }
+
+.current-running {
+  @apply ring;
+}
 </style>