@necrolab/dashboard 0.5.15 → 0.5.17

package/src/views/Console.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="console-page">
+    <div class="mb-8 pb-16 md:mb-0 md:pb-0 mobile-portrait:mb-12 mobile-portrait:pb-24">
         <div class="page-header" style="padding-bottom: 0.75rem;">
             <div class="page-header-card">
                 <ConsoleIcon />
@@ -8,104 +8,29 @@
         </div>
 
         <div>
-            <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-                <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
-                    <div class="w-full md:w-64">
-                        <Dropdown
-                            class="console-dropdown input-default w-full 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 flex-1 items-center gap-2">
-                        <div class="input-default flex flex-1 items-center md:max-w-64">
-                            <input
-                                v-model="searchQuery"
-                                type="text"
-                                placeholder="Search logs..."
-                                class="h-full w-full bg-transparent text-sm text-white outline-none" />
-                            <span v-if="searchQuery" class="ml-2 text-xs text-light-500">{{ filteredCount }}</span>
-                        </div>
-                        <!-- Scroll buttons on mobile - inline with search -->
-                        <button
-                            class="console-scroll-btn flex h-10 w-10 items-center justify-center rounded border-2 bg-dark-400 shadow-sm md:hidden"
-                            @mousedown="startScrolling('up')"
-                            @mouseup="stopScrolling"
-                            @mouseleave="stopScrolling"
-                            @touchstart="startScrolling('up')"
-                            @touchend="stopScrolling">
-                            <UpIcon class="pointer-events-none h-5 w-5" />
-                        </button>
-                        <button
-                            class="console-scroll-btn flex h-10 w-10 items-center justify-center rounded border-2 bg-dark-400 shadow-sm md:hidden"
-                            @mousedown="startScrolling('down')"
-                            @mouseup="stopScrolling"
-                            @mouseleave="stopScrolling"
-                            @touchstart="startScrolling('down')"
-                            @touchend="stopScrolling">
-                            <DownIcon class="pointer-events-none h-5 w-5" />
-                        </button>
-                    </div>
-                </div>
-                <div class="flex hidden items-center gap-3 md:flex">
-                    <!-- Hide Monitors and Auto buttons only on desktop -->
-                    <div class="hidden items-center gap-3 md:flex">
-                        <button
-                            class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
-                            <h3 class="text-sm text-white">Hide Monitors</h3>
-                            <Switch class="scale-75" v-model="filteredLogs" />
-                        </button>
-                        <button
-                            class="relative flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
-                            <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>
-                    <!-- Scroll buttons - desktop only (mobile has them inline with search) -->
-                    <button
-                        class="hidden h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
-                        @mousedown="startScrolling('up')"
-                        @mouseup="stopScrolling"
-                        @mouseleave="stopScrolling"
-                        @touchstart="startScrolling('up')"
-                        @touchend="stopScrolling">
-                        <UpIcon class="pointer-events-none h-5 w-5" />
-                    </button>
-                    <button
-                        class="hidden h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
-                        @mousedown="startScrolling('down')"
-                        @mouseup="stopScrolling"
-                        @mouseleave="stopScrolling"
-                        @touchstart="startScrolling('down')"
-                        @touchend="stopScrolling">
-                        <DownIcon class="pointer-events-none h-5 w-5" />
-                    </button>
-                </div>
-            </div>
+            <ConsoleToolbar
+                v-model:currentTaskLog="currentTaskLog"
+                v-model:searchQuery="searchQuery"
+                v-model:filteredLogs="filteredLogs"
+                v-model:autoscrollToggled="autoscrollToggled"
+                :taskLogMapping="taskLogMapping"
+                :userScrolledUp="userScrolledUp"
+                :filteredCount="filteredCount"
+                @scroll="handleScrollDirection"
+                @scroll-stop="stopScrolling"
+                @autoscroll-toggle="onAutoscrollToggle" />
 
             <Smoothie
                 :weight="0.2"
-                class="console scrollable smooth-scroll overflow-x-auto overflow-y-auto font-mono text-white"
-                style="min-height: 12rem !important"
+                class="console-main"
                 ref="$autoscroll"
                 @wheel.stop
                 @touchmove.stop
                 @scroll="handleScroll">
                 <div
                     v-if="displayedLogs.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" />
+                    class="flex h-full min-h-56 flex-col items-center justify-center text-center font-sans">
+                    <ConsoleIcon class="empty-state-icon" />
                     <p class="text-sm text-light-400">
                         {{ searchQuery ? "No logs match your search" : "No logs yet" }}
                     </p>
@@ -115,12 +40,12 @@
                 </div>
                 <pre
                     v-else
-                    class="hidden-scrollbars log-entry"
+                    class="hidden-scrollbars log-entry opacity-0 transition-standard hover:bg-white/2"
                     v-for="(line, index) in displayedLogs"
                     v-bind:key="`log-${index}`"
-                    :style="{ '--index': index }"><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
+                    :style="{ '--index': index }"><code class="md:text-sm lg:text-base mobile-portrait:text-xs+ mobile-portrait:leading-tight" v-html="line"></code></pre>
             </Smoothie>
-            <div class="console-switches mb-6 mt-4 flex justify-between md:hidden">
+            <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
                 <button
                     class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
                     <h3 class="text-sm text-white">Hide Monitors</h3>
@@ -140,156 +65,57 @@
     </div>
 </template>
 <style lang="scss" scoped>
-.console-page {
-    @apply pb-16 mb-8 md:pb-0 md:mb-0;
-
-    @media (max-width: 480px) and (orientation: portrait) {
-        @apply pb-24 mb-12;
-    }
-}
-
-.console-switches {
-    @media (max-width: 480px) and (orientation: portrait) {
-        @apply mt-6 mb-16;
-    }
-}
-
+/* Webkit scrollbar customization (cannot be done with Tailwind utilities) */
 .console {
-    @apply relative rounded border-2 border-dark-550 bg-dark-400 p-2 lg:p-5;
-    @apply touch-pan-x touch-pan-y;
-    height: calc(100vh - 18rem);
     scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
+    scrollbar-color: oklch(0.35 0 0) oklch(0.1822 0 0);
     -webkit-overflow-scrolling: touch;
 
-    // Use fixed height on mobile portrait to ensure switches are visible
-    @media (max-width: 768px) {
-        max-height: 60vh;
-        height: auto;
-    }
-
-    @media (max-width: 480px) and (orientation: portrait) {
-        max-height: 50vh;
-        height: auto;
-    }
-
-    @media (min-width: 769px) and (max-width: 1023px) {
-        height: calc(100vh - 16rem);
-    }
-
-    @media (min-width: 1024px) {
-        height: calc(100vh - 14rem);
-    }
-
     &::-webkit-scrollbar {
-        width: 8px;
+        @apply w-2;
     }
 
     &::-webkit-scrollbar-track {
-        background: oklch(0.19 0 0);
-        border-radius: 4px;
+        @apply rounded bg-dark-300;
     }
 
     &::-webkit-scrollbar-thumb {
+        @apply rounded transition-colors duration-200;
         background: oklch(0.35 0 0);
-        border-radius: 4px;
-        transition: background-color 0.2s ease;
     }
 
     &::-webkit-scrollbar-thumb:hover {
         background: oklch(0.45 0 0);
     }
 
-    // Smooth scrolling behavior with momentum
     &.smooth-scroll {
-        scroll-behavior: smooth;
+        @apply scroll-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;
-    }
-
-    textarea {
-        background: transparent;
-        resize: none;
-        @apply w-full text-white focus:outline-none;
-    }
 }
 
-.console-scroll-btn {
-    border-color: oklch(0.2809 0 0);
-    transition: all 0.15s ease;
+/* Animation for log entries (keyframes cannot be done with Tailwind) */
+.log-entry {
+    transform: translateY(4px);
+    animation: slideInLog 0.2s ease-out forwards;
 
-    &:hover,
-    &:active {
-        border-color: oklch(0.72 0.15 145) !important;
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
+    &:hover {
+        transform: translateX(2px);
     }
 }
 
-/* Mobile portrait console optimizations */
-@screen mobile-portrait {
-    .console {
-        height: calc(100vh - 19.5rem);
-        @apply p-1 text-xs;
-        overflow: auto;
-
-        pre {
-            line-height: 1.2;
-        }
-
-        code {
-            font-size: 0.7rem !important;
-        }
-    }
+.log-entry:last-child {
+    animation-delay: 0.05s;
 }
 
-/* Mobile landscape console optimizations */
-@media (max-width: 1024px) and (orientation: landscape) {
-    .console {
-        height: calc(100vh - 10.5rem);
+@keyframes slideInLog {
+    to {
+        @apply opacity-100;
+        transform: translateY(0);
     }
 }
-
-/* Console-specific styles handled by utilities */
 </style>
 <script setup>
 import { Smoothie } from "vue-smoothie";
@@ -301,11 +127,7 @@ 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 Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import { sortAlphaNum } from "@/stores/utils";
-
-import { useUIStore } from "@/stores/ui";
-
-const ui = useUIStore();
+import ConsoleToolbar from "@/components/Console/ConsoleToolbar.vue";
 
 const $autoscroll = ref(null);
 const logLines = ref([]);
@@ -315,12 +137,13 @@ 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 searchQuery = ref("");
 
-// Computed filtered logs based on search query
+// Optimized: Cache stripped versions to avoid regex on every filter
+const logPlainTextCache = new Map();
+
 const displayedLogs = computed(() => {
     let logs =
         currentTaskLog.value && currentTaskLog.value !== ""
@@ -330,8 +153,12 @@ const displayedLogs = computed(() => {
     if (searchQuery.value.trim()) {
         const query = searchQuery.value.toLowerCase();
         logs = logs.filter((log) => {
-            // Remove HTML tags for search
-            const plainText = log.replace(/<[^>]*>/g, "").toLowerCase();
+            // Use cached plain text or compute and cache it
+            let plainText = logPlainTextCache.get(log);
+            if (plainText === undefined) {
+                plainText = log.replace(/<[^>]*>/g, "").toLowerCase();
+                logPlainTextCache.set(log, plainText);
+            }
             return plainText.includes(query);
         });
     }
@@ -346,28 +173,27 @@ const filteredCount = computed(() => {
 
 const path = "/api/updates?type=console";
 const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
-// Handle manual scroll detection
+
+const SCROLL_THRESHOLD = 50;
+const SCROLL_AMOUNT = 100;
+
 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;
+    const isNearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - SCROLL_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) => {
     try {
         if (!$autoscroll.value?.el) {
-            if (DEBUG) console.log("Autoscroll element not ready");
+            if (DEBUG) return false;
             return false;
         }
 
@@ -391,7 +217,7 @@ const performScroll = (direction, smooth = true) => {
 
         return true;
     } catch (e) {
-        if (DEBUG) console.log("Error scrolling", e);
+        if (DEBUG) return false;
         return false;
     }
 };
@@ -401,64 +227,54 @@ 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(() => {
+    // Optimized: Use requestAnimationFrame instead of setInterval for smoother scrolling
+    const continuousScroll = () => {
         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);
+            element.scrollTop = Math.max(0, element.scrollTop - SCROLL_AMOUNT);
         } else {
-            element.scrollTop = Math.min(element.scrollHeight - element.clientHeight, element.scrollTop + scrollAmount);
+            element.scrollTop = Math.min(element.scrollHeight - element.clientHeight, element.scrollTop + SCROLL_AMOUNT);
         }
-    }, 50);
+
+        scrollInterval.value = requestAnimationFrame(continuousScroll);
+    };
+
+    scrollInterval.value = requestAnimationFrame(continuousScroll);
 };
 
 const stopScrolling = () => {
     isScrolling.value = false;
     if (scrollInterval.value) {
-        clearInterval(scrollInterval.value);
+        cancelAnimationFrame(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;
@@ -470,6 +286,10 @@ const addAnsiToOutput = (a) => {
     const html = ansii.toHtml(a?.log || a);
     logLines.value.push(html);
 
+    // Optimized: Pre-cache the plain text version when adding logs
+    const plainText = html.replace(/<[^>]*>/g, "").toLowerCase();
+    logPlainTextCache.set(html, plainText);
+
     // Auto scroll after adding new content with proper timing
     nextTick().then(() => {
         // Use a small delay to ensure DOM is fully updated
@@ -497,13 +317,17 @@ const handleWebsocketMessages = (msg) => {
 const makeTaskLogMapping = (lines) => {
     lines.forEach((l) => {
         if (!l.metadata) {
-            if (DEBUG) console.log("Error getting metadata", l);
             return;
         }
         const region = l.metadata.siteId?.split("_")?.[1];
         const n = l.metadata.global ? "Global" : `${region}-${l.metadata.taskId}`;
         if (!taskLogMapping.value[n]) taskLogMapping.value[n] = [];
-        taskLogMapping.value[n].push(ansii.toHtml(l.log));
+        const html = ansii.toHtml(l.log);
+        taskLogMapping.value[n].push(html);
+
+        // Optimized: Pre-cache plain text for task log mapping too
+        const plainText = html.replace(/<[^>]*>/g, "").toLowerCase();
+        logPlainTextCache.set(html, plainText);
     });
 };
 
@@ -525,7 +349,6 @@ window.startDebugConsoleMessages = () => {
 
 if (DEBUG) window.startDebugConsoleMessages();
 
-// Watch for log filter changes and reset scroll state
 watch([currentTaskLog, filteredLogs], () => {
     userScrolledUp.value = false;
     nextTick().then(() => {
@@ -533,20 +356,18 @@ watch([currentTaskLog, filteredLogs], () => {
     });
 });
 
-// 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);
+;
         msg.forEach((e) => {
             handleWebsocketMessages(e);
         });
     };
 });
 
-// Cleanup on unmount
 onUnmounted(() => {
     stopScrolling();
 });