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/4] 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/4] 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/4] 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);
   }, []);

From 3db43d01cd4103bd530fef5c7917172981da3388 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Mon, 6 Apr 2026 23:07:55 +0300
Subject: [PATCH 4/4] fix(web): stabilize work log expansion scroll

---
 apps/web/src/components/ChatView.tsx          |  1 +
 .../components/chat/MessagesTimeline.test.tsx | 42 +++++++++++++++++++
 .../src/components/chat/MessagesTimeline.tsx  |  5 ++-
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index eb43ec2112..ebdc54076b 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -3978,6 +3978,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
             <div
               ref={setMessagesScrollContainerRef}
               className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-y-contain px-3 py-3 sm:px-5 sm:py-4"
+              style={{ overflowAnchor: "none" }}
               onScroll={onMessagesScroll}
               onClickCapture={onMessagesClickCapture}
               onWheel={onMessagesWheel}
diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx
index 692438c74a..e5baeabf0d 100644
--- a/apps/web/src/components/chat/MessagesTimeline.test.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx
@@ -140,4 +140,46 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("Context compacted");
     expect(markup).toContain("Work log");
   });
+
+  it("opts work log expansion controls out of scroll anchoring", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        hasMessages
+        isWorking={false}
+        activeTurnInProgress={false}
+        activeTurnStartedAt={null}
+        scrollContainer={null}
+        timelineEntries={Array.from({ length: 7 }, (_, index) => ({
+          id: `entry-${index + 1}`,
+          kind: "work" as const,
+          createdAt: "2026-03-17T19:12:28.000Z",
+          entry: {
+            id: `work-${index + 1}`,
+            createdAt: "2026-03-17T19:12:28.000Z",
+            label: `Tool call ${index + 1}`,
+            tone: "tool" as const,
+          },
+        }))}
+        completionDividerBeforeEntryId={null}
+        completionSummary={null}
+        turnDiffSummaryByAssistantMessageId={new Map()}
+        nowIso="2026-03-17T19:12:30.000Z"
+        expandedWorkGroups={{}}
+        onToggleWorkGroup={() => {}}
+        onOpenTurnDiff={() => {}}
+        revertTurnCountByUserMessageId={new Map()}
+        onRevertUserMessage={() => {}}
+        isRevertingCheckpoint={false}
+        onImageExpand={() => {}}
+        markdownCwd={undefined}
+        resolvedTheme="light"
+        timestampFormat="locale"
+        workspaceRoot={undefined}
+      />,
+    );
+
+    expect(markup).toContain("Show 1 more");
+    expect(markup).toContain("data-scroll-anchor-ignore");
+  });
 });
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index f52044f483..2c2aab242e 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -340,7 +340,10 @@ export const MessagesTimeline = memo(function MessagesTimeline({
                     {groupLabel} ({groupedEntries.length})
                   </p>
                   {hasOverflow && (
-                    <CollapsibleTrigger className="text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75">
+                    <CollapsibleTrigger
+                      className="text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75"
+                      data-scroll-anchor-ignore
+                    >
                       {isExpanded ? "Show less" : `Show ${overflowEntries.length} more`}
                     </CollapsibleTrigger>
                   )}