@necrolab/dashboard 0.4.61 → 0.4.208

package/src/views/Console.vue

@@ -1,105 +1,74 @@
 <template>
     <div>
-        <h4 class="mb-2 flex items-center gap-2 pt-5 text-sm font-bold text-white lg:mt-1">
-            Console
-            <ConsoleIcon />
-        </h4>
+        <h4 class="text-white font-bold mb-5 pt-5 flex gap-2 text-xl items-center">Console <ConsoleIcon /></h4>
 
         <div>
-            <div class="mb-3 flex items-center justify-between">
-                <div class="w-64">
-                    <Dropdown
-                        class="console-dropdown input-default w-64 border-2 border-dark-550 bg-dark-500"
-                        rightAmount="right-2"
-                        default="All logs"
-                        :allowDefault="true"
-                        :value="currentTaskLog"
-                        :onClick="(f) => (currentTaskLog = f.split(' ')[0])"
-                        :options="
-                            Object.entries(taskLogMapping)
-                                .map(([k, v]) => `${k} (${v.length})`)
-                                .sort((a, b) => a.localeCompare(b))
-                        " />
-                </div>
-                <div class="flex items-center gap-3">
-                    <!-- Hide Monitors and Auto buttons only on desktop -->
-                    <div class="hidden items-center gap-3 md:flex">
-                        <button class="card-dark flex-center flex h-10 gap-3 rounded px-2">
-                            <h3 class="text-sm text-white">Hide Monitors</h3>
-                            <Switch class="scale-75" v-model="filteredLogs" />
-                        </button>
-                        <button class="card-dark flex-center relative flex h-10 gap-3 rounded px-2">
-                            <h3 class="text-sm text-white">Auto</h3>
-                            <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
-                            <div
-                                v-if="userScrolledUp && autoscrollToggled"
-                                class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
-                                title="Autoscroll paused - scroll to bottom to resume"></div>
-                        </button>
+            <div class="flex items-center mb-3">
+                <div class="flex w-full justify-start text-exl items-center">
+                    <div class="w-40 flex rounded input-default">
+                        <Dropdown
+                            class="w-40"
+                            rightAmount="right-2"
+                            default="All logs"
+                            :allowDefault="true"
+                            :value="currentTaskLog"
+                            :onClick="(f) => (currentTaskLog = f.split(' ')[0])"
+                            :options="Object.entries(taskLogMapping).map(([k, v]) => `${k} (${v.length})`).sort((a, b) => a.localeCompare(b))"
+                        />
                     </div>
-                    <!-- Scroll buttons always visible -->
+                </div>
+                <div class="flex justify-right justify-end text-2xl items-center gap-3">
+                    <button
+                        class="hidden ipadlg:flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
+                    >
+                        <h3 class="text-sm text-white">Filtered</h3>
+                        <Switch class="scale-75" v-model="filteredLogs" />
+                    </button>
+                    <button
+                        class="hidden ipadlg:flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
+                    >
+                        <h3 class="text-sm text-white">Auto</h3>
+                        <Switch class="scale-75" v-model="autoscrollToggled" />
+                    </button>
                     <button
-                        class="card-dark flex-center h-10 w-10 rounded transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
-                        @mousedown="startScrolling('up')"
-                        @mouseup="stopScrolling"
-                        @mouseleave="stopScrolling"
-                        @touchstart="startScrolling('up')"
-                        @touchend="stopScrolling">
-                        <UpIcon class="pointer-events-none h-5 w-5" />
+                        class="rounded bg-dark-500 border-2 border-dark-550 shadow-lg w-10 h-10 flex justify-center items-center"
+                    >
+                        <UpIcon class="cursor-pointer mx-1 lg:w-4 w-5 h-5" @click="scrollTo('up')" />
                     </button>
                     <button
-                        class="card-dark flex-center h-10 w-10 rounded transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
-                        @mousedown="startScrolling('down')"
-                        @mouseup="stopScrolling"
-                        @mouseleave="stopScrolling"
-                        @touchstart="startScrolling('down')"
-                        @touchend="stopScrolling">
-                        <DownIcon class="pointer-events-none h-5 w-5" />
+                        class="rounded bg-dark-500 border-2 border-dark-550 shadow-lg w-10 h-10 flex justify-center items-center"
+                    >
+                        <DownIcon class="cursor-pointer ml-1 lg:w-4 w-5 h-5" @click="scrollTo('down')" />
                     </button>
                 </div>
             </div>
 
             <Smoothie
-                :weight="0.2"
-                class="console scrollable smooth-scroll overflow-y-auto overflow-x-hidden font-mono text-white"
-                style="min-height: 12rem !important"
+                :weight="0.1"
+                class="hidden-scrollbars console overflow-y-auto overflow-x-hidden font-mono text-white"
+                style="min-height: 14rem !important"
                 ref="$autoscroll"
-                @wheel.stop
-                @touchmove.stop
-                @scroll="handleScroll">
-                <div
-                    v-if="
-                        (currentTaskLog && currentTaskLog !== ''
-                            ? taskLogMapping[currentTaskLog]
-                            : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))
-                        ).length === 0
-                    "
-                    class="empty-state flex h-full flex-col items-center justify-center text-center">
-                    <ConsoleIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-                    <p class="text-sm text-light-400">No logs yet</p>
-                    <p class="mt-1 text-xs text-light-500">Logs will appear here in real time</p>
-                </div>
+            >
                 <pre
-                    v-else
-                    class="hidden-scrollbars log-entry"
-                    v-for="(line, index) in currentTaskLog && currentTaskLog !== ''
+                    class="hidden-scrollbars"
+                    v-for="line in currentTaskLog
                         ? taskLogMapping[currentTaskLog]
-                        : logLines.filter((l) => (filteredLogs ? !['-DISCORD'].some((s) => l.includes(s)) : true))"
-                    v-bind:key="`log-${index}`"
-                    :style="{ '--index': index }"><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
+                        : logLines.filter((l) => (filteredLogs ? !['-discord'].some((s) => l.includes(s)) : true))"
+                    v-bind:key="line"
+                ><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
             </Smoothie>
-            <div class="mt-3 flex justify-between md:hidden">
-                <button class="card-dark flex-center flex h-10 gap-3 rounded px-2">
-                    <h3 class="text-sm text-white">Hide Monitors</h3>
+            <div class="flex ipadlg:hidden justify-between mt-3">
+                <button
+                    class="flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
+                >
+                    <h3 class="text-sm text-white">Filtered</h3>
                     <Switch class="scale-75" v-model="filteredLogs" />
                 </button>
-                <button class="card-dark flex-center relative flex h-10 gap-3 rounded px-2">
+                <button
+                    class="flex rounded gap-3 bg-dark-500 border-2 border-dark-550 shadow-lg px-2 h-10 justify-center items-center"
+                >
                     <h3 class="text-sm text-white">Auto</h3>
-                    <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
-                    <div
-                        v-if="userScrolledUp && autoscrollToggled"
-                        class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
-                        title="Autoscroll paused - scroll to bottom to resume"></div>
+                    <Switch class="scale-75" v-model="autoscrollToggled" />
                 </button>
             </div>
         </div>
@@ -107,107 +76,23 @@
 </template>
 <style lang="scss" scoped>
 .console {
-    @apply relative rounded border-2 border-dark-550 bg-dark-400 p-2 lg:p-5;
-    height: calc(100vh - 14rem);
-
-    // Enable scrollbars for console
-    scrollbar-width: thin;
-    scrollbar-color: #555 #2e2f34;
-
-    &::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: #2e2f34;
-        border-radius: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #555;
-        border-radius: 4px;
-        transition: background-color 0.2s ease;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-        background: #777;
-    }
-
-    // Smooth scrolling behavior with momentum
-    &.smooth-scroll {
-        scroll-behavior: smooth;
-        scroll-padding: 0.5rem;
-        -webkit-overflow-scrolling: touch;
-        overscroll-behavior: contain;
-    }
-
-    // Improved log entry animations
-    .log-entry {
-        opacity: 0;
-        transform: translateY(4px);
-        animation: slideInLog 0.2s ease-out forwards;
-        transition: all 0.15s ease;
-
-        &:hover {
-            background-color: rgba(255, 255, 255, 0.02);
-            transform: translateX(2px);
-        }
-    }
-
-    // Stagger animation for new logs
-    .log-entry:last-child {
-        animation-delay: 0.05s;
-    }
-
-    @keyframes slideInLog {
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
-    }
-
-    // Empty state styling
-    .empty-state {
-        min-height: 14rem;
-        font-family:
-            "Inter",
-            -apple-system,
-            BlinkMacSystemFont,
-            "Segoe UI",
-            Helvetica,
-            Arial,
-            sans-serif;
-    }
-
+    @apply bg-dark-400 lg:p-5 p-2 rounded relative border-dark-550 border-2;
+    height: calc(100vh - 16.5rem);
     textarea {
         background: transparent;
         resize: none;
-        @apply w-full text-white focus:outline-none;
-    }
-}
-
-/* Mobile portrait console optimizations */
-@screen mobile-portrait {
-    .console {
-        height: calc(100vh - 19.5rem);
-        @apply p-1 text-xs;
-        overflow: hidden;
 
-        pre {
-            line-height: 1.2;
-        }
-
-        code {
-            font-size: 0.7rem !important;
-        }
-    }
-}
-
-/* Mobile landscape console optimizations */
-@media (max-width: 1024px) and (orientation: landscape) {
-    .console {
-        height: calc(100vh - 10.5rem);
-    }
+        @apply w-full focus:outline-none text-white;
+    }
+    // $border: 1px;
+    // &:before {
+    //     content: "";
+    //     @apply absolute top-0 left-0 right-0 bottom-0 opacity-60;
+    //     z-index: -2;
+    //     margin: -$border;
+    //     border-radius: inherit;
+    //     background: radial-gradient(rgba(96, 66, 255, 0.6), rgba(255, 255, 255, 0));
+    // }
 }
 
 .text-xxs {
@@ -221,167 +106,50 @@
         height: 30px;
     }
 }
-/* Console-specific styles handled by utilities */
+.max-h-big-con {
+    max-height: calc(100vh - 12rem);
+    overflow: hidden;
+}
 </style>
 <script setup>
 import { Smoothie } from "vue-smoothie";
-import { DEBUG } from "@/utils/debug";
+
+const DEBUG = window.location.href.startsWith("http://localhost:5173");
 
 import Filter from "@/libs/ansii.js";
 import { ConsoleIcon, DownIcon, UpIcon } from "@/components/icons";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import WebsocketHeartbeatJs from "websocket-heartbeat-js";
-import { onMounted, onUnmounted, ref, nextTick, computed, watch } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { sortAlphaNum } from "@/stores/utils";
-
-import { useUIStore } from "@/stores/ui";
-
-const ui = useUIStore();
 
 const $autoscroll = ref(null);
 const logLines = ref([]);
 const ansii = new Filter();
 const autoscrollToggled = ref(true);
 const taskLogMapping = ref({});
-const currentTaskLog = ref("");
-const filteredLogs = ref(true);
-const userScrolledUp = ref(false);
-const lastScrollTime = ref(0);
-const scrollInterval = ref(null);
-const isScrolling = ref(false);
+const currentTaskLog = ref(false);
+const filteredLogs = ref(false);
 
 const path = "/api/updates?type=console";
 const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
-// Handle manual scroll detection
-const handleScroll = (event) => {
-    if (!autoscrollToggled.value) return;
 
-    const element = event.target;
-    if (!element) return;
-
-    // Check if user is near bottom (within 50px)
-    const threshold = 50;
-    const isNearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - threshold;
-
-    // Only update if there's an actual change
-    if (userScrolledUp.value === isNearBottom) {
-        userScrolledUp.value = !isNearBottom;
-    }
-};
-
-// Bulletproof scroll function with multiple fallbacks
-const performScroll = (direction, smooth = true) => {
+const scrollTo = (dir) => {
     try {
-        if (!$autoscroll.value?.el) {
-            if (DEBUG) console.log("Autoscroll element not ready");
-            return false;
-        }
-
-        const element = $autoscroll.value.el;
-
-        if (direction === "up") {
-            if (smooth && element.scrollTo) {
-                element.scrollTo({ top: 0, behavior: "smooth" });
-            } else {
-                element.scrollTop = 0;
-            }
-        } else {
-            const targetTop = element.scrollHeight - element.clientHeight;
-            if (smooth && element.scrollTo) {
-                element.scrollTo({ top: targetTop, behavior: "smooth" });
-            } else {
-                element.scrollTop = targetTop;
-            }
-            userScrolledUp.value = false;
-        }
-
-        return true;
+        if (dir === "up") $autoscroll.value.el.scrollTop = 0;
+        else $autoscroll.value.el.scrollTop = parseInt($autoscroll.value.el.children[1].style.height);
     } catch (e) {
-        if (DEBUG) console.log("Error scrolling", e);
-        return false;
-    }
-};
-
-// Continuous scrolling for held buttons
-const startScrolling = (direction) => {
-    if (isScrolling.value) return;
-
-    isScrolling.value = true;
-
-    // Immediate scroll
-    performScroll(direction, true);
-
-    // Continue scrolling while held (for long content)
-    scrollInterval.value = setInterval(() => {
-        if (!isScrolling.value) return;
-
-        const element = $autoscroll.value?.el;
-        if (!element) return;
-
-        const scrollAmount = 100;
-        if (direction === "up") {
-            element.scrollTop = Math.max(0, element.scrollTop - scrollAmount);
-        } else {
-            element.scrollTop = Math.min(element.scrollHeight - element.clientHeight, element.scrollTop + scrollAmount);
-        }
-    }, 50);
-};
-
-const stopScrolling = () => {
-    isScrolling.value = false;
-    if (scrollInterval.value) {
-        clearInterval(scrollInterval.value);
-        scrollInterval.value = null;
-    }
-};
-
-// Legacy function for compatibility
-const scrollTo = (dir) => {
-    performScroll(dir, true);
-};
-
-// Simple autoscroll to bottom
-const autoScrollToBottom = () => {
-    if (!$autoscroll.value?.el || !autoscrollToggled.value) return;
-
-    // Only scroll if user hasn't manually scrolled up
-    if (!userScrolledUp.value) {
-        const element = $autoscroll.value.el;
-
-        // Calculate the target scroll position to show the last log
-        const targetScrollTop = element.scrollHeight - element.clientHeight;
-
-        // Use smooth scrolling to ensure new logs are visible
-        if (element.scrollTo && Math.abs(element.scrollTop - targetScrollTop) > 5) {
-            element.scrollTo({
-                top: targetScrollTop,
-                behavior: "smooth"
-            });
-        } else {
-            // For small differences or fallback, use instant scroll
-            element.scrollTop = targetScrollTop;
-        }
-    }
-};
-
-// Handle autoscroll toggle
-const onAutoscrollToggle = () => {
-    if (autoscrollToggled.value) {
-        userScrolledUp.value = false;
-        nextTick().then(autoScrollToBottom);
+        console.log("Error scrolling", e);
     }
 };
 
 const addAnsiToOutput = (a) => {
-    const html = ansii.toHtml(a?.log || a);
+    const html = ansii.toHtml(a.log);
     logLines.value.push(html);
-
-    // Auto scroll after adding new content with proper timing
-    nextTick().then(() => {
-        // Use a small delay to ensure DOM is fully updated
-        setTimeout(autoScrollToBottom, 10);
-    });
+    if (autoscrollToggled.value)
+        nextTick().then(() => {
+            scrollTo("down");
+        });
 };
 
 const handleWebsocketMessages = (msg) => {
@@ -404,7 +172,7 @@ const handleWebsocketMessages = (msg) => {
 const makeTaskLogMapping = (lines) => {
     lines.forEach((l) => {
         if (!l.metadata) {
-            if (DEBUG) console.log("Error getting metadata", l);
+            console.log("Error getting metadata", l);
             return;
         }
         const region = l.metadata.siteId?.split("_")?.[1];
@@ -416,45 +184,26 @@ const makeTaskLogMapping = (lines) => {
 
 window.startDebugConsoleMessages = () => {
     setInterval(() => {
-        var taskId = Math.round(Math.random() * 10);
-        const log = {
-            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${taskId}]\u001b[00m TEST TEST TEST TEST TEST TEST TEST`,
-            metadata: {
-                taskId: taskId,
-                siteId: "TM_US",
-                global: false
-            }
-        };
-        addAnsiToOutput(log);
-        makeTaskLogMapping([log]);
-    }, 100);
+        const line = `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${Math.round(
+            Math.random() * 10
+        )}]\u001b[00m AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Needs To Queue: false - Queue up:  false`;
+        addAnsiToOutput(line);
+        makeTaskLogMapping([line]);
+    }, 500);
 };
 
 if (DEBUG) window.startDebugConsoleMessages();
 
-// Watch for log filter changes and reset scroll state
-watch([currentTaskLog, filteredLogs], () => {
-    userScrolledUp.value = false;
-    nextTick().then(() => {
-        setTimeout(autoScrollToBottom, 10);
-    });
-});
-
 // Listen for messages
 onMounted(() => {
     const socket = new WebsocketHeartbeatJs({ url, pingMsg: "ping" });
 
     socket.onmessage = (event) => {
         const msg = JSON.parse(event.data);
-        if (DEBUG) console.log("Received message", msg);
+        console.log("Received message", msg);
         msg.forEach((e) => {
             handleWebsocketMessages(e);
         });
     };
 });
-
-// Cleanup on unmount
-onUnmounted(() => {
-    stopScrolling();
-});
 </script>