@necrolab/dashboard 0.5.32 → 0.5.34

package/backend/endpoints.js

@@ -38,7 +38,7 @@ const tasksOpen = async (data) => {
         return {
             error: "task does not exist"
         };
-    Bot.Tasks[taskId].openBrowser(); // TODO use cookies from task in subprocess
+    Bot.Tasks[taskId].openBrowser();
     return {};
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.32",
+    "version": "0.5.34",
     "type": "module",
     "scripts": {
         "build": "node scripts/build.mjs",

package/src/components/Tasks/Stats.vue

@@ -1,73 +1,396 @@
 <template>
-    <div class="flex-gap-1 items-center font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
+    <div
+        class="queue-stats"
+        :class="{ 'queue-stats--full': visibleCards === 4 }"
+        :style="statsGridStyle"
+        v-if="ui.queueStats.show"
+        :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <img width="14px" src="@/assets/img/wildcard.svg" />
-                <span class="hidden md:inline">Total</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.total }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <SkiIcon />
-                <span class="hidden md:inline">Queued</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.queued }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <TimerIcon />
-                <span class="hidden md:inline">Sleeping</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.sleeping }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3 bg-dark-400 border-2 border-dark-550">
-            <h2 class="stat-header">
-                <CartIcon />
-                <span class="hidden sm:block">Next Passes</span>
-                <span class="block sm:hidden">Pass</span>
+            class="stat-badge queue-stats__card queue-stats__card--passes"
+            :title="ui.queueStats.nextQueuePasses.join(', ')">
+            <h2 class="queue-stats__header">
+                <SandclockIcon />
             </h2>
-            <span class="flex items-center truncate text-right text-xs font-bold text-light-300">
-                {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
+            <span class="queue-stats__value queue-stats__value--passes">
+                <span class="queue-stats__pass-text">{{ queuePassPreviewText }}</span>
+                <button
+                    v-if="hiddenPassCount > 0"
+                    type="button"
+                    class="queue-stats__more-btn"
+                    @click.stop="openPassesOverlay">
+                    +{{ hiddenPassCount }}
+                </button>
             </span>
         </div>
     </div>
+
+    <Teleport to="body">
+        <div
+            v-if="showPassesOverlay"
+            class="queue-pass-overlay"
+            @click.self="closePassesOverlay">
+            <div class="queue-pass-modal">
+                <div class="queue-pass-modal__header">
+                    <h3>Next Queue Passes</h3>
+                    <button
+                        type="button"
+                        class="queue-pass-modal__close"
+                        @click="closePassesOverlay">
+                        Close
+                    </button>
+                </div>
+                <div class="queue-pass-modal__body">
+                    <ul class="queue-pass-modal__list">
+                        <li
+                            v-for="(pass, index) in ui.queueStats.nextQueuePasses"
+                            :key="`${pass}-${index}`"
+                            class="queue-pass-modal__item">
+                            <span>#{{ index + 1 }}</span>
+                            <span>{{ pass }}</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </Teleport>
 </template>
 
 <script setup>
-import { SkiIcon, TimerIcon, CartIcon } from "@/components/icons";
+import { SkiIcon, TimerIcon, SandclockIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref, onUnmounted } from "vue";
+import { ref, onUnmounted, computed, onMounted } from "vue";
 
 const ui = useUIStore();
 
 const getQueuePassAmount = (width) => {
-    if (width > 1024) return 8;
-    if (width > 640) return 3;
+    if (width >= 1536) return 10;
+    if (width >= 1280) return 8;
+    if (width >= 1024) return 6;
+    if (width >= 768) return 4;
+    if (width >= 640) return 2;
     return 1;
 };
+const getQueuePassCharBudget = (width) => {
+    if (width >= 1536) return 56;
+    if (width >= 1280) return 42;
+    if (width >= 1024) return 32;
+    if (width >= 768) return 24;
+    if (width >= 640) return 16;
+    return 10;
+};
+const buildQueuePassPreview = (passes, maxItems, maxChars) => {
+    const values = passes.slice(0, maxItems).map((value) => String(value));
+    if (!values.length) return "";
+
+    let currentLength = 0;
+    const output = [];
+
+    for (const value of values) {
+        const separator = output.length ? 2 : 0;
+        const nextLength = currentLength + separator + value.length;
+        if (nextLength > maxChars) break;
+        output.push(value);
+        currentLength = nextLength;
+    }
+
+    if (output.length === 0) output.push(values[0]);
+
+    return {
+        visible: output,
+        hiddenCount: Math.max(passes.length - output.length, 0)
+    };
+};
 
 let key = ref(0);
+const width = ref(window.innerWidth);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
+const queuePassCharBudget = ref(getQueuePassCharBudget(window.innerWidth));
+const showPassesOverlay = ref(false);
+const visibleCards = computed(
+    () =>
+        Number(Boolean(ui.queueStats.total)) +
+        Number(Boolean(ui.queueStats.queued)) +
+        Number(Boolean(ui.queueStats.sleeping)) +
+        Number(Boolean(ui.queueStats.nextQueuePasses.length))
+);
+const statsGridStyle = computed(() => ({
+    "--stats-card-count": `${Math.max(visibleCards.value, 1)}`
+}));
+const queuePassPreviewData = computed(() =>
+    buildQueuePassPreview(ui.queueStats.nextQueuePasses, queuePassAmount.value, queuePassCharBudget.value)
+);
+const queuePassPreviewText = computed(() => queuePassPreviewData.value.visible.join(", "));
+const hiddenPassCount = computed(() => queuePassPreviewData.value.hiddenCount);
+
+const openPassesOverlay = () => {
+    if (!hiddenPassCount.value) return;
+    showPassesOverlay.value = true;
+};
+
+const closePassesOverlay = () => {
+    showPassesOverlay.value = false;
+};
 
-const handleResize = () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth));
+const handleResize = () => {
+    width.value = window.innerWidth;
+    queuePassAmount.value = getQueuePassAmount(width.value);
+    queuePassCharBudget.value = getQueuePassCharBudget(width.value);
+};
 window.addEventListener("resize", handleResize);
 
+const handleKeyDown = (event) => {
+    if (event.key === "Escape" && showPassesOverlay.value) {
+        closePassesOverlay();
+    }
+};
+
+onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+});
+
 onUnmounted(() => {
     window.removeEventListener("resize", handleResize);
+    window.removeEventListener("keydown", handleKeyDown);
 });
 </script>
+
+<style scoped>
+.queue-stats {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    grid-template-columns: repeat(var(--stats-card-count), minmax(0, 1fr));
+    gap: 0.35rem;
+}
+
+.queue-stats__card {
+    @apply bg-dark-400 border-2 border-dark-550;
+    height: 2.5rem;
+    min-width: 0;
+    gap: 0.35rem;
+    border-radius: 0.55rem;
+    padding: 0 0.5rem;
+}
+
+.queue-stats__header {
+    min-width: 1rem;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: rgb(212 212 219 / 1);
+    font-weight: 600;
+    font-size: 0.7rem;
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
+.queue-stats__value {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: clip;
+    white-space: nowrap;
+    color: rgb(212 212 219 / 1);
+    font-weight: 700;
+    font-size: 0.7rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-left: 0.25rem;
+}
+
+.queue-stats__card--metric .queue-stats__header {
+    min-width: 1rem;
+}
+
+.queue-stats__card--metric .queue-stats__value {
+    flex: 0 0 auto;
+    min-width: 3.4rem;
+    margin-left: 0.35rem;
+}
+
+.queue-stats__header :deep(svg),
+.queue-stats__header img {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+}
+
+.queue-stats__card--passes {
+    padding-right: 0.4rem;
+    gap: 0.3rem;
+}
+
+.queue-stats__card--passes .queue-stats__header {
+    min-width: 1.1rem;
+}
+
+.queue-stats__value--passes {
+    font-size: 0.67rem;
+    gap: 0.35rem;
+}
+
+.queue-stats__pass-text {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.queue-stats__more-btn {
+    @apply bg-dark-550 border border-dark-650 text-light-300;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    padding: 0.1rem 0.4rem;
+    font-size: 0.62rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.queue-pass-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    padding: 1rem;
+}
+
+.queue-pass-modal {
+    @apply bg-dark-400 border border-dark-550;
+    width: min(34rem, 95vw);
+    border-radius: 0.75rem;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+}
+
+.queue-pass-modal__header {
+    @apply border-b border-dark-550 text-light-200;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.75rem 0.9rem;
+}
+
+.queue-pass-modal__header h3 {
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+.queue-pass-modal__close {
+    @apply bg-dark-500 border border-dark-650 text-light-300;
+    border-radius: 0.45rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+}
+
+.queue-pass-modal__body {
+    max-height: min(60vh, 28rem);
+    overflow-y: auto;
+    padding: 0.55rem;
+}
+
+.queue-pass-modal__list {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.queue-pass-modal__item {
+    @apply bg-dark-500 border border-dark-650 text-light-300;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.5rem;
+    padding: 0.35rem 0.55rem;
+    font-size: 0.78rem;
+    font-variant-numeric: tabular-nums;
+}
+
+@media (min-width: 768px) {
+    .queue-stats {
+        gap: 0.45rem;
+    }
+
+    .queue-stats__card {
+        padding: 0 0.7rem;
+    }
+
+    .queue-stats__header {
+        gap: 0.35rem;
+        font-size: 0.72rem;
+    }
+
+    .queue-stats__value {
+        font-size: 0.72rem;
+    }
+
+    .queue-stats__value--passes {
+        font-size: 0.7rem;
+    }
+
+    .queue-stats__card--metric .queue-stats__value {
+        min-width: 3.7rem;
+    }
+}
+
+@media (min-width: 960px) {
+    .queue-stats--full {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
+    }
+}
+
+@media (min-width: 1280px) {
+    .queue-stats--full {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .queue-stats--full .queue-stats__card--passes {
+        grid-column: span 2;
+    }
+}
+
+@media (min-width: 1280px) {
+    .queue-stats__value--passes {
+        font-size: 0.75rem;
+    }
+}
+</style>

package/src/components/Tasks/TaskView.vue

@@ -270,16 +270,26 @@ const maxTableHeight = computed(() => {
     const headerHeight = windowWidth.value >= 1024 ? 80 : 64; // Navbar padding (lg:pt-20 vs pt-16)
     const titleHeight = 45; // Tasks title and mobile controls
     const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
-    // On desktop: stats + filters all in one row (45px)
-    // On mobile: stats row (40px) + filters stacked (90px) = 130px
-    const filtersAndStatsHeight =
-        windowWidth.value >= 768
-            ? ui.queueStats.show
-                ? 50
-                : 45 // Desktop: single row
-            : ui.queueStats.show
-              ? 130
-              : 90; // Mobile: stats row + stacked filters
+    // Keep this in sync with Tasks.vue controls layout:
+    // - >= 1280px: stats stays in same row as filters
+    // - 768px..1279px: stats takes its own wrapped row when visible
+    // - < 768px: mobile has dedicated stats row + controls/search rows
+    const isDesktopInlineStats = windowWidth.value >= 1280;
+    const isTabletWrappedStats = windowWidth.value >= 768 && windowWidth.value < 1280;
+
+    const filtersAndStatsHeight = (() => {
+        if (isDesktopInlineStats) {
+            return ui.queueStats.show ? 50 : 45;
+        }
+
+        if (isTabletWrappedStats) {
+            const filterRowHeight = 45;
+            const wrappedStatsRowHeight = ui.queueStats.show ? 54 : 0;
+            return filterRowHeight + wrappedStatsRowHeight;
+        }
+
+        return ui.queueStats.show ? 155 : 110;
+    })();
 
     // Reserve more space for UTILS on iPhone PWA to prevent overflow
     const utilitiesHeight = isPWA && windowWidth.value <= 768

package/src/components/ui/ReconnectIndicator.vue

@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import logoIcon from "/img/reconnect-logo.png";
+import logoIcon from "@/assets/img/reconnect-logo.png?inline";
 
 const dotIndex = ref(0);
 let dotInterval;

package/src/stores/connection.js

@@ -3,6 +3,7 @@ import WebsocketHeartbeatJs from "websocket-heartbeat-js";
 import { decode } from "@msgpack/msgpack";
 import router from "@/router/index";
 import { sortTaskIds } from "@/libs/utils/array";
+import { DEBUG } from "@/utils/debug";
 
 const TASK_UPDATE_EVENTS = new Set(["task-update", "task-setstatus", "task-setinfo"]);
 const QUEUE_STAT_FIELDS = new Set(["siteId", "eventId", "inQueue", "status", "queuePosition"]);
@@ -568,6 +569,7 @@ export class ConnectionHandler {
             if (msg?.data) msg.data.module = this.ui.currentModule;
             this.socket.send(JSON.stringify(msg));
         } catch {
+            if (DEBUG) return;
             this.ui.startSpinner("Reconnecting");
         }
     }
@@ -604,13 +606,13 @@ export class ConnectionHandler {
         };
 
         this.socket.onclose = () => {
-            this.ui.startSpinner("Reconnecting");
+            if (!DEBUG) this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
             this.clearTaskUpdateQueue();
         };
 
         this.socket.onerror = () => {
-            this.ui.startSpinner("Reconnecting");
+            if (!DEBUG) this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
             this.clearTaskUpdateQueue();
         };

package/src/stores/ui.js

@@ -24,6 +24,16 @@ import { DEBUG } from "@/utils/debug";
 const ALL_SELECTED = 0;
 const SOME_SELECTED = 1;
 const NO_SELECTED = 2;
+const DEV_QUEUE_STATS_STORAGE_KEY = "dev-queue-stats-mock";
+const DEV_QUEUE_STATS_PRESETS = {
+    heavy: {
+        show: true,
+        total: 10000,
+        queued: 5000,
+        sleeping: 3000,
+        nextQueuePasses: [11, 18, 26, 35, 49, 57, 72, 88, 103, 121, 147, 169]
+    }
+};
 
 export const useUIStore = defineStore("ui", () => {
     const logger = createLogger("UI");
@@ -98,6 +108,55 @@ export const useUIStore = defineStore("ui", () => {
         sleeping: 0,
         nextQueuePasses: []
     });
+    const devQueueStatsMock = ref(null);
+
+    const normalizeQueueStats = (input = {}) => {
+        const total = Number(input.total) || 0;
+        const queued = Number(input.queued) || 0;
+        const sleeping = Number(input.sleeping) || 0;
+        const nextQueuePasses = Array.isArray(input.nextQueuePasses)
+            ? input.nextQueuePasses.map((value) => Number(value)).filter((value) => Number.isFinite(value) && value > 0)
+            : [];
+        const show = Boolean(input.show ?? (queued > 0 || sleeping > 0 || nextQueuePasses.length > 0));
+
+        return {
+            show,
+            total,
+            queued,
+            sleeping,
+            nextQueuePasses: nextQueuePasses.sort((a, b) => a - b)
+        };
+    };
+
+    const applyQueueStats = (stats) => {
+        queueStats.value.show = stats.show;
+        queueStats.value.total = stats.total;
+        queueStats.value.queued = stats.queued;
+        queueStats.value.sleeping = stats.sleeping;
+        queueStats.value.nextQueuePasses = stats.nextQueuePasses;
+    };
+
+    const setDevQueueStatsMock = (stats) => {
+        if (!DEBUG) return;
+        if (!stats) {
+            devQueueStatsMock.value = null;
+            localStorage.removeItem(DEV_QUEUE_STATS_STORAGE_KEY);
+            refreshQueueStats();
+            return;
+        }
+
+        const normalized = normalizeQueueStats(stats);
+        devQueueStatsMock.value = normalized;
+        localStorage.setItem(DEV_QUEUE_STATS_STORAGE_KEY, JSON.stringify(normalized));
+        applyQueueStats(normalized);
+    };
+
+    const setDevQueueStatsPreset = (preset = "heavy") => {
+        if (!DEBUG) return;
+        const data = DEV_QUEUE_STATS_PRESETS[preset];
+        if (!data) return;
+        setDevQueueStatsMock(data);
+    };
 
     const router = useRouter();
     const openContextMenu = ref("");
@@ -246,6 +305,11 @@ export const useUIStore = defineStore("ui", () => {
     };
 
     const refreshQueueStats = () => {
+        if (DEBUG && devQueueStatsMock.value) {
+            applyQueueStats(devQueueStatsMock.value);
+            return;
+        }
+
         const siteId = currentCountry.value.siteId;
         const eventId = currentEvent.value;
         const sleepingStatuses = new Set([
@@ -284,6 +348,23 @@ export const useUIStore = defineStore("ui", () => {
         queueStats.value.show = queued > 0 || sleeping > 0 || positions.length > 0;
     };
 
+    if (DEBUG) {
+        try {
+            const saved = localStorage.getItem(DEV_QUEUE_STATS_STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                devQueueStatsMock.value = normalizeQueueStats(parsed);
+                applyQueueStats(devQueueStatsMock.value);
+            }
+        } catch {
+            localStorage.removeItem(DEV_QUEUE_STATS_STORAGE_KEY);
+        }
+
+        window.__setQueueStatsMock = (stats) => setDevQueueStatsMock(stats);
+        window.__setQueueStatsPreset = (preset = "heavy") => setDevQueueStatsPreset(preset);
+        window.__clearQueueStatsMock = () => setDevQueueStatsMock(null);
+    }
+
     const toggleModal = (name, clearValue = false) => {
         if (disabledButtons.value["add-tasks"] && name === "create-task") return;
         if (clearValue) currentlyEditing.value = {};
@@ -551,6 +632,8 @@ export const useUIStore = defineStore("ui", () => {
 
         disabledButtons,
         queueStats,
+        setDevQueueStatsMock,
+        setDevQueueStatsPreset,
 
         refreshQueueStats,
 

package/src/views/Tasks.vue

@@ -37,9 +37,9 @@
                     @deleteAll="ui.deleteTasks()" />
             </div>
 
-            <div class="mb-2 flex items-center justify-between gap-2 md:hidden">
-                <Stats class="stats-component flex-1" />
-                <div class="flex-gap-2 items-center">
+            <div class="mb-2 flex flex-col gap-2 md:hidden">
+                <Stats class="stats-component w-full" />
+                <div class="flex-gap-2 items-center justify-end">
                     <div
                         class="flex h-8 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-2 text-xs font-medium text-white">
                         <p class="text-2xs">Name</p>
@@ -54,7 +54,7 @@
                 </div>
             </div>
 
-            <div class="mb-1 hidden items-center gap-2 md:flex lg:mb-2">
+            <div class="mb-1 hidden flex-wrap items-center gap-2 md:flex xl:flex-nowrap lg:mb-2">
                 <div v-if="uniqEventIds.length > 1" class="w-52 flex-shrink-0">
                     <Dropdown
                         :onClick="(f) => ui.setCurrentEvent(f)"
@@ -87,7 +87,9 @@
                     :darker="true"
                     :current="ui.taskFilter"
                     @change="(e) => ui.setTaskFilter(e)" />
-                <Stats class="stats-component ml-auto" />
+                <div class="stats-component min-w-0 w-full md:basis-full xl:ml-auto xl:basis-auto xl:flex-1 xl:max-w-2xl">
+                    <Stats class="w-full" />
+                </div>
             </div>
 
             <div class="mb-1 flex flex-col gap-2 md:hidden">

package/workbox-config.cjs

@@ -50,6 +50,18 @@ module.exports = {
                 }
             }
         },
+        // Critical UI images used during reconnect/offline states
+        {
+            urlPattern: /\/img\/(?:reconnect-logo\.png|logo_trans\.png|pwa\/.+\.png)$/,
+            handler: "CacheFirst",
+            options: {
+                cacheName: "critical-ui-images",
+                expiration: {
+                    maxEntries: 20,
+                    maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+                }
+            }
+        },
         // Images - Cache first for best performance
         {
             urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp|ico)$/,