Merge pull request '[UI] Expose procedures as entities' (#428) from 341/procedure-entities-ui into master

Reviewed-on: platypush/platypush#428

platypush/backend/http/webapp/src/App.vue

@@ -49,11 +49,14 @@ export default {
   data() {
     return {
       config: {},
+      configDir: null,
+      configFile: null,
       userAuthenticated: false,
       connected: false,
       pwaInstallEvent: null,
       initialized: false,
       initError: null,
+      stackedModals: 0,
     }
   },
 
@@ -81,11 +84,15 @@ export default {
 
   methods: {
     onNotification(notification) {
-      this.$refs.notifications.create(notification)
+      this.$refs.notifications?.create(notification)
     },
 
     async initConfig() {
-      this.config = await this.request('config.get', {}, 60000, false)
+      this.config = await this.request('config.get', {}, 60000, false);
+      [this.configDir, this.configFile] = await Promise.all([
+        this.request('config.get_config_dir'),
+        this.request('config.get_config_file'),
+      ])
       this.userAuthenticated = true
     },
 
@@ -94,7 +101,15 @@ export default {
         this.pwaInstallEvent.prompt()
 
       this.$refs.pwaDialog.close()
-    }
+    },
+
+    onModalClose() {
+      this.stackedModals = Math.max(0, this.stackedModals - 1)
+    },
+
+    onModalOpen() {
+      this.stackedModals++
+    },
   },
 
   async created() {
@@ -130,6 +145,8 @@ export default {
     bus.onNotification(this.onNotification)
     bus.on('connect', () => this.connected = true)
     bus.on('disconnect', () => this.connected = false)
+    bus.on('modal-open', this.onModalOpen)
+    bus.on('modal-close', this.onModalClose)
   },
 }
 </script>

platypush/backend/http/webapp/src/assets/icons.json

@@ -89,6 +89,9 @@
   "ping": {
     "class": "fas fa-server"
   },
+  "procedures": {
+    "class": "fas fa-gears"
+  },
   "torrent": {
     "class": "fa fa-magnet"
   },

platypush/backend/http/webapp/src/components/Action/ActionArgs.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="args-body">
+  <div class="args-body" @keydown="onKeyDown">
     <div class="args-list"
          v-if="Object.keys(action.args).length || action.supportsExtraArgs">
       <!-- Supported action arguments -->
       <div class="arg" :key="name" v-for="name in Object.keys(action.args)">
         <label>
-          <input type="text"
+          <ContextAutocomplete :value="action.args[name].value"
-                 class="action-arg-value"
-                 :class="{required: action.args[name].required}"
                                :disabled="running"
+                               :items="contextAutocompleteItems"
                                :placeholder="name"
-                 :value="action.args[name].value"
+                               :quote="true"
+                               :select-on-tab="false"
                                @input="onArgEdit(name, $event)"
-                 @focus="onSelect(name)">
+                               @blur="onSelect(name)"
+                               @focus="onSelect(name)" />
           <span class="required-flag" v-if="action.args[name].required">*</span>
         </label>
 
@@ -36,12 +37,13 @@
                    @input="onExtraArgNameEdit(i, $event.target.value)">
           </label>
           <label class="col-6">
-            <input type="text"
+            <ContextAutocomplete :value="arg.value"
-                   class="action-extra-arg-value"
-                   placeholder="Value"
                                  :disabled="running"
-                   :value="arg.value"
+                                 :items="contextAutocompleteItems"
-                   @input="onExtraArgValueEdit(i, $event.target.value)">
+                                 :quote="true"
+                                 :select-on-tab="false"
+                                 placeholder="Value"
+                                 @input="onExtraArgValueEdit(i, $event.detail)" />
           </label>
           <label class="col-1 buttons">
             <button type="button" class="action-extra-arg-del" title="Remove argument" @click="$emit('remove', i)">
@@ -68,18 +70,26 @@
 
 <script>
 import Argdoc from "./Argdoc"
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
 
 export default {
-  name: 'ActionArgs',
+  mixins: [Mixin],
-  components: { Argdoc },
+  components: {
+    Argdoc,
+    ContextAutocomplete,
+  },
+
   emits: [
     'add',
     'arg-edit',
     'extra-arg-name-edit',
     'extra-arg-value-edit',
+    'input',
     'remove',
     'select',
   ],
+
   props: {
     action: Object,
     loading: Boolean,
@@ -88,6 +98,18 @@ export default {
     selectedArgdoc: String,
   },
 
+  computed: {
+    allArgs() {
+      return {
+        ...this.action.args,
+        ...this.action.extraArgs.reduce((acc, arg) => {
+          acc[arg.name] = arg
+          return acc
+        }, {}),
+      }
+    },
+  },
+
   methods: {
     onArgAdd() {
       this.$emit('add')
@@ -103,7 +125,7 @@ export default {
     onArgEdit(name, event) {
       this.$emit('arg-edit', {
         name: name,
-        value: event.target.value,
+        value: event.target?.value || event.detail,
       })
     },
 
@@ -124,6 +146,19 @@ export default {
     onSelect(arg) {
       this.$emit('select', arg)
     },
+
+    onKeyDown(event) {
+      if (event.key === 'Enter' && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey))
+        this.onEnter(event)
+    },
+
+    onEnter(event) {
+      if (!event.target.tagName.match(/input|textarea/i))
+        return
+
+      event.preventDefault()
+      this.$emit('input', this.allArgs)
+    },
   },
 }
 </script>

platypush/backend/http/webapp/src/components/Action/ActionEditor.vue

@@ -77,11 +77,13 @@
             </h2>
 
             <ActionArgs :action="action"
+                        :context="context"
                         :loading="loading"
                         :running="running"
                         :selected-arg="selectedArg"
                         :selected-argdoc="selectedArgdoc"
                         @add="addArg"
+                        @input="emitInput({name: action.name, args: $event})"
                         @select="selectArgdoc"
                         @remove="removeArg"
                         @arg-edit="action.args[$event.name].value = $event.value"
@@ -115,7 +117,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import ActionArgs from "./ActionArgs"
 import ActionDoc from "./ActionDoc"
@@ -142,6 +144,11 @@ export default {
   },
 
   props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
     value: {
       type: Object,
     },
@@ -193,11 +200,26 @@ export default {
     },
 
     autocompleteItems() {
-      if (this.getPluginName(this.action.name) in this.plugins) {
+      let plugin = this.getPluginName(this.action.name)
-        return Object.keys(this.actions).sort()
+      let items = []
+
+      if (plugin in this.plugins) {
+        items = Object.keys(this.actions).sort()
+      } else {
+        plugin = undefined
+        items = Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
       }
 
-      return Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
+      return items.map((item) => {
+        const iconName = plugin || item.replace(/\.+$/, '')
+        return {
+          prefix: `
+            <img src="https://static.platypush.tech/icons/${iconName}-64.png"
+                 style="width: 1em; height: 1em; margin-right: 0.75em"
+                 class="plugin-icon" />`,
+          text: item,
+        }
+      })
     },
 
     actionInput() {
@@ -375,14 +397,14 @@ export default {
       this.actionDocsCache[this.action.name].html = this.selectedDoc
       this.setUrlArgs({action: this.action.name})
 
-      const firstArg = this.$el.querySelector('.action-arg-value')
+      this.$nextTick(() => {
+        const firstArg = this.$el.querySelector('.args-body input[type=text]')
         if (firstArg) {
             firstArg.focus()
         } else {
-        this.$nextTick(() => {
           this.actionInput.focus()
-        })
         }
+      })
 
       this.response = undefined
       this.error = undefined
@@ -547,7 +569,12 @@ export default {
 
   async mounted() {
     await this.refresh()
-    await this.onValueChanged()
+    this.onValueChanged()
+  },
+
+  unmounted() {
+    this.actionDocsCache = {}
+    this.setUrlArgs({action: undefined})
   },
 }
 </script>

platypush/backend/http/webapp/src/components/Action/ActionTile.vue

@@ -1,16 +1,23 @@
 <template>
+  <div class="action-tile-container">
     <div class="action-tile"
-       :class="{drag: draggable && dragging}"
+         :class="{ new: isNew }"
-       :draggable="draggable"
+         ref="tile"
-       @dragstart="onDragStart"
-       @dragend="onDragEnd"
          @click="$refs.actionEditor.show">
-    <div class="action-delete" title="Remove" v-if="withDelete" @click.stop="$emit('delete')">
+      <div class="action-delete"
+           title="Remove"
+           v-if="withDelete && !readOnly"
+           @click.stop="$emit('delete')">
         <i class="icon fas fa-xmark" />
       </div>
 
       <div class="action-name" v-if="name?.length">
+        <span class="icon">
+          <ExtensionIcon :name="name.split('.')[0]" size="1.5em" />
+        </span>
+        <span class="name">
           {{ name }}
+        </span>
       </div>
 
       <div class="new-action" v-else>
@@ -30,26 +37,73 @@
       </div>
     </div>
 
+    <Draggable :element="tile"
+               :disabled="readOnly"
+               :value="value"
+               @drag="$emit('drag', $event)"
+               @dragend="$emit('dragend', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
+    <Droppable :element="tile"
+               :disabled="readOnly"
+               @dragenter="$emit('dragenter', $event)"
+               @dragleave="$emit('dragleave', $event)"
+               @dragover="$emit('dragover', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
     <div class="action-editor-container">
       <Modal ref="actionEditor" title="Edit Action">
-      <ActionEditor :value="value" with-save @input="onInput"
+        <ActionEditor :value="value"
+                      :context="context"
+                      :with-save="!readOnly"
+                      @input="onInput"
                       v-if="this.$refs.actionEditor?.$data?.isVisible" />
       </Modal>
     </div>
+  </div>
 </template>
 
 <script>
 import ActionEditor from "@/components/Action/ActionEditor"
-import Modal from "@/components/Modal";
+import Draggable from "@/components/elements/Draggable"
+import Droppable from "@/components/elements/Droppable"
+import ExtensionIcon from "@/components/elements/ExtensionIcon"
+import Mixin from "./Mixin"
+import Modal from "@/components/Modal"
 
 export default {
-  emits: ['input', 'delete', 'drag', 'drop'],
+  mixins: [Mixin],
+  emits: [
+    'delete',
+    'drag',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
   components: {
     ActionEditor,
+    Draggable,
+    Droppable,
+    ExtensionIcon,
     Modal,
   },
 
   props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+
     value: {
       type: Object,
       default: () => ({
@@ -65,7 +119,7 @@ export default {
       default: false,
     },
 
-    draggable: {
+    readOnly: {
       type: Boolean,
       default: false,
     },
@@ -73,31 +127,26 @@ export default {
 
   data() {
     return {
-      dragging: false,
+      tile: null,
     }
   },
 
   computed: {
+    isNew() {
+      return !this.readOnly && !this.name?.length
+    },
+
     name() {
       return this.value.name || this.value.action
     },
   },
 
   methods: {
-    onDragStart(event) {
-      this.dragging = true
-      event.dataTransfer.dropEffect = 'move'
-      event.dataTransfer.effectAllowed = 'move'
-      event.dataTransfer.setData('application/json', JSON.stringify(this.value))
-      this.$emit('drag')
-    },
-
-    onDragEnd() {
-      this.dragging = false
-      this.$emit('drop')
-    },
-
     onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
       this.$emit('input', {
         ...this.value,
         name: value.action,
@@ -109,12 +158,19 @@ export default {
       this.$refs.actionEditor.close()
     },
   },
+
+  mounted() {
+    this.tile = this.$refs.tile
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import "common";
 
+.action-tile-container {
+  position: relative;
+
   .action-tile {
     min-width: 20em;
     background: $tile-bg;
@@ -133,8 +189,16 @@ export default {
       background: $tile-hover-bg;
     }
 
-  &.drag {
+    &.selected {
-    opacity: 0.5;
+      background: $tile-hover-bg;
+    }
+
+    &.new {
+      background: $tile-bg-3;
+
+      &:hover {
+        background: $tile-hover-bg-3;
+      }
     }
 
     .action-delete {
@@ -146,6 +210,7 @@ export default {
       right: 0;
       opacity: 0.7;
       transition: opacity 0.25s ease-in-out;
+      cursor: pointer;
 
       &:hover {
         opacity: 1;
@@ -153,9 +218,17 @@ export default {
     }
 
     .action-name {
+      display: inline-flex;
       font-size: 1.1em;
       font-weight: bold;
       font-family: monospace;
+      align-items: center;
+
+      .icon {
+        width: 1.5em;
+        height: 1.5em;
+        margin-right: 0.75em;
+      }
     }
 
     .new-action {
@@ -224,4 +297,5 @@ export default {
       }
     }
   }
+}
 </style>

platypush/backend/http/webapp/src/components/Action/ActionsBlock.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="actions-block" :class="{ hover }">
+    <slot name="before" />
+
+    <div class="actions-list-container" ref="actionsListContainer">
+      <button class="collapse-button"
+              @click="collapsed_ = !collapsed_"
+              v-if="isCollapsed">
+        <i class="fas fa-ellipsis-h" />
+      </button>
+
+      <div class="actions-list" :class="actionListClasses">
+        <ActionsList :value="value[key]"
+                     :context="context"
+                     :dragging="dragging"
+                     :has-else="hasElse"
+                     :indent="indent"
+                     :is-inside-loop="isInsideLoop"
+                     :parent="value"
+                     :read-only="readOnly"
+                     @add-else="$emit('add-else')"
+                     @collapse="collapsed_ = !collapsed_"
+                     @drag="$emit('drag', $event)"
+                     @dragend="$emit('dragend', $event); hover = false"
+                     @dragenter="$emit('dragenter', $event)"
+                     @dragleave="$emit('dragleave', $event); hover = false"
+                     @dragover="$emit('dragover', $event)"
+                     @drop="$emit('drop', $event); hover = false"
+                     @input="$emit('input', $event); hover = false" />
+      </div>
+    </div>
+
+    <slot name="after" />
+
+    <Droppable :element="$refs.actionsListContainer"
+               @dragenter="onDragEnter"
+               @dragleave="onDragLeave"
+               @drop="hover = false"
+               v-if="!readOnly" />
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue"
+import Droppable from "@/components/elements/Droppable"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'ActionsBlock',
+  mixins: [Mixin],
+  emits: [
+    'add-else',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    // Handle indirect circular dependency
+    ActionsList: defineAsyncComponent(() => import('./ActionsList')),
+    Droppable,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    isInsideLoop: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    actionListClasses() {
+      return {
+        hidden: this.isCollapsed,
+        fold: this.folding,
+        unfold: this.unfolding,
+      }
+    },
+
+    condition() {
+      return this.getCondition(this.key)
+    },
+
+    isCollapsed() {
+      const transitioning = this.hover || this.folding || this.unfolding
+      if (transitioning) {
+        return false
+      }
+
+      if (this.collapsed_) {
+        return true
+      }
+
+      return this.collapsed
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+  },
+
+  data() {
+    return {
+      collapsed_: false,
+      folding: false,
+      hover: false,
+      hoverTimeout: null,
+      unfolding: false,
+    }
+  },
+
+  watch: {
+    collapsed_(value) {
+      if (value) {
+        this.folding = true
+        setTimeout(() => {
+          this.folding = false
+        }, 300)
+      } else {
+        this.unfolding = true
+        setTimeout(() => {
+          this.unfolding = false
+        }, 300)
+      }
+    },
+  },
+
+  methods: {
+    onDragEnter() {
+      if (this.hoverTimeout) {
+        return
+      }
+
+      this.hoverTimeout = setTimeout(() => {
+        this.hover = true
+      }, 500)
+    },
+
+    onDragLeave() {
+      if (this.hoverTimeout) {
+        clearTimeout(this.hoverTimeout)
+        this.hoverTimeout = null
+      }
+
+      this.hover = false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.actions-block {
+  .collapse-button {
+    width: 100%;
+    background: none !important;
+    margin-left: 1em;
+    font-size: 0.85em;
+    text-align: left;
+    border: none;
+  }
+
+  &.hover {
+    .collapse-button {
+      color: $default-hover-fg;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/ActionsListItem.vue

@@ -0,0 +1,132 @@
+<template>
+  <ListItem class="action"
+            :active="active"
+            :dragging="dragging"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            :value="value"
+            v-on="componentsData.on">
+    <ActionTile :value="value"
+                :context="context"
+                :draggable="!readOnly"
+                :read-only="readOnly"
+                :with-delete="!readOnly"
+                v-on="componentsData.on"
+                @contextmenu="$emit('contextmenu', $event)"
+                @drag.stop="onDragStart"
+                @delete="$emit('delete', $event)" />
+  </ListItem>
+</template>
+
+<script>
+import ActionTile from "@/components/Action/ActionTile"
+import ListItem from "@/components/Action/ListItem"
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  emits: [
+    'contextmenu',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionTile,
+    ListItem,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+    }
+  },
+
+  computed: {
+    componentsData() {
+      return {
+        on: {
+          dragend: this.onDragEnd,
+          dragover: this.onDragOver,
+          drop: this.onDrop,
+          input: this.onInput,
+        }
+      }
+    },
+  },
+
+  methods: {
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      event.stopPropagation()
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDragOver(event) {
+      event.stopPropagation()
+      this.$emit('dragover', event)
+    },
+
+    onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      event.stopPropagation()
+      this.dragging = false
+      this.$emit('drop', event)
+    },
+
+    onInput(value) {
+      this.$emit('input', value)
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/AddTile.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="add-tile-container">
+    <Tile class="add"
+          :draggable="false"
+          :read-only="true"
+          @click="$emit('click')">
+      <div class="add-tile">
+        <span class="icon">
+          <i :class="icon" />
+        </span>
+        <span class="name">
+          {{ title }}
+        </span>
+      </div>
+    </Tile>
+  </div>
+</template>
+
+<script>
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['click'],
+  components: { Tile },
+
+  props: {
+    icon: {
+      type: String,
+      default: 'fas fa-plus',
+    },
+
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.add-tile-container {
+  position: relative;
+  margin: 0.5em 0;
+
+  .icon {
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.75em;
+  }
+
+  .name {
+    font-style: italic;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/BreakTile.vue

@@ -0,0 +1,66 @@
+<template>
+  <ListItem class="break-tile"
+            value="break"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop">
+    <Tile :value="value"
+          class="keyword"
+          :draggable="false"
+          :read-only="readOnly"
+          :with-delete="!readOnly"
+          @click.stop
+          @delete="$emit('delete')">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-hand" />
+        </span>
+        <span class="name">
+          <span class="keyword">break</span>
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['delete'],
+
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: 'break',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/ConditionBlock.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="condition-block">
+    <ActionsBlock :value="value"
+                  :collapsed="collapsed"
+                  :context="context"
+                  :dragging="isDragging"
+                  :has-else="hasElse"
+                  :is-inside-loop="isInsideLoop"
+                  :indent="indent"
+                  :read-only="readOnly"
+                  @input="onActionsChange"
+                  @add-else="$emit('add-else')"
+                  @drag="$emit('drag', $event)"
+                  @dragend="$emit('dragend', $event)"
+                  @dragenter="$emit('dragenter', $event)"
+                  @dragleave="$emit('dragleave', $event)"
+                  @dragover="$emit('dragover', $event)"
+                  @drop="$emit('drop', $event)">
+      <template #before>
+        <ConditionTile :value="condition"
+                       v-bind="conditionTileConf.props"
+                       v-on="conditionTileConf.on"
+                       @input.prevent.stop
+                       :spacer-top="spacerTop"
+                       :spacer-bottom="false"
+                       v-if="condition && !isElse" />
+
+        <ConditionTile value="else"
+                       v-bind="conditionTileConf.props"
+                       v-on="conditionTileConf.on"
+                       :is-else="true"
+                       :spacer-top="spacerTop"
+                       :spacer-bottom="false"
+                       v-else-if="isElse" />
+      </template>
+
+      <template #after>
+        <EndBlockTile value="end if"
+                      icon="fas fa-question"
+                      :active="active"
+                      :spacer-bottom="spacerBottom || dragging_"
+                      @drop="onDrop"
+                      v-if="isElse || !hasElse" />
+      </template>
+    </ActionsBlock>
+  </div>
+</template>
+
+<script>
+import ActionsBlock from "./ActionsBlock"
+import ConditionTile from "./ConditionTile"
+import EndBlockTile from "./EndBlockTile"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'ConditionBlock',
+  mixins: [Mixin],
+  emits: [
+    'add-else',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionsBlock,
+    ConditionTile,
+    EndBlockTile,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    hasElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    isInsideLoop: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      dragging_: false,
+    }
+  },
+
+  computed: {
+    condition() {
+      return this.getCondition(this.key)
+    },
+
+    conditionTileConf() {
+      return {
+        props: {
+          active: this.active,
+          context: this.context,
+          readOnly: this.readOnly,
+          spacerBottom: this.spacerBottom,
+          spacerTop: this.spacerTop,
+        },
+
+        on: {
+          change: this.onConditionChange,
+          delete: (event) => this.$emit('delete', event),
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenterspacer: (event) => this.$emit('dragenter', event),
+          dragleavespacer: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          dragoverspacer: (event) => this.$emit('dragoverspacer', event),
+          drop: this.onDrop,
+        },
+      }
+    },
+
+    isDragging() {
+      return this.dragging_ || this.dragging
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+  },
+
+  methods: {
+    onActionsChange(value) {
+      if (!this.key || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', { [this.key]: value })
+    },
+
+    onConditionChange(condition) {
+      if (!this.key || this.readOnly || !condition?.length) {
+        return
+      }
+
+      condition = `if \${${condition.trim()}}`
+      this.$emit('input', { [condition]: this.value[this.key] })
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging_ = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = false
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.condition-block) {
+  .end-if-container {
+    margin-bottom: 1em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/ConditionTile.vue

@@ -0,0 +1,228 @@
+<template>
+  <ListItem class="condition-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showConditionEditor = true"
+          v-if="!isElse">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-question" />
+        </span>
+        <span class="name">
+          <span class="keyword">if</span> [
+          <span class="code" v-text="value" /> ]
+        </span>
+      </div>
+    </Tile>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="false"
+          :read-only="true"
+          @click="$emit('click')"
+          v-else>
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-question" />
+        </span>
+        <span class="name">
+          <span class="keyword">else</span>
+        </span>
+      </div>
+    </Tile>
+
+    <div class="condition-editor-container" v-if="showConditionEditor && !readOnly">
+      <Modal title="Edit Condition"
+             :visible="true"
+             @close="showConditionEditor = false">
+        <ExpressionEditor :value="value"
+                          :context="context"
+                          ref="conditionEditor"
+                          @input.prevent.stop="onConditionChange"
+                          v-if="showConditionEditor">
+          <div class="header">
+            Condition
+          </div>
+        </ExpressionEditor>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ExpressionEditor from "./ExpressionEditor"
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  mixins: [Mixin],
+  components: {
+    ExpressionEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    isElse: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      showConditionEditor: false,
+    }
+  },
+
+  methods: {
+    onConditionChange(event) {
+      this.showConditionEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const condition = event.target.value?.trim()
+      if (!condition?.length) {
+        return
+      }
+
+      event.target.value = condition
+      this.$emit('change', condition)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.action-tile {
+  .condition {
+    font-style: italic;
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+
+  :deep(.expression-editor) {
+    .header {
+      display: block;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/ContextAutocomplete.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="autocomplete-with-context">
+    <Autocomplete
+      v-bind="autocompleteProps"
+      @blur="onBlur"
+      @focus="onFocus"
+      @input="onInput"
+      @select="onSelect"
+      ref="input" />
+
+    <div class="spacer" ref="spacer" />
+  </div>
+</template>
+
+<script>
+import Autocomplete from "@/components/elements/Autocomplete"
+import AutocompleteProps from "@/mixins/Autocomplete/Props"
+
+export default {
+  emits: ["blur", "focus", "input"],
+  components: { Autocomplete },
+  mixins: [AutocompleteProps],
+
+  props: {
+    quote: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    autocompleteItemsElement() {
+      return this.$refs.input?.$el?.querySelector(".items")
+    },
+
+    autocompleteItemsHeight() {
+      return this.autocompleteItemsElement?.clientHeight || 0
+    },
+
+    autocompleteProps() {
+      return {
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([key]) => key !== "quote")
+        ),
+        items: this.items,
+        value: this.value,
+        inputOnBlur: false,
+        inputOnSelect: false,
+        showAllItems: true,
+        showResultsWhenBlank: true,
+      }
+    },
+
+    textInput() {
+      return this.$refs.input?.$refs?.input
+    },
+  },
+
+  methods: {
+    emitInput(value) {
+      this.$emit(
+        "input",
+        new CustomEvent("input", {
+          detail: value,
+          bubbles: true,
+          cancelable: true,
+        })
+      )
+    },
+
+    isWithinQuote(selection) {
+      let ret = false
+      let value = '' + this.value
+      selection = [...selection]
+
+      while (selection[0] > 0) {
+        if (value[selection[0] - 1] === '$' && value[selection[0]] === '{') {
+          ret = true
+          break
+        }
+
+        selection[0]--
+      }
+
+      if (!ret)
+        return false
+
+      ret = false
+      while (selection[1] < value.length) {
+        if (value[selection[1]] === '}') {
+          ret = true
+          break
+        }
+
+        selection[1]++
+      }
+
+      return ret
+    },
+
+    onBlur(event) {
+      this.$emit("blur", event)
+      this.$refs.spacer.style.height = "0"
+    },
+
+    onFocus(event) {
+      this.$emit("focus", event)
+      setTimeout(() => {
+        this.$refs.spacer.style.height = `${this.autocompleteItemsHeight}px`
+      }, 10)
+    },
+
+    onInput(event) {
+      const selection = this.textSelection()
+      this.emitInput(event)
+      this.resetSelection(selection)
+    },
+
+    onSelect(value) {
+      this.$nextTick(() => {
+        const selection = this.textSelection()
+        value = this.quote && !this.isWithinQuote(selection) ? `\${${value}}` : value
+        const newValue = typeof this.value === 'string' ? (
+          this.value.slice(0, selection[0]) +
+          value +
+          this.value.slice(selection[1])
+        ) : value
+
+        this.emitInput(newValue)
+        this.resetSelection([selection[0] + value.length, selection[0] + value.length])
+      })
+    },
+
+    resetSelection(selection) {
+      setTimeout(() => {
+        this.textInput?.focus()
+        this.textInput?.setSelectionRange(selection[0], selection[1])
+      }, 10)
+    },
+
+    textSelection() {
+      return [this.textInput?.selectionStart, this.textInput?.selectionEnd]
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.autocomplete-with-context {
+  .item {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @include from($tablet) {
+      flex-direction: row;
+    }
+
+    .suffix {
+      display: flex;
+      font-size: 0.9em;
+      color: $disabled-fg;
+
+      @include from($tablet) {
+        margin-left: auto;
+      }
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/ContinueTile.vue

@@ -0,0 +1,66 @@
+<template>
+  <ListItem class="continue-tile"
+            value="continue"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop">
+    <Tile :value="value"
+          class="keyword"
+          :draggable="false"
+          :read-only="readOnly"
+          :with-delete="!readOnly"
+          @click.stop
+          @delete="$emit('delete')">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-rotate" />
+        </span>
+        <span class="name">
+          <span class="keyword">continue</span>
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  emits: ['delete'],
+
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: 'continue',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/EndBlockTile.vue

@@ -0,0 +1,64 @@
+<template>
+  <ListItem class="end-block-container"
+            :active="active"
+            :value="{}"
+            :read-only="false"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            @dragenter="$emit('dragenter', $event)"
+            @dragleave="$emit('dragleave', $event)"
+            @dragover="$emit('dragover', $event)"
+            @drop="$emit('drop', $event)">
+    <Tile class="keyword" :draggable="false" :read-only="true">
+      <div class="tile-name">
+        <span class="icon">
+          <i :class="icon" />
+        </span>
+        <span class="name">
+          <span class="keyword" v-text="value" />
+        </span>
+      </div>
+    </Tile>
+  </ListItem>
+</template>
+
+<script>
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  mixins: [Mixin],
+  components: {
+    ListItem,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/ExpressionEditor.vue

@@ -0,0 +1,131 @@
+<template>
+  <form class="expression-editor" @submit.prevent.stop="onSubmit">
+    <label for="expression">
+      <slot />
+
+      <ContextAutocomplete :value="newValue"
+                           :items="contextAutocompleteItems"
+                           :quote="quote"
+                           @input.stop="onInput"
+                           ref="input" />
+    </label>
+
+    <label>
+      <button type="submit" :disabled="!hasChanges">
+        <i class="fas fa-check" />&nbsp;Save
+      </button>
+    </label>
+  </form>
+</template>
+
+<script>
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
+
+export default {
+  emits: ['input'],
+  mixins: [Mixin],
+  components: { ContextAutocomplete },
+
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array],
+      default: '',
+    },
+
+    allowEmpty: {
+      type: Boolean,
+      default: false,
+    },
+
+    placeholder: {
+      type: String,
+      default: '',
+    },
+
+    quote: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      hasChanges: false,
+      newValue: null,
+    }
+  },
+
+  methods: {
+    onSubmit(event) {
+      const value = this.newValue?.trim()
+      if (!value.length && !this.allowEmpty) {
+        return
+      }
+
+      event.target.value = value
+      this.$emit('input', event)
+    },
+
+    onInput(event) {
+      if (event?.detail == null)
+        return
+
+      const value = '' + event.detail
+      if (!value?.trim()?.length) {
+        this.hasChanges = this.allowEmpty
+      } else {
+        this.hasChanges = value !== this.value
+      }
+
+      this.$nextTick(() => {
+        this.newValue = value
+      })
+    },
+  },
+
+  watch: {
+    value() {
+      this.hasChanges = false
+    },
+  },
+
+  mounted() {
+    this.hasChanges = false
+    this.newValue = this.value
+
+    if (!this.value?.trim?.()?.length) {
+      this.hasChanges = this.allowEmpty
+    }
+
+    this.$nextTick(() => {
+      this.textInput?.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.expression-editor {
+  min-width: 40em;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  label {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 1em;
+
+    input[type="text"] {
+      width: 100%;
+      margin-left: 1em;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/ListItem.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="row item list-item" :class="itemClass">
+    <div class="spacer-wrapper" :class="{ hidden: !spacerTop }">
+      <div class="spacer top" :class="{ active }" ref="dropTargetTop">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetTop" :disabled="readOnly" v-on="droppableData.top.on" />
+    </div>
+
+    <div class="spacer top" v-if="dragging" />
+
+    <slot />
+
+    <div class="spacer bottom" v-if="dragging" />
+
+    <div class="spacer-wrapper" :class="{ hidden: !spacerBottom }">
+      <div class="spacer bottom" :class="{ active }" ref="dropTargetBottom">
+        <div class="droppable-wrapper">
+          <div class="droppable-container">
+            <div class="droppable-frame">
+              <div class="droppable" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Droppable :element="$refs.dropTargetBottom" :disabled="readOnly" v-on="droppableData.bottom.on" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Droppable from "@/components/elements/Droppable"
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  emits: [
+    'contextmenu',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  components: {
+    Droppable,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    className: {
+      type: [String, Object],
+      default: '',
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: [String, Number, Boolean, Object, Array],
+      required: true,
+    },
+  },
+
+  computed: {
+    droppableData() {
+      return ['bottom', 'top'].reduce((acc, key) => {
+        acc[key] = {
+          on: {
+            dragend: this.onDragEnd,
+            dragenter: this.onDragEnter,
+            dragleave: this.onDragLeave,
+            dragover: this.onDragOver,
+            drop: this.onDrop,
+          },
+        }
+
+        return acc
+      }, {})
+    },
+
+    itemClass() {
+      return {
+        dragging: this.dragging,
+        ...(this.className?.trim ? { [this.className]: true } : (this.className || {})),
+      }
+    },
+  },
+
+  methods: {
+    onDragEnd(event) {
+      this.$emit('dragend', event)
+    },
+
+    onDragEnter(event) {
+      this.$emit('dragenter', event)
+    },
+
+    onDragLeave(event) {
+      this.$emit('dragleave', event)
+    },
+
+    onDragOver(event) {
+      this.$emit('dragover', event)
+    },
+
+    onDrop(event) {
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+$spacer-height: 1em;
+
+.list-item {
+  margin: 0;
+
+  .spacer {
+    height: $spacer-height;
+
+    &.active {
+      border-top: 1px dashed transparent;
+      border-bottom: 1px dashed transparent;
+
+      .droppable-frame {
+        border: 1px dashed $selected-fg;
+        border-radius: 0.5em;
+      }
+    }
+
+    &.selected {
+      height: 5em;
+      padding: 0.5em 0;
+
+      .droppable-frame {
+        height: 100%;
+        margin: 0.5em 0;
+        padding: 0.1em;
+        border: 2px dashed $ok-fg;
+      }
+
+      .droppable {
+        height: 100%;
+        background: $play-btn-fg;
+        border: none;
+        box-shadow: none;
+        border-radius: 1em;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .droppable-wrapper,
+  .droppable-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .droppable-container {
+    .droppable-frame {
+      width: 100%;
+      height: 1px;
+      opacity: 0.5;
+    }
+
+    .droppable {
+      width: 100%;
+      opacity: 0.8;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/LoopBlock.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="loop-block">
+    <ActionsBlock :value="value"
+                  :collapsed="collapsed"
+                  :context="context_"
+                  :dragging="isDragging"
+                  :indent="indent"
+                  :is-inside-loop="true"
+                  :read-only="readOnly"
+                  @input="onActionsChange"
+                  @drag="$emit('drag', $event)"
+                  @dragend="$emit('dragend', $event)"
+                  @dragenter="$emit('dragenter', $event)"
+                  @dragleave="$emit('dragleave', $event)"
+                  @dragover="$emit('dragover', $event)"
+                  @drop="$emit('drop', $event)">
+      <template #before>
+        <LoopTile v-bind="loopTileConf.props"
+                  v-on="loopTileConf.on"
+                  @input.prevent.stop
+                  :spacer-top="spacerTop"
+                  :spacer-bottom="false" />
+      </template>
+
+      <template #after>
+        <EndBlockTile :value="`end ${type}`"
+                      icon="fas fa-arrow-rotate-right"
+                      :active="active"
+                      :spacer-bottom="spacerBottom || dragging"
+                      @drop="onDrop" />
+      </template>
+    </ActionsBlock>
+  </div>
+</template>
+
+<script>
+import ActionsBlock from "./ActionsBlock"
+import EndBlockTile from "./EndBlockTile"
+import LoopTile from "./LoopTile"
+import Mixin from "./Mixin"
+
+export default {
+  name: 'LoopBlock',
+  mixins: [Mixin],
+  emits: [
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ActionsBlock,
+    LoopTile,
+    EndBlockTile,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+
+    type: {
+      type: String,
+      required: true,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    indent: {
+      type: Number,
+      default: 0,
+    },
+
+    isInsideLoop: {
+      type: Boolean,
+      default: true,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      dragging_: false,
+    }
+  },
+
+  computed: {
+    changeHandler() {
+      if (this.type === 'for') {
+        return this.onForChange
+      }
+
+      if (this.type === 'while') {
+        return this.onWhileChange
+      }
+
+      return () => {}
+    },
+
+    context_() {
+      const ctx = {...this.context}
+      const iterator = this.loop?.iterator?.trim()
+      if (iterator?.length) {
+        ctx[iterator] = {
+          source: 'for',
+        }
+      }
+
+      return ctx
+    },
+
+    isDragging() {
+      return this.dragging_ || this.dragging
+    },
+
+    key() {
+      return this.getKey(this.value)
+    },
+
+    loop() {
+      if (this.type === 'for') {
+        return this.getFor(this.key)
+      }
+
+      if (this.type === 'while') {
+        return {condition: this.getWhile(this.key)}
+      }
+
+      return {}
+    },
+
+    loopTileConf() {
+      return {
+        props: {
+          ...this.loop,
+          active: this.active,
+          context: this.context_,
+          readOnly: this.readOnly,
+          spacerBottom: this.spacerBottom,
+          spacerTop: this.spacerTop,
+          type: this.type,
+        },
+
+        on: {
+          change: this.changeHandler,
+          delete: (event) => this.$emit('delete', event),
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenterspacer: (event) => this.$emit('dragenter', event),
+          dragleavespacer: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          dragoverspacer: (event) => this.$emit('dragoverspacer', event),
+          drop: this.onDrop,
+        },
+      }
+    },
+  },
+
+  methods: {
+    onActionsChange(value) {
+      if (!this.key || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', { [this.key]: value })
+    },
+
+    onForChange(loop) {
+      const iterable = loop?.iterable?.trim()
+      const iterator = loop?.iterator?.trim()
+      const async_ = loop?.async || false
+
+      if (!this.key || this.readOnly || !iterable?.length || !iterator?.length) {
+        return
+      }
+
+      const keyword = 'for' + (async_ ? 'k' : '')
+      loop = `${keyword} ${iterator} in \${${iterable}}`
+      this.$emit('input', { [loop]: this.value[this.key] })
+    },
+
+    onWhileChange(condition) {
+      condition = condition?.trim()
+      if (!this.key || this.readOnly || !condition?.length) {
+        return
+      }
+
+      const loop = `while \${${condition}}`
+      this.$emit('input', { [loop]: this.value[this.key] })
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging_ = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = false
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/LoopEditor.vue

@@ -0,0 +1,183 @@
+<template>
+  <form class="loop-editor" @submit.prevent.stop="onSubmit">
+    for
+    <label for="iterator">
+      <input type="text"
+             name="iterator"
+             autocomplete="off"
+             :autofocus="true"
+             placeholder="Iterator"
+             :value="newValue.iterator"
+             ref="iterator"
+             @input.stop="onInput('iterator', $event)" />
+    </label>
+
+    in
+
+    <label for="iterable">
+      <ContextAutocomplete :value="newValue.iterable"
+                           :items="contextAutocompleteItems"
+                           placeholder="Iterable"
+                           @input.stop="onInput('iterable', $event)"
+                           ref="iterable" />
+
+    </label>
+
+    <label class="async">
+      <input class="checkbox"
+             type="checkbox"
+             name="async"
+             ref="async"
+             :checked="async"
+             @input.stop="onInput('async', $event)" />&nbsp;
+        Run in parallel
+    </label>
+
+    <label>
+      <button type="submit" :disabled="!hasChanges">
+        <i class="fas fa-check" />&nbsp;Save
+      </button>
+    </label>
+  </form>
+</template>
+
+<script>
+import ContextAutocomplete from "./ContextAutocomplete"
+import Mixin from "./Mixin"
+
+export default {
+  emits: ['change', 'input'],
+  mixins: [Mixin],
+  components: { ContextAutocomplete },
+  props: {
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    iterable: {
+      type: String,
+      default: '',
+    },
+
+    iterator: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      hasChanges: true,
+      newValue: {
+        iterator: null,
+        iterable: null,
+        async: null,
+      },
+    }
+  },
+
+  methods: {
+    onSubmit() {
+      const iterator = this.$refs.iterator.value.trim()
+      const iterable = this.$refs.iterable.value.trim()
+      const async_ = this.$refs.async.checked
+      if (!iterator.length || !iterable.length) {
+        return
+      }
+
+      this.$emit('change', { iterator, iterable, async: async_ })
+    },
+
+    onInput(target, event) {
+      const value = '' + (event.target?.value || event.detail)
+      if (!value?.trim()?.length) {
+        this.hasChanges = false
+      } else {
+        if (target === 'iterator') {
+          this.hasChanges = value !== this.iterator
+        }
+
+        if (!this.hasChanges && target === 'iterable') {
+          this.hasChanges = value !== this.iterable
+        }
+
+        if (!this.hasChanges && target === 'async') {
+          this.hasChanges = value !== this.async
+        }
+      }
+
+      this.$nextTick(() => {
+        this.newValue[target] = value
+      })
+    },
+  },
+
+  watch: {
+    value() {
+      this.hasChanges = false
+      this.newValue = {
+        iterator: this.iterator,
+        iterable: this.iterable,
+        async: this.async,
+      }
+    },
+  },
+
+  mounted() {
+    this.newValue = {
+      iterator: this.iterator,
+      iterable: this.iterable,
+      async: this.async,
+    }
+
+    this.$nextTick(() => {
+      this.$refs.iterator.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+@mixin label {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  input[type="text"] {
+    width: 100%;
+    margin-left: 1em;
+  }
+
+  &.async {
+    justify-content: flex-start;
+    padding-bottom: 0;
+  }
+}
+
+.loop-editor {
+  min-width: 40em;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  label {
+    @include label;
+    padding: 1em;
+  }
+}
+
+:deep(label) {
+  @include label;
+
+  .autocomplete-with-context,
+  .autocomplete {
+    width: 100%;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/LoopTile.vue

@@ -0,0 +1,244 @@
+<template>
+  <ListItem class="loop-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <div class="drag-spacer" v-if="dragging && !spacerTop">&nbsp;</div>
+
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showLoopEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-arrow-rotate-left" />
+        </span>
+        <span class="name" v-if="type === 'for'">
+          <span class="keyword">for<span v-if="async">k</span></span> <span class="code" v-text="iterator" />
+          <span class="keyword"> in </span> [
+          <span class="code" v-text="iterable" /> ]
+        </span>
+
+        <span class="name" v-else-if="type === 'while'">
+          <span class="keyword">while</span> [
+          <span class="code" v-text="condition" /> ]
+        </span>
+      </div>
+    </Tile>
+
+    <div class="editor-container" v-if="showLoopEditor && !readOnly">
+      <Modal title="Edit Loop"
+             :visible="true"
+             @close="showLoopEditor = false">
+        <LoopEditor :iterator="iterator"
+                    :iterable="iterable"
+                    :async="async"
+                    :context="context"
+                    @change="onLoopChange"
+                    v-if="showLoopEditor && type === 'for'">
+          Loop
+        </LoopEditor>
+
+        <ExpressionEditor :value="condition"
+                          :context="context"
+                          @input.prevent.stop="onConditionChange"
+                          v-else-if="showLoopEditor && type === 'while'">
+          Loop Condition
+        </ExpressionEditor>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ExpressionEditor from "./ExpressionEditor"
+import ListItem from "./ListItem"
+import LoopEditor from "./LoopEditor"
+import Mixin from "./Mixin"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  mixins: [Mixin],
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ExpressionEditor,
+    LoopEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    async: {
+      type: Boolean,
+      default: false,
+    },
+
+    condition: {
+      type: String,
+    },
+
+    iterator: {
+      type: String,
+    },
+
+    iterable: {
+      type: String,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    type: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+
+    value() {
+      return `for ${this.iterator} in ${this.iterable}`
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      showLoopEditor: false,
+    }
+  },
+
+  methods: {
+    onConditionChange(event) {
+      this.showLoopEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const condition = event.target.value?.trim()
+      if (!condition?.length) {
+        return
+      }
+
+      event.target.value = condition
+      this.$emit('change', condition)
+    },
+
+    onLoopChange(event) {
+      this.showLoopEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('change', event)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.action-tile {
+  .condition {
+    font-style: italic;
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/Mixin.vue

@@ -0,0 +1,112 @@
+<script>
+export default {
+  props: {
+    context: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    contextAutocompleteItems() {
+      return Object.entries(this.context).reduce((acc, [key, value]) => {
+        let suffix = '<span class="source">from <b>' + (
+          value?.source === 'local'
+          ? 'local context'
+          : value?.source
+        ) + '</b>'
+
+        if (value?.source === 'action' && value?.action?.action)
+          suffix += ` (<i>${value?.action?.action}</i>)`
+
+        suffix += '</span>'
+        acc.push(
+          {
+            text: key,
+            suffix: suffix,
+          }
+        )
+
+        return acc
+      }, [])
+    },
+
+    textInput() {
+      return this.$refs.input?.$refs?.input?.$refs?.input
+    },
+  },
+
+  methods: {
+    getCondition(value) {
+      value = this.getKey(value) || value
+      return value?.trim?.()?.match(/^if\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
+    },
+
+    getFor(value) {
+      value = this.getKey(value) || value
+      let m = value?.trim?.()?.match(/^for(k?)\s*(.*)\s*in\s*\$\{(.*)\}\s*$/i)
+      if (!m)
+        return null
+
+      return {
+        async: m[1].length > 0,
+        iterator: m[2].trim(),
+        iterable: m[3].trim(),
+      }
+    },
+
+    getKey(value) {
+      return this.isKeyword(value) ? Object.keys(value)[0] : null
+    },
+
+    getWhile(value) {
+      value = this.getKey(value) || value
+      return value?.trim?.()?.match(/^while\s*\$\{(.*)\}\s*$/i)?.[1]?.trim?.()
+    },
+
+    isAction(value) {
+      return typeof value === 'object' && !Array.isArray(value) && (value.action || value.name)
+    },
+
+    isActionsBlock(value) {
+      return this.getCondition(value) || this.isElse(value) || this.getFor(value) || this.getWhile(value)
+    },
+
+    isBreak(value) {
+      return value?.toLowerCase?.()?.trim?.() === 'break'
+    },
+
+    isContinue(value) {
+      return value?.toLowerCase?.()?.trim?.() === 'continue'
+    },
+
+    isKeyword(value) {
+      return (
+        value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.keys(value).length === 1 &&
+        !this.isAction(value)
+      )
+    },
+
+    isElse(value) {
+      return (this.getKey(value) || value)?.toLowerCase?.()?.trim?.() === 'else'
+    },
+
+    isReturn(value) {
+      if (!value)
+        return false
+
+      if (Array.isArray(value))
+        return value.length === 1 && value[0]?.length && value[0].match(/^return\s*$/i)
+
+      return this.getKey(value) === 'return'
+    },
+
+    isSet(value) {
+      return this.getKey(value) === 'set'
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/Response.vue

@@ -23,7 +23,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import Utils from "@/Utils"
 
@@ -31,8 +31,13 @@ export default {
   name: 'Response',
   mixins: [Utils],
   props: {
-    response: String,
+    response: {
-    error: String,
+      type: [String, Object, Array, Number, Boolean],
+    },
+
+    error: {
+      type: [String, Object],
+    },
   },
 
   computed: {
@@ -46,7 +51,7 @@ export default {
 
     jsonResponse() {
       if (this.isJSON) {
-        return hljs.highlight(this.response, {language: 'json'}).value
+        return hljs.highlight(this.response.toString(), {language: 'json'}).value
       }
 
       return null
@@ -57,4 +62,14 @@ export default {
 
 <style lang="scss" scoped>
 @import "common";
+
+.response {
+  .buttons {
+    button:hover {
+      color: $default-hover-fg;
+      background: none;
+      border: none;
+    }
+  }
+}
 </style>

platypush/backend/http/webapp/src/components/Action/ReturnTile.vue

@@ -0,0 +1,137 @@
+<template>
+  <ListItem class="return-tile"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            @input="$emit('input', $event)">
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          @click.stop="showExprEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-angle-right" />
+        </span>
+        <span class="name">
+          <span class="keyword">return</span> <span class="code" v-text="value" />
+        </span>
+      </div>
+    </Tile>
+
+    <div class="editor-container" v-if="showExprEditor && !readOnly">
+      <Modal title="Edit Return"
+             :visible="true"
+             @close="showExprEditor = false">
+        <ExpressionEditor :value="value"
+                          :allow-empty="true"
+                          :context="context"
+                          :quote="true"
+                          placeholder="Optional return value"
+                          ref="exprEditor"
+                          @input.prevent.stop="onExprChange"
+                          v-if="showExprEditor">
+          Value or Expression
+        </ExpressionEditor>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ExpressionEditor from "./ExpressionEditor"
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  mixins: [Mixin],
+  emits: [
+    'change',
+    'click',
+    'delete',
+    'input',
+  ],
+
+  components: {
+    ExpressionEditor,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array],
+      default: '',
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          draggable: false,
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      showExprEditor: false,
+    }
+  },
+
+  methods: {
+    onExprChange(event) {
+      this.showExprEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const expr = event.target.value?.trim()
+      event.target.value = expr
+      this.$emit('change', expr)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', value)
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/Action/SetVariablesTile.vue

@@ -0,0 +1,369 @@
+<template>
+  <ListItem class="set-variables-tile"
+            :class="{active}"
+            :dragging="dragging_"
+            :value="value"
+            :active="active"
+            :read-only="readOnly"
+            :spacer-bottom="spacerBottom"
+            :spacer-top="spacerTop"
+            v-on="dragListeners"
+            @input="$emit('input', $event)">
+    <Tile v-bind="tileConf.props"
+          v-on="tileConf.on"
+          :draggable="!readOnly"
+          @click.stop="showEditor = true">
+      <div class="tile-name">
+        <span class="icon">
+          <i class="fas fa-square-root-variable" />
+        </span>
+        <span class="name">
+          <div class="keyword">set</div>
+        </span>
+      </div>
+
+      <div class="variables">
+        <div class="variable" v-for="(value, name) in value" :key="name">
+          <span class="code name" v-text="name" />&nbsp;=
+          <span class="code value" v-text="value" />
+        </div>
+      </div>
+    </Tile>
+
+    <div class="editor-container" v-if="showEditor && !readOnly">
+      <Modal title="Set Variables"
+             :visible="true"
+             @close="showEditor = false">
+        <form class="editor" @submit.prevent="onChange">
+          <div class="variable" v-for="(v, i) in newValue" :key="i">
+            <span class="name">
+              <input type="text"
+                     placeholder="Variable Name"
+                     @blur="onBlur(i)"
+                     @input.prevent.stop
+                     v-model="newValue[i][0]">&nbsp;=
+            </span>
+            <span class="value">
+              <ContextAutocomplete :value="newValue[i][1]"
+                                   :items="contextAutocompleteItems"
+                                   :quote="true"
+                                   :select-on-tab="false"
+                                   placeholder="Value"
+                                   @input.prevent.stop="newValue[i][1] = $event.detail" />
+            </span>
+          </div>
+
+          <div class="variable">
+            <span class="name">
+              <input type="text"
+                     placeholder="Variable Name"
+                     ref="newVarName"
+                     @input.prevent.stop
+                     v-model="newVariable.name">&nbsp;=
+            </span>
+            <span class="value">
+              <ContextAutocomplete :value="newVariable.value"
+                                   :items="contextAutocompleteItems"
+                                   :quote="true"
+                                   :select-on-tab="false"
+                                   placeholder="Value"
+                                   @input.prevent.stop="newVariable.value = $event.detail"
+                                   @blur="onBlur(null)" />
+            </span>
+          </div>
+
+          <div class="buttons">
+            <button type="submit" class="btn btn-primary">
+              Save
+            </button>
+          </div>
+        </form>
+      </Modal>
+    </div>
+  </ListItem>
+</template>
+
+<script>
+import ContextAutocomplete from "./ContextAutocomplete"
+import ListItem from "./ListItem"
+import Mixin from "./Mixin"
+import Modal from "@/components/Modal"
+import Tile from "@/components/elements/Tile"
+
+export default {
+  mixins: [Mixin],
+  emits: [
+    'click',
+    'delete',
+    'drag',
+    'dragend',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+    'input',
+  ],
+
+  components: {
+    ContextAutocomplete,
+    ListItem,
+    Modal,
+    Tile,
+  },
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    dragging: {
+      type: Boolean,
+      default: false,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    spacerBottom: {
+      type: Boolean,
+      default: true,
+    },
+
+    spacerTop: {
+      type: Boolean,
+      default: true,
+    },
+
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    dragListeners() {
+      return this.readOnly ? {} : {
+          drag: this.onDragStart,
+          dragend: this.onDragEnd,
+          dragenter: (event) => this.$emit('dragenter', event),
+          dragleave: (event) => this.$emit('dragleave', event),
+          dragover: (event) => this.$emit('dragover', event),
+          drop: this.onDrop,
+      }
+    },
+
+    tileConf() {
+      return {
+        props: {
+          value: this.value,
+          class: 'keyword',
+          readOnly: this.readOnly,
+          withDelete: !this.readOnly,
+        },
+
+        on: {
+          ...this.dragListeners,
+          delete: () => this.$emit('delete'),
+          input: this.onInput,
+        },
+      }
+    },
+  },
+
+  data() {
+    return {
+      dragging_: false,
+      newValue: [],
+      newVariable: {
+        name: '',
+        value: '',
+      },
+      showEditor: false,
+    }
+  },
+
+  methods: {
+    onChange() {
+      this.showEditor = false
+      if (this.readOnly) {
+        return
+      }
+
+      const variables = this.newValue
+      if (this.newVariable.name?.trim?.()?.length) {
+        variables.push([this.newVariable.name, this.newVariable.value])
+      }
+
+      const args = variables.map(([name, value]) => {
+          name = this.sanitizeName(name)
+          try {
+            value = JSON.parse(value)
+          } catch (e) {
+            value = value?.trim()
+          }
+
+          return [name, value]
+        })
+        .reduce((acc, [name, value]) => {
+          if (!name?.length) {
+            return acc
+          }
+
+          acc[name] = value
+          return acc
+        }, {})
+
+      if (!Object.keys(args).length) {
+        return
+      }
+
+      this.onInput(args)
+    },
+
+    onInput(value) {
+      if (!value || this.readOnly) {
+        return
+      }
+
+      this.$emit('input', {set: value})
+    },
+
+    onBlur(index) {
+      if (this.readOnly) {
+        return
+      }
+
+      if (index != null) {
+        const name = this.sanitizeName(this.newValue[index][0])
+        if (!name?.length) {
+          this.newValue.splice(index, 1)
+        } else {
+          this.newValue[index][0] = name
+        }
+      } else {
+        const name = this.sanitizeName(this.newVariable.name)
+        const value = this.newVariable.value
+
+        if (name?.length) {
+          this.newValue.push([name, value])
+          this.newVariable = {
+            name: '',
+            value: '',
+          }
+
+          this.$nextTick(() => {
+            this.$refs.newVarName?.focus()
+          })
+        }
+      }
+    },
+
+    onDragStart(event) {
+      if (this.readOnly) {
+        return
+      }
+
+      this.dragging_ = true
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      this.dragging_ = false
+      this.$emit('dragend', event)
+    },
+
+    onDrop(event) {
+      this.dragging_ = false
+      if (this.readOnly) {
+        return
+      }
+
+      this.$emit('drop', event)
+    },
+
+    sanitizeName(name) {
+      return name?.trim()?.replace(/[^\w_]/g, '_')
+    },
+
+    syncValue() {
+      this.newValue = Object.entries(this.value)
+    },
+  },
+
+  watch: {
+    showEditor(value) {
+      if (!value) {
+        this.newVariable = {
+          name: '',
+          value: '',
+        }
+      } else {
+        this.$nextTick(() => {
+          this.$refs.newVarName?.focus()
+        })
+      }
+    },
+
+    value: {
+      immediate: true,
+      handler() {
+        this.syncValue()
+      },
+    },
+  },
+
+  mounted() {
+    this.syncValue()
+    this.$nextTick(() => {
+      this.$refs.newVarName?.focus()
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.set-variables-tile {
+  .variables {
+    margin-left: 2.5em;
+  }
+
+  .variable {
+    .value {
+      font-style: italic;
+    }
+  }
+
+  .drag-spacer {
+    height: 0;
+  }
+
+  .editor {
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+
+    .variable {
+      display: flex;
+      margin-bottom: 1em;
+
+      .value {
+        flex: 1;
+
+        input[type="text"] {
+          width: 100%;
+        }
+      }
+      
+    }
+
+    .buttons {
+      margin: 1em;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Action/common.scss

@@ -148,6 +148,7 @@ form {
   }
 }
 
+:deep(.args-body) {
   .args-list {
     padding-top: 0.5em;
     overflow: auto;
@@ -165,6 +166,11 @@ form {
       width: $params-desktop-width;
     }
 
+    label {
+      display: flex;
+      align-items: center;
+    }
+
     .arg {
       margin-bottom: .25em;
       @include until($tablet) {
@@ -173,19 +179,22 @@ form {
 
       .required-flag {
         width: 1.25em;
+        display: inline-block;
         font-weight: bold;
         margin-left: 0.25em;
+        text-align: center;
+      }
     }
 
-    input {
+    .autocomplete-with-context {
       width: calc(100% - 1.5em);
     }
-  }
 
     .action-arg-value {
       width: 100%;
     }
   }
+}
 
 .args-body {
   max-height: calc(50vh - 4.5em);

platypush/backend/http/webapp/src/components/Action/vars.scss

@@ -1,15 +1,7 @@
-$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
+$extra-params-btn-bg: $title-bg;
-$title-bg: #eee;
+$response-fg: $inverse-fg;
-$title-border: 1px solid #ddd;
+$error-fg: $error-fg-2;
-$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
+$procedure-submit-btn-bg: $submit-btn-bg;
-$extra-params-btn-bg: #eee;
-$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
-$output-bg: #151515;
-$output-shadow: $doc-shadow;
-$response-fg: white;
-$error-fg: red;
-$doc-bg: linear-gradient(#effbe3, #e0ecdb);
-$procedure-submit-btn-bg: #ebffeb;
 $section-title-bg: rgba(0, 0, 0, .04);
 $params-desktop-width: 30em;
 $params-tablet-width: 20em;

platypush/backend/http/webapp/src/components/File/Browser.vue

@@ -5,7 +5,7 @@
     <div class="nav" ref="nav">
       <div class="path-container">
         <span class="path" v-if="hasHomepage">
-          <span class="token" @click="path = null">
+          <span class="token" @click.stop="path = null">
             <i class="fa fa-home" />
           </span>
 
@@ -17,7 +17,7 @@
         <span class="path"
               v-for="(token, i) in pathTokens"
               :key="i"
-              @click="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
+              @click.stop="path = pathTokens.slice(0, i + 1).join('/').slice(1)">
           <span class="token">
             {{ token }}
           </span>
@@ -30,7 +30,7 @@
       </div>
 
       <div class="btn-container">
-        <Dropdown :style="{'min-width': '11em'}">
+        <Dropdown :style="{'min-width': '11em'}" @click.prevent>
           <DropdownItem icon-class="fa fa-plus" text="New Folder" @input="showCreateDirectory = true" />
           <DropdownItem icon-class="fa fa-file" text="Create File" @input="showCreateFile = true" />
           <DropdownItem icon-class="fa fa-upload" text="Upload" @input="showUpload = true" />
@@ -49,7 +49,7 @@
 
     <div class="items" ref="items" v-else>
       <div class="row item"
-           @click="onBack"
+           @click.stop="onBack"
            v-if="(path?.length && path !== '/') || hasBack">
         <div class="col-10 left side">
           <i class="icon fa fa-folder" />
@@ -59,7 +59,7 @@
 
       <div class="row item"
            ref="selectCurrent"
-           @click="onSelectCurrentDirectory"
+           @click.stop="onSelectCurrentDirectory"
            v-if="hasSelectCurrentDirectory">
         <div class="col-10 left side">
           <i class="icon fa fa-hand-point-right" />
@@ -67,7 +67,7 @@
         </div>
       </div>
 
-      <div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click="onItemSelect(file)">
+      <div class="row item" v-for="(file, i) in filteredFiles" :key="i" @click.stop="onItemSelect(file)">
         <div class="col-10">
           <i class="icon fa" :class="fileIcons[file.path]" />
           <span class="name">
@@ -76,7 +76,7 @@
         </div>
 
         <div class="col-2 actions" v-if="Object.keys(fileActions[file.path] || {})?.length">
-          <Dropdown :style="{'min-width': '11em'}">
+          <Dropdown :style="{'min-width': '11em'}" @click.prevent>
             <DropdownItem
                 v-for="(action, key) in fileActions[file.path]"
                 :key="key"

platypush/backend/http/webapp/src/components/File/Editor.vue

@@ -9,10 +9,15 @@
 
       <div class="editor-body">
         <div class="line-numbers" ref="lineNumbers">
-          <span class="line-number" v-for="n in lines" :key="n" v-text="n" />
+          <span class="line-number"
+                :class="{selected: selectedLine === n}"
+                v-for="n in lines"
+                :key="n"
+                @click="selectedLine = selectedLine === n ? null : n"
+                v-text="n" />
         </div>
 
-        <pre ref="pre"><code ref="content" v-html="displayedContent" /></pre>
+        <pre ref="pre"><code ref="content" v-html="displayedContent" /><div class="selected-line" ref="selectedLine" v-if="selectedLine != null" /></pre>
         <textarea ref="textarea" v-model="content" @scroll="syncScroll" @input.stop />
       </div>
 
@@ -28,7 +33,7 @@
 <script>
 import axios from 'axios';
 import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
+import 'highlight.js/styles/intellij-light.css';
 
 import FloatingButton from "@/components/elements/FloatingButton";
 import Highlighter from "./Highlighter";
@@ -54,6 +59,11 @@ export default {
       default: false,
     },
 
+    line: {
+      type: [String, Number],
+      default: null,
+    },
+
     withSave: {
       type: Boolean,
       default: true,
@@ -71,6 +81,7 @@ export default {
       initialContentHash: 0,
       loading: false,
       saving: false,
+      selectedLine: null,
       type: null,
     }
   },
@@ -139,6 +150,12 @@ export default {
       } finally {
         this.loading = false
       }
+
+      if (this.selectedLine) {
+        setTimeout(() => {
+          this.scrollToLine(this.selectedLine)
+        }, 1000)
+      }
     },
 
     async saveFile() {
@@ -190,6 +207,17 @@ export default {
       })
     },
 
+    scrollToLine(line) {
+      const offset = (line - 1) * parseFloat(getComputedStyle(this.$refs.pre).lineHeight)
+      this.$refs.textarea.scrollTo({
+        top: offset,
+        left: 0,
+        behavior: 'smooth',
+      })
+
+      return offset
+    },
+
     highlightContent() {
       this.highlighting = true
 
@@ -243,7 +271,7 @@ export default {
     },
 
     reset() {
-      this.setUrlArgs({file: null})
+      this.setUrlArgs({file: null, line: null})
       this.removeBeforeUnload()
       this.removeKeyListener()
     },
@@ -276,9 +304,36 @@ export default {
         this.highlightedContent = this.content
       }
     },
+
+    selectedLine(line) {
+      line = parseInt(line)
+      if (isNaN(line)) {
+        return
+      }
+
+      const textarea = this.$refs.textarea
+      const lines = this.content.split('\n')
+      const cursor = lines.slice(0, line - 1).join('\n').length + 1
+
+      textarea.setSelectionRange(cursor, cursor)
+      textarea.focus()
+      this.setUrlArgs({line})
+      this.$nextTick(() => {
+        const offset = this.scrollToLine(line)
+        this.$refs.selectedLine.style.top = `${offset}px`
+      })
+    },
   },
 
   mounted() {
+    const args = this.getUrlArgs()
+    const line = parseInt(this.line || args.line || 0)
+    if (line) {
+      if (!isNaN(line)) {
+        this.selectedLine = line
+      }
+    }
+
     this.loadFile()
     this.addBeforeUnload()
     this.addKeyListener()
@@ -332,8 +387,10 @@ $line-numbers-width: 2.5em;
   }
 
   .editor-body {
+    font-family: $monospace-font;
+
     pre, textarea, code, .line-numbers {
-      font-family: 'Fira Code', 'Noto Sans Mono', 'Inconsolata', 'Courier New', monospace;
+      font-family: $monospace-font;
       position: absolute;
       top: 0;
       height: 100%;
@@ -341,6 +398,10 @@ $line-numbers-width: 2.5em;
       white-space: pre;
     }
 
+    pre, textarea, code {
+      background: transparent;
+    }
+
     .line-numbers {
       width: $line-numbers-width;
       background: $tab-bg;
@@ -356,6 +417,15 @@ $line-numbers-width: 2.5em;
         width: 100%;
         text-align: right;
         padding-right: 0.25em;
+        cursor: pointer;
+
+        &:hover {
+          background: $hover-bg;
+        }
+
+        &.selected {
+          background: $selected-bg;
+        }
       }
     }
 
@@ -372,16 +442,32 @@ $line-numbers-width: 2.5em;
       background: transparent;
       overflow-wrap: normal;
       overflow-x: scroll;
-      z-index: 1;
+      z-index: 2;
       color: rgba(0, 0, 0, 0);
       caret-color: black;
       border: none;
       outline: none;
     }
+
+    .selected-line {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1.5em;
+      background: rgba(110, 255, 160, 0.25);
+    }
   }
 
   :deep(.floating-btn) {
     z-index: 5;
   }
+
+  // Fix for some hljs styles that render white text on white background
+  :deep(code) {
+    .hljs-subst {
+      color: $selected-fg !important;
+    }
+  }
 }
 </style>

platypush/backend/http/webapp/src/components/File/EditorModal.vue

@@ -8,6 +8,7 @@
           <FileEditor ref="fileEditor"
                       :file="file"
                       :is-new="isNew"
+                      :line="line"
                       @save="$emit('save', $event)"
                       v-if="file" />
         </div>
@@ -26,10 +27,11 @@
 import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import FileEditor from "./Editor";
 import Modal from "@/components/Modal";
+import Utils from '@/Utils'
 
 export default {
   emits: ['close', 'open', 'save'],
-  mixins: [Modal],
+  mixins: [Modal, Utils],
   components: {
     ConfirmDialog,
     FileEditor,
@@ -47,6 +49,11 @@ export default {
       default: false,
     },
 
+    line: {
+      type: [String, Number],
+      default: null,
+    },
+
     withSave: {
       type: Boolean,
       default: true,
@@ -113,15 +120,28 @@ export default {
 
     onClose() {
       this.$refs.fileEditor.reset()
+      this.setUrlArgs({ maximized: null })
       this.$emit('close')
     },
   },
+
+  watch: {
+    maximized() {
+      this.setUrlArgs({ maximized: this.maximized })
+    },
+  },
+
+  mounted() {
+    this.maximized = !!this.getUrlArgs().maximized
+  },
 }
 </script>
 
 <style lang="scss" scoped>
 @import "src/style/items";
 
+$maximized-modal-header-height: 2.75em;
+
 .file-editor-root {
   .file-editor-modal {
     :deep(.modal) {
@@ -133,14 +153,18 @@ export default {
 
       .modal-body {
         width: 100%;
-        height: 50em;
         min-width: 30em;
         max-height: calc(100vh - 2em);
       }
+
+      .content {
+        @extend .expand;
+      }
     }
 
     &:not(.maximized) {
-      :deep(.body) {
+      :deep(.modal) {
+        .body {
           @include until($tablet) {
             width: calc(100vw - 2em);
           }
@@ -154,24 +178,48 @@ export default {
             width: 100%;
             min-width: 50em;
           }
+
+          .modal-body {
+            height: 50em;
+          }
+        }
       }
     }
 
     &.maximized {
-      :deep(.body) {
+      :deep(.modal) {
-        width: 100vw;
+        width: calc(100vw - 2em);
-        height: 100vh;
+        height: calc(100vh - 2em);
+
+        .content, .modal-body {
+          width: 100%;
+          height: 100%;
+          max-height: 100%;
+        }
+
+        .header {
+          height: $maximized-modal-header-height;
+        }
+
+        .body {
+          height: calc(100% - #{$maximized-modal-header-height});
+          max-height: 100%;
+        }
       }
     }
   }
 
   .confirm-dialog-container {
     :deep(.modal) {
-      .content {
+      width: 35em !important;
-        .body {
+      height: 9em !important;
-          min-width: 30em;
       max-width: 100%;
-        }
+      max-height: 100%;
+
+      .body {
+        width: 100% !important;
+        height: 100% !important;
+        justify-content: center;
       }
     }
   }

platypush/backend/http/webapp/src/components/Modal.vue

@@ -1,7 +1,11 @@
 <template>
-  <div class="modal-container fade-in" :id="id" :class="{hidden: !isVisible}"
+  <div class="modal-container fade-in"
-    :style="{'--z-index': zIndex}" @click="close">
+       :class="{hidden: !isVisible}"
-    <div class="modal" :class="$attrs.class">
+       :id="id"
+       :style="{'--z-index': zIndex}" 
+       ref="container"
+       @click.stop="close">
+    <div class="modal" :class="$attrs.class" ref="modal">
       <div class="content" :style="{'--width': width, '--height': height}" @click.stop>
         <div class="header" :class="{uppercase: uppercase}" v-if="title">
           <div class="title" v-text="title" v-if="title" />
@@ -9,11 +13,11 @@
             <button v-for="(button, index) in buttons"
                     :key="index"
                     :title="button.title"
-                    @click="button.action">
+                    @click.stop="button.action">
               <i :class="button.icon" />
             </button>
 
-            <button title="Close" alt="Close" @click="close">
+            <button title="Close" alt="Close" @click.stop="close">
               <i class="fas fa-xmark" />
             </button>
           </div>
@@ -27,6 +31,8 @@
 </template>
 
 <script>
+import { bus } from "@/bus";
+
 export default {
   name: "Modal",
   emits: ['close', 'open'],
@@ -90,9 +96,9 @@ export default {
 
   data() {
     return {
-      timeoutId: undefined,
+      ignoreEscape: false,
-      prevVisible: this.visible,
       isVisible: this.visible,
+      timeoutId: undefined,
     }
   },
 
@@ -103,12 +109,18 @@ export default {
   },
 
   methods: {
-    close() {
+    close(event) {
       if (this.beforeClose && !this.beforeClose())
         return
 
-      this.prevVisible = this.isVisible
+      if (event)
+        event.preventDefault()
+
+      if (!this.isVisible)
+        return
+
       this.isVisible = false
+      this.visibleHndl(false, true)
     },
 
     hide() {
@@ -116,8 +128,11 @@ export default {
     },
 
     show() {
-      this.prevVisible = this.isVisible
+      if (this.isVisible)
+        return
+
       this.isVisible = true
+      this.visibleHndl(true, false)
     },
 
     open() {
@@ -131,28 +146,73 @@ export default {
         this.show()
     },
 
+    onEscape() {
+      if (!this.isVisible || this.ignoreEscape || !this.$refs.container)
+        return
+
+      const myZIndex = parseInt(getComputedStyle(this.$refs.container).zIndex)
+      const maxZIndex = Math.max(
+        ...Array.from(
+          document.querySelectorAll('.modal-container:not(.hidden)')
+        ).map((modal) =>
+          parseInt(getComputedStyle(modal).zIndex)
+        )
+      )
+
+      // Close only if it's the outermost modal
+      if (myZIndex === maxZIndex)
+        this.close()
+    },
+
     onKeyUp(event) {
       event.stopPropagation()
       if (event.key === 'Escape') {
-        this.close()
+        this.onEscape()
       }
     },
+
+    onModalCloseMessage() {
+      if (!this.isVisible)
+        return
+
+      this.ignoreEscape = true
+      setTimeout(() => this.ignoreEscape = false, 100)
+    },
+
+    visibleHndl(visible, oldVisible) {
+      if (!this.$el?.classList?.contains('modal-container'))
+        return
+
+      if (!visible && oldVisible) {
+        this.$emit('close')
+        bus.emit('modal-close', this)
+      } else if (visible && !oldVisible) {
+        this.$emit('open')
+        bus.emit('modal-open', this)
+      }
+    },
+  },
+
+  watch: {
+    visible(value, oldValue) {
+      this.visibleHndl(value, oldValue)
+      this.$nextTick(() => this.isVisible = value)
+    },
+
+    isVisible(value, oldValue) {
+      oldValue = oldValue == null ? this.visible : oldValue
+      this.visibleHndl(value, oldValue)
+    },
   },
 
   mounted() {
-    const self = this
-    const visibleHndl = (visible) => {
-      if (!visible)
-        self.$emit('close')
-      else
-        self.$emit('open')
-
-      self.isVisible = visible
-    }
-
     document.body.addEventListener('keyup', this.onKeyUp)
-    this.$watch(() => this.visible, visibleHndl)
+    this.visibleHndl(this.isVisible, this.isVisible ? false : undefined)
-    this.$watch(() => this.isVisible, visibleHndl)
+  },
+
+  unmouted() {
+    document.body.removeEventListener('keyup', this.onKeyUp)
+    this.visibleHndl(false, this.isVisible)
   },
 
   unmounted() {
@@ -160,7 +220,6 @@ export default {
   },
 
   updated() {
-    this.prevVisible = this.isVisible
     if (this.isVisible) {
       // Make sure that a newly opened or visible+updated modal always comes to the front
       let maxZIndex = parseInt(getComputedStyle(this.$el).zIndex)

platypush/backend/http/webapp/src/components/Nav.vue

@@ -117,7 +117,7 @@ export default {
 
   computed: {
     specialPlugins() {
-      return ['execute', 'entities', 'file']
+      return ['execute', 'entities', 'file', 'procedures']
     },
 
     panelNames() {
@@ -131,6 +131,7 @@ export default {
 
       let panelNames = Object.keys(this.panels).sort()
       panelNames = prepend(panelNames, 'file')
+      panelNames = prepend(panelNames, 'procedures')
       panelNames = prepend(panelNames, 'execute')
       panelNames = prepend(panelNames, 'entities')
       return panelNames
@@ -156,6 +157,8 @@ export default {
         return 'Execute'
       if (name === 'file')
         return 'Files'
+      if (name === 'procedures')
+        return 'Procedures'
 
       return name
     },

platypush/backend/http/webapp/src/components/Procedure/ProcedureDump.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="procedure-dump">
+    <Loading v-if="loading" />
+
+    <div class="dump-container" v-else>
+      <CopyButton :text="yaml?.trim()" />
+      <pre><code v-html="highlightedYAML" /></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/nord.min.css'
+import hljs from "highlight.js"
+
+import CopyButton from "@/components/elements/CopyButton"
+import Loading from "@/components/Loading";
+import Utils from "@/Utils"
+
+export default {
+  mixins: [Utils],
+  components: {
+    CopyButton,
+    Loading
+  },
+
+  props: {
+    procedure: {
+      type: Object,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      loading: false,
+      yaml: null,
+    }
+  },
+
+  computed: {
+    highlightedYAML() {
+      return hljs.highlight(
+        '# You can copy this code in a YAML configuration file\n' +
+        '# if you prefer to store this procedure in a file.\n' +
+        this.yaml || '',
+        {language: 'yaml'}
+      ).value
+    },
+  },
+
+  methods: {
+    async refresh() {
+      this.loading = true
+      try {
+        this.yaml = await this.request('procedures.to_yaml', {procedure: this.procedure})
+      } finally {
+        this.loading = false
+      }
+    }
+  },
+
+  mounted() {
+    this.refresh()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.procedure-dump {
+  width: 100%;
+  height: 100%;
+  background: #181818;
+
+  .dump-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding: 1em;
+    overflow: auto;
+  }
+
+  pre {
+    margin: 0;
+    padding: 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/Procedure/ProcedureEditor.vue

@@ -1,8 +1,10 @@
 <template>
-  <div class="procedure-editor-container"
+  <div class="procedure-editor-container">
-       :class="{dragging: dragItem != null}">
+    <main>
       <div class="procedure-editor">
-      <form autocomplete="off" @submit.prevent="executeAction">
+        <form class="procedure-edit-form" autocomplete="off" @submit.prevent="executeAction">
+          <input type="submit" style="display: none" />
+
           <div class="name-editor-container" v-if="withName">
             <div class="row item">
               <div class="name">
@@ -13,61 +15,214 @@
               </div>
 
               <div class="value">
-              <input type="text" v-model="newValue.name" />
+                <input type="text"
+                       v-model="newValue.name"
+                       ref="nameInput"
+                       :disabled="readOnly" />
               </div>
             </div>
           </div>
 
-        <div class="actions">
+          <div class="icon-editor-container"
-          <div class="row item" v-for="(action, index) in newValue.actions" :key="index">
+               v-if="Object.keys(newValue?.meta?.icon || {}).length">
-            <div class="drop-target-container"
+            <IconEditor :entity="newValue"
-                 :class="{active: dropIndex === index}"
+                        @input="onIconChange"
-                 v-if="dragItem != null && dragItem > index"
+                        @change="onIconChange" />
-                 @dragover.prevent="dropIndex = index"
-                 @dragenter.prevent="dropIndex = index"
-                 @dragleave.prevent="dropIndex = undefined"
-                 @dragend.prevent="dropIndex = undefined"
-                 @drop="onDrop(index)">
-              <div class="drop-target" />
           </div>
 
-            <div class="separator" v-else-if="dragItem != null && dragItem === index" />
+          <div class="args-editor-container" v-if="showArgs">
+            <h3>
+              <i class="icon fas fa-code" />&nbsp;
+              Arguments
+            </h3>
 
-            <ActionTile :value="action"
+            <div class="args" ref="args">
-                        draggable with-delete
+              <div class="row item" v-for="(arg, index) in newValue.args" :key="index">
-                        @drag="dragItem = index"
+                <input type="text"
-                        @drop="dragItem = undefined"
+                       placeholder="Argument Name"
-                        @input="editAction($event, index)"
+                       :value="arg"
-                        @delete="deleteAction(index)" />
+                       :disabled="readOnly"
-
+                       @input="onArgInput($event.target.value?.trim(), index)"
-            <div class="drop-target-container"
+                       @blur="onArgEdit(arg, index)" />
-                 :class="{active: dropIndex === index}"
-                 @dragover.prevent="dropIndex = index"
-                 @dragenter.prevent="dropIndex = index"
-                 @dragleave.prevent="dropIndex = undefined"
-                 @dragend.prevent="dropIndex = undefined"
-                 @drop="onDrop(index)"
-                 v-if="dragItem != null && dragItem < index">
-              <div class="drop-target" />
               </div>
 
-            <div class="separator" v-else-if="dragItem != null && dragItem === index" />
+              <div class="row item new-arg" v-if="!readOnly">
+                <input type="text"
+                       placeholder="New Argument"
+                       ref="newArgInput" 
+                       v-model="newArg"
+                       @blur="onNewArg" />
+              </div>
+            </div>
           </div>
 
-          <div class="row item">
+          <div class="actions-container">
-            <ActionTile :value="newAction" @input="addAction" />
+            <h3 v-if="showArgs">
-          </div>
+              <i class="icon fas fa-play" />&nbsp;
+              Actions
+            </h3>
+
+            <ActionsList :value="newValue.actions"
+                         :context="context"
+                         :read-only="readOnly"
+                         @input="onActionsEdit" />
           </div>
 
           <!-- Structured response container -->
+          <div class="response-container" v-if="response || error">
             <Response :response="response" :error="error" />
+          </div>
         </form>
       </div>
+
+      <div class="args-modal-container" ref="argsModalContainer" v-if="showArgsModal">
+        <Modal title="Run Arguments"
+               :visible="true"
+               ref="argsModal"
+               @close="onRunArgsModalClose">
+          <form class="args" @submit.prevent="executeWithArgs">
+            <div class="row item" v-for="value, arg in runArgs" :key="arg">
+              <span class="arg-name">
+                <span v-if="newValue.args?.includes(arg)">
+                  {{ arg }}
+                </span>
+
+                <span v-else>
+                  <input type="text"
+                         placeholder="New Argument"
+                         :value="arg"
+                         @input="onEditRunArgName($event, arg)">
+                </span>
+
+                <span class="mobile">
+                  &nbsp;=&nbsp;
+                </span>
+              </span>
+
+              <span class="arg-value">
+                <span class="from tablet">
+                  &nbsp;=&nbsp;
+                </span>
+
+                <input type="text"
+                       placeholder="Argument Value"
+                       :ref="`run-arg-value-${arg}`"
+                       v-model="runArgs[arg]" />
+              </span>
+            </div>
+
+            <div class="row item new-arg">
+              <span class="arg-name">
+                <input type="text"
+                       placeholder="New Argument"
+                       ref="newRunArgName"
+                       v-model="newRunArg[0]"
+                       @blur="onNewRunArgName" />
+
+                <span class="mobile">
+                  &nbsp;=&nbsp;
+                </span>
+              </span>
+              <span class="arg-value">
+                <span class="from tablet">
+                  &nbsp;=&nbsp;
+                </span>
+
+                <input type="text"
+                       placeholder="Argument Value"
+                       v-model="newRunArg[1]" />
+              </span>
+            </div>
+
+            <input type="submit" style="display: none" />
+            <FloatingButton icon-class="fa fa-play"
+                            title="Run Procedure"
+                            :disabled="newValue.actions?.length === 0 || running"
+                            @click="executeWithArgs" />
+          </form>
+        </Modal>
+      </div>
+
+      <div class="confirm-dialog-container">
+        <ConfirmDialog ref="confirmClose" @input="forceClose">
+          This procedure has unsaved changes. Are you sure you want to close it?
+        </ConfirmDialog>
+      </div>
+
+      <div class="confirm-dialog-container">
+        <ConfirmDialog ref="confirmOverwrite" @input="forceSave">
+          A procedure with the same name already exists. Do you want to overwrite it?
+        </ConfirmDialog>
+      </div>
+
+      <div class="spacer" />
+
+      <div class="floating-buttons">
+        <div class="buttons left">
+          <FloatingButtons direction="row">
+              <FloatingButton icon-class="fa fa-code"
+                              left glow
+                              title="Export to YAML"
+                              @click="showYAML = true" />
+              <FloatingButton icon-class="fa fa-copy"
+                              left glow
+                              title="Duplicate Procedure"
+                              @click="duplicate"
+                              v-if="newValue.name?.length && newValue.actions?.length" />
+          </FloatingButtons>
+        </div>
+
+        <div class="buttons right">
+          <FloatingButtons direction="row">
+              <FloatingButton icon-class="fa fa-save"
+                              right glow
+                              title="Save Procedure"
+                              :disabled="!canSave"
+                              @click="save"
+                              v-if="showSave" />
+              <FloatingButton icon-class="fa fa-play"
+                              right glow
+                              title="Run Procedure"
+                              :disabled="newValue.actions?.length === 0 || running"
+                              @click="executeAction" />
+          </FloatingButtons>
+        </div>
+      </div>
+    </main>
+
+    <div class="duplicate-editor-container" v-if="duplicateValue != null">
+      <Modal title="Duplicate Procedure"
+             ref="duplicateModal"
+             :visible="true"
+             :before-close="(() => $refs.duplicateEditor?.checkCanClose())"
+             @close="duplicateValue = null">
+        <ProcedureEditor :value="duplicateValue"
+                         :with-name="true"
+                         :with-save="true"
+                         :modal="() => $refs.duplicateModal"
+                         ref="duplicateEditor"
+                         @input="duplicateValue = null" />
+      </Modal>
+    </div>
+
+    <div class="dump-modal-container" v-if="showYAML">
+      <Modal title="Procedure Dump"
+             :visible="true"
+             @close="showYAML = false">
+        <ProcedureDump :procedure="newValue" />
+      </Modal>
+    </div>
   </div>
 </template>
 
 <script>
-import ActionTile from "@/components/Action/ActionTile"
+import ActionsList from "@/components/Action/ActionsList"
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
+import FloatingButton from "@/components/elements/FloatingButton";
+import FloatingButtons from "@/components/elements/FloatingButtons";
+import IconEditor from "@/components/panels/Entities/IconEditor";
+import Modal from "@/components/Modal";
+import ProcedureDump from "./ProcedureDump";
 import Response from "@/components/Action/Response"
 import Utils from "@/Utils"
 
@@ -75,7 +230,13 @@ export default {
   mixins: [Utils],
   emits: ['input'],
   components: {
-    ActionTile,
+    ActionsList,
+    ConfirmDialog,
+    FloatingButton,
+    FloatingButtons,
+    IconEditor,
+    Modal,
+    ProcedureDump,
     Response,
   },
 
@@ -85,6 +246,11 @@ export default {
       default: false,
     },
 
+    withSave: {
+      type: Boolean,
+      default: false,
+    },
+
     value: {
       type: Object,
       default: () => ({
@@ -92,23 +258,154 @@ export default {
         actions: [],
       }),
     },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    modal: {
+      type: [Object, Function],
+    },
   },
 
   data() {
     return {
-      loading: false,
+      confirmOverwrite: false,
-      running: false,
+      duplicateValue: null,
-      response: undefined,
       error: undefined,
-      actions: [],
+      loading: false,
-      newValue: {...this.value},
       newAction: {},
-      dragItem: undefined,
+      newArg: null,
-      dropIndex: undefined,
+      newRunArg: [null, null],
+      newValue: {},
+      response: undefined,
+      running: false,
+      runArgs: {},
+      shouldForceClose: false,
+      showArgsModal: false,
+      showYAML: false,
     }
   },
 
+  computed: {
+    floatingButtons() {
+      return this.$el.querySelector('.floating-btns')
+    },
+
+    canSave() {
+      if (
+        !this.withSave ||
+        this.readOnly ||
+        !this.newValue?.name?.length ||
+        !this.newValue?.actions?.length
+      )
+        return false
+
+      return this.valueString !== this.newValueString
+    },
+
+    valueString() {
+      return JSON.stringify(this.value)
+    },
+
+    newValueString() {
+      return JSON.stringify(this.newValue)
+    },
+
+    context() {
+      return this.newValue?.args?.reduce((acc, arg) => {
+        acc[arg] = {
+          source: 'args',
+        }
+
+        return acc
+      }, {})
+    },
+
+    modal_() {
+      if (this.readOnly)
+        return null
+
+      return typeof this.modal === 'function' ? this.modal() : this.modal
+    },
+
+    shouldConfirmClose() {
+      return this.canSave && !this.shouldForceClose
+    },
+
+    showArgs() {
+      return !this.readOnly || this.newValue.args?.length
+    },
+
+    showSave() {
+      return this.withSave && !this.readOnly
+    },
+  },
+
   methods: {
+    async save() {
+      if (!this.canSave)
+        return
+
+      this.loading = true
+      try {
+        const overwriteOk = await this.overwriteOk()
+        if (!overwriteOk)
+          return
+
+        const actions = this.newValue.actions.map((action) => {
+          const a = {...action}
+          if ('name' in a) {
+            a.action = a.name
+            delete a.name
+          }
+
+          return a
+        })
+
+        const args = {...this.newValue, actions}
+        if (this.value?.name?.length && this.value.name !== this.newValue.name) {
+          args.old_name = this.value.name
+        }
+
+        await this.request('procedures.save', args)
+        this.$emit('input', this.newValue)
+        this.notify({
+          text: 'Procedure saved successfully',
+          image: {
+            icon: 'check',
+          }
+        })
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async forceSave() {
+      this.confirmOverwrite = true
+      await this.save()
+    },
+
+    async overwriteOk() {
+      if (this.confirmOverwrite) {
+        this.confirmOverwrite = false
+        return true
+      }
+
+      const procedures = await this.request('procedures.status', {publish: false})
+      if (
+        this.value.name?.length &&
+        this.value.name !== this.newValue.name &&
+        procedures[this.newValue.name]
+      ) {
+        this.$refs.confirmOverwrite?.open()
+        return false
+      }
+
+      return true
+    },
+
     onResponse(response) {
       this.response = (
         typeof response === 'string' ? response : JSON.stringify(response, null, 2)
@@ -118,117 +415,460 @@ export default {
     },
 
     onError(error) {
+      if (error.message)
+        error = error.message
+
       this.response = undefined
       this.error = error
     },
 
     onDone() {
       this.running = false
+      this.runArgs = {}
     },
 
-    emitInput() {
+    async executeAction() {
-      this.$emit('input', this.newValue)
+      if (!this.newValue.actions?.length) {
-    },
+        this.notify({
+          text: 'No actions to execute',
+          warning: true,
+          image: {
+            icon: 'exclamation-triangle',
+          }
+        })
 
-    onDrop(index) {
-      if (this.dragItem === undefined)
         return
+      }
 
-      this.newValue.actions.splice(
+      if (this.newValue.args?.length && !Object.keys(this.runArgs).length) {
-        index, 0, this.newValue.actions.splice(this.dragItem, 1)[0]
+        this.showArgsModal = true
-      )
-
-      this.emitInput()
-    },
-
-    executeAction() {
-      if (!this.value.actions?.length)
         return
+      }
 
       this.running = true
-      this.execute(this.value.actions).then(this.onResponse).catch(this.onError).finally(this.onDone)
+      try {
+        const procedure = {
+          actions: this.newValue.actions.map((action) => {
+            const a = {...action}
+            if ('name' in a) {
+              a.action = a.name
+              delete a.name
+            }
+
+            return a
+          }),
+
+          args: this.runArgs,
+        }
+
+        const response = await this.request('procedures.exec', {procedure})
+        this.onResponse(response)
+      } catch (e) {
+        console.error(e)
+        this.onError(e)
+      } finally {
+        this.onDone()
+      }
     },
 
-    editAction(action, index) {
+    async executeWithArgs() {
-      this.newValue.actions[index] = action
+      this.$refs.argsModal?.close()
-      this.emitInput()
+      Object.entries(this.runArgs).forEach(([arg, value]) => {
+        if (!value?.length)
+          this.runArgs[arg] = null
+
+        try {
+          this.runArgs[arg] = JSON.parse(value)
+        } catch (e) {
+          // ignore
+        }
+      })
+
+      await this.executeAction()
     },
 
-    addAction(action) {
+    duplicate() {
-      this.newValue.actions.push(action)
+      const name = `${this.newValue.name || ''}__copy`
-      this.emitInput()
+      const duplicate = JSON.parse(JSON.stringify(this.newValue))
+      this.duplicateValue = {
+        ...duplicate,
+        ...{
+          meta: {
+            ...(duplicate.meta || {}),
+            icon: {...(duplicate.meta?.icon || {})},
+          }
+        },
+        id: null,
+        external_id: name,
+        name: name,
+      }
     },
 
-    deleteAction(index) {
+    onActionsEdit(actions) {
-      this.newValue.actions.splice(index, 1)
+      this.newValue.actions = actions
-      this.emitInput()
+    },
+
+    onArgInput(arg, index) {
+      this.newValue.args[index] = arg
+    },
+
+    onArgEdit(arg, index) {
+      arg = arg?.trim()
+      const isDuplicate = !!(
+        this.newValue.args?.filter(
+          (a, i) => a === arg && i !== index
+        ).length
+      )
+
+      if (!arg?.length || isDuplicate) {
+        this.newValue.args.splice(index, 1)
+
+        if (index === this.newValue.args.length) {
+          setTimeout(() => this.$refs.newArgInput?.focus(), 50)
+        } else {
+          const nextInput = this.$refs.args.children[index]?.querySelector('input[type=text]')
+          setTimeout(() => {
+            nextInput?.focus()
+            nextInput?.select()
+          }, 50)
+        }
+      }
+    },
+
+    onNewArg(event) {
+      const value = event.target.value?.trim()
+      if (!value?.length) {
+        return
+      }
+
+      if (!this.newValue.args) {
+        this.newValue.args = []
+      }
+
+      if (!this.newValue.args.includes(value)) {
+        this.newValue.args.push(value)
+      }
+
+      this.newArg = null
+      setTimeout(() => this.$refs.newArgInput?.focus(), 50)
+    },
+
+    onNewRunArgName() {
+      const arg = this.newRunArg[0]?.trim()
+      const value = this.newRunArg[1]?.trim()
+      if (!arg?.length) {
+        return
+      }
+
+      this.runArgs[arg] = value
+      this.newRunArg = [null, null]
+      this.$nextTick(() => this.$refs[`run-arg-value-${arg}`]?.[0]?.focus())
+    },
+
+    onEditRunArgName(event, arg) {
+      const newArg = event.target.value?.trim()
+      if (newArg === arg) {
+        return
+      }
+
+      if (newArg?.length) {
+        this.runArgs[newArg] = this.runArgs[arg]
+      }
+
+      delete this.runArgs[arg]
+      this.$nextTick(
+        () => this.$el.querySelector(`.args-modal-container .args input[type=text][value="${newArg}"]`)?.focus()
+      )
+    },
+
+    onIconChange(icon) {
+      this.newValue.meta.icon = icon
+    },
+
+    onRunArgsModalClose() {
+      this.showArgsModal = false
+      this.$nextTick(() => {
+        this.runArgs = {}
+      })
+    },
+
+    checkCanClose() {
+      if (!this.shouldConfirmClose)
+        return true
+
+      this.$refs.confirmClose?.open()
+      return false
+    },
+
+    forceClose() {
+      this.shouldForceClose = true
+      this.$nextTick(() => {
+        if (!this.modal_)
+          return
+
+        let modal = this.modal_
+        if (typeof modal === 'function') {
+          modal = modal()
+        }
+
+        try {
+          modal?.close()
+        } catch (e) {
+          console.warn('Failed to close modal', e)
+        }
+
+        this.reset()
+      })
+    },
+
+    beforeUnload(e) {
+      if (this.shouldConfirmClose) {
+        e.preventDefault()
+        e.returnValue = ''
+      }
+    },
+
+    addBeforeUnload() {
+      window.addEventListener('beforeunload', this.beforeUnload)
+    },
+
+    removeBeforeUnload() {
+      window.removeEventListener('beforeunload', this.beforeUnload)
+    },
+
+    reset() {
+      this.removeBeforeUnload()
+    },
+
+    syncValue() {
+      if (!this.value)
+        return
+
+      const value = JSON.parse(JSON.stringify(this.value))
+      this.newValue = {
+        ...value,
+        actions: value.actions?.map(a => ({...a})),
+        args: [...(value?.args || [])],
+        meta: {...(value?.meta || {})},
+      }
     },
   },
 
   watch: {
     value: {
       immediate: true,
+      deep: true,
+      handler() {
+        this.syncValue()
+      },
+    },
+
+    newValue: {
       deep: true,
       handler(value) {
-        this.newValue = {...value}
+        if (this.withSave)
+          return
+
+        this.$emit('input', value)
       },
     },
+
+    showArgsModal(value) {
+      if (value) {
+        this.runArgs = this.newValue.args?.reduce((acc, arg) => {
+          acc[arg] = null
+          return acc
+        }, {})
+
+        this.$nextTick(() => {
+          this.$el.querySelector('.args-modal-container .args input[type=text]')?.focus()
+        })
+      }
+    },
+  },
+
+  mounted() {
+    this.addBeforeUnload()
+    this.syncValue()
+    this.$nextTick(() => {
+      if (this.withName)
+        this.$refs.nameInput?.focus()
+    })
+  },
+
+  unmouted() {
+    this.reset()
   },
 }
 </script>
 
 <style lang="scss" scoped>
+$floating-btns-height: 3em;
+
 .procedure-editor-container {
   display: flex;
   flex-direction: column;
   padding-top: 0.75em;
+  position: relative;
+  max-height: 75vh;
+
+  main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
 
   .procedure-editor {
     width: 100%;
+    height: calc(100% - #{$floating-btns-height});
+    overflow: auto;
+    padding: 0 1em;
+
+    .procedure-edit-form {
+      padding-bottom: calc(#{$floating-btns-height} + 1em);
+    }
   }
 
-  .actions {
+  h3 {
-    .item {
+    font-size: 1.2em;
-      margin-bottom: 0.75em;
   }
 
-    .drop-target-container {
+  .name-editor-container {
+    .row {
+      display: flex;
+      border-bottom: 1px solid $default-shadow-color;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 0.5em;
+      margin-bottom: 0.5em;
+
+      @include until($tablet) {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      @include from($tablet) {
+        flex-direction: row;
+      }
+
+      .name {
+        margin-right: 0.5em;
+      }
+
+      .value {
+        flex: 1;
+
+        @include until($tablet) {
           width: 100%;
-      height: 0.75em;
+        }
+
+        input {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .icon-editor-container {
+    border-bottom: 1px solid $default-shadow-color;
+    margin-bottom: 0.5em;
+  }
+
+  .spacer {
+    width: 100%;
+    height: calc(#{$floating-btns-height} + 1em);
+    flex-grow: 1;
+  }
+
+  .args-editor-container {
+    .args {
+      margin-bottom: 1em;
+
+      .item {
+        padding-bottom: 0.5em;
+      }
+    }
+  }
+
+  :deep(.args-modal-container) {
+    .modal-container .modal {
+      width: 50em;
+
+      .body {
+        padding: 1em;
+      }
+    }
+
+    .args {
+      position: relative;
+      padding-bottom: calc(#{$floating-btn-size} + 2em);
+
+      .row {
         display: flex;
         align-items: center;
+        margin-bottom: 0.5em;
 
-      &.active {
+        @include until($tablet) {
-        .drop-target {
+          flex-direction: column;
-          height: 0.5em;
+          align-items: flex-start;
-          background: $tile-bg;
+          border-bottom: 1px solid $default-shadow-color;
-          border: none;
+          padding-bottom: 0.5em;
-          opacity: 0.75;
-        }
         }
 
-      .drop-target {
+        .arg-name {
+          @extend .col-s-12;
+          @extend .col-m-5;
+          font-weight: bold;
+
+          input {
             width: 100%;
-        height: 2px;
+
-        border: 1px solid $default-fg-2;
+            @include until($tablet) {
-        border-radius: 0.25em;
+              width: calc(100% - 2em);
-        padding: 0 0.5em;
             }
           }
         }
 
-  &.dragging {
+        .arg-value {
-    padding-top: 0;
+          @extend .col-s-12;
+          @extend .col-m-7;
+          flex: 1;
 
-    .actions {
+          input[type=text] {
-      .item {
+            width: 95%;
-        margin-bottom: 0;
+          }
+        }
+      }
+    }
   }
 
-      .separator {
+  :deep(.floating-buttons) {
-        height: 0.75em;
+    width: 100%;
+    height: $floating-btns-height;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background: $default-bg-5;
+    box-shadow: $border-shadow-top;
+    display: flex;
+    justify-content: space-between;
+
+    .buttons {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 1em;
+      position: relative;
     }
   }
+
+  :deep(.dump-modal-container) {
+    .body {
+      max-width: 47em;
+    }
   }
 }
 </style>

platypush/backend/http/webapp/src/components/Procedure/ProcedureEditorModal.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="procedure-editor-modal-container">
+    <Modal :title="title || value.name"
+           :visible="visible"
+           :uppercase="!value.name"
+           :before-close="(() => $refs.editor?.checkCanClose())"
+           ref="editorModal"
+           @close="$emit('close')">
+      <ProcedureEditor :procedure="value"
+                       :read-only="isReadOnly"
+                       :with-name="!isReadOnly"
+                       :with-save="!isReadOnly"
+                       :value="value"
+                       :modal="isReadOnly ? null : (() => $refs.editorModal)"
+                       ref="editor"
+                       @input="$emit('input', $event)" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
+
+export default {
+  mixins: [Modal, ProcedureEditor],
+  emits: ['close', 'input'],
+  components: {
+    Modal,
+    ProcedureEditor,
+  },
+
+  data: function() {
+    return {
+      args: {},
+      defaultIconClass: 'fas fa-cogs',
+      extraArgs: {},
+      collapsed_: true,
+      infoCollapsed: false,
+      lastError: null,
+      lastResponse: null,
+      newArgName: '',
+      newArgValue: '',
+      runCollapsed: false,
+      showConfirmDelete: false,
+      showFileEditor: false,
+      showProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    isReadOnly() {
+      return this.value.procedure_type && this.value.procedure_type !== 'db'
+    },
+  },
+
+  methods: {
+    // Proxy and delegate the Modal's methods
+    open() {
+      this.$refs.editorModal.open()
+    },
+
+    close() {
+      this.$refs.editorModal.close()
+    },
+
+    show() {
+      this.$refs.editorModal.show()
+    },
+
+    hide() {
+      this.$refs.editorModal.hide()
+    },
+
+    toggle() {
+      this.$refs.editorModal.toggle()
+    },
+  },
+
+  watch: {
+    collapsed: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    selected: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    showProcedureEditor(value) {
+      if (!value) {
+        this.$refs.editor?.reset()
+      }
+    },
+  },
+
+  mounted() {
+    this.collapsed_ = !this.selected
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.procedure-editor-modal-container {
+  cursor: default;
+
+  :deep(.modal-container) {
+    .body {
+      padding: 0;
+
+      @include until($tablet) {
+        width: calc(100vw - 2em);
+      }
+
+      @include from($tablet) {
+        width: 50em;
+      }
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/elements/Autocomplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="autocomplete">
+  <div class="autocomplete" :class="{ 'with-items': showItems }">
     <label :text="label">
       <input
         type="text"
@@ -8,78 +8,53 @@
         :placeholder="placeholder"
         :disabled="disabled"
         :value="value"
-        @focus="onFocus"
+        @focus.stop="onFocus"
-        @input="onInput"
+        @input.stop="onInput"
         @blur="onBlur"
         @keydown="onInputKeyDown"
         @keyup="onInputKeyUp"
        >
     </label>
 
-    <div class="items" v-if="showItems">
+    <div class="items" ref="items" v-if="showItems">
       <div
         class="item"
         :class="{ active: i === curIndex }"
-        :key="item"
+        :key="getItemText(item)"
-        :data-item="item"
+        :data-item="getItemText(item)"
         v-for="(item, i) in visibleItems"
-        @click="onItemSelect(item)">
+        @click.stop="onItemSelect(item)">
-        <span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span>
+        <span class="prefix" v-html="item.prefix" v-if="item.prefix"></span>
-        <span class="normal">{{ item.substr(value?.length || 0) }}</span>
+        <span class="matching" v-if="value?.length">{{ getItemText(item).substr(0, value.length) }}</span>
+        <span class="normal">{{ getItemText(item).substr(value?.length || 0) }}</span>
+        <span class="suffix" v-html="item.suffix" v-if="item.suffix"></span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Props from "@/mixins/Autocomplete/Props"
+
 export default {
-  name: "Autocomplete",
+  emits: ["blur", "focus", "input", "select"],
-  emits: ["input"],
+  mixins: [Props],
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-
-    value: {
-      type: String,
-      default: "",
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    autofocus: {
-      type: Boolean,
-      default: false,
-    },
-
-    label: {
-      type: String,
-    },
-
-    placeholder: {
-      type: String,
-    },
-
-    showResultsWhenBlank: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
   data() {
     return {
       visible: false,
-      curIndex: -1,
+      curIndex: null,
+      selectItemTimer: null,
     }
   },
 
   computed: {
+    itemsText() {
+      return this.items.map((item) => this.getItemText(item))
+    },
+
     visibleItems() {
-      if (!this.value?.length)
+      if (!this.value?.length || this.showAllItems)
         return this.items
 
       const val = this.value.toUpperCase()
@@ -87,7 +62,7 @@ export default {
         return this.showResultsWhenBlank ? this.items : []
 
       return this.items.filter(
-        (item) => item.substr(0, val.length).toUpperCase() === val
+        (item) => this.getItemText(item).substr(0, val.length).toUpperCase() === val
       )
     },
 
@@ -97,105 +72,141 @@ export default {
   },
 
   methods: {
-    selectNextItem() {
+    getItemText(item) {
-      this.curIndex++
+      return item?.text || item
-      this.normalizeIndex()
-    },
-
-    selectPrevItem() {
-      this.curIndex--
-      this.normalizeIndex()
-    },
-
-    normalizeIndex() {
-      // Go to the beginning after reaching the end
-      if (this.curIndex >= this.visibleItems.length)
-        this.curIndex = 0
-
-      // Go to the end after moving back from the start
-      if (this.curIndex < 0)
-        this.curIndex = this.visibleItems.length - 1
-
-      // Scroll to the element
-      const el = this.$el.querySelector("[data-item='" + this.visibleItems[this.curIndex] + "']")
-      if (el)
-        el.scrollIntoView({
-          block: "start",
-          inline: "nearest",
-          behavior: "smooth",
-        })
     },
 
     valueIsInItems() {
+      if (this.showAllItems)
+        return true
+
       if (!this.value)
         return false
 
-      return this.items.indexOf(this.value) >= 0
+      return this.itemsText.indexOf(this.value) >= 0
     },
 
-    onFocus() {
+    onFocus(e) {
+      this.$emit("focus", e)
       if (this.showResultsWhenBlank || this.value?.length)
         this.visible = true
     },
 
     onInput(e) {
-      let val = e.target.value
+      let val = e.target?.value
+      if (val == null) {
+        e.stopPropagation?.()
+        return
+      }
+
       if (this.valueIsInItems())
         this.visible = false
 
       e.stopPropagation()
-      this.$emit("input", val)
+      this.$emit("input", val.text || val)
-      this.curIndex = -1
+      this.curIndex = null
       this.visible = true
     },
 
     onBlur(e) {
+      if (this.inputOnBlur) {
         this.onInput(e)
-      this.$nextTick(() => {
-        if (this.valueIsInItems())
-          this.visible = false
-      })
-    },
-
-    onItemSelect(item) {
-      this.$emit("input", item)
         this.$nextTick(() => {
           if (this.valueIsInItems()) {
             this.visible = false
           }
         })
+
+        return
+      }
+
+      e.stopPropagation()
+      this.$nextTick(() => this.$refs.input.focus())
+
+      setTimeout(() => {
+        if (this.selectItemTimer) {
+          this.$nextTick(() => this.$refs.input.focus())
+          return
+        }
+
+        this.$emit("blur", e)
+        if (this.valueIsInItems()) {
+          this.visible = false
+        }
+      }, 200)
+    },
+
+    onItemSelect(item) {
+      if (this.selectItemTimer) {
+        clearTimeout(this.selectItemTimer)
+        this.selectItemTimer = null
+      }
+
+      this.selectItemTimer = setTimeout(() => {
+        this.selectItemTimer = null
+      }, 250)
+
+      const text = item.text || item
+      this.$emit("select", text)
+      if (this.inputOnSelect)
+        this.$emit("input", text)
+
+      this.$nextTick(() => {
+        if (this.valueIsInItems()) {
+          if (this.inputOnSelect) {
+            this.visible = false
+          } else {
+            this.visible = true
+            this.curIndex = this.visibleItems.indexOf(item)
+            if (this.curIndex < 0)
+              this.curIndex = null
+
+            this.$refs.input.focus()
+          }
+        }
+      })
     },
 
     onInputKeyUp(e) {
-      if (["ArrowUp", "ArrowDown", "Tab", "Enter", "Escape"].indexOf(e.key) >= 0)
+      if (
+        ["ArrowUp", "ArrowDown", "Escape"].indexOf(e.key) >= 0 ||
+        (e.key === "Tab" && this.selectOnTab) ||
+        (e.key === "Enter" && this.curIndex != null)
+      ) {
         e.stopPropagation()
+      }
 
-      if (e.key === "Enter" && this.valueIsInItems()) {
+      if (e.key === "Enter" && this.valueIsInItems() && this.curIndex != null) {
         this.$refs.input.blur()
         this.visible = false
       }
     },
 
     onInputKeyDown(e) {
+      if (!this.showItems)
+        return
+
+      e.stopPropagation()
+
       if (
         e.key === 'ArrowDown' ||
-        (e.key === 'Tab' && !e.shiftKey) ||
+        (e.key === 'Tab' && !e.shiftKey && this.selectOnTab) ||
         (e.key === 'j' && e.ctrlKey)
       ) {
-        this.selectNextItem()
+        this.curIndex = this.curIndex == null ? 0 : this.curIndex + 1
         e.preventDefault()
       } else if (
         e.key === 'ArrowUp' ||
-        (e.key === 'Tab' && e.shiftKey) ||
+        (e.key === 'Tab' && e.shiftKey && this.selectOnTab) ||
         (e.key === 'k' && e.ctrlKey)
       ) {
-        this.selectPrevItem()
+        this.curIndex = this.curIndex == null ? this.visibleItems.length - 1 : this.curIndex - 1
         e.preventDefault()
       } else if (e.key === 'Enter') {
-        if (this.curIndex > -1 && this.visible) {
+        if (this.curIndex != null && this.curIndex >= 0 && this.visible) {
           e.preventDefault()
           this.onItemSelect(this.visibleItems[this.curIndex])
-          this.$refs.input.focus()
+          this.$nextTick(() => this.$refs.input.focus())
         }
       } else if (e.key === 'Escape') {
         this.visible = false
@@ -210,6 +221,33 @@ export default {
     },
   },
 
+  watch: {
+    curIndex() {
+      // Do nothing if the index is not set
+      if (this.curIndex == null)
+        return
+
+      // Go to the beginning after reaching the end
+      if (this.curIndex >= this.visibleItems.length)
+        this.curIndex = 0
+
+      // Go to the end after moving back from the start
+      if (this.curIndex < 0)
+        this.curIndex = this.visibleItems.length - 1
+
+      // Scroll to the element
+      const curText = this.getItemText(this.visibleItems[this.curIndex])
+      const el = this.$el.querySelector(`[data-item='${curText}']`)
+      if (el) {
+        el.scrollIntoView({
+          block: "start",
+          inline: "nearest",
+          behavior: "smooth",
+        })
+      }
+    },
+  },
+
   mounted() {
     document.addEventListener("click", this.onDocumentClick)
     if (this.autofocus)

platypush/backend/http/webapp/src/components/elements/Draggable.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="dragged"
+       :class="{ hidden: !draggingVisible }"
+       :style="{ top: `${top}px`, left: `${left}px` }">
+    <div class="content"
+         v-html="element?.outerHTML || '...'"
+         v-if="draggingVisible" />
+  </div>
+</template>
+
+<script>
+export default {
+  emits: [
+    'contextmenu',
+    'drag',
+    'dragend',
+    'drop',
+  ],
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    element: {
+      type: Object,
+    },
+
+    touchDragStartThreshold: {
+      type: Number,
+      default: 500,
+    },
+
+    touchDragMoveCancelDistance: {
+      type: Number,
+      default: 10,
+    },
+
+    value: {
+      type: [Object, String, Number, Boolean, Array],
+      default: () => ({}),
+    },
+  },
+
+  data() {
+    return {
+      dragging: false,
+      draggingHTML: null,
+      eventsHandlers: {
+        contextmenu: this.onContextMenu,
+        drag: this.onDrag,
+        dragend: this.onDragEnd,
+        dragstart: this.onDragStart,
+        drop: this.onDragEnd,
+        touchcancel: this.onDragEnd,
+        touchend: this.onTouchEnd,
+        touchmove: this.onTouchMove,
+        touchstart: this.onTouchStart,
+      },
+      initialCursorOffset: null,
+      left: 0,
+      top: 0,
+      touchDragStartTimer: null,
+      touchScrollDirection: [0, 0],
+      touchScrollSpeed: 10,
+      touchScrollTimer: null,
+      touchStart: null,
+      touchOverElement: null,
+    }
+  },
+
+  computed: {
+    draggingVisible() {
+      return this.dragging && this.touchStart
+    },
+
+    shouldScroll() {
+      return this.touchScrollDirection[0] || this.touchScrollDirection[1]
+    },
+  },
+
+  methods: {
+    onContextMenu(event) {
+      // If the element is disabled, or there's no touch start event, then we should
+      // emit the contextmenu event as usual.
+      if (this.disabled || !this.touchStart) {
+        this.$emit('contextmenu', event)
+        return
+      }
+
+      // Otherwise, if a touch start event was registered, then we should prevent the
+      // context menu event from being emitted, as it's most likely a long touch event
+      // that should trigger the drag event.
+      event.preventDefault()
+      event.stopPropagation()
+      this.onDragStart(event)
+    },
+
+    onDragStart(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.dragging = true
+      this.draggingHTML = this.$slots.default?.()?.el?.outerHTML
+      event.value = this.value
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.effectAllowed = 'move'
+        event.dataTransfer.setData('application/json', JSON.stringify(this.value))
+      }
+
+      this.cancelTouchDragStart()
+      this.$emit('drag', event)
+    },
+
+    onDragEnd(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.reset()
+      this.$emit('dragend', event)
+    },
+
+    onTouchStart(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!touch) {
+        return
+      }
+
+      this.touchStart = [touch.clientX, touch.clientY]
+      this.cancelTouchDragStart()
+      this.touchDragStartTimer = setTimeout(() => {
+        this.onDragStart(event)
+      }, this.touchDragStartThreshold)
+    },
+
+    onTouchMove(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!(touch && this.touchStart)) {
+        return
+      }
+
+      // If we received a touch move event, and there's a touch drag start timer,
+      // then most likely the user is not trying to drag the element, but just scrolling.
+      // In this case, we should cancel the drag start timer.
+      if (this.touchDragStartTimer) {
+        const distance = Math.hypot(
+          touch.clientX - this.touchStart[0],
+          touch.clientY - this.touchStart[1]
+        )
+
+        if (distance > this.touchDragMoveCancelDistance) {
+          this.reset()
+          return
+        }
+
+        this.onDragStart(event)
+      }
+
+      event.preventDefault()
+      const { clientX, clientY } = touch
+      this.left = clientX
+      this.top = clientY
+      this.left = clientX - this.touchStart[0]
+      this.top = clientY - this.touchStart[1]
+      this.touchScroll(event)
+
+      // Get droppable element under the touch, excluding the current dragged element
+      let droppable = document.elementsFromPoint(clientX, clientY).filter(
+        el => el.dataset?.droppable && !el.classList.contains('dragged')
+      )?.[0]
+
+      if (!droppable) {
+        this.touchOverElement = null
+        return
+      }
+
+      this.dispatchEvent('dragenter', droppable)
+      this.touchOverElement = droppable
+    },
+
+    touchScroll(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const parent = this.getScrollableParent()
+      if (!parent) {
+        return
+      }
+
+      const touch = event.touches?.[0]
+      if (!touch) {
+        return
+      }
+
+      const { clientX, clientY } = touch
+      const rect = parent.getBoundingClientRect()
+      const touchOffset = [
+        (clientX - rect.left) / rect.width,
+        (clientY - rect.top) / rect.height
+      ]
+
+      const scrollDirection = [0, 0]
+
+      if (touchOffset[0] < 0) {
+        scrollDirection[0] = -1
+      } else if (touchOffset[0] > 1) {
+        scrollDirection[0] = 1
+      }
+
+      if (touchOffset[1] < 0) {
+        scrollDirection[1] = -1
+      } else if (touchOffset[1] > 1) {
+        scrollDirection[1] = 1
+      }
+
+      this.handleTouchScroll(scrollDirection, parent)
+    },
+
+    onTouchEnd(event) {
+      if (this.disabled) {
+        return
+      }
+
+      const droppable = this.touchOverElement
+      if (droppable) {
+        this.dispatchEvent('drop', droppable)
+      }
+
+      this.onDragEnd(event)
+    },
+
+    handleTouchScroll(value, parent) {
+      this.touchScrollDirection = value
+      if (!(value[0] || value[1])) {
+        this.cancelScroll()
+        return
+      }
+
+      if (this.touchScrollTimer) {
+        return
+      }
+
+      this.touchScrollTimer = setInterval(() => {
+        if (!parent) {
+          return
+        }
+
+        const [x, y] = value
+        parent.scrollBy(x * this.touchScrollSpeed, y * this.touchScrollSpeed)
+      }, 1000 / 60)
+    },
+
+    getScrollableParent() {
+      let parent = this.element?.parentElement
+      while (parent) {
+        if (
+          parent.scrollHeight > parent.clientHeight ||
+          parent.scrollWidth > parent.clientWidth
+        ) {
+          const style = window.getComputedStyle(parent)
+          if (['scroll', 'auto'].includes(style.overflowY) || ['scroll', 'auto'].includes(style.overflowX)) {
+            return parent
+          }
+        }
+
+        parent = parent.parentElement
+      }
+      return null
+    },
+
+    dispatchEvent(type, droppable) {
+      droppable.dispatchEvent(
+        new DragEvent(
+          type, {
+            target: {
+              ...droppable,
+              value: this.value,
+            }
+          }
+        )
+      )
+    },
+
+    cancelScroll() {
+      this.touchScrollDirection = [0, 0]
+
+      if (this.touchScrollTimer) {
+        clearInterval(this.touchScrollTimer)
+        this.touchScrollTimer = null
+      }
+    },
+
+    cancelTouchDragStart() {
+      if (this.touchDragStartTimer) {
+        clearTimeout(this.touchDragStartTimer)
+        this.touchDragStartTimer = null
+      }
+    },
+
+    reset() {
+      this.cancelTouchDragStart()
+      this.cancelScroll()
+      this.dragging = false
+      this.touchStart = null
+      this.touchOverElement = null
+      this.left = 0
+      this.top = 0
+      this.initialCursorOffset = null
+    },
+
+    installHandlers() {
+      console.debug('Installing drag handlers on', this.element)
+      this.element?.setAttribute('draggable', true)
+      Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+        this.element?.addEventListener(event, handler)
+      })
+    },
+
+    uninstallHandlers() {
+      console.debug('Uninstalling drag handlers from', this.element)
+      this.element?.setAttribute('draggable', false)
+      Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+        this.element?.removeEventListener(event, handler)
+      })
+    },
+  },
+
+  watch: {
+    dragging() {
+      if (this.dragging) {
+        this.element?.classList.add('dragged')
+        this.$nextTick(() => {
+          if (!this.touchStart) {
+            return
+          }
+
+          this.initialCursorOffset = [
+            this.element?.offsetLeft - this.touchStart[0],
+            this.element?.offsetTop - this.touchStart[1]
+          ]
+        })
+      } else {
+        this.element?.classList.remove('dragged')
+      }
+    },
+
+    disabled(value) {
+      if (value) {
+        this.reset()
+        this.uninstallHandlers()
+      } else {
+        this.installHandlers()
+      }
+    },
+
+    element() {
+      this.uninstallHandlers()
+      this.installHandlers()
+    },
+
+    touchOverElement(value, oldValue) {
+      if (value === oldValue) {
+        return
+      }
+
+      if (oldValue) {
+        this.dispatchEvent('dragleave', oldValue)
+      }
+
+      if (value) {
+        this.dispatchEvent('dragenter', value)
+      }
+    },
+  },
+
+  mounted() {
+    this.installHandlers()
+  },
+
+  unmounted() {
+    this.uninstallHandlers()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dragged {
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+  transform: scale(0.5);
+  z-index: 1000;
+}
+</style>

platypush/backend/http/webapp/src/components/elements/Dropdown.vue

@@ -176,7 +176,7 @@ export default {
 
     toggle(event) {
       event.stopPropagation()
-      this.$emit('click')
+      this.$emit('click', event)
       this.visible ? this.close() : this.open()
     },
 

platypush/backend/http/webapp/src/components/elements/Droppable.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="droppable" />
+</template>
+
+<script>
+export default {
+  emits: [
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  props: {
+    element: {
+      type: Object,
+    },
+
+    active: {
+      type: Boolean,
+      default: false,
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      eventsHandlers: {
+        dragenter: this.onDragEnter,
+        dragleave: this.onDragLeave,
+        dragover: this.onDragOver,
+        drop: this.onDrop,
+      },
+      selected: false,
+    }
+  },
+
+  methods: {
+    onDragEnter(event) {
+      if (this.disabled || this.selected) {
+        return
+      }
+
+      this.selected = true
+      this.$emit('dragenter', event)
+    },
+
+    onDragLeave(event) {
+      if (this.disabled || !this.selected) {
+        return
+      }
+
+      const rect = this.element.getBoundingClientRect()
+      if (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom
+      ) {
+        return
+      }
+
+      this.selected = false
+      this.$emit('dragleave', event)
+    },
+
+    onDragOver(event) {
+      if (this.disabled) {
+        return
+      }
+
+      event.preventDefault()
+      this.selected = true
+      this.$emit('dragover', event)
+    },
+
+    onDrop(event) {
+      if (this.disabled) {
+        return
+      }
+
+      this.selected = false
+      this.$emit('drop', event)
+    },
+
+    installHandlers() {
+      const el = this.element
+      if (!el) {
+        return
+      }
+
+      console.debug('Installing drop handlers on', this.element)
+      if (el.dataset) {
+        el.dataset.droppable = true;
+      }
+
+      if (el.addEventListener) {
+        Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+          el.addEventListener(event, handler)
+        })
+      }
+    },
+
+    uninstallHandlers() {
+      const el = this.element
+      if (!el) {
+        return
+      }
+
+      console.debug('Uninstalling drop handlers from', this.element)
+      if (el.dataset?.droppable) {
+        delete el.dataset.droppable;
+      }
+
+      if (el.removeEventListener) {
+        Object.entries(this.eventsHandlers).forEach(([event, handler]) => {
+          el.removeEventListener(event, handler)
+        })
+      }
+    },
+  },
+
+  watch: {
+    active() {
+      if (this.active) {
+        this.element?.classList.add('active')
+      } else {
+        this.element?.classList.remove('active')
+      }
+    },
+
+    disabled: {
+      handler() {
+        if (this.disabled) {
+          this.element?.classList.add('disabled')
+        } else {
+          this.element?.classList.remove('disabled')
+        }
+      },
+    },
+
+    element: {
+      handler() {
+        this.uninstallHandlers()
+        this.installHandlers()
+      },
+    },
+
+    selected: {
+      handler(value, oldValue) {
+        if (value && !oldValue) {
+          this.element?.classList.add('selected')
+        } else if (!value && oldValue) {
+          this.element?.classList.remove('selected')
+        }
+      },
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.installHandlers()
+    })
+  },
+
+  unmounted() {
+    this.uninstallHandlers()
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/elements/EditButton.vue

@@ -1,7 +1,9 @@
 <template>
   <button class="edit-btn"
-    @click="proxy($event)" @touch="proxy($event)" @input="proxy($event)"
+          :title="title"
-  >
+          @click="proxy($event)"
+          @touch="proxy($event)"
+          @input="proxy($event)">
     <i class="fas fa-pen-to-square" />
   </button>
 </template>
@@ -9,6 +11,13 @@
 <script>
 export default {
   emits: ['input', 'click', 'touch'],
+  props: {
+    title: {
+      type: String,
+      default: 'Edit',
+    },
+  },
+
   methods: {
     proxy(e) {
       this.$emit(e.type, e)
@@ -26,8 +35,8 @@ export default {
   border: 1px solid rgba(0, 0, 0, 0);
 
   &:hover {
-    background: $hover-bg;
+    color: $default-hover-fg;
-    border: 1px solid $selected-fg;
+    border: none;
   }
 }
 </style>

platypush/backend/http/webapp/src/components/elements/FloatingButton.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="floating-btn" :class="className">
+  <div class="floating-btn" :class="classes">
     <button type="button"
             class="btn btn-primary"
+            :class="glow ? 'with-glow' : ''"
             :disabled="disabled"
             :title="title"
             @click="$emit('click', $event)">
@@ -14,7 +15,6 @@
 import Icon from "@/components/elements/Icon";
 
 export default {
-  name: "FloatingButton",
   components: {Icon},
   emits: ["click"],
 
@@ -35,11 +35,49 @@ export default {
     title: {
       type: String,
     },
+    left: {
+      type: Boolean,
+      default: false,
+    },
+    right: {
+      type: Boolean,
+      default: true,
+    },
+    top: {
+      type: Boolean,
+      default: false,
+    },
+    bottom: {
+      type: Boolean,
+      default: true,
+    },
+    glow: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   computed: {
-    className() {
+    classes() {
-      return this.class
+      const classes = {}
+
+      if (this.left) {
+        classes.left = true
+      } else {
+        classes.right = true
+      }
+
+      if (this.top) {
+        classes.top = true
+      } else {
+        classes.bottom = true
+      }
+
+      if (this.class?.length) {
+        classes[this.class] = true
+      }
+
+      return classes
     }
   }
 }
@@ -48,15 +86,32 @@ export default {
 <style lang="scss" scoped>
 .floating-btn {
   position: absolute;
-  bottom: 0;
+
+  &.left {
+    left: 0;
+    margin-left: 1em;
+  }
+
+  &.right {
     right: 0;
-  margin: auto 1em 1em auto;
+    margin-right: 1em;
+  }
+
+  &.top {
+    top: 0;
+    margin-top: 1em;
+  }
+
+  &.bottom {
+    bottom: 0;
+    margin-bottom: 1em;
+  }
 
   button {
     background: $tile-bg !important;
     color: $tile-fg !important;
-    width: 4em;
+    width: $floating-btn-size;
-    height: 4em;
+    height: $floating-btn-size;
     border-radius: 2em;
     border: none !important;
     padding: 0;
@@ -72,6 +127,20 @@ export default {
       color: $disabled-fg !important;
       cursor: not-allowed;
     }
+
+    &.with-glow {
+      &:not(:disabled) {
+        @extend .glow;
+        background: $default-bg-3 !important;
+        color: $ok-fg !important;
+        box-shadow: 0 0 1px 1px $selected-fg !important;
+
+        &:hover {
+          box-shadow: 0 0 1px 1px $active-glow-bg-2 !important;
+          color: $play-btn-fg !important;
+        }
+      }
+    }
   }
 
   :deep(button) {

platypush/backend/http/webapp/src/components/elements/FloatingButtons.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="floating-btns" :class="{direction: direction}">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  emits: ["click"],
+  props: {
+    direction: {
+      type: String,
+      default: "row",
+    },
+
+    size: {
+      type: String,
+      default: "4em",
+    },
+  },
+
+  computed: {
+    buttons() {
+      return this.$el.querySelectorAll(".floating-btn")
+    },
+  },
+
+  mounted() {
+    const buttons = Array.from(this.buttons)
+    let offset = 0
+    buttons.forEach((button, index) => {
+      const size = button.offsetWidth
+      const styleOffset = `calc(${offset}px + (${index} * 1em))`
+      if (this.direction === "row") {
+        if (!parseFloat(getComputedStyle(button).left))
+          button.style.left = styleOffset
+        else
+          button.style.right = styleOffset
+      } else {
+        if (!parseFloat(getComputedStyle(button).top))
+          button.style.top = styleOffset
+        else
+          button.style.bottom = styleOffset
+      }
+
+      offset += size
+    })
+  },
+}
+</script>

platypush/backend/http/webapp/src/components/elements/NameEditor.vue

@@ -1,10 +1,15 @@
 <template>
   <form @submit.prevent="submit" class="name-editor">
-    <input type="text" v-model="text" :disabled="disabled" ref="input">
+    <input type="text"
+           :disabled="disabled"
+           v-model="text"
+           @keydown="proxy"
+           @keyup="proxy"
+           ref="input">
     <button type="submit">
       <i class="fas fa-circle-check" />
     </button>
-    <button class="cancel" @click="$emit('cancel')" @touch="$emit('cancel')">
+    <button class="cancel" @click="$emit('cancel')">
       <i class="fas fa-ban" />
     </button>
     <slot />
@@ -13,7 +18,7 @@
 
 <script>
 export default {
-  emits: ['input', 'cancel'],
+  emits: ['input', 'cancel', 'keyup', 'keydown'],
   props: {
     value: {
       type: String,

platypush/backend/http/webapp/src/components/elements/Tile.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="tile-container" :class="className">
+    <div class="tile" ref="tile" @click="$emit('click', $event)">
+      <div class="delete"
+           title="Remove"
+           v-if="withDelete"
+           @click.stop="$emit('delete')">
+        <i class="icon fas fa-xmark" />
+      </div>
+
+      <slot />
+    </div>
+
+    <Draggable :element="tile"
+               :disabled="readOnly"
+               :value="value"
+               @drag="$emit('drag', $event)"
+               @dragend="$emit('dragend', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="draggable" />
+
+    <Droppable :element="tile"
+               @dragenter="$emit('dragenter', $event)"
+               @dragleave="$emit('dragleave', $event)"
+               @dragover="$emit('dragover', $event)"
+               @drop="$emit('drop', $event)"
+               v-if="!readOnly" />
+  </div>
+</template>
+
+<script>
+import Draggable from "@/components/elements/Draggable"
+import Droppable from "@/components/elements/Droppable"
+
+export default {
+  emits: [
+    'click',
+    'delete',
+    'drag',
+    'dragenter',
+    'dragleave',
+    'dragover',
+    'drop',
+  ],
+
+  components: {
+    Draggable,
+    Droppable,
+  },
+
+  props: {
+    className: {
+      type: [String, Object],
+      default: '',
+    },
+
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: [Object, String, Number, Boolean, Array],
+    },
+
+    withDelete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      tile: undefined,
+    }
+  },
+
+  mounted() {
+    this.tile = this.$refs.tile
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tile-container {
+  position: relative;
+
+  .tile {
+    min-width: 20em;
+    background: $tile-bg;
+    color: $tile-fg;
+    display: flex;
+    flex-direction: column;
+    padding: 0.5em 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    content: "";
+    position: relative;
+    border-radius: 1em;
+    cursor: pointer;
+
+    &:hover {
+      background: $tile-hover-bg;
+    }
+
+    &.selected {
+      background: $tile-hover-bg;
+    }
+
+    .delete {
+      width: 1.5em;
+      height: 1.5em;
+      font-size: 1.25em;
+      position: absolute;
+      top: 0.25em;
+      right: 0;
+      opacity: 0.7;
+      transition: opacity 0.25s ease-in-out;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.keyword {
+    .tile {
+      background: $tile-bg-2;
+
+      &:hover {
+        background: $tile-hover-bg-2;
+      }
+    }
+  }
+
+  &.add {
+    .tile {
+      background: $tile-bg-3;
+
+      &:hover {
+        background: $tile-hover-bg-3;
+      }
+    }
+  }
+}
+
+:deep(.tile) {
+  .tile-name {
+    display: inline-flex;
+    font-size: 1.1em;
+    font-weight: bold;
+    font-family: monospace;
+    align-items: center;
+
+    .icon {
+      width: 1.5em;
+      height: 1.5em;
+      margin-right: 0.75em;
+    }
+  }
+
+  .keyword {
+    color: $tile-keyword-fg;
+  }
+
+  .code {
+    color: $tile-code-fg;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/Alarm.vue

@@ -370,16 +370,13 @@ $icon-width: 2em;
     cursor: default;
 
     .content {
-      width: 50em;
-      max-width: 90%;
-
       .body {
         width: 100%;
       }
     }
 
     .alarm-running-modal {
-      width: 100%;
+      min-width: 90vw;
       height: 100%;
       display: flex;
       flex-direction: column;
@@ -387,6 +384,10 @@ $icon-width: 2em;
       justify-content: center;
       padding: 1em;
 
+      @include from($tablet) {
+        min-width: 40em;
+      }
+
       .icon {
         font-size: 3.5em;
         color: $selected-fg;

platypush/backend/http/webapp/src/components/panels/Entities/Alarm/AlarmEditor.vue

@@ -85,7 +85,7 @@
             </span>
           </div>
 
-          <div class="value">
+          <div class="value file-selector">
             <FileSelector :value="editForm.media" @input="editForm.media = $event" />
           </div>
         </div>
@@ -127,7 +127,7 @@
 
             <div class="value">
               <ToggleSwitch :value="editForm.media_repeat"
-                            @input="editForm.media_repeat = $event.target.checked" />
+                            @input="editForm.media_repeat = !!$event.target.checked" />
             </div>
           </label>
         </div>
@@ -208,9 +208,7 @@
           </div>
 
           <div class="value">
-            <ProcedureEditor :value="procedure"
+            <ActionsList :value="procedure" @update="onActionsUpdate($event)" />
-                             :with-name="false"
-                             @input="onActionsInput($event)" />
           </div>
         </div>
       </div>
@@ -219,8 +217,8 @@
 </template>
 
 <script>
-import Loading from "@/components/Loading";
+import ActionsList from "@/components/Action/ActionsList"
-import ProcedureEditor from "@/components/Procedure/ProcedureEditor"
+import Loading from "@/components/Loading"
 import Slider from "@/components/elements/Slider"
 import CronEditor from "@/components/elements/CronEditor"
 import FileSelector from "@/components/elements/FileSelector"
@@ -232,10 +230,10 @@ export default {
   emits: ['input'],
   mixins: [Utils],
   components: {
+    ActionsList,
     CronEditor,
     FileSelector,
     Loading,
-    ProcedureEditor,
     Slider,
     TimeInterval,
     ToggleSwitch,
@@ -262,9 +260,7 @@ export default {
 
   computed: {
     procedure() {
-      return {
+      return [...(this.editForm.actions || [])]
-        actions: [...(this.editForm.actions || [])],
-      }
     },
 
     audioVolume() {
@@ -338,8 +334,12 @@ export default {
       this.editForm.condition_type = type
     },
 
-    onActionsInput(procedure) {
+    onActionsUpdate(actions) {
-      this.editForm.actions = procedure.actions
+      actions = [...(actions ?? [])]
+      if (JSON.stringify(this.editForm.actions) === JSON.stringify(actions))
+        return
+
+      this.editForm.actions = actions
     },
 
     onVolumeChange(event) {
@@ -498,5 +498,17 @@ $header-height: 3.5em;
   input[type=text] {
     min-height: 2em;
   }
+
+  :deep(.file-selector) {
+    .modal {
+      .body {
+        min-width: 95vw;
+
+        @include from($tablet) {
+          min-width: 40em;
+        }
+      }
+    }
+  }
 }
 </style>

platypush/backend/http/webapp/src/components/panels/Entities/IconEditor.vue

@@ -0,0 +1,265 @@
+<template>
+  <form class="icon-editor"
+        @submit="onIconEdit(newIcon, $event)"
+        @click.stop>
+    <div class="row item">
+      <div class="title">
+        Icon
+        <EditButton title="Edit Icon"
+                    @click.stop="editIcon = true"
+                    v-if="!editIcon" />
+      </div>
+      <div class="value icon-canvas">
+        <span class="icon-editor" v-if="editIcon">
+          <span class="icon-edit-form" v-if="newIcon != null">
+            <span class="icon-container">
+              <img :src="currentIcon.url" v-if="currentIcon?.url" />
+              <i :class="currentIcon.class" :style="{color: currentIcon.color}" v-else />
+            </span>
+
+            <NameEditor :value="currentIcon.url || currentIcon.class"
+                        :disabled="loading"
+                        @keyup="newIcon = $event.target.value?.trim()"
+                        @input="onIconEdit(newIcon)"
+                        @cancel="editIcon = false">
+              <button type="button"
+                      title="Reset"
+                      @click.stop="onIconEdit(null, $event)">
+                <i class="fas fa-rotate-left" />
+              </button>
+            </NameEditor>
+          </span>
+
+          <span class="help">
+            Supported: image URLs or
+            <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
+          </span>
+        </span>
+
+        <Icon v-bind="currentIcon" v-else />
+      </div>
+    </div>
+
+    <div class="row item">
+      <div class="title">
+        Icon color
+      </div>
+      <div class="value icon-color-picker">
+        <input type="color"
+               :value="currentIcon.color"
+               @input.stop
+               @change.stop="onIconColorEdit">
+        <button type="button"
+                title="Reset"
+                @click.stop="onIconColorEdit(null)">
+          <i class="fas fa-rotate-left" />
+        </button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+import EditButton from "@/components/elements/EditButton";
+import Icon from "@/components/elements/Icon";
+import NameEditor from "@/components/elements/NameEditor";
+import Utils from "@/Utils";
+import meta from './meta.json';
+
+export default {
+  components: {
+    EditButton,
+    Icon,
+    NameEditor,
+  },
+  mixins: [Utils],
+  emits: ['change', 'input'],
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      editIcon: false,
+      loading: false,
+      newIcon: null,
+      newColor: null,
+    }
+  },
+
+  computed: {
+    currentIcon() {
+      return {
+        ...((meta[this.entity.type] || {})?.icon || {}),
+        ...(this.entity.meta?.icon || {}),
+        ...(this.newIcon ? this.iconObj(this.newIcon) : {}),
+        ...(this.newColor?.length ? {color: this.newColor} : {}),
+      }
+    },
+  },
+
+  methods: {
+    async edit(icon, event) {
+      const req = {
+        [this.entity.id]: {icon},
+      }
+      this.loading = true
+
+      if (event)
+        event.stopPropagation()
+
+      try {
+        const entity = (await this.request('entities.set_meta', req))[0]
+        icon = entity?.meta?.icon
+        if (icon) {
+          this.$emit('input', icon)
+        }
+      } finally {
+        this.loading = false
+        this.editIcon = false
+      }
+    },
+
+    async onIconEdit(newIcon, event) {
+      const icon = {
+        ...this.currentIcon,
+        ...(this.iconObj(newIcon) || {}),
+      }
+
+      await this.edit(icon, event)
+    },
+
+    async onIconColorEdit(event) {
+      const color = event?.target?.value
+      const icon = {
+        ...this.currentIcon,
+        ...(color?.length ? {color} : {color: null}),
+      }
+
+      this.newColor = color
+      await this.edit(icon, event)
+    },
+
+    iconObj(iconStr) {
+      if (!iconStr?.length)
+        return {
+          ...this.currentIcon,
+          url: this.entity.meta?.icon?.url,
+          class: this.entity.meta?.icon?.class,
+        }
+
+      if (iconStr.startsWith('http'))
+        return {url: iconStr}
+
+      return {class: iconStr}
+    },
+  },
+
+  watch: {
+    editIcon() {
+      this.newIcon = (
+        this.entity.meta?.icon?.url ||
+        this.entity.meta?.icon?.['class'] ||
+        this.currentIcon.url ||
+        this.currentIcon.class
+      )?.trim()
+    },
+
+    newIcon() {
+      this.$emit('change', this.currentIcon)
+    },
+
+    newColor() {
+      this.$emit('change', this.currentIcon)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.icon-editor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding-bottom: 0.5em;
+
+    @include until($tablet) {
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .title {
+      width: 10em;
+
+      @include until($tablet) {
+        width: 100%;
+      }
+    }
+
+    .value {
+      display: inline-flex;
+      flex: 1;
+      justify-content: flex-end;
+
+      @include until($tablet) {
+        width: 100%;
+        justify-content: flex-start;
+      }
+    }
+
+    .icon-editor {
+      align-items: flex-end;
+
+      @include until($tablet) {
+        align-items: flex-start;
+      }
+
+      .icon-container {
+        margin-right: 0.5em;
+      }
+
+      img {
+        max-width: 2em;
+        max-height: 2em;
+      }
+    }
+  }
+
+  .icon-canvas {
+    display: inline-flex;
+    align-items: center;
+
+    @include until($tablet) {
+      .icon-container {
+        justify-content: left;
+      }
+    }
+
+    @include from($tablet) {
+      .icon-container {
+        justify-content: right;
+        margin-right: 0.5em;
+      }
+    }
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0 0.5em;
+  }
+
+  .help {
+    font-size: 0.75em;
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -28,7 +28,10 @@
       <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
 
       <div class="groups-container" v-else>
-        <div class="group fade-in" v-for="group in displayGroups" :key="group.name">
+        <div class="group fade-in"
+             v-for="group in displayGroups"
+             :key="group.name"
+             :ref="`group-${group.name}`">
           <div class="frame">
             <div class="header">
               <span class="section left">
@@ -386,6 +389,29 @@ export default {
       }
     },
 
+    onModalOpen(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + (parseInt(group.style.zIndex || 0) + 1)
+    },
+
+    onModalClose(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + Math.max(0, parseInt(group.style.zIndex || 0) - 1)
+    },
+
+    getParentGroup(element) {
+      let parent = element
+      while (parent && !parent.classList?.contains('group'))
+        parent = parent.parentElement
+      return parent
+    },
+
     loadCachedEntities() {
       const cachedEntities = window.localStorage.getItem('entities')
       if (cachedEntities) {
@@ -427,6 +453,9 @@ export default {
       'platypush.message.event.entities.EntityDeleteEvent'
     )
 
+    bus.on('modal-open', this.onModalOpen)
+    bus.on('modal-close', this.onModalClose)
+
     const hasCachedEntities = this.loadCachedEntities()
     await this.sync(!hasCachedEntities)
     await this.refresh(null, !hasCachedEntities)
@@ -535,6 +564,7 @@ export default {
         max-height: calc(100vh - #{$header-height} - #{$main-margin});
       }
 
+      width: 100%;
       display: flex;
       flex-direction: column;
       flex-grow: 1;

platypush/backend/http/webapp/src/components/panels/Entities/Modal.vue

@@ -20,40 +20,7 @@
     </div>
 
     <div class="table-row">
-      <div class="title">
+      <IconEditor :entity="entity" @input="onIconEdit" />
-        Icon
-        <EditButton @click="editIcon = true" v-if="!editIcon" />
-      </div>
-      <div class="value icon-canvas">
-        <span class="icon-editor" v-if="editIcon">
-          <NameEditor :value="entity.meta?.icon?.class || entity.meta?.icon?.url" @input="onIconEdit"
-            @cancel="editIcon = false" :disabled="loading">
-            <button type="button" title="Reset" @click="onIconEdit(null)"
-                @touch="onIconEdit(null)">
-              <i class="fas fa-rotate-left" />
-            </button>
-          </NameEditor>
-          <span class="help">
-            Supported: image URLs or
-            <a href="https://fontawesome.com/icons" target="_blank">FontAwesome icon classes</a>.
-          </span>
-        </span>
-
-        <Icon v-bind="entity?.meta?.icon || {}" v-else />
-      </div>
-    </div>
-
-    <div class="table-row">
-      <div class="title">
-        Icon color
-      </div>
-      <div class="value icon-color-picker">
-        <input type="color" :value="entity.meta?.icon?.color" @change="onIconColorEdit">
-        <button type="button" title="Reset" @click="onIconColorEdit(null)"
-            @touch="onIconColorEdit(null)">
-          <i class="fas fa-rotate-left" />
-        </button>
-      </div>
     </div>
 
     <div class="table-row">
@@ -206,14 +173,13 @@
 
 <script>
 import Modal from "@/components/Modal";
-import Icon from "@/components/elements/Icon";
+import IconEditor from "./IconEditor";
 import ConfirmDialog from "@/components/elements/ConfirmDialog";
 import EditButton from "@/components/elements/EditButton";
 import EntityIcon from "./EntityIcon"
 import NameEditor from "@/components/elements/NameEditor";
 import Utils from "@/Utils";
 import Entity from "./Entity";
-import meta from './meta.json';
 
 // These fields have a different rendering logic than the general-purpose one
 const specialFields = [
@@ -233,9 +199,14 @@ const specialFields = [
 ]
 
 export default {
-  name: "EntityModal",
   components: {
-    Entity, EntityIcon, Modal, EditButton, NameEditor, Icon, ConfirmDialog
+    ConfirmDialog,
+    EditButton,
+    Entity,
+    EntityIcon,
+    IconEditor,
+    Modal,
+    NameEditor,
   },
   mixins: [Utils],
   emits: ['input', 'loading', 'entity-update'],
@@ -276,7 +247,6 @@ export default {
     return {
       loading: false,
       editName: false,
-      editIcon: false,
       configCollapsed: true,
       childrenCollapsed: true,
       extraInfoCollapsed: true,
@@ -308,47 +278,14 @@ export default {
       }
     },
 
-    async onIconEdit(newIcon) {
+    onIconEdit(icon) {
-      this.loading = true
+      this.$emit(
-
+        'input',
-      try {
+        {
-        const icon = {url: null, class: null}
+          ...this.entity,
-        if (newIcon?.length) {
+          meta: {...this.entity.meta, icon},
-          if (newIcon.startsWith('http'))
-            icon.url = newIcon
-          else
-            icon.class = newIcon
-        } else {
-          icon.url = (meta[this.entity.type] || {})?.icon?.url
-          icon.class = (meta[this.entity.type] || {})?.icon?.['class']
-        }
-
-        const req = {}
-        req[this.entity.id] = {icon: icon}
-        await this.request('entities.set_meta', req)
-      } finally {
-        this.loading = false
-        this.editIcon = false
-      }
-    },
-
-    async onIconColorEdit(event) {
-      this.loading = true
-
-      try {
-        const icon = this.entity.meta?.icon || {}
-        if (event)
-          icon.color = event.target.value
-        else
-          icon.color = null
-
-        const req = {}
-        req[this.entity.id] = {icon: icon}
-        await this.request('entities.set_meta', req)
-      } finally {
-        this.loading = false
-        this.editIcon = false
         }
+      )
     },
 
     stringify(value) {
@@ -419,39 +356,12 @@ export default {
     }
   }
 
-  .icon-canvas {
-    display: inline-flex;
-    align-items: center;
-
-    @include until($tablet) {
-      .icon-container {
-        justify-content: left;
-      }
-    }
-
-    @include from($tablet) {
-      .icon-container {
-        justify-content: right;
-        margin-right: 0.5em;
-      }
-    }
-  }
-
-  .icon-editor {
-    display: flex;
-    flex-direction: column;
-  }
-
   button {
     border: none;
     background: none;
     padding: 0 0.5em;
   }
 
-  .help {
-    font-size: 0.75em;
-  }
-
   .delete-entity-container {
     color: $error-fg;
     cursor: pointer;

platypush/backend/http/webapp/src/components/panels/Entities/Procedure.vue

@@ -0,0 +1,718 @@
+<template>
+  <div class="entity procedure-container">
+    <div class="head" :class="{collapsed: collapsed_}" @click="onHeaderClick">
+      <div class="icon">
+        <EntityIcon :entity="value" :icon="icon" :loading="loading" />
+      </div>
+
+      <div class="label">
+        <div class="name" v-text="value.name" />
+      </div>
+
+      <div class="value-and-toggler">
+        <div class="value">
+          <button class="btn btn-primary head-run-btn"
+                  title="Run Procedure"
+                  :disabled="loading"
+                  @click.stop="run"
+                  v-if="collapsed_">
+            <i class="fas fa-play" />
+          </button>
+        </div>
+
+        <div class="collapse-toggler" @click.stop="collapsed_ = !collapsed_">
+          <i class="fas" :class="{'fa-chevron-down': collapsed_, 'fa-chevron-up': !collapsed_}" />
+        </div>
+      </div>
+    </div>
+
+    <div class="body" v-if="!collapsed_" @click.stop>
+      <section class="run">
+        <header :class="{collapsed: runCollapsed}" @click="runCollapsed = !runCollapsed">
+          <span class="col-10">
+            <i class="fas fa-play" />&nbsp; Run
+          </span>
+          <span class="col-2 buttons">
+            <button type="button"
+                    class="btn btn-primary"
+                    :disabled="loading"
+                    :title="runCollapsed ? 'Expand' : 'Collapse'">
+              <i class="fas" :class="{'fa-chevron-down': runCollapsed, 'fa-chevron-up': !runCollapsed}" />
+            </button>
+          </span>
+        </header>
+
+        <div class="run-body" v-if="!runCollapsed">
+          <form @submit.prevent="run">
+            <div class="args" v-if="value.args?.length">
+              Arguments
+              <div class="row arg" v-for="(arg, index) in value.args || []" :key="index">
+                <input type="text"
+                       class="argname"
+                       :value="arg"
+                       :disabled="true" />&nbsp;=
+                <input type="text"
+                       class="argvalue"
+                       placeholder="Value"
+                       :disabled="loading"
+                       @input="updateArg(arg, $event)" />
+              </div>
+            </div>
+
+            <div class="extra args">
+              Extra Arguments
+              <div class="row arg" v-for="(value, name) in extraArgs" :key="name">
+                <input type="text"
+                       class="argname"
+                       placeholder="Name"
+                       :value="name"
+                       :disabled="loading"
+                       @blur="updateExtraArgName(name, $event)" />&nbsp;=
+                <input type="text"
+                       placeholder="Value"
+                       class="argvalue"
+                       :value="value"
+                       :disabled="loading"
+                       @input="updateExtraArgValue(arg, $event)" />
+              </div>
+
+              <div class="row add-arg">
+                <input type="text"
+                       class="argname"
+                       placeholder="Name"
+                       v-model="newArgName"
+                       :disabled="loading"
+                       ref="newArgName"
+                       @blur="addExtraArg" />&nbsp;=
+                <input type="text"
+                       class="argvalue"
+                       placeholder="Value"
+                       v-model="newArgValue"
+                       :disabled="loading"
+                       @blur="addExtraArg" />
+              </div>
+            </div>
+
+            <div class="row run-container">
+              <button type="submit"
+                      class="btn btn-primary"
+                      :disabled="loading"
+                      title="Run Procedure">
+                <i class="fas fa-play" />
+              </button>
+            </div>
+          </form>
+
+          <div class="response-container" v-if="lastResponse || lastError">
+            <Response :response="lastResponse" :error="lastError" />
+          </div>
+        </div>
+      </section>
+
+      <section class="info">
+        <header :class="{collapsed: infoCollapsed}" @click="infoCollapsed = !infoCollapsed">
+          <span class="col-10">
+            <i class="fas fa-info-circle" />&nbsp; Info
+          </span>
+          <span class="col-2 buttons">
+            <button type="button"
+                    class="btn btn-primary"
+                    :disabled="loading"
+                    :title="infoCollapsed ? 'Expand' : 'Collapse'">
+              <i class="fas" :class="{'fa-chevron-down': infoCollapsed, 'fa-chevron-up': !infoCollapsed}" />
+            </button>
+          </span>
+        </header>
+
+        <div class="info-body" v-if="!infoCollapsed">
+          <div class="item">
+            <div class="label">Source</div>
+            <div class="value">
+              <i :class="procedureTypeIconClass" />&nbsp;
+              {{ value.procedure_type }}
+            </div>
+          </div>
+
+          <div class="item">
+            <IconEditor :entity="value" />
+          </div>
+
+          <div class="item actions" v-if="value?.actions?.length">
+            <div class="label">Actions</div>
+            <div class="value">
+              <div class="item">
+                <button type="button"
+                        class="btn btn-primary"
+                        title="Edit Actions"
+                        :disabled="loading"
+                        @click="showProcedureEditor = !showProcedureEditor">
+                  <span v-if="isReadOnly && !showProcedureEditor">
+                    <i class="fas fa-eye" />&nbsp; View
+                  </span>
+                  <span v-else-if="!isReadOnly && !showProcedureEditor">
+                    <i class="fas fa-edit" />&nbsp; Edit
+                  </span>
+                  <span v-else>
+                    <i class="fas fa-times" />&nbsp; Close
+                  </span>
+                </button>
+              </div>
+
+              <div class="item delete" v-if="!isReadOnly">
+                <button type="button"
+                        title="Delete Procedure"
+                        :disabled="loading"
+                        @click="showConfirmDelete = true">
+                  <i class="fas fa-trash" />&nbsp; Delete
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="item" v-if="value.source">
+            <div class="label">Path</div>
+            <div class="value">
+              <a :href="$route.path" @click.prevent="showFileEditor = true">
+                {{ displayPath }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="file-editor-container" v-if="showFileEditor && value.source">
+      <FileEditor :file="value.source"
+                  :line="value.line"
+                  :visible="true"
+                  :uppercase="false"
+                  @close="showFileEditor = false" />
+    </div>
+
+    <ProcedureEditor :procedure="value"
+                     :read-only="isReadOnly"
+                     :with-name="!isReadOnly"
+                     :with-save="!isReadOnly"
+                     :value="value"
+                     :visible="showProcedureEditor"
+                     @input="onUpdate"
+                     @close="showProcedureEditor = false"
+                     ref="editor"
+                     v-if="value?.actions?.length && showProcedureEditor" />
+
+    <div class="confirm-delete-container">
+      <ConfirmDialog :visible="true"
+                     @input="remove"
+                     @close="showConfirmDelete = false"
+                     v-if="showConfirmDelete">
+        Are you sure you want to delete the procedure <b>{{ value.name }}</b>?
+      </ConfirmDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ConfirmDialog from "@/components/elements/ConfirmDialog";
+import EntityMixin from "./EntityMixin"
+import EntityIcon from "./EntityIcon"
+import FileEditor from "@/components/File/EditorModal";
+import IconEditor from "@/components/panels/Entities/IconEditor";
+import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
+import Response from "@/components/Action/Response"
+
+export default {
+  components: {
+    ConfirmDialog,
+    EntityIcon,
+    FileEditor,
+    IconEditor,
+    ProcedureEditor,
+    Response,
+  },
+  mixins: [EntityMixin],
+  emits: ['delete', 'input', 'loading'],
+
+  props: {
+    collapseOnHeaderClick: {
+      type: Boolean,
+      default: false,
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data: function() {
+    return {
+      args: {},
+      defaultIconClass: 'fas fa-cogs',
+      extraArgs: {},
+      collapsed_: true,
+      infoCollapsed: false,
+      lastError: null,
+      lastResponse: null,
+      newArgName: '',
+      newArgValue: '',
+      runCollapsed: false,
+      showConfirmDelete: false,
+      showFileEditor: false,
+      showProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    icon() {
+      const defaultClass = this.defaultIconClass
+      const currentClass = this.value.meta?.icon?.['class']
+      let iconClass = currentClass
+      if (!currentClass || currentClass === defaultClass) {
+        iconClass = this.procedureTypeIconClass || defaultClass
+      }
+
+      return {
+        ...(this.value.meta?.icon || {}),
+        class: iconClass,
+      }
+    },
+
+    isReadOnly() {
+      return this.value.procedure_type !== 'db'
+    },
+
+    allArgs() {
+      return Object.entries({...this.args, ...this.extraArgs})
+        .map(([key, value]) => [key?.trim(), value])
+        .filter(
+          ([key, value]) => (
+            key?.length
+            && value != null
+            && (
+              typeof value !== 'string'
+              || value?.trim()?.length > 0
+            )
+          )
+        ).reduce((acc, [key, value]) => {
+          acc[key] = value
+          return acc
+        }, {})
+    },
+
+    displayPath() {
+      let src = this.value.source
+      if (!src?.length) {
+        return null
+      }
+
+      const configDir = this.$root.configDir
+      if (configDir) {
+        src = src.replace(new RegExp(`^${configDir}/`), '')
+      }
+
+      const line = parseInt(this.value.line)
+      if (!isNaN(line)) {
+        src += `:${line}`
+      }
+
+      return src
+    },
+
+    procedureTypeIconClass() {
+      if (this.value.procedure_type === 'python')
+        return 'fab fa-python'
+
+      if (this.value.procedure_type === 'config')
+        return 'fas fa-file'
+
+      if (this.value.procedure_type === 'db')
+        return 'fas fa-database'
+
+      return this.defaultIconClass
+    },
+  },
+
+  methods: {
+    async run() {
+      this.$emit('loading', true)
+      try {
+        this.lastResponse = await this.request(`procedure.${this.value.name}`, this.allArgs)
+        this.lastError = null
+        this.notify({
+          text: 'Procedure executed successfully',
+          image: {
+            icon: 'play',
+          }
+        })
+      } catch (e) {
+        this.lastResponse = null
+        this.lastError = e
+        this.notify({
+          text: 'Failed to execute procedure',
+          error: true,
+          image: {
+            icon: 'exclamation-triangle',
+          }
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
+    async remove() {
+      this.$emit('loading', true)
+      try {
+        await this.request('procedures.delete', {name: this.value.name})
+        this.$emit('loading', false)
+        this.$emit('delete')
+        this.notify({
+          text: 'Procedure deleted successfully',
+          image: {
+            icon: 'trash',
+          }
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
+    onHeaderClick(event) {
+      if (this.collapseOnHeaderClick) {
+        event.stopPropagation()
+        this.collapsed_ = !this.collapsed_
+      }
+    },
+
+    onUpdate(value) {
+      if (!this.isReadOnly) {
+        this.$emit('input', value)
+        this.$nextTick(() => this.$refs.editor?.close())
+      }
+    },
+
+    updateArg(arg, event) {
+      let value = event.target.value
+      if (!value?.length) {
+        delete this.args[arg]
+      }
+
+      try {
+        value = JSON.parse(value)
+      } catch (e) {
+        // Do nothing
+      }
+
+      this.args[arg] = value
+    },
+
+    updateExtraArgName(oldName, event) {
+      let newName = event.target.value?.trim()
+      if (newName === oldName) {
+        return
+      }
+
+      if (newName?.length) {
+        if (oldName) {
+          this.extraArgs[newName] = this.extraArgs[oldName]
+        } else {
+          this.extraArgs[newName] = ''
+        }
+      } else {
+        this.focusNewArgName()
+      }
+
+      if (oldName) {
+        delete this.extraArgs[oldName]
+      }
+    },
+
+    updateExtraArgValue(arg, event) {
+      let value = event.target.value
+      if (!value?.length) {
+        delete this.extraArgs[arg]
+        return
+      }
+
+      this.extraArgs[arg] = this.deserializeValue(value)
+    },
+
+    addExtraArg() {
+      let name = this.newArgName?.trim()
+      let value = this.newArgValue
+      if (!name?.length || !value?.length) {
+        return
+      }
+
+      this.extraArgs[name] = this.deserializeValue(value)
+      this.newArgName = ''
+      this.newArgValue = ''
+      this.focusNewArgName()
+    },
+
+    deserializeValue(value) {
+      try {
+        return JSON.parse(value)
+      } catch (e) {
+        return value
+      }
+    },
+
+    focusNewArgName() {
+      this.$nextTick(() => this.$refs.newArgName.focus())
+    },
+  },
+
+  watch: {
+    collapsed: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    selected: {
+      immediate: true,
+      handler(value) {
+        this.collapsed_ = value
+      },
+    },
+
+    showProcedureEditor(value) {
+      if (!value) {
+        this.$refs.editor?.reset()
+      }
+    },
+  },
+
+  mounted() {
+    this.collapsed_ = !this.selected
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+$icon-width: 2em;
+
+.procedure-container {
+  .body {
+    padding-bottom: 0;
+    cursor: default;
+  }
+
+  section {
+    header {
+      background: $tab-bg;
+      display: flex;
+      align-items: center;
+      font-size: 1.1em;
+      font-weight: bold;
+      margin: 1em -0.5em 0.5em -0.5em;
+      padding: 0.25em 1em 0.25em 0.5em;
+      border-top: 1px solid $default-shadow-color;
+      box-shadow: $border-shadow-bottom;
+      cursor: pointer;
+
+      &:hover {
+        background: $header-bg;
+      }
+
+      &.collapsed {
+        margin-bottom: -0.1em;
+      }
+
+      .buttons {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      button.btn {
+        background: none;
+        border: none;
+        color: initial;
+
+        &:hover {
+          color: $default-hover-fg;
+        }
+      }
+    }
+
+    &:first-of-type header {
+      margin-top: -0.5em;
+
+      &.collapsed {
+        margin-bottom: -1em;
+      }
+    }
+  }
+
+  .head {
+    &:not(.collapsed) {
+      background: $selected-bg;
+      border-bottom: 1px solid $default-shadow-color;
+    }
+
+    .icon, .collapse-toggler {
+      width: $icon-width;
+    }
+
+    .label, .value-and-toggler {
+      min-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
+      max-width: calc(((100% - (2 * $icon-width)) / 2) - 1em);
+    }
+
+    .label {
+      margin-left: 1em;
+    }
+
+    .value-and-toggler {
+      text-align: right;
+    }
+  }
+
+  form {
+    width: 100%;
+
+    .row {
+      width: 100%;
+      input[type=text] {
+        width: 100%;
+      }
+    }
+
+    .args {
+      .arg {
+        margin-bottom: 0.25em;
+        padding-bottom: 0.25em;
+        border-bottom: 1px solid $default-shadow-color;
+      }
+
+      .argname {
+        font-weight: bold;
+      }
+
+      @include until($tablet) {
+        .argname {
+          width: calc(100% - 2em) !important;
+        }
+
+        .argvalue {
+          width: 100% !important;
+        }
+      }
+
+      @include from($tablet) {
+        display: flex;
+        flex-wrap: wrap;
+
+        .argname {
+          width: calc(35% - 2em) !important;
+        }
+
+        .argvalue {
+          width: 65% !important;
+        }
+      }
+    }
+
+    .run-container {
+      display: flex;
+      justify-content: center;
+      font-size: 1.5em;
+      margin-top: 0.5em;
+
+      button {
+        padding: 0 1em;
+        text-align: center;
+        border-radius: 0.5em;
+      }
+    }
+  }
+
+  .info-body {
+    .item {
+      display: flex;
+      padding: 0.5em 0.25em;
+
+      @include until($tablet) {
+        border-bottom: 1px solid $default-shadow-color;
+      }
+
+      &.delete {
+        justify-content: center;
+
+        button {
+          width: 100%;
+          color: $error-fg;
+          padding: 0;
+
+          &:hover {
+            color: $default-hover-fg;
+          }
+        }
+      }
+    }
+
+    .label {
+      font-weight: bold;
+
+      @include until($tablet) {
+        width: 100%;
+      }
+
+      @include from($tablet) {
+        width: 33.3333%;
+      }
+    }
+
+    .value {
+      text-align: right;
+
+      @include until($tablet) {
+        width: 100%;
+      }
+
+      @include from($tablet) {
+        width: 66.6667%;
+      }
+
+      a {
+        width: 100%;
+      }
+    }
+
+    .actions {
+      @include until($tablet) {
+        flex-direction: column;
+      }
+
+      .item {
+        border-bottom: none;
+      }
+
+      button {
+        width: 100%;
+        height: 2.5em;
+        padding: 0;
+        border-radius: 1em;
+
+        &:hover {
+          color: $default-hover-fg;
+        }
+      }
+    }
+  }
+
+  .head-run-btn {
+    background: none;
+    border: none;
+    font-size: 1.25em;
+
+    &:hover {
+      background: none;
+      color: $default-hover-fg-2;
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/meta.json

@@ -287,6 +287,14 @@
     }
   },
 
+  "procedure": {
+    "name": "Procedure",
+    "name_plural": "Procedures",
+    "icon": {
+      "class": "fas fa-cogs"
+    }
+  },
+
   "weight_sensor": {
     "name": "Sensor",
     "name_plural": "Sensors",

platypush/backend/http/webapp/src/components/panels/Extensions/Config.vue

@@ -13,7 +13,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/night-owl.min.css'
 import hljs from "highlight.js"
 import CopyButton from "@/components/elements/CopyButton"
 import Utils from "@/Utils";
@@ -61,9 +61,9 @@ export default {
       }
 
       return hljs.highlight(
-        'yaml',
         '# Currently loaded configuration\n' +
-        this.curYamlConfig
+        this.curYamlConfig,
+        {language: 'yaml'}
       ).value.trim()
     },
   },

platypush/backend/http/webapp/src/components/panels/Extensions/Install.vue

@@ -44,7 +44,7 @@
 
 <script>
 import 'highlight.js/lib/common'
-import 'highlight.js/styles/stackoverflow-dark.min.css'
+import 'highlight.js/styles/nord.min.css'
 import hljs from "highlight.js"
 import CopyButton from "@/components/elements/CopyButton"
 import Loading from "@/components/Loading"

platypush/backend/http/webapp/src/components/panels/Procedures/Index.vue

@@ -0,0 +1,310 @@
+<template>
+  <div class="procedures-container">
+    <header>
+      <input type="search"
+             class="filter"
+             title="Filter procedures"
+             placeholder="🔎"
+             v-model="filter" />
+    </header>
+
+    <main>
+      <Loading v-if="loading" />
+
+      <NoItems v-else-if="!Object.keys(procedures || {}).length">
+        No Procedures Configured
+      </NoItems>
+
+      <div class="procedures-list" v-else>
+        <div class="procedures items">
+          <div class="item" v-for="procedure in displayedProcedures" :key="procedure.name">
+            <Procedure :value="procedure"
+                       :selected="selectedProcedure === procedure.name"
+                       :collapseOnHeaderClick="true"
+                       @click="toggleProcedure(procedure)"
+                       @input="updateProcedure(procedure)"
+                       @delete="() => delete procedures[procedure.name]" />
+          </div>
+        </div>
+
+        <ProcedureEditor :value="newProcedure"
+                         title="Add Procedure"
+                         :with-name="true"
+                         :with-save="true"
+                         :read-only="false"
+                         :visible="showNewProcedureEditor"
+                         @input="updateProcedure(newProcedure)"
+                         @close="resetNewProcedure"
+                         v-if="showNewProcedureEditor" />
+      </div>
+
+      <FloatingButton icon-class="fa fa-plus"
+                      text="Add Procedure"
+                      @click="showNewProcedureEditor = true" />
+    </main>
+  </div>
+</template>
+
+<script>
+import Loading from "@/components/Loading";
+import FloatingButton from "@/components/elements/FloatingButton";
+import NoItems from "@/components/elements/NoItems";
+import Procedure from "@/components/panels/Entities/Procedure"
+import ProcedureEditor from "@/components/Procedure/ProcedureEditorModal"
+import Utils from "@/Utils";
+
+export default {
+  components: {
+    FloatingButton,
+    Loading,
+    NoItems,
+    Procedure,
+    ProcedureEditor,
+  },
+
+  mixins: [Utils],
+  props: {
+    pluginName: {
+      type: String,
+    },
+
+    config: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      filter: '',
+      loading: false,
+      newProcedure: null,
+      newProcedureTemplate: {
+        name: '',
+        actions: [],
+        meta: {
+          icon: {
+            class: 'fas fa-cogs',
+            url: null,
+            color: null,
+          },
+        },
+      },
+      procedures: {},
+      selectedProcedure: null,
+      showConfirmClose: false,
+      showNewProcedureEditor: false,
+    }
+  },
+
+  computed: {
+    displayedProcedures() {
+      return Object.values(this.procedures)
+        .filter(procedure => procedure.name.toLowerCase().includes(this.filter.toLowerCase()))
+    },
+  },
+
+  methods: {
+    mergeArgs(oldObj, newObj) {
+      return {
+        ...Object.fromEntries(
+          Object.entries(oldObj || {}).map(([key, value]) => {
+            const newValue = newObj?.[key]
+            if (newValue != null) {
+              if (typeof value === 'object' && !Array.isArray(value))
+                return [key, this.mergeArgs(value, newValue)]
+
+              return [key, newValue]
+            }
+
+            return [key, value]
+          })
+        ),
+
+        ...Object.fromEntries(
+          Object.entries(newObj || {}).filter(([key]) => oldObj?.[key] == null)
+        ),
+      }
+    },
+
+    updateProcedure(procedure) {
+      if (!procedure?.name?.length)
+        return
+
+      const curProcedure = this.procedures[procedure.name]
+      this.procedures[procedure.name] = {
+        ...this.mergeArgs(curProcedure, procedure),
+        name: procedure?.meta?.name_override || procedure.name,
+      }
+
+      this.showNewProcedureEditor = false
+    },
+
+    async refresh() {
+      const args = this.getUrlArgs()
+      if (args.filter)
+        this.filter = args.filter
+
+      this.loading = true
+      try {
+        this.procedures = await this.request('procedures.status')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    onEntityUpdate(msg) {
+      const entity = msg?.entity
+      if (entity?.plugin !== this.pluginName || !entity?.name?.length)
+        return
+
+      this.updateProcedure(entity)
+    },
+
+    onEntityDelete(msg) {
+      const entity = msg?.entity
+      if (entity?.plugin !== this.pluginName)
+        return
+
+      if (this.selectedProcedure === entity.name)
+        this.selectedProcedure = null
+
+      if (this.procedures[entity.name])
+        delete this.procedures[entity.name]
+    },
+
+    resetNewProcedure() {
+      this.showNewProcedureEditor = false
+      this.newProcedure = JSON.parse(JSON.stringify(this.newProcedureTemplate))
+    },
+
+    toggleProcedure(procedure) {
+      this.selectedProcedure =
+        this.selectedProcedure === procedure.name ?
+        null : procedure.name
+    },
+  },
+
+  watch: {
+    filter() {
+      if (!this.filter?.length)
+        this.setUrlArgs({ filter: null })
+      else
+        this.setUrlArgs({ filter: this.filter })
+    },
+
+    showNewProcedureEditor(val) {
+      if (!val)
+        this.resetNewProcedure()
+    },
+  },
+
+  async mounted() {
+    this.resetNewProcedure()
+    await this.refresh()
+
+    this.subscribe(
+      this.onEntityUpdate,
+      'on-procedure-entity-update',
+      'platypush.message.event.entities.EntityUpdateEvent'
+    )
+
+    this.subscribe(
+      this.onEntityDelete,
+      'on-procedure-entity-delete',
+      'platypush.message.event.entities.EntityDeleteEvent'
+    )
+  },
+
+  unmounted() {
+    this.unsubscribe('on-procedure-entity-update')
+    this.unsubscribe('on-procedure-entity-delete')
+    this.setUrlArgs({ filter: null })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "src/style/items";
+
+$header-height: 3em;
+
+.procedures-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  header {
+    width: 100%;
+    height: $header-height;
+    background: $tab-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid $default-shadow-color;
+
+    input.filter {
+      max-width: 600px;
+
+      @include until($tablet) {
+        width: calc(100% - 2em);
+      }
+
+      @include from($tablet) {
+        width: 600px;
+      }
+    }
+  }
+
+  main {
+    width: 100%;
+    height: calc(100% - #{$header-height});
+    overflow: auto;
+    margin-bottom: 2em;
+  }
+
+  .procedures-list {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background: $default-bg-6;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  .procedures {
+    @include until($tablet) {
+      width: 100%;
+    }
+
+    @include from($tablet) {
+      width: calc(100% - 2em);
+      margin-top: 1em;
+      border-radius: 1em;
+    }
+
+    max-width: 800px;
+    background: $default-bg-2;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: auto;
+    box-shadow: $border-shadow-bottom-right;
+
+    .item {
+      padding: 0;
+
+      &:first-child {
+        border-top-left-radius: 1em;
+        border-top-right-radius: 1em;
+      }
+
+      &:last-child {
+        border-bottom-left-radius: 1em;
+        border-bottom-right-radius: 1em;
+      }
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/mixins/Autocomplete/Props.vue

@@ -0,0 +1,58 @@
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+
+    value: {
+      type: [String, Number, Object, Array, Boolean],
+      default: "",
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+
+    autofocus: {
+      type: Boolean,
+      default: false,
+    },
+
+    label: {
+      type: String,
+    },
+
+    placeholder: {
+      type: String,
+    },
+
+    inputOnBlur: {
+      type: Boolean,
+      default: true,
+    },
+
+    inputOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+
+    selectOnTab: {
+      type: Boolean,
+      default: true,
+    },
+
+    showAllItems: {
+      type: Boolean,
+      default: false,
+    },
+
+    showResultsWhenBlank: {
+      type: Boolean,
+      default: false,
+    },
+  },
+}
+</script>

platypush/backend/http/webapp/src/style/animations.scss

@@ -14,6 +14,38 @@
    -webkit-animation-name: fadeOut;
 }
 
+.expand {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: expand;
+   -webkit-animation-name: expand;
+}
+
+.shrink {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: shrink;
+   -webkit-animation-name: shrink;
+}
+
+.fold {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: fold;
+   -webkit-animation-name: fold;
+}
+
+.unfold {
+   animation-duration: 0.5s;
+   -webkit-animation-duration: 0.5s;
+   animation-fill-mode: both;
+   animation-name: unfold;
+   -webkit-animation-name: unfold;
+}
+
 @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
@@ -27,6 +59,26 @@
    }
 }
 
+@keyframes expand {
+   0% {transform: scale(0);}
+   100% {transform: scale(1);}
+}
+
+@keyframes shrink {
+   0% {transform: scale(1);}
+   100% {transform: scale(0);}
+}
+
+@keyframes fold {
+   0% {transform: scale(1, 1);}
+   100% {transform: scale(1, 0);}
+}
+
+@keyframes unfold {
+   0% {transform: scale(1, 0);}
+   100% {transform: scale(1, 1);}
+}
+
 .glow {
    animation-duration: 2s;
    -webkit-animation-duration: 2s;

platypush/backend/http/webapp/src/style/components.scss

@@ -1,3 +1,6 @@
+$floating-btn-size: 4em;
+$monospace-font: 'Hack', 'Fira Code', 'Noto Sans Mono', 'Ubuntu Mono', 'Recursive', 'Inconsolata', 'Consolas', 'Courier New', monospace;
+
 button, .btn, .btn-default {
   border: $default-border-3;
   cursor: pointer;
@@ -11,8 +14,9 @@ button, .btn, .btn-default {
   }
 
   &:hover {
-    background: $hover-bg;
+    color: $default-hover-fg;
-    border: 1px solid $default-hover-fg;
+    // background: $hover-bg;
+    // border: 1px solid $default-hover-fg;
   }
 
   .icon {
@@ -27,6 +31,14 @@ button, .btn, .btn-default {
   }
 }
 
+[draggable] {
+  cursor: grab !important;
+}
+
+.dragged {
+  opacity: 0.5 !important;
+}
+
 input[type=text], input[type=password] {
   border: $default-border-3;
   border-radius: 1em;
@@ -125,5 +137,9 @@ $nav-height: 2.5em;
   }
 }
 
+code {
+  font-family: $monospace-font;
+}
+
 // Tabs
 $tab-height: 3.5em;

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -8,14 +8,13 @@ $default-bg-6: #e4eae8 !default;
 $default-bg-7: #e4e4e4 !default;
 $ok-fg: #17ad17 !default;
 $error-fg: #ad1717 !default;
+$error-fg-2: red !default;
 $error-bg: #ffaaa2 !default;
-$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
-$tile-fg: white;
-$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
 
 $default-fg: black !default;
 $default-fg-2: #23513a !default;
 $default-fg-3: #195331b3 !default;
+$inverse-fg: white !default;
 $header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
 $header-bg-2: linear-gradient(90deg, #f3f3f3, white) !default;
 $no-items-color: #555555;
@@ -67,9 +66,12 @@ $border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
 $border-shadow: 0 0 3px 3px #c0c0c0 !default;
 $header-shadow: 0px 1px 3px 1px #bbb !default;
 $group-shadow: 3px -2px 6px 1px #98b0a0;
-$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
 $search-bar-shadow: 1px 1px 1px 1px #ddd !default;
 
+//// Buttons
+$submit-btn-bg: #ebffeb;
+$primary-btn-shadow: 1px 1px 0.5px 0.75px #32b64640 !default;
+
 //// Modals
 $modal-header-bg: #e0e0e0 !default;
 $modal-header-border: 1px solid #ccc !default;
@@ -180,3 +182,26 @@ $code-dark-bg: rgb(11, 11, 13) !default;
 $code-dark-fg: rgb(243, 243, 250) !default;
 $code-light-bg: #f2f0e9 !default;
 $code-light-fg: #090909 !default;
+
+//// Sections
+$section-shadow: 0 3px 3px 0 rgba(187,187,187,0.75), 0 3px 3px 0 rgba(187,187,187,0.75);
+$doc-bg: linear-gradient(#effbe3, #e0ecdb);
+$doc-shadow: 0 1px 3px 1px #d7d3c0, inset 0 1px 1px 0 #d7d3c9;
+$output-bg: #151515;
+$output-shadow: $doc-shadow;
+
+//// Titles
+$title-bg: #eee;
+$title-border: 1px solid #ddd;
+$title-shadow: 0 3px 3px 0 rgba(187,187,187,0.75);
+
+//// Tiles
+$tile-bg: linear-gradient(90deg, rgba(9,174,128,1) 0%, rgba(71,226,179,1) 120%);
+$tile-bg-2: linear-gradient(270deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
+$tile-bg-3: linear-gradient(90deg, rgb(9, 174, 43) 0%, rgb(71, 226, 179) 120%);
+$tile-fg: white;
+$tile-hover-bg: linear-gradient(90deg, rgba(41,216,159,1) 0%, rgba(9,188,138,1) 70%);
+$tile-hover-bg-2: linear-gradient(90deg, rgb(71, 226, 179) 0%, rgb(81, 186, 210) 120%);
+$tile-hover-bg-3: linear-gradient(90deg, rgb(41, 216, 63) 0%, rgb(9, 188, 138) 120%);
+$tile-keyword-fg: #f8ff00;
+$tile-code-fg: #2a5ab7;

platypush/backend/http/webapp/src/utils/Text.vue

@@ -37,6 +37,16 @@ export default {
     formatNumber(number) {
       return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
     },
+
+    escapeHTML(value) {
+      return value
+         ?.toString?.()
+         ?.replace?.(/&/g, "&")
+         ?.replace?.(/</g, "&lt;")
+         ?.replace?.(/>/g, "&gt;")
+         ?.replace?.(/"/g, "&quot;")
+         ?.replace?.(/'/g, "&#039;") || ''
+     },
   },
 }
 </script>