Session Info: rows fade at the scroll edges instead of a hard cut

webviews/src/agent-session/acpmux/session-info/SessionInfo.tsx

@@ -61,6 +61,7 @@ import { tooltipProps } from "../shortcuts";
 import { subagentsIn } from "../subagents/subagentRows";
 import { chatGallery } from "../summary/chatGallery";
 import { GalleryDialog } from "../summary/GalleryDialog";
+import { useScrollEdges } from "../summary/scrollEdges";
 import { sessionSummary, type SessionSummary, type SummaryBackgroundTask } from "../summary/sessionSummary";
 import { waitingSubagents } from "../summary/SubagentStatusList";
 import type { Artifact } from "../conversation/artifactPreview";
@@ -1258,6 +1259,16 @@ export function SessionInfo({
     [showsCalls, rows],
   );
   const body = useRef<HTMLDivElement>(null);
+  // Rows scrolled past the body's top or bottom fade at that edge (scrollEdges.ts, sessionInfo.css)
+  // instead of being cut off. It stops following when the body unmounts.
+  const edges = useScrollEdges();
+  const bodyRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      body.current = node;
+      edges(node);
+    },
+    [edges],
+  );
   // Once: then it is done, so the palette or another pane opening Session Info again does not jump
   // back to this section.
   // The section lights for a moment (sessionInfo.css `[data-revealed]`), so a reveal of a section already
@@ -1514,7 +1525,7 @@ export function SessionInfo({
     </SessionInfoSection>
   );
   return (
-    <div ref={body} className="acpmux-session-info__body" data-layout={layout}>
+    <div ref={bodyRef} className="acpmux-session-info__body" data-layout={layout}>
       {banner}
       {/* Where it runs, what it made, what it runs: one order the person drags (SessionInfoGroup.tsx). */}
       <SessionInfoSectionList

webviews/src/agent-session/acpmux/session-info/sessionInfo.css

@@ -209,6 +209,39 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
+/* Rows scrolled past the body's top or bottom fade into the glass at that edge (scrollEdges.ts marks
+   which edges have more), as the Summary card and the menus do, a little shorter so it stays quiet:
+   never a hard cut through a row. Leo, 2026-10-28: "We should have a bit of that, like blur fading
+   thing for this area as well. Just a little bit." The mask is on or off per edge, never animated. */
+.acpmux-session-info__body:is([data-fade-top], [data-fade-bottom]) {
+  --acpmux-session-info-fade-top: 0px;
+  --acpmux-session-info-fade-bottom: 0px;
+  --acpmux-session-info-fade: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--acpmux-session-info-fade-top),
+    #000 calc(100% - var(--acpmux-session-info-fade-bottom)),
+    transparent
+  );
+  -webkit-mask-image: var(--acpmux-session-info-fade);
+  mask-image: var(--acpmux-session-info-fade);
+}
+.acpmux-session-info__body[data-fade-top] {
+  --acpmux-session-info-fade-top: 12px;
+}
+.acpmux-session-info__body[data-fade-bottom] {
+  --acpmux-session-info-fade-bottom: 16px;
+}
+@media (prefers-reduced-transparency: reduce) {
+  .acpmux-session-info__body:is([data-fade-top], [data-fade-bottom]) {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+}
+:root[data-reduce-transparency] .acpmux-session-info__body:is([data-fade-top], [data-fade-bottom]) {
+  -webkit-mask-image: none;
+  mask-image: none;
+}
 /* A section is no box of its own: its rows sit on the glass, never a fill, solid or tinted. */
 .acpmux-session-info-section {
   flex: none;