diff --git a/ui/assets/css/all.css b/ui/app/assets/css/all.css
similarity index 100%
rename from ui/assets/css/all.css
rename to ui/app/assets/css/all.css
diff --git a/ui/assets/css/bulma-switch.css b/ui/app/assets/css/bulma-switch.css
similarity index 100%
rename from ui/assets/css/bulma-switch.css
rename to ui/app/assets/css/bulma-switch.css
diff --git a/ui/assets/css/bulma.css b/ui/app/assets/css/bulma.css
similarity index 100%
rename from ui/assets/css/bulma.css
rename to ui/app/assets/css/bulma.css
diff --git a/ui/assets/css/style.css b/ui/app/assets/css/style.css
similarity index 100%
rename from ui/assets/css/style.css
rename to ui/app/assets/css/style.css
diff --git a/ui/assets/webfonts/JetBrainsMono-Regular.woff2 b/ui/app/assets/webfonts/JetBrainsMono-Regular.woff2
similarity index 100%
rename from ui/assets/webfonts/JetBrainsMono-Regular.woff2
rename to ui/app/assets/webfonts/JetBrainsMono-Regular.woff2
diff --git a/ui/assets/webfonts/fa-brands-400.ttf b/ui/app/assets/webfonts/fa-brands-400.ttf
similarity index 100%
rename from ui/assets/webfonts/fa-brands-400.ttf
rename to ui/app/assets/webfonts/fa-brands-400.ttf
diff --git a/ui/assets/webfonts/fa-brands-400.woff2 b/ui/app/assets/webfonts/fa-brands-400.woff2
similarity index 100%
rename from ui/assets/webfonts/fa-brands-400.woff2
rename to ui/app/assets/webfonts/fa-brands-400.woff2
diff --git a/ui/assets/webfonts/fa-regular-400.ttf b/ui/app/assets/webfonts/fa-regular-400.ttf
similarity index 100%
rename from ui/assets/webfonts/fa-regular-400.ttf
rename to ui/app/assets/webfonts/fa-regular-400.ttf
diff --git a/ui/assets/webfonts/fa-regular-400.woff2 b/ui/app/assets/webfonts/fa-regular-400.woff2
similarity index 100%
rename from ui/assets/webfonts/fa-regular-400.woff2
rename to ui/app/assets/webfonts/fa-regular-400.woff2
diff --git a/ui/assets/webfonts/fa-solid-900.ttf b/ui/app/assets/webfonts/fa-solid-900.ttf
similarity index 100%
rename from ui/assets/webfonts/fa-solid-900.ttf
rename to ui/app/assets/webfonts/fa-solid-900.ttf
diff --git a/ui/assets/webfonts/fa-solid-900.woff2 b/ui/app/assets/webfonts/fa-solid-900.woff2
similarity index 100%
rename from ui/assets/webfonts/fa-solid-900.woff2
rename to ui/app/assets/webfonts/fa-solid-900.woff2
diff --git a/ui/assets/webfonts/fa-v4compatibility.ttf b/ui/app/assets/webfonts/fa-v4compatibility.ttf
similarity index 100%
rename from ui/assets/webfonts/fa-v4compatibility.ttf
rename to ui/app/assets/webfonts/fa-v4compatibility.ttf
diff --git a/ui/assets/webfonts/fa-v4compatibility.woff2 b/ui/app/assets/webfonts/fa-v4compatibility.woff2
similarity index 100%
rename from ui/assets/webfonts/fa-v4compatibility.woff2
rename to ui/app/assets/webfonts/fa-v4compatibility.woff2
diff --git a/ui/components/ConditionForm.vue b/ui/app/components/ConditionForm.vue
similarity index 98%
rename from ui/components/ConditionForm.vue
rename to ui/app/components/ConditionForm.vue
index 83b23b5b..4ede9228 100644
--- a/ui/components/ConditionForm.vue
+++ b/ui/app/components/ConditionForm.vue
@@ -207,8 +207,6 @@
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-import { decode } from '~/utils/importer'
-import { match_str } from '~/utils/ytdlp'
 import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
 
 const emitter = defineEmits<{
@@ -292,7 +290,7 @@ const run_test = async (): Promise<void> => {
   }
 
   test_data.value.in_progress = true
-  test_data.value.data.status = null
+  test_data.value.data.status = false
 
   try {
     const response = await request('/api/conditions/test', {
@@ -363,7 +361,7 @@ const show_data = (): string => {
 }
 
 const logic_test = computed(() => {
-  if (!test_data.value.data || !test_data.value.data.data) {
+  if (Object.keys(test_data.value.data?.data ?? {}).length < 1) {
     return null
   }
 
diff --git a/ui/components/ConfirmDialog.vue b/ui/app/components/ConfirmDialog.vue
similarity index 100%
rename from ui/components/ConfirmDialog.vue
rename to ui/app/components/ConfirmDialog.vue
diff --git a/ui/components/Dropdown.vue b/ui/app/components/Dropdown.vue
similarity index 97%
rename from ui/components/Dropdown.vue
rename to ui/app/components/Dropdown.vue
index 6702393e..d9d162d6 100644
--- a/ui/components/Dropdown.vue
+++ b/ui/app/components/Dropdown.vue
@@ -20,8 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-
 const emitter = defineEmits(['open_state'])
 defineProps({
   label: {
diff --git a/ui/components/EmbedPlayer.vue b/ui/app/components/EmbedPlayer.vue
similarity index 100%
rename from ui/components/EmbedPlayer.vue
rename to ui/app/components/EmbedPlayer.vue
diff --git a/ui/components/FloatingImage.vue b/ui/app/components/FloatingImage.vue
similarity index 93%
rename from ui/components/FloatingImage.vue
rename to ui/app/components/FloatingImage.vue
index ff49e122..740c341e 100644
--- a/ui/components/FloatingImage.vue
+++ b/ui/app/components/FloatingImage.vue
@@ -20,19 +20,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { request } from '~/utils/index'
-
-const props = defineProps < {
+const props = defineProps<{
   image?: string
   title?: string
-  loader?: () => Promise < void>
-    privacy ?: boolean
-} > ()
+  loader?: () => Promise<void>
+  privacy?: boolean
+}>()
 
 const cache = useSessionCache()
 const toast = useNotification()
-const url = ref < string | null > (null)
+const url = ref<string | null>(null)
 const error = ref(false)
 const isPreloading = ref(false)
 
diff --git a/ui/components/GetInfo.vue b/ui/app/components/GetInfo.vue
similarity index 96%
rename from ui/components/GetInfo.vue
rename to ui/app/components/GetInfo.vue
index 4dee4779..77d98e12 100644
--- a/ui/components/GetInfo.vue
+++ b/ui/app/components/GetInfo.vue
@@ -38,9 +38,6 @@ code {
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { request } from '~/utils/index'
-
 const toast = useNotification()
 const emitter = defineEmits<{ (e: 'closeModel'): void }>()
 
diff --git a/ui/components/History.vue b/ui/app/components/History.vue
similarity index 99%
rename from ui/components/History.vue
rename to ui/app/components/History.vue
index ddd33b44..5a394551 100644
--- a/ui/components/History.vue
+++ b/ui/app/components/History.vue
@@ -461,12 +461,8 @@
 </template>
 
 <script setup>
-import { NuxtLink } from '#components'
 import { useStorage } from '@vueuse/core'
 import moment from 'moment'
-import { getEmbedable, isEmbedable } from '~/utils/embedable'
-import { formatBytes, makeDownload, uri } from '~/utils/index'
-import Dropdown from './Dropdown.vue'
 
 const emitter = defineEmits(['getInfo', 'add_new', 'getItemInfo', 'clear_search'])
 
diff --git a/ui/components/ImageView.vue b/ui/app/components/ImageView.vue
similarity index 97%
rename from ui/components/ImageView.vue
rename to ui/app/components/ImageView.vue
index b1cb53d5..172306b6 100644
--- a/ui/components/ImageView.vue
+++ b/ui/app/components/ImageView.vue
@@ -19,8 +19,6 @@ img {
 </template>
 
 <script setup lang="ts">
-import { request } from '~/utils/index'
-
 const toast = useNotification()
 const emitter = defineEmits(['closeModel'])
 
diff --git a/ui/components/LateLoader.vue b/ui/app/components/LateLoader.vue
similarity index 97%
rename from ui/components/LateLoader.vue
rename to ui/app/components/LateLoader.vue
index 337494f7..39e5cc97 100644
--- a/ui/components/LateLoader.vue
+++ b/ui/app/components/LateLoader.vue
@@ -5,7 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onBeforeUnmount } from 'vue'
 import { useIntersectionObserver } from '@vueuse/core'
 
 const props = defineProps<{
diff --git a/ui/components/Message.vue b/ui/app/components/Message.vue
similarity index 100%
rename from ui/components/Message.vue
rename to ui/app/components/Message.vue
diff --git a/ui/components/Modal.vue b/ui/app/components/Modal.vue
similarity index 100%
rename from ui/components/Modal.vue
rename to ui/app/components/Modal.vue
diff --git a/ui/components/NewDownload.vue b/ui/app/components/NewDownload.vue
similarity index 99%
rename from ui/components/NewDownload.vue
rename to ui/app/components/NewDownload.vue
index 2636aabf..ea846717 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/app/components/NewDownload.vue
@@ -232,7 +232,6 @@
 import 'assets/css/bulma-switch.css'
 import { useStorage } from '@vueuse/core'
 import type { item_request } from '~/types/item'
-import { getSeparatorsName, separators } from '~/utils/index'
 
 const props = defineProps<{ item?: Partial<item_request> }>()
 const emitter = defineEmits<{
diff --git a/ui/components/NotificationForm.vue b/ui/app/components/NotificationForm.vue
similarity index 99%
rename from ui/components/NotificationForm.vue
rename to ui/app/components/NotificationForm.vue
index 308c452a..efb46dcb 100644
--- a/ui/components/NotificationForm.vue
+++ b/ui/app/components/NotificationForm.vue
@@ -269,7 +269,6 @@
 
 <script setup>
 import { useStorage } from '@vueuse/core'
-import { decode } from '~/utils/importer'
 
 const emitter = defineEmits(['cancel', 'submit']);
 const toast = useNotification();
diff --git a/ui/components/NotifyDropdown.vue b/ui/app/components/NotifyDropdown.vue
similarity index 100%
rename from ui/components/NotifyDropdown.vue
rename to ui/app/components/NotifyDropdown.vue
diff --git a/ui/components/PresetForm.vue b/ui/app/components/PresetForm.vue
similarity index 99%
rename from ui/components/PresetForm.vue
rename to ui/app/components/PresetForm.vue
index aaeebfcb..c38a2a61 100644
--- a/ui/components/PresetForm.vue
+++ b/ui/app/components/PresetForm.vue
@@ -232,7 +232,6 @@
 
 <script setup>
 import { useStorage } from '@vueuse/core'
-import { decode } from '~/utils/importer'
 
 const emitter = defineEmits(['cancel', 'submit']);
 
diff --git a/ui/components/Queue.vue b/ui/app/components/Queue.vue
similarity index 99%
rename from ui/components/Queue.vue
rename to ui/app/components/Queue.vue
index 88ebb79f..26b44fbb 100644
--- a/ui/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -315,8 +315,6 @@
 <script setup>
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
-import { ucFirst } from '~/utils/index'
-import { isEmbedable, getEmbedable } from '~/utils/embedable'
 
 const emitter = defineEmits(['getInfo', 'clear_search', 'getItemInfo'])
 const props = defineProps({
diff --git a/ui/components/Settings.vue b/ui/app/components/Settings.vue
similarity index 99%
rename from ui/components/Settings.vue
rename to ui/app/components/Settings.vue
index 9b55d3da..2f967376 100644
--- a/ui/components/Settings.vue
+++ b/ui/app/components/Settings.vue
@@ -142,7 +142,6 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import { POSITION } from 'vue-toastification'
-import { separators } from '~/utils/index'
 
 defineProps<{ isLoading: boolean }>()
 
diff --git a/ui/components/TaskForm.vue b/ui/app/components/TaskForm.vue
similarity index 99%
rename from ui/components/TaskForm.vue
rename to ui/app/components/TaskForm.vue
index bb7463d0..cfff4c19 100644
--- a/ui/components/TaskForm.vue
+++ b/ui/app/components/TaskForm.vue
@@ -292,7 +292,6 @@
 import 'assets/css/bulma-switch.css'
 import { useStorage } from '@vueuse/core'
 import { CronExpressionParser } from 'cron-parser'
-import { decode } from '~/utils/importer'
 
 const props = defineProps({
   reference: {
diff --git a/ui/components/VideoPlayer.vue b/ui/app/components/VideoPlayer.vue
similarity index 99%
rename from ui/components/VideoPlayer.vue
rename to ui/app/components/VideoPlayer.vue
index 02adc713..332698ea 100644
--- a/ui/components/VideoPlayer.vue
+++ b/ui/app/components/VideoPlayer.vue
@@ -28,7 +28,6 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 import Hls from 'hls.js'
-import { makeDownload } from '~/utils/index'
 
 type video_track_element = {
   file: string,
diff --git a/ui/composables/useConfirm.ts b/ui/app/composables/useConfirm.ts
similarity index 100%
rename from ui/composables/useConfirm.ts
rename to ui/app/composables/useConfirm.ts
diff --git a/ui/composables/useNotification.ts b/ui/app/composables/useNotification.ts
similarity index 100%
rename from ui/composables/useNotification.ts
rename to ui/app/composables/useNotification.ts
diff --git a/ui/layouts/default.vue b/ui/app/layouts/default.vue
similarity index 99%
rename from ui/layouts/default.vue
rename to ui/app/layouts/default.vue
index ad18ecd7..bf90e3c5 100644
--- a/ui/layouts/default.vue
+++ b/ui/app/layouts/default.vue
@@ -161,6 +161,9 @@ const applyPreferredColorScheme = (scheme: string) => {
 
   for (let s = 0; s < document.styleSheets.length; s++) {
     const styleSheet = document.styleSheets[s]
+    if (!styleSheet?.cssRules) {
+      continue
+    }
 
     let rules: CSSRuleList
     try {
diff --git a/ui/layouts/empty.vue b/ui/app/layouts/empty.vue
similarity index 100%
rename from ui/layouts/empty.vue
rename to ui/app/layouts/empty.vue
diff --git a/ui/layouts/errorLayout.vue b/ui/app/layouts/errorLayout.vue
similarity index 100%
rename from ui/layouts/errorLayout.vue
rename to ui/app/layouts/errorLayout.vue
diff --git a/ui/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
similarity index 99%
rename from ui/pages/browser/[...slug].vue
rename to ui/app/pages/browser/[...slug].vue
index 01b45e99..10ebd016 100644
--- a/ui/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -193,7 +193,6 @@
 </template>
 
 <script setup>
-import { request } from '~/utils/index'
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 
diff --git a/ui/pages/changelog.vue b/ui/app/pages/changelog.vue
similarity index 100%
rename from ui/pages/changelog.vue
rename to ui/app/pages/changelog.vue
diff --git a/ui/pages/conditions.vue b/ui/app/pages/conditions.vue
similarity index 99%
rename from ui/pages/conditions.vue
rename to ui/app/pages/conditions.vue
index 95ec38a1..d8a637d8 100644
--- a/ui/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -115,8 +115,6 @@
 </template>
 
 <script setup lang="ts">
-import { request } from '~/utils/index'
-import { encode } from '~/utils/importer'
 import type { ConditionItem, ImportedConditionItem } from '~/types/conditions'
 
 const toast = useNotification()
diff --git a/ui/pages/console.vue b/ui/app/pages/console.vue
similarity index 100%
rename from ui/pages/console.vue
rename to ui/app/pages/console.vue
diff --git a/ui/pages/index.vue b/ui/app/pages/index.vue
similarity index 99%
rename from ui/pages/index.vue
rename to ui/app/pages/index.vue
index cdf94206..0bb2ca39 100644
--- a/ui/pages/index.vue
+++ b/ui/app/pages/index.vue
@@ -85,7 +85,6 @@ import type { item_request } from '~/types/item'
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
-const box = useConfirm()
 const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
 const display_style = useStorage<string>('display_style', 'cards')
diff --git a/ui/pages/logs.vue b/ui/app/pages/logs.vue
similarity index 98%
rename from ui/pages/logs.vue
rename to ui/app/pages/logs.vue
index 65ff4909..c983aac1 100644
--- a/ui/pages/logs.vue
+++ b/ui/app/pages/logs.vue
@@ -111,8 +111,6 @@ code {
 
 <script setup lang="ts">
 import moment from 'moment'
-import { request } from '~/utils/index'
-import { ref, onMounted, nextTick } from 'vue'
 import { useStorage } from '@vueuse/core'
 import type { log_line } from '~/types/logs'
 
diff --git a/ui/pages/notifications.vue b/ui/app/pages/notifications.vue
similarity index 99%
rename from ui/pages/notifications.vue
rename to ui/app/pages/notifications.vue
index e74a5681..3273a3b1 100644
--- a/ui/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -140,9 +140,6 @@ div.is-centered {
 </template>
 
 <script setup>
-import { request } from '~/utils/index'
-import { encode } from '~/utils/importer'
-
 const toast = useNotification()
 const config = useConfigStore()
 const socket = useSocketStore()
diff --git a/ui/pages/presets.vue b/ui/app/pages/presets.vue
similarity index 99%
rename from ui/pages/presets.vue
rename to ui/app/pages/presets.vue
index 8da337fd..85712657 100644
--- a/ui/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -212,8 +212,6 @@ div.is-centered {
 
 <script setup>
 import { useStorage } from '@vueuse/core'
-import { request } from '~/utils/index'
-import { encode } from '~/utils/importer'
 
 const toast = useNotification()
 const config = useConfigStore()
diff --git a/ui/pages/tasks.vue b/ui/app/pages/tasks.vue
similarity index 98%
rename from ui/pages/tasks.vue
rename to ui/app/pages/tasks.vue
index 973583db..90efa8bd 100644
--- a/ui/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -328,8 +328,6 @@ div.is-centered {
 import moment from 'moment'
 import { useStorage } from '@vueuse/core'
 import { CronExpressionParser } from 'cron-parser'
-import { request, sleep } from '~/utils/index'
-import { encode } from '~/utils/importer'
 import type { task_item, exported_task, error_response } from '~/types/tasks'
 
 const box = useConfirm()
@@ -377,14 +375,14 @@ watch(query, () => {
   selectedElms.value = []
 })
 
-watch(masterSelectAll, (value) => {
+watch(masterSelectAll, value => {
+  if (!value) {
+    selectedElms.value = []
+    return
+  }
   for (const key in filteredTasks.value) {
-    const element = filteredTasks.value[key]
-    if (value) {
-      selectedElms.value.push(element.id)
-    } else {
-      selectedElms.value = []
-    }
+    const element = filteredTasks.value[key] as task_item
+    selectedElms.value.push(element.id)
   }
 })
 
diff --git a/ui/app/plugins/autoscroll.ts b/ui/app/plugins/autoscroll.ts
new file mode 100644
index 00000000..03d109c5
--- /dev/null
+++ b/ui/app/plugins/autoscroll.ts
@@ -0,0 +1,38 @@
+let observer: MutationObserver;
+const AUTO_SCROLL_EVENTS = ['scroll', 'mousewheel', 'touchmove'] as const;
+const events_handlers: Array<(ev: Event) => void> = [];
+
+const on_mounted = (el: HTMLElement) => {
+  let scrolledToBottom = true;
+
+  AUTO_SCROLL_EVENTS.forEach((ev, index) => {
+    const handler = () => {
+      scrolledToBottom = (el.scrollHeight - el.scrollTop) - el.clientHeight <= 80;
+    };
+    events_handlers[index] = handler;
+    el.addEventListener(ev as string, handler, { passive: true } as AddEventListenerOptions);
+  });
+
+  observer = new MutationObserver(() => {
+    if (false === scrolledToBottom) return;
+    el.scrollTop = el.scrollHeight;
+  });
+
+  observer.observe(el, { childList: true, subtree: true });
+}
+const on_unmounted = (el: HTMLElement) => {
+  AUTO_SCROLL_EVENTS.forEach((ev, index) => {
+    const handler = events_handlers[index];
+    if (handler) {
+      el.removeEventListener(ev as string, handler, { passive: true } as EventListenerOptions);
+    }
+  });
+  observer.disconnect();
+}
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.directive('autoscroll', {
+    mounted: on_mounted,
+    unmounted: on_unmounted,
+  });
+});
diff --git a/ui/app/plugins/rtime.ts b/ui/app/plugins/rtime.ts
new file mode 100644
index 00000000..3635d36c
--- /dev/null
+++ b/ui/app/plugins/rtime.ts
@@ -0,0 +1,54 @@
+import moment from 'moment'
+
+type RTimeElement = HTMLElement & { _next_timer?: number }
+
+const parseInterval = (arg: string | undefined): number => {
+  if (!arg) {
+    return 60 * 1000
+  }
+
+  const match = arg.match(/^(\d+)([smhd])$/)
+
+  if (!match) {
+    return 60 * 1000
+  }
+
+  const [, numStr, unit] = match
+  const num = parseInt(String(numStr), 10)
+
+  switch (unit) {
+    case 'd': return num * 24 * 3600 * 1000
+    case 'h': return num * 3600 * 1000
+    case 'm': return num * 60 * 1000
+    case 's': return num * 1000
+    default: return 60 * 1000
+  }
+}
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.directive('rtime', {
+    mounted(el: RTimeElement, binding) {
+      const intervalMs = parseInterval(binding.arg)
+      const update = () => el.textContent = moment(binding.value).fromNow()
+
+      update()
+      el._next_timer = window.setInterval(update, intervalMs)
+    },
+    updated(el: RTimeElement, binding) {
+      if (binding.oldValue !== binding.value) {
+        if (null != el._next_timer) clearInterval(el._next_timer)
+
+        const intervalMs = parseInterval(binding.arg)
+        const update = () => el.textContent = moment(binding.value).fromNow()
+
+        update()
+        el._next_timer = window.setInterval(update, intervalMs)
+      }
+    },
+    beforeUnmount(el: RTimeElement) {
+      if (null != el._next_timer) clearInterval(el._next_timer)
+    }
+  })
+
+  return {}
+})
diff --git a/ui/app/plugins/toast.ts b/ui/app/plugins/toast.ts
new file mode 100644
index 00000000..8fce3a6d
--- /dev/null
+++ b/ui/app/plugins/toast.ts
@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from '#app'
+import Toast, { type PluginOptions } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(Toast, {
+    transition: "Vue-Toastification__bounce",
+    //position: "bottom-right",
+    maxToasts: 5,
+    newestOnTop: true,
+  } as PluginOptions)
+})
diff --git a/ui/stores/ConfigStore.ts b/ui/app/stores/ConfigStore.ts
similarity index 99%
rename from ui/stores/ConfigStore.ts
rename to ui/app/stores/ConfigStore.ts
index 4fd4ece1..bc1170af 100644
--- a/ui/stores/ConfigStore.ts
+++ b/ui/app/stores/ConfigStore.ts
@@ -26,6 +26,7 @@ export const useConfigStore = defineStore('config', () => {
       app_commit_sha: '',
       app_build_date: '',
       app_branch: '',
+      started: 0,
     },
     presets: [
       {
diff --git a/ui/stores/NotificationStore.ts b/ui/app/stores/NotificationStore.ts
similarity index 100%
rename from ui/stores/NotificationStore.ts
rename to ui/app/stores/NotificationStore.ts
diff --git a/ui/stores/SocketStore.ts b/ui/app/stores/SocketStore.ts
similarity index 97%
rename from ui/stores/SocketStore.ts
rename to ui/app/stores/SocketStore.ts
index 1333ba64..779a52f1 100644
--- a/ui/stores/SocketStore.ts
+++ b/ui/app/stores/SocketStore.ts
@@ -1,7 +1,7 @@
 import { io } from "socket.io-client";
-import { ag } from "~/utils/index"
 import type { Socket as IOSocket, SocketOptions } from "socket.io-client"
 import type { ManagerOptions } from "socket.io-client";
+import type { StoreItem } from "~/types/store";
 
 export const useSocketStore = defineStore('socket', () => {
   const runtimeConfig = useRuntimeConfig()
@@ -65,7 +65,7 @@ export const useSocketStore = defineStore('socket', () => {
     on('item_added', stream => {
       const json = JSON.parse(stream);
       stateStore.add('queue', json.data._id, json.data);
-      toast.success(`Item queued: ${ag(stateStore.get('queue', json.data._id, {}), 'title')}`);
+      toast.success(`Item queued: ${ag(stateStore.get('queue', json.data._id, {} as StoreItem), 'title')}`);
     });
 
     on(['log_info', 'log_success', 'log_warning', 'log_error'], (event: string, stream: string) => {
@@ -111,7 +111,7 @@ export const useSocketStore = defineStore('socket', () => {
         return
       }
 
-      toast.warning(`Download cancelled: ${ag(stateStore.get('queue', id, {}), 'title')}`);
+      toast.warning(`Download cancelled: ${ag(stateStore.get('queue', id, {} as StoreItem), 'title')}`);
 
       if (true === stateStore.has('queue', id)) {
         stateStore.remove('queue', id);
diff --git a/ui/stores/StateStore.ts b/ui/app/stores/StateStore.ts
similarity index 70%
rename from ui/stores/StateStore.ts
rename to ui/app/stores/StateStore.ts
index 66487407..04c6c873 100644
--- a/ui/stores/StateStore.ts
+++ b/ui/app/stores/StateStore.ts
@@ -1,24 +1,22 @@
 import { defineStore } from 'pinia'
-import { reactive, toRefs } from 'vue'
 import type { StoreItem } from '~/types/store'
 
 type StateType = 'queue' | 'history'
 type KeyType = string
-type ValueType = StoreItem
 
 interface State {
-  queue: Record<KeyType, ValueType>
-  history: Record<KeyType, ValueType>
+  queue: Record<KeyType, StoreItem>
+  history: Record<KeyType, StoreItem>
 }
 
 export const useStateStore = defineStore('state', () => {
   const state = reactive<State>({ queue: {}, history: {} })
 
-  const add = (type: StateType, key: KeyType, value: ValueType): void => {
+  const add = (type: StateType, key: KeyType, value: StoreItem): void => {
     state[type][key] = value
   }
 
-  const update = (type: StateType, key: KeyType, value: ValueType): void => {
+  const update = (type: StateType, key: KeyType, value: StoreItem): void => {
     state[type][key] = value
   }
 
@@ -28,7 +26,7 @@ export const useStateStore = defineStore('state', () => {
     }
   }
 
-  const get = (type: StateType, key: KeyType, defaultValue: ValueType | null | object = null): ValueType | null => {
+  const get = (type: StateType, key: KeyType, defaultValue: StoreItem | null = null): StoreItem | null => {
     return state[type][key] || defaultValue
   }
 
@@ -40,7 +38,7 @@ export const useStateStore = defineStore('state', () => {
     state[type] = {}
   }
 
-  const addAll = (type: StateType, data: Record<KeyType, ValueType>): void => {
+  const addAll = (type: StateType, data: Record<KeyType, StoreItem>): void => {
     state[type] = data
   }
 
diff --git a/ui/types/changelogs.d.ts b/ui/app/types/changelogs.d.ts
similarity index 100%
rename from ui/types/changelogs.d.ts
rename to ui/app/types/changelogs.d.ts
diff --git a/ui/types/conditions.d.ts b/ui/app/types/conditions.d.ts
similarity index 100%
rename from ui/types/conditions.d.ts
rename to ui/app/types/conditions.d.ts
diff --git a/ui/types/config.d.ts b/ui/app/types/config.d.ts
similarity index 100%
rename from ui/types/config.d.ts
rename to ui/app/types/config.d.ts
diff --git a/ui/types/globals.d.ts b/ui/app/types/globals.d.ts
similarity index 100%
rename from ui/types/globals.d.ts
rename to ui/app/types/globals.d.ts
diff --git a/ui/types/item.d.ts b/ui/app/types/item.d.ts
similarity index 100%
rename from ui/types/item.d.ts
rename to ui/app/types/item.d.ts
diff --git a/ui/types/logs.ts b/ui/app/types/logs.ts
similarity index 100%
rename from ui/types/logs.ts
rename to ui/app/types/logs.ts
diff --git a/ui/types/responses.d.ts b/ui/app/types/responses.d.ts
similarity index 100%
rename from ui/types/responses.d.ts
rename to ui/app/types/responses.d.ts
diff --git a/ui/types/sockets.d.ts b/ui/app/types/sockets.d.ts
similarity index 100%
rename from ui/types/sockets.d.ts
rename to ui/app/types/sockets.d.ts
diff --git a/ui/types/store.d.ts b/ui/app/types/store.d.ts
similarity index 100%
rename from ui/types/store.d.ts
rename to ui/app/types/store.d.ts
diff --git a/ui/types/tasks.ts b/ui/app/types/tasks.ts
similarity index 100%
rename from ui/types/tasks.ts
rename to ui/app/types/tasks.ts
diff --git a/ui/utils/cache.ts b/ui/app/utils/cache.ts
similarity index 100%
rename from ui/utils/cache.ts
rename to ui/app/utils/cache.ts
diff --git a/ui/utils/embedable.ts b/ui/app/utils/embedable.ts
similarity index 100%
rename from ui/utils/embedable.ts
rename to ui/app/utils/embedable.ts
diff --git a/ui/utils/index.ts b/ui/app/utils/index.ts
similarity index 89%
rename from ui/utils/index.ts
rename to ui/app/utils/index.ts
index ffdf1b8c..8dd3d0df 100644
--- a/ui/utils/index.ts
+++ b/ui/app/utils/index.ts
@@ -584,16 +584,72 @@ const formatTime = (seconds: number): string => {
  */
 const sleep = (seconds: number): Promise<void> => new Promise(resolve => setTimeout(resolve, seconds * 1000))
 
+/**
+ * Waits for the test function to return a truthy value.
+ *
+ * @param test - The function to test
+ * @param timeout_ms - The maximum time to wait in milliseconds.
+ * @param frequency - The frequency to check the test function in milliseconds.
+ *
+ * @returns The result of the test function.
+ */
+const awaiter = async (test: Function, timeout_ms: number = 20 * 1000, frequency: number = 200) => {
+  if (typeof (test) != "function") {
+    throw new Error("test should be a function in awaiter(test, [timeout_ms], [frequency])")
+  }
+
+  const isNotTruthy = (val: any) => val === undefined || val === false || val === null || val.length === 0;
+  const endTime: number = Date.now() + timeout_ms;
+
+  let result = test();
+
+  while (isNotTruthy(result)) {
+    if (Date.now() > endTime) {
+      return false;
+    }
+    await sleep(frequency);
+    result = test();
+  }
+
+  return result;
+}
+
+/**
+ * Encode a JavaScript object into a URL-safe base64 string.
+ *
+ * @param obj - The object to encode.
+ * @returns A URL-safe base64-encoded string.
+ */
+const encode = (obj: Record<string, any>): string => {
+  const jsonStr = JSON.stringify(obj);
+  const utf8Bytes = new TextEncoder().encode(jsonStr);
+  const binary = String.fromCharCode(...utf8Bytes);
+  const base64 = btoa(binary);
+  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/**
+ * Decode a URL-safe base64 string into an object.
+ *
+ * @param str - The URL-safe base64-encoded string.
+ * @returns The decoded JavaScript object.
+ */
+const decode = (str: string): object => {
+  const base64 = str
+    .replace(/-/g, '+')
+    .replace(/_/g, '/')
+    .padEnd(str.length + (4 - str.length % 4) % 4, '=');
+
+  const binary = atob(base64);
+  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
+  const jsonStr = new TextDecoder().decode(bytes);
+  return JSON.parse(jsonStr);
+}
+
 export {
-  convertCliOptions, separators, getSeparatorsName, iTrim, eTrim, sTrim, ucFirst,
+  separators, convertCliOptions, getSeparatorsName, iTrim, eTrim, sTrim, ucFirst,
   getValue, ag, ag_set, awaitElement, r, copyText, dEvent, makePagination, encodePath,
   request, removeANSIColors, dec2hex, makeId, basename, dirname, getQueryParams,
-  makeDownload,
-  formatBytes,
-  has_data,
-  toggleClass,
-  cleanObject,
-  uri,
-  formatTime,
-  sleep
+  makeDownload, formatBytes, has_data, toggleClass, cleanObject, uri, formatTime,
+  sleep, awaiter, encode, decode
 }
diff --git a/ui/utils/ytdlp.ts b/ui/app/utils/ytdlp.ts
similarity index 86%
rename from ui/utils/ytdlp.ts
rename to ui/app/utils/ytdlp.ts
index 7308b6cc..4259c3b4 100644
--- a/ui/utils/ytdlp.ts
+++ b/ui/app/utils/ytdlp.ts
@@ -5,9 +5,28 @@ function match_str(filterStr: string, dct: Record<string, any>, incomplete: bool
     return true;
   }
 
-  return filterStr
-    .split(/(?<!\\)&/)
-    .every(filterPart => _match_one(filterPart.replace(/\\&/g, '&'), dct, incomplete));
+  if (/\s*&\s*$/.test(filterStr)) {
+    return false;
+  }
+
+  try {
+    const filterParts = filterStr
+      .split(/(?:(^|[^\\]))&/g)
+      .reduce((parts, part, index, array) => {
+        if (index % 2 === 0) {
+          parts.push((part + (array[index + 1] || '')).replace(/\\&/g, '&'));
+        }
+        return parts;
+      }, [] as string[]);
+
+    if (filterParts.some(fp => !fp.trim())) {
+      return false;
+    }
+
+    return filterParts.every(filterPart => _match_one(filterPart, dct, incomplete));
+  } catch (e) {
+    return false;
+  }
 }
 
 function lookup_unit_table(unitTable: Record<string, number>, s: string, strict = false): number | null {
@@ -101,7 +120,14 @@ function _match_one(filterPart: string, dct: Record<string, any>, incomplete: bo
     const opFn = negation ? (a: any, b: any) => !unnegatedOp(a, b) : unnegatedOp;
 
     let value = quoted ?? plain ?? '';
-    if (quote) value = value.replace(new RegExp(`\\\\${quote}`, 'g'), quote);
+
+    if (quote) {
+      value = value.replace(new RegExp(`\\\\${quote}`, 'g'), quote);
+    }
+
+    if (!(key! in dct)) {
+      return isIncomplete(key!) || Boolean(noneInclusive);
+    }
 
     const actual = dct[key!];
     let numeric: number | null = null;
@@ -117,10 +143,6 @@ function _match_one(filterPart: string, dct: Record<string, any>, incomplete: bo
       throw new Error(`Operator ${op} only supports string values!`);
     }
 
-    if (actual == null) {
-      return isIncomplete(key!) || Boolean(noneInclusive);
-    }
-
     return opFn(actual, numeric !== null ? numeric : value);
   }
 
@@ -133,12 +155,12 @@ function _match_one(filterPart: string, dct: Record<string, any>, incomplete: bo
   const mu = filterPart.trim().match(unaryRe);
   if (mu?.groups) {
     const { op, key } = mu.groups;
-    const actual = dct[key!];
 
-    if (actual === undefined && isIncomplete(key!)) {
-      return true;
+    if (!(key! in dct)) {
+      return isIncomplete(key!);
     }
 
+    const actual = dct[key!];
     const unaryOp = UNARY_OPERATORS[op!];
 
     if (!unaryOp) {
diff --git a/ui/nuxt.config.ts b/ui/nuxt.config.ts
index 742390bf..1fa82efc 100644
--- a/ui/nuxt.config.ts
+++ b/ui/nuxt.config.ts
@@ -70,7 +70,11 @@ export default defineNuxtConfig({
     },
     ...extraNitro,
   },
-
+  vite: {
+    server: {
+      allowedHosts: true,
+    }
+  },
   telemetry: false,
   compatibilityDate: "2024-07-13",
 })
diff --git a/ui/plugins/autoscroll.js b/ui/plugins/autoscroll.js
deleted file mode 100644
index 574a10fc..00000000
--- a/ui/plugins/autoscroll.js
+++ /dev/null
@@ -1,33 +0,0 @@
-let observer;
-const AUTO_SCROLL_EVENTS = ['scroll', 'mousewheel', 'touchmove'];
-let events_handlers = [];
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive('autoscroll', {
-    mounted: async el => {
-      let scrolledToBottom = true;
-
-      AUTO_SCROLL_EVENTS.forEach((ev, index) => {
-        events_handlers[index] = () => {
-          scrolledToBottom = (el.scrollHeight - el.scrollTop) - el.clientHeight <= 80;
-        }
-        el.addEventListener(ev, events_handlers[index], { passive: true });
-      });
-
-      observer = new MutationObserver(_ => {
-        if (false === scrolledToBottom) {
-          return;
-        }
-        el.scrollTop = el.scrollHeight;
-      });
-
-      observer.observe(el, { childList: true, subtree: true });
-    },
-    unmounted: el => {
-      AUTO_SCROLL_EVENTS.forEach((ev, index) => {
-        el.removeEventListener(ev, events_handlers[index], { passive: true });
-      });
-      observer.disconnect();
-    },
-  })
-});
diff --git a/ui/plugins/rtime.js b/ui/plugins/rtime.js
deleted file mode 100644
index a6a934fc..00000000
--- a/ui/plugins/rtime.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-import moment from 'moment'
-
-const parseInterval = arg => {
-  const match = arg.match(/^(\d+)([smhd])$/)
-  if (!match) {
-    return 60 * 1000
-  }
-
-  const [, numStr, unit] = match
-  const num = parseInt(numStr, 10)
-
-  switch (unit) {
-    case 'd': return num * 24 * 3600 * 1000
-    case 'h': return num * 3600 * 1000
-    case 'm': return num * 60 * 1000
-    case 's': return num * 1000
-    default: return 60 * 1000
-  }
-}
-
-export default defineNuxtPlugin(nuxtApp => nuxtApp.vueApp.directive('rtime', {
-  mounted(el, binding) {
-    const intervalMs = binding.arg ? parseInterval(binding.arg) : 60 * 1000
-    const update = () => el.textContent = moment(binding.value).fromNow()
-
-    update()
-    el._next_timer = window.setInterval(update, intervalMs)
-  },
-  updated(el, binding) {
-    if (binding.oldValue !== binding.value) {
-      if (null != el._next_timer) {
-        clearInterval(el._next_timer)
-      }
-
-      const intervalMs = binding.arg ? parseInterval(binding.arg) : 60 * 1000
-
-      const update = () => el.textContent = moment(binding.value).fromNow()
-      update()
-
-      el._next_timer = window.setInterval(update, intervalMs)
-    }
-  },
-  beforeUnmount(el) {
-    if (null != el._next_timer) {
-      clearInterval(el._next_timer)
-    }
-  }
-}))
diff --git a/ui/plugins/toast.js b/ui/plugins/toast.js
deleted file mode 100644
index d6536428..00000000
--- a/ui/plugins/toast.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Toast from 'vue-toastification'
-import 'vue-toastification/dist/index.css'
-
-export default defineNuxtPlugin(nuxtApp => nuxtApp.vueApp.use(Toast, {
-  transition: "Vue-Toastification__bounce",
-  //position: "bottom-right",
-  maxToasts: 5,
-  newestOnTop: true
-}))
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
index e1ed80ed..015fc21e 100644
--- a/ui/tsconfig.json
+++ b/ui/tsconfig.json
@@ -4,7 +4,7 @@
   "compilerOptions": {
     "allowImportingTsExtensions": false,
     "types": [
-      "./types/globals"
+      "./app/types/globals"
     ]
   }
 }
diff --git a/ui/utils/awaiter.ts b/ui/utils/awaiter.ts
deleted file mode 100644
index 839cbdd1..00000000
--- a/ui/utils/awaiter.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-// for non arrays, length is undefined, so != 0
-const isNotTruthy = (val: any) => val === undefined || val === false || val === null || val.length === 0;
-
-/**
- * Waits for the test function to return a truthy value.
- *
- * @param test - The function to test
- * @param timeout_ms - The maximum time to wait in milliseconds.
- * @param frequency - The frequency to check the test function in milliseconds.
- *
- * @returns The result of the test function.
- */
-export default async function awaiter(test: Function, timeout_ms: number = 20 * 1000, frequency: number = 200) {
-    if (typeof (test) != "function") {
-        throw new Error("test should be a function in awaiter(test, [timeout_ms], [frequency])")
-    }
-
-    const endTime: number = Date.now() + timeout_ms;
-
-    let result = test();
-
-    while (isNotTruthy(result)) {
-        if (Date.now() > endTime) {
-            return false;
-        }
-        await sleep(frequency);
-        result = test();
-    }
-
-    return result;
-}
-
diff --git a/ui/utils/importer.ts b/ui/utils/importer.ts
deleted file mode 100644
index f3d4484b..00000000
--- a/ui/utils/importer.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-const encode = (obj: Record<string, any>): string => {
-  const jsonStr = JSON.stringify(obj);
-  const utf8Bytes = new TextEncoder().encode(jsonStr);
-  const binary = String.fromCharCode(...utf8Bytes);
-  const base64 = btoa(binary);
-  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
-}
-
-const decode = (str: string): object => {
-  const base64 = str
-    .replace(/-/g, '+')
-    .replace(/_/g, '/')
-    .padEnd(str.length + (4 - str.length % 4) % 4, '=');
-
-  const binary = atob(base64);
-  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
-  const jsonStr = new TextDecoder().decode(bytes);
-  return JSON.parse(jsonStr);
-}
-
-export { encode, decode }