fix(conversation): end unseen map jumps and keep the tick in view

A tick clicked mid-glide pinned its turn as current until the turn had
been seen. If ConversationContent went away first, or the turn was
removed, the pin was never released and a stale tick stayed current.
The pin now ends with the view it was gliding, and with its item.

Keeping the current tick in view ran only when the current turn
changed, so a rail that shrank could clip it. A ResizeObserver on the
rail now places it again at once.

The tick's data-current attribute is dropped: nothing read it, and
aria-current already carries the state.

Author: pratikbuilds

e2e/conversation-map.spec.ts

@@ -63,6 +63,22 @@ const wheel = async (page: Page, deltaY: number) => {
   await settled(page);
 };
 
+/** Whether the rail overflows, has scrolled, and shows the current tick. */
+const railState = (page: Page) =>
+  page.locator("[data-slot='conversation-map-rail']").evaluate((element) => {
+    const tick = element.querySelector("[aria-current='location']");
+    const view = element.getBoundingClientRect();
+    const box = tick?.getBoundingClientRect();
+    return {
+      overflows: element.scrollHeight > element.clientHeight,
+      scrolled: element.scrollTop > 0,
+      showsCurrent:
+        box !== undefined &&
+        box.top >= view.top - 1 &&
+        box.bottom <= view.bottom + 1,
+    };
+  });
+
 const open = async (page: Page) => {
   await page.goto("/conversation-map");
   await expect(page.getByTestId("t19a")).toBeAttached();
@@ -150,24 +166,10 @@ test.describe("conversation map", () => {
     await page.goto("/conversation-map-tall-page");
     await expect(page.getByTestId("t79a")).toBeAttached();
     await expect(current(page)).toHaveAccessibleName("Question 79");
-    const rail = page.locator("[data-slot='conversation-map-rail']");
     // The rail overflows, and has scrolled to bring the last tick into view.
     await expect
-      .poll(() =>
-        rail.evaluate((element) => {
-          const tick = element.querySelector("[aria-current='location']");
-          if (tick === null) return false;
-          const view = element.getBoundingClientRect();
-          const box = tick.getBoundingClientRect();
-          return (
-            element.scrollHeight > element.clientHeight &&
-            element.scrollTop > 0 &&
-            box.top >= view.top - 1 &&
-            box.bottom <= view.bottom + 1
-          );
-        }),
-      )
-      .toBe(true);
+      .poll(() => railState(page))
+      .toEqual({ overflows: true, scrolled: true, showsCurrent: true });
     // Give any late scroll a few frames to land.
     await page.evaluate(
       () =>
@@ -184,6 +186,28 @@ test.describe("conversation map", () => {
     expect(await page.evaluate(() => window.scrollY)).toBe(0);
   });
 
+  test("a rail that shrinks keeps the current tick in view", async ({
+    page,
+  }) => {
+    await open(page);
+    await expect(current(page)).toHaveAccessibleName("Question 19");
+    expect(await railState(page)).toEqual({
+      overflows: false,
+      scrolled: false,
+      showsCurrent: true,
+    });
+    // The host's layout shrinks the map's box below the rail's height.
+    await page
+      .getByRole("navigation", { name: "Conversation map" })
+      .evaluate((element) => {
+        element.style.height = "100px";
+      });
+    await expect(current(page)).toHaveAccessibleName("Question 19");
+    await expect
+      .poll(() => railState(page))
+      .toEqual({ overflows: true, scrolled: true, showsCurrent: true });
+  });
+
   test("moving along an overflowing rail keeps the preview open", async ({
     page,
   }) => {

src/hooks/use-reading-position.ts

@@ -146,6 +146,8 @@ export function useReadingPosition(
       observed.clear();
       idOf.clear();
       visible.clear();
+      // A jump does not outlive the view it was gliding, seen or not.
+      pinRef.current = null;
     };
 
     /** Follows the scroll container (`null` while `ConversationContent` is
@@ -179,6 +181,11 @@ export function useReadingPosition(
           observer.observe(element);
         }
       }
+      // A jumped-to turn removed before it was seen can never release.
+      const pin = pinRef.current;
+      if (pin !== null && items.get(pin.id) === undefined) {
+        pinRef.current = null;
+      }
     };
 
     measureRef.current = measure;

src/ui/conversation-map.test.tsx

@@ -581,6 +581,51 @@ describe("useReadingPosition", () => {
     expect(removed).toEqual(added);
   });
 
+  test("a jump not yet seen ends when ConversationContent goes away", async () => {
+    let setShow!: (show: boolean) => void;
+    function Host() {
+      const [show, set] = useState(true);
+      setShow = set;
+      return <Chat showContent={show} />;
+    }
+    const mounted = render(<Host />);
+    act(() => onlyObserver().report(["q4", "q4-reply"]));
+    await nextFrame();
+    act(() => tick(mounted.container, "First question").click());
+    await nextFrame();
+    expect(states(mounted.container)[0]).toBe("current");
+    // Gone before the glide brought q1 on screen, then back showing q4.
+    act(() => setShow(false));
+    await nextFrame();
+    act(() => setShow(true));
+    await nextFrame();
+    act(() => onlyObserver().report(["q4", "q4-reply"]));
+    await nextFrame();
+    expect(states(mounted.container)[0]).toBe("faint");
+    expect(states(mounted.container)[3]).toBe("current");
+    mounted.unmount();
+  });
+
+  test("a jump not yet seen ends when its turn is removed", async () => {
+    let setItems!: (items: readonly string[]) => void;
+    function Host() {
+      const [items, set] = useState<readonly string[]>(ITEMS);
+      setItems = set;
+      return <Chat items={items} />;
+    }
+    const mounted = render(<Host />);
+    act(() => onlyObserver().report(["q4", "q4-reply"]));
+    await nextFrame();
+    act(() => tick(mounted.container, "First question").click());
+    await nextFrame();
+    expect(states(mounted.container)[0]).toBe("current");
+    act(() => setItems(ITEMS.filter((id) => !id.startsWith("q1"))));
+    await nextFrame();
+    expect(states(mounted.container)[0]).toBe("faint");
+    expect(states(mounted.container)[3]).toBe("current");
+    mounted.unmount();
+  });
+
   test("a jumped turn stays current until seen, then until it leaves", async () => {
     const mounted = render(<Chat />);
     act(() => onlyObserver().report(["q4", "q4-reply"]));

src/ui/conversation-map.tsx

@@ -55,6 +55,18 @@ function nearestTop(rail: HTMLElement, tick: HTMLElement): number | null {
   return null;
 }
 
+/** Scrolls the rail alone to bring `tick` into view: scrollIntoView would
+ * also scroll every ancestor, pulling the page to a conversation below the
+ * fold. */
+function keepInView(
+  rail: HTMLElement,
+  tick: HTMLElement,
+  behavior: ScrollBehavior,
+): void {
+  const top = nearestTop(rail, tick);
+  if (top !== null) rail.scrollTo({ top, behavior });
+}
+
 /**
  * A rail of ticks, one per turn, for finding your way around a long
  * conversation. Ticks are faint, longer and darker for turns on screen, and
@@ -110,8 +122,6 @@ export function ConversationMap({
     card.style.top = `${top}px`;
   }, [preview]);
 
-  // Scrolls the rail alone: scrollIntoView would also scroll every ancestor,
-  // pulling the page to a conversation below the fold.
   useEffect(() => {
     const rail = railRef.current;
     const tick = currentRef.current;
@@ -120,17 +130,28 @@ export function ConversationMap({
       return;
     }
     if (tick === null) return;
-    const top = nearestTop(rail, tick);
     // The first placement is instant; later ones glide unless reduced.
-    if (top !== null) {
-      rail.scrollTo({
-        top,
-        behavior: placedRef.current && !reducedMotion ? "smooth" : "auto",
-      });
-    }
+    keepInView(
+      rail,
+      tick,
+      placedRef.current && !reducedMotion ? "smooth" : "auto",
+    );
     placedRef.current = true;
   }, [currentId, hidden, reducedMotion]);
 
+  // A rail that shrinks (the host's layout, the window) can clip the current
+  // tick: bring it back at once.
+  useEffect(() => {
+    const rail = railRef.current;
+    if (rail === null) return;
+    const observer = new ResizeObserver(() => {
+      const tick = currentRef.current;
+      if (tick !== null) keepInView(rail, tick, "auto");
+    });
+    observer.observe(rail);
+    return () => observer.disconnect();
+  }, [hidden]);
+
   if (hidden) return null;
 
   const visible = new Set(visibleIds);
@@ -247,7 +268,6 @@ export function ConversationMap({
               data-slot="conversation-map-tick"
               data-turn-id={turn.id}
               data-visible={onScreen ? "" : undefined}
-              data-current={current ? "" : undefined}
               aria-label={turn.label}
               aria-current={current ? "location" : undefined}
               aria-describedby={described ? previewTextId : undefined}