fix(web): work log Show more — cursor, transition & scroll

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -186,4 +186,27 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("t3code/apps/web/src/session-logic.ts");
     expect(markup).not.toContain("C:/Users/mike/dev-stuff/t3code/apps/web/src/session-logic.ts");
   });
+
+  it("opts work log expansion controls out of scroll anchoring", async () => {
+    const { MessagesTimeline } = await import("./MessagesTimeline");
+    const markup = renderToStaticMarkup(
+      <MessagesTimeline
+        {...buildProps()}
+        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,
+          },
+        }))}
+      />,
+    );
+
+    expect(markup).toContain("Show 1 more");
+    expect(markup).toContain("data-scroll-anchor-ignore");
+  });
 });

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -30,6 +30,7 @@ import {
   ZapIcon,
 } from "lucide-react";
 import { Button } from "../ui/button";
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
 import { buildExpandedImagePreview, ExpandedImagePreview } from "./ExpandedImagePreview";
 import { ProposedPlanCard } from "./ProposedPlanCard";
 import { ChangedFilesTree } from "./ChangedFilesTree";
@@ -532,43 +533,58 @@ const WorkGroupSection = memo(function WorkGroupSection({
   const { workspaceRoot } = use(TimelineRowCtx);
   const [isExpanded, setIsExpanded] = useState(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={setIsExpanded}
+      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"
+            <CollapsibleTrigger
               className="text-[9px] uppercase tracking-[0.12em] text-muted-foreground/55 transition-colors duration-150 hover:text-foreground/75"
-              onClick={() => setIsExpanded((v) => !v)}
+              data-scroll-anchor-ignore
             >
-              {isExpanded ? "Show less" : `Show ${hiddenCount} more`}
-            </button>
+              {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}
+                  workspaceRoot={workspaceRoot}
+                />
+              ))}
+            </div>
+          </CollapsiblePanel>
+        )}
+        {alwaysVisibleEntries.map((workEntry) => (
           <SimpleWorkEntryRow
             key={`work-row:${workEntry.id}`}
             workEntry={workEntry}
             workspaceRoot={workspaceRoot}
           />
         ))}
       </div>
-    </div>
+    </Collapsible>
   );
 });