fix log scrolling

Author: Jicheng Lu

src/lib/styles/pages/_chat.scss

@@ -2959,13 +2959,6 @@
     flex-direction: column;
     gap: 20px;
     padding: 0 20px;
-    overflow-y: scroll;
-    scrollbar-width: none;
-
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
 }
 
 
@@ -2984,6 +2977,7 @@
     background: linear-gradient(180deg, rgb(15 21 36) 0%, rgb(9 13 24) 100%);
     border-radius: 12px;
     border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent);
+    margin: 10px 0 14px 0;
     display: flex;
     flex-direction: column;
     position: relative;

src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte

@@ -7,6 +7,16 @@
      * }}
      */
 	let { agent } = $props();
+
+	/** @param {number} count @param {string} singular @param {string} plural */
+	const pluralize = (count, singular, plural) => `${count || 0} ${count > 1 ? plural : singular}`;
+
+	let stats = $derived([
+		agent?.profiles && pluralize(agent.profiles.length, 'profile', 'profiles'),
+		agent?.functions && pluralize(agent.functions.length, 'function', 'functions'),
+		agent?.utilities && pluralize(agent.utilities.length, 'utility', 'utilities'),
+		agent?.mcp_tools && pluralize(agent.mcp_tools.length, 'MCP', 'MCPs')
+	].filter(Boolean).join(', '));
 </script>
 
 <div class="cai-wrapper">
@@ -34,18 +44,7 @@
     </div>
     <div class="cai-row">
         <div class="cai-meta">
-            {#if !!agent?.profiles}
-            <span>{agent?.profiles?.length || 0} {agent?.profiles?.length > 1 ? 'profiles' : 'profile'}{', '}</span>
-            {/if}
-            {#if !!agent?.functions}
-            <span>{agent?.functions?.length || 0} {agent?.functions?.length > 1 ? 'functions' : 'function'}{', '}</span>
-            {/if}
-            {#if !!agent?.utilities}
-            <span>{agent?.utilities?.length || 0} {agent?.utilities?.length > 1 ? 'utilities' : 'utility'}{', '}</span>
-            {/if}
-            {#if !!agent?.mcp_tools}
-            <span>{agent?.mcp_tools?.length || 0} {agent?.mcp_tools?.length > 1 ? 'MCPs' : 'MCP'}</span>
-            {/if}
+            <span>{stats}</span>
         </div>
     </div>
 </div>

src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte

@@ -52,25 +52,33 @@
         agentQueueLogs;
         latestStateLog;
 
+        initScrollbars();
         scrollToBottom();
     });
 
     onDestroy(() => {
         cleanLogs();
     });
 
-    let _scrollScheduled = false;
-    function scrollToBottom() {
+    function initScrollbars() {
         const scrollbarElements = [
+            document.querySelector('.instant-log-scrollbar'),
             document.querySelector('.latest-state-log-scrollbar'),
             document.querySelector('.msg-state-log-scrollbar'),
             document.querySelector('.agent-queue-log-scrollbar')
         ].filter(Boolean);
         scrollbarElements.forEach(elem => {
+            // @ts-ignore
+            if (elem.hasAttribute('data-overlayscrollbars')) {
+                return;
+            }
             // @ts-ignore
             scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
         });
+    }
 
+    let _scrollScheduled = false;
+    function scrollToBottom() {
         if (_scrollScheduled) {
             return;
         }
@@ -104,12 +112,6 @@
     }
 </script>
 
-<!--
-  NOTE: .latest-state-log-scrollbar, .msg-state-log-scrollbar and
-  .agent-queue-log-scrollbar are DOM hooks queried by scrollToBottom().
-  Keep those class names on the markup; styling is done via the
-  scoped .il-* siblings.
--->
 <div class="il-root font-code">
     <div class="il-card">
         <div class="il-close-bar">
@@ -124,7 +126,7 @@
                 </button>
             </div>
         </div>
-        <div class="il-body">
+        <div class="il-body instant-log-scrollbar">
             {#if !!agent}
             <div
                 class="il-section il-section-agent"

src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte

@@ -186,12 +186,7 @@
     }
 </script>
 
-<!--
-  NOTE: .content-log-scrollbar and .conv-state-log-scrollbar are DOM hooks
-  queried by initScrollbars() (this file) and autoScrollToTargetLog()
-  (chat-box.svelte). Keep those class names exactly. Scoped styling is
-  applied through .pl-* siblings.
--->
+
 <div class="pl-root font-code">
     <div class="pl-card">
         <div class="pl-header-bar">