diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index fbd332354a..71559dedcc 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -3510,12 +3510,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);
   }, []);
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 9e0b895912..5b132b83b8 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";
@@ -321,39 +322,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="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>
           );
         })()}