@necrolab/dashboard 0.5.28 → 0.5.30

package/backend/api.js

@@ -20,8 +20,10 @@ import { users } from "./mock-data.js";
 
 const logger = createLogger("WEB UI");
 
-const maxWaitTime = 350; // ms
-const maxMessageSize = 100;
+const TASK_BATCH_WAIT_TIME = 120; // ms
+const TASK_BATCH_MAX_MESSAGES = 250;
+const CONSOLE_BATCH_WAIT_TIME = 250; // ms
+const CONSOLE_BATCH_MAX_MESSAGES = 120;
 
 const app = express();
 const auth = new authSystem();
@@ -97,8 +99,8 @@ const pushTaskWSUpdate = (batch) => {
     });
 };
 
-const taskBatcher = new Batcher(pushTaskWSUpdate, maxMessageSize, maxWaitTime);
-const logBatcher = new Batcher(pushConsoleWSUpdate, maxMessageSize, maxWaitTime);
+const taskBatcher = new Batcher(pushTaskWSUpdate, TASK_BATCH_MAX_MESSAGES, TASK_BATCH_WAIT_TIME);
+const logBatcher = new Batcher(pushConsoleWSUpdate, CONSOLE_BATCH_MAX_MESSAGES, CONSOLE_BATCH_WAIT_TIME);
 
 const pushWSUpdate = (u) => {
     if (u.type === "console") logBatcher.add(u);
@@ -270,7 +272,7 @@ app.post("/api/json-file", async (req, res) => {
 
     try {
         if (requestedFile.endsWith(".json")) JSON.parse(content);
-    } catch (e) {
+    } catch {
         return res.status(400).send({
             error: "Content must be valid JSON"
         });

package/backend/batching.js

@@ -10,11 +10,68 @@ class Batcher {
     }
 
     add(msg) {
-        if (msg.type == "task-update") this.inMessages = this.inMessages.filter((t) => t.id != msg.taskId);
-        else if (msg.type == "console" && !msg.log) return;
+        if (!msg) return;
+
+        const isTaskUpdate =
+            msg.event === "task-update" || msg.event === "task-setstatus" || msg.event === "task-setinfo";
+
+        if (isTaskUpdate) {
+            const taskId = msg.id || msg.task?.taskId;
+            if (taskId) {
+                const index = this.inMessages.findIndex((queued) => {
+                    const queuedIsTaskUpdate =
+                        queued.event === "task-update" ||
+                        queued.event === "task-setstatus" ||
+                        queued.event === "task-setinfo";
+                    const queuedTaskId = queued.id || queued.task?.taskId;
+                    return queuedIsTaskUpdate && queuedTaskId === taskId && queued.event === msg.event;
+                });
+
+                if (index !== -1) {
+                    this.inMessages[index] = this.mergeTaskMessages(this.inMessages[index], msg, taskId);
+                    return this.sendIfReady();
+                }
+            }
+        } else if (msg.type === "console" && !msg.log) return;
 
         this.inMessages.push(msg);
+        this.sendIfReady();
+    }
+
+    mergeTaskMessages(existing, incoming, taskId) {
+        if (!existing) return { ...incoming, id: incoming.id || taskId };
+        if (incoming?.task?.removed) return { ...incoming, id: incoming.id || taskId };
+        if (existing?.task?.removed) return existing;
+
+        const merged = {
+            ...existing,
+            ...incoming,
+            id: incoming.id || existing.id || taskId
+        };
+
+        if (existing.task || incoming.task) {
+            merged.task = {
+                ...(existing.task || {}),
+                ...(incoming.task || {})
+            };
+        }
+
+        if (existing.update || incoming.update) {
+            merged.update = {
+                ...(existing.update || {}),
+                ...(incoming.update || {})
+            };
+        }
+
+        if (merged.task && merged.update) {
+            Object.assign(merged.task, merged.update);
+            delete merged.update;
+        }
+
+        return merged;
+    }
 
+    sendIfReady() {
         // Enough messages for new batch
         if (this.inMessages.length >= this.maxSize) {
             this.lastBatchSent = Date.now();

package/backend/index.js

@@ -5,7 +5,7 @@ const Bot = {};
 Bot.ConsoleBuffer = [];
 Bot.Tasks = {};
 Bot.CurrentTaskId = 0;
-Bot.Settings = { DebugMode: true };
+Bot.Settings = { DebugMode: false };
 Bot.Monitors = {};
 Bot.Users = users;
 Bot.Profiles = profiles;

package/index.html

@@ -1,12 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" href="/favicon.ico" />
         <meta
             name="viewport"
-            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-        />
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
         <!-- Lock iPhone to portrait orientation only -->
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="mobile-web-app-capable" content="yes" />
@@ -24,7 +23,8 @@
                 color-scheme: dark only;
                 -webkit-color-scheme: dark;
             }
-            html, body {
+            html,
+            body {
                 color-scheme: dark only !important;
             }
         </style>
@@ -38,21 +38,11 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
             href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
-            rel="stylesheet"
-        />
-
-        <!-- Preload critical fonts -->
-        <link
-            rel="preload"
-            href="https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2"
-            as="font"
-            type="font/woff2"
-            crossorigin
-        />
+            rel="stylesheet" />
 
-        <!-- Preload critical assets -->
-        <link rel="preload" as="image" href="/img/logo_trans.png" />
-        <link rel="preload" as="image" href="/img/reconnect-logo.png" />
+        <!-- Prefetch likely-used assets -->
+        <link rel="prefetch" as="image" href="/img/logo_trans.png" />
+        <link rel="prefetch" as="image" href="/img/reconnect-logo.png" />
 
         <!-- Prefetch core navigation icons -->
         <link rel="prefetch" as="image" href="/img/close.svg" />
@@ -112,17 +102,14 @@
         <!-- Prefetch PWA resources -->
         <link rel="prefetch" as="script" href="/sw.js" />
 
-        <!-- Preload critical PWA manifest -->
-        <link rel="preload" as="fetch" href="/manifest.json" crossorigin />
-        <link rel="manifest" href="/manifest.json?v=3" />
+        <link rel="manifest" href="/manifest.json?v=3" crossorigin />
         <meta name="theme-color" content="#1a1b1e" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=3" />
 
         <!-- Prism.js for syntax highlighting -->
         <link
             rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"
-        />
+            href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.28",
+    "version": "0.5.30",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",

package/src/assets/css/base/scroll.scss

@@ -2,7 +2,7 @@
    SCROLL BEHAVIOR & TOUCH HANDLING
    ========================================================================== */
 
-@use "mixins" as *;
+@use "./mixins" as *;
 
 html {
     overflow: hidden !important;

package/src/assets/css/main.scss

@@ -3,20 +3,20 @@
    Modular SCSS architecture with @use imports
    ========================================================================== */
 
-@use "base/reset";
-@use "base/scroll";
-@use "base/typography";
-@use "base/variables";
-@use "base/mixins" as *;
-@use "components/buttons";
-@use "components/forms";
-@use "components/toasts";
-@use "components/modals";
-@use "components/tables";
-@use "components/search-groups";
-@use "components/headers";
-@use "components/utilities";
-@use "components/accessibility";
+@use "./base/reset";
+@use "./base/scroll";
+@use "./base/typography";
+@use "./base/variables";
+@use "./base/mixins" as *;
+@use "./components/buttons";
+@use "./components/forms";
+@use "./components/toasts";
+@use "./components/modals";
+@use "./components/tables";
+@use "./components/search-groups";
+@use "./components/headers";
+@use "./components/utilities";
+@use "./components/accessibility";
 
 /* ==========================================================================
    BODY LAYOUT & BACKGROUND

package/src/components/Console/ConsoleToolbar.vue

@@ -28,8 +28,8 @@
                         @mousedown="$emit('scroll', 'up')"
                         @mouseup="$emit('scroll-stop')"
                         @mouseleave="$emit('scroll-stop')"
-                        @touchstart="$emit('scroll', 'up')"
-                        @touchend="$emit('scroll-stop')"
+                        @touchstart.passive="$emit('scroll', 'up')"
+                        @touchend.passive="$emit('scroll-stop')"
                         aria-label="Scroll up">
                         <UpIcon class="pointer-events-none h-5 w-5" />
                     </button>
@@ -38,8 +38,8 @@
                         @mousedown="$emit('scroll', 'down')"
                         @mouseup="$emit('scroll-stop')"
                         @mouseleave="$emit('scroll-stop')"
-                        @touchstart="$emit('scroll', 'down')"
-                        @touchend="$emit('scroll-stop')">
+                        @touchstart.passive="$emit('scroll', 'down')"
+                        @touchend.passive="$emit('scroll-stop')">
                         <DownIcon class="pointer-events-none h-5 w-5" />
                     </button>
                 </div>
@@ -64,8 +64,8 @@
                     @mousedown="$emit('scroll', 'up')"
                     @mouseup="$emit('scroll-stop')"
                     @mouseleave="$emit('scroll-stop')"
-                    @touchstart="$emit('scroll', 'up')"
-                    @touchend="$emit('scroll-stop')">
+                    @touchstart.passive="$emit('scroll', 'up')"
+                    @touchend.passive="$emit('scroll-stop')">
                     <UpIcon class="pointer-events-none h-5 w-5" />
                 </button>
                 <button
@@ -73,8 +73,8 @@
                     @mousedown="$emit('scroll', 'down')"
                     @mouseup="$emit('scroll-stop')"
                     @mouseleave="$emit('scroll-stop')"
-                    @touchstart="$emit('scroll', 'down')"
-                    @touchend="$emit('scroll-stop')">
+                    @touchstart.passive="$emit('scroll', 'down')"
+                    @touchend.passive="$emit('scroll-stop')">
                     <DownIcon class="pointer-events-none h-5 w-5" />
                 </button>
             </div>

package/src/components/Editors/Account/Account.vue

@@ -4,8 +4,8 @@
         @click="ui.setOpenContextMenu('')"
         @click.right.prevent="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
-        @touchstart="handleTouchStart"
-        @touchend="handleTouchEnd">
+        @touchstart.passive="handleTouchStart"
+        @touchend.passive="handleTouchEnd">
         <div class="col-span-3 flex lg:col-span-2">
             <Checkbox
                 class="ml-0 mr-4"
@@ -17,11 +17,11 @@
         </div>
         <div class="col-span-2 hidden md:block" @click="copy(props.account.password, 'Copied password')">
             <h4 class="text-center text-white">
-                {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
+                {{ props.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
         <div class="col-span-1 flex justify-center">
-            <StatusBadge :enabled="props.account.enabled" size="small" />
+            <StatusBadge :enabled="Boolean(props.account.enabled)" size="small" />
         </div>
 
         <div class="col-span-1 hidden lg:block">
@@ -37,7 +37,7 @@
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.account.enabled">
+                <li v-if="Boolean(props.account.enabled)">
                     <button @click="disable">
                         <img class="icon-md" src="/img/controls/disable.svg" />
                     </button>
@@ -69,6 +69,10 @@ const props = defineProps({
     account: {
         type: Object,
         required: true
+    },
+    privacy: {
+        type: Boolean,
+        default: true
     }
 });
 

package/src/components/Editors/Account/AccountView.vue

@@ -29,19 +29,23 @@
                 <h4 class="hidden text-white md:flex">Actions</h4>
             </div>
         </Header>
-        <div
-            v-if="toRender.length != 0"
-            class="hidden-scrollbars flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll"
-            :style="{ maxHeight: dynamicTableHeight }">
-            <div
-                v-for="(account, i) in toRender"
-                :key="account.id || account.index"
-                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
-                <Account
-                    :class="getRowClass(i)"
-                    :account="account" />
-            </div>
-        </div>
+        <RecycleScroller
+            v-if="props.accounts.length !== 0"
+            class="hidden-scrollbars touch-pan-y overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll scrollable"
+            :style="{ height: dynamicTableHeight, maxHeight: dynamicTableHeight }"
+            :items="virtualAccounts"
+            key-field="virtualKey"
+            :item-size="64"
+            @wheel.passive="handleVirtualWheel">
+            <template #default="{ item, index }">
+                <div class="min-h-16 flex-shrink-0 hover:bg-dark-550">
+                    <Account
+                        :class="getRowClass(index)"
+                        :account="item.account"
+                        :privacy="props.privacy" />
+                </div>
+            </template>
+        </RecycleScroller>
         <EmptyState v-else :icon="MailIcon" message="No accounts found" subtitle="Create accounts to get started" />
     </div>
 </template>
@@ -59,21 +63,36 @@ import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
 import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
-import { computed } from "vue";
-import { useTableRender } from "@/composables/useTableRender";
 import { getRowClass } from "@/utils/tableHelpers";
+import { RecycleScroller } from "vue-virtual-scroller";
+import { computed } from "vue";
 
 const props = defineProps({
     accounts: {
-        type: Object,
+        type: Array,
         required: true
+    },
+    privacy: {
+        type: Boolean,
+        default: true
     }
 });
 const ui = useUIStore();
 
-const { toRender } = useTableRender(computed(() => props.accounts));
-
 import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
 const { dynamicTableHeight } = useDynamicTableHeight(TABLE_LAYOUT.ACCOUNTS);
+
+const virtualAccounts = computed(() =>
+    props.accounts.map((account) => ({
+        account,
+        virtualKey: String(account.id ?? account.email ?? "account")
+    }))
+);
+
+const handleVirtualWheel = (event) => {
+    const target = event.currentTarget;
+    if (!target) return;
+    target.scrollTop += event.deltaY;
+};
 </script>

package/src/components/Editors/Account/CreateAccount.vue

@@ -41,11 +41,21 @@
                 <FormField label="Password" :icon="KeyIcon" required :error="errors.includes('password')" z-index="0" class="col-span-12">
                     <input
                         placeholder="***********"
-                        type="password"
+                        :type="showPassword ? 'text' : 'password'"
                         v-model="account.password"
                         required
                         autocomplete="off"
                         name="account_password_disableautocomplete" />
+                    <button
+                        type="button"
+                        class="ml-2 flex size-7 items-center justify-center rounded transition-colors hover:bg-dark-550"
+                        @click="showPassword = !showPassword"
+                        :aria-label="showPassword ? 'Hide password' : 'Show password'">
+                        <img
+                            :src="showPassword ? eyeOpenIcon : eyeClosedIcon"
+                            :alt="showPassword ? 'Hide password' : 'Show password'"
+                            class="h-4 w-4" />
+                    </button>
                 </FormField>
             </div>
 
@@ -71,17 +81,41 @@ import {
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
-import { ref } from "vue";
+import { ref, toRaw } from "vue";
 import { useFormValidation } from "@/composables/useFormValidation";
+import eyeOpenIcon from "@/assets/img/eyes/open.svg";
+import eyeClosedIcon from "@/assets/img/eyes/closed.svg";
 
 const ui = useUIStore();
-const account = ref({
+const createDefaultAccount = () => ({
     email: "",
     password: "",
     tag: ui.profile.tags[0]
 });
+const cloneValue = (value) => {
+    const rawValue = toRaw(value);
+    if (typeof structuredClone === "function") {
+        try {
+            return structuredClone(rawValue);
+        } catch {
+            return JSON.parse(JSON.stringify(rawValue));
+        }
+    }
+    return JSON.parse(JSON.stringify(rawValue));
+};
+const getInitialAccount = () => {
+    if (!ui.currentlyEditing?.email) return createDefaultAccount();
 
-if (ui.currentlyEditing?.email) account.value = ui.currentlyEditing;
+    const cloned = cloneValue(ui.currentlyEditing);
+    const fallbackTag = Array.isArray(cloned.tags) && cloned.tags.length ? cloned.tags[0] : ui.profile.tags[0];
+    return {
+        ...createDefaultAccount(),
+        ...cloned,
+        tag: cloned.tag || fallbackTag
+    };
+};
+const account = ref(getInitialAccount());
+const showPassword = ref(false);
 
 const { errors, validateAccount } = useFormValidation();
 

package/src/components/Editors/Profile/CreateProfile.vue

@@ -160,7 +160,7 @@ import ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { ref, watch, nextTick, onMounted } from "vue";
+import { ref, watch, nextTick, onMounted, toRaw } from "vue";
 import { fakeId } from "@/libs/utils/dataGeneration";
 import { validateCard } from "@/libs/utils/validation";
 import { useFormValidation } from "@/composables/useFormValidation";
@@ -228,17 +228,42 @@ const usStates = [
     "WY"
 ];
 const cardNumberInput = ref(null);
-const formProfile = ref({
+const createDefaultProfile = () => ({
     cvv: "",
     cardNumber: "",
     city: "",
     tag: ui.profile.tags[0],
     state: "",
     country: "US",
-    zipCode: ""
+    zipCode: "",
+    expMonth: "",
+    expYear: "",
+    address: ""
 });
+const cloneValue = (value) => {
+    const rawValue = toRaw(value);
+    if (typeof structuredClone === "function") {
+        try {
+            return structuredClone(rawValue);
+        } catch {
+            return JSON.parse(JSON.stringify(rawValue));
+        }
+    }
+    return JSON.parse(JSON.stringify(rawValue));
+};
+const getInitialProfile = () => {
+    if (!ui.currentlyEditing?.profileName) return createDefaultProfile();
 
-if (ui.currentlyEditing?.profileName) formProfile.value = ui.currentlyEditing;
+    const cloned = cloneValue(ui.currentlyEditing);
+    const fallbackTag = Array.isArray(cloned.tags) && cloned.tags.length ? cloned.tags[0] : ui.profile.tags[0];
+
+    return {
+        ...createDefaultProfile(),
+        ...cloned,
+        tag: cloned.tag || fallbackTag
+    };
+};
+const formProfile = ref(getInitialProfile());
 
 // Reactive display value for the formatted card number
 const displayCardNumber = ref("");

package/src/components/Editors/Profile/Profile.vue

@@ -4,8 +4,8 @@
         @click="ui.setOpenContextMenu('')"
         @click.right.prevent="ui.setOpenContextMenu('')"
         @dblclick="handleDoubleClick"
-        @touchstart="handleTouchStart"
-        @touchend="handleTouchEnd">
+        @touchstart.passive="handleTouchStart"
+        @touchend.passive="handleTouchEnd">
         <div class="col-span-2 sm:col-span-2 md:col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
@@ -19,7 +19,7 @@
             <h4 class="flex items-center justify-center gap-2 text-center text-white">
                 <span class="hidden sm:block">
                     {{
-                        props.profile.privacy
+                        props.privacy
                             ? props.profile.cardNumber[0] +
                               "•".repeat(props.profile.cardNumber.length - 5) +
                               props.profile.cardNumber.slice(-4)
@@ -33,7 +33,7 @@
             <h4 class="text-center text-white">{{ expDate() }}</h4>
         </div>
         <div class="col-span-1 flex justify-center">
-            <StatusBadge :enabled="props.profile.enabled" size="small" />
+            <StatusBadge :enabled="isEnabled" size="small" />
         </div>
 
         <div class="col-span-1 hidden lg:block">
@@ -49,7 +49,7 @@
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.profile.enabled">
+                <li v-if="isEnabled">
                     <button @click="disable">
                         <img class="icon-md" src="/img/controls/disable.svg" />
                     </button>
@@ -85,6 +85,10 @@ const props = defineProps({
     profile: {
         type: Object,
         required: true
+    },
+    privacy: {
+        type: Boolean,
+        default: true
     }
 });
 
@@ -98,7 +102,8 @@ const getAccountType = () => {
 };
 
 const expDate = () =>
-    props.profile.privacy ? "••/••" : `${props.profile.expMonth}/${props.profile.expYear?.replace("20", "")}`;
+    props.privacy ? "••/••" : `${props.profile.expMonth}/${props.profile.expYear?.replace("20", "")}`;
+const isEnabled = computed(() => Boolean(props.profile.enabled));
 const { enable, disable } = useEnableDisable(computed(() => props.profile), ui.addProfile);
 const edit = () => {
     ui.currentlyEditing = props.profile;

package/src/components/Editors/Profile/ProfileCountryChooser.vue

@@ -12,8 +12,8 @@
                     class="min-w-20 bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50 p-2 [max-height:192px] overflow-y-auto custom-scrollbar-y"
                     :style="menuStyle"
                     @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
+                    @wheel.passive.stop
+                    @touchmove.passive.stop>
                     <div
                         v-for="(country, i) in countries"
                         v-bind:key="country"