From c6e6b1c1c68add9c8cf92349a4f5cbefda4d76ed Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Mon, 30 Mar 2026 11:52:59 +0300
Subject: [PATCH 1/3] fix(web): add cursor-pointer to work log "Show more"
 button

The raw <button> element was missing cursor-pointer, causing the
default arrow cursor on hover instead of the expected hand pointer.
---
 apps/web/src/components/chat/MessagesTimeline.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index f3e462f7fe..cc1e089e66 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -335,7 +335,7 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                   {hasOverflow && (
                     <button
                       type="button"
-                      className="text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75"
+                      className="cursor-pointer text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75"
                       onClick={() => onToggleWorkGroup(groupId)}
                     >
                       {isExpanded ? "Show less" : `Show ${hiddenCount} more`}

From 644b80846eaeaefdab546465926c0d6661656930 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Mon, 30 Mar 2026 11:54:48 +0300
Subject: [PATCH 2/3] feat(web): add smooth expand/collapse transition to work
 log groups

Use the existing Base UI Collapsible component to animate the overflow
entries in tool call / work log groups with a 200ms height transition
instead of an instant show/hide.
---
 .../src/components/chat/MessagesTimeline.tsx  | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index cc1e089e66..35ed87f737 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -34,6 +34,7 @@ import {
   ZapIcon,
 } from "lucide-react";
 import { Button } from "../ui/button";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
 import { clamp } from "effect/Number";
 import { estimateTimelineMessageHeight } from "../timelineHeight";
 import { buildExpandedImagePreview, ExpandedImagePreview } from "./ExpandedImagePreview";
@@ -316,39 +317,52 @@ export const MessagesTimeline = memo(function MessagesTimeline({
           const groupedEntries = row.groupedEntries;
           const isExpanded = expandedWorkGroups[groupId] ?? false;
           const hasOverflow = groupedEntries.length > MAX_VISIBLE_WORK_LOG_ENTRIES;
-          const visibleEntries =
-            hasOverflow && !isExpanded
-              ? groupedEntries.slice(-MAX_VISIBLE_WORK_LOG_ENTRIES)
-              : groupedEntries;
-          const hiddenCount = groupedEntries.length - visibleEntries.length;
+          const overflowEntries = hasOverflow
+            ? groupedEntries.slice(0, -MAX_VISIBLE_WORK_LOG_ENTRIES)
+            : [];
+          const alwaysVisibleEntries = hasOverflow
+            ? groupedEntries.slice(-MAX_VISIBLE_WORK_LOG_ENTRIES)
+            : groupedEntries;
           const onlyToolEntries = groupedEntries.every((entry) => entry.tone === "tool");
           const showHeader = hasOverflow || !onlyToolEntries;
           const groupLabel = onlyToolEntries ? "Tool calls" : "Work log";
 
           return (
-            <div className="rounded-xl border border-border/45 bg-card/25 px-2 py-1.5">
+            <Collapsible
+              open={isExpanded}
+              onOpenChange={() => onToggleWorkGroup(groupId)}
+              className="rounded-xl border border-border/45 bg-card/25 px-2 py-1.5"
+            >
               {showHeader && (
                 <div className="mb-1.5 flex items-center justify-between gap-2 px-0.5">
                   <p className="text-[9px] uppercase tracking-[0.16em] text-muted-foreground/55">
                     {groupLabel} ({groupedEntries.length})
                   </p>
                   {hasOverflow && (
-                    <button
-                      type="button"
-                      className="cursor-pointer text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75"
-                      onClick={() => onToggleWorkGroup(groupId)}
-                    >
-                      {isExpanded ? "Show less" : `Show ${hiddenCount} more`}
-                    </button>
+                    <CollapsibleTrigger className="text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75">
+                      {isExpanded ? "Show less" : `Show ${overflowEntries.length} more`}
+                    </CollapsibleTrigger>
                   )}
                 </div>
               )}
               <div className="space-y-0.5">
-                {visibleEntries.map((workEntry) => (
+                {hasOverflow && (
+                  <CollapsiblePanel keepMounted>
+                    <div className="space-y-0.5">
+                      {overflowEntries.map((workEntry) => (
+                        <SimpleWorkEntryRow
+                          key={`work-row:${workEntry.id}`}
+                          workEntry={workEntry}
+                        />
+                      ))}
+                    </div>
+                  </CollapsiblePanel>
+                )}
+                {alwaysVisibleEntries.map((workEntry) => (
                   <SimpleWorkEntryRow key={`work-row:${workEntry.id}`} workEntry={workEntry} />
                 ))}
               </div>
-            </div>
+            </Collapsible>
           );
         })()}
 

From 8caccfb1423f27d21a2cd18a6752853377623f49 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Mon, 30 Mar 2026 12:10:03 +0300
Subject: [PATCH 3/3] fix(web): prevent auto-scroll when toggling work log
 expansion

Expanding a work log group during a running session would trigger
scheduleStickToBottom via the timelineEntries effect, yanking the
viewport to the bottom. Disable auto-scroll on toggle so the user
stays where they clicked; the scroll-to-bottom button is shown if
they want to jump back.
---
 apps/web/src/components/ChatView.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index eaead424fb..ce9a321608 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -3434,12 +3434,18 @@ export default function ChatView({ threadId }: ChatViewProps) {
     }
     return false;
   };
-  const onToggleWorkGroup = useCallback((groupId: string) => {
-    setExpandedWorkGroups((existing) => ({
-      ...existing,
-      [groupId]: !existing[groupId],
-    }));
-  }, []);
+  const onToggleWorkGroup = useCallback(
+    (groupId: string) => {
+      cancelPendingStickToBottom();
+      shouldAutoScrollRef.current = false;
+      setShowScrollToBottom(true);
+      setExpandedWorkGroups((existing) => ({
+        ...existing,
+        [groupId]: !existing[groupId],
+      }));
+    },
+    [cancelPendingStickToBottom],
+  );
   const onExpandTimelineImage = useCallback((preview: ExpandedImagePreview) => {
     setExpandedImage(preview);
   }, []);