dsh-quick-toc 0.7.0 → 0.7.1

package/lib/client.js

@@ -128,8 +128,10 @@ window.__ModuleLoader__.load({
         "search.empty": "没有匹配",
         "search.hintMore": "向上滚动可加载更早的消息",
         "search.hintOldest": "已经是最早的消息",
+        "hint.autoOff": "上面还有更早的历史（自动加载已关闭，点「未加载」的条目才会加载）",
         "hint.bottom": "已经到底了",
         "outline.bottom": "回到底部",
+        "outline.backToMine": "回到我滚到的位置",
         "turn.jumpReply": "跳转到该回合的模型回答开头",
         "row.end": "跳到本节末尾",
         "turn.jumpTurn": "跳转到该回合开头",
@@ -164,7 +166,7 @@ window.__ModuleLoader__.load({
         "settings.fuzzy": "模糊搜索",
         "settings.hover": "悬停预览卡片",
         "settings.remember": "记住阅读位置",
-        "settings.remember.tip": "开启后，重新打开某个会话会回到上次读到的那一轮；位置只保存在这台浏览器里",
+        "settings.autoLoad": "自动加载历史",
         "settings.debug": "在控制台打印诊断日志",
         "settings.debug.tip": "开启后控制台会打印一行挂载诊断（宿主能力与跳转加载器状态）",
         "settings.overridden": "已自定义",
@@ -220,8 +222,10 @@ window.__ModuleLoader__.load({
         "search.empty": "No matches",
         "search.hintMore": "Scroll up to load earlier messages",
         "search.hintOldest": "This is the earliest message",
+        "hint.autoOff": "There is older history above (auto-loading is off — click an unloaded row to load it)",
         "hint.bottom": "You have reached the end",
         "outline.bottom": "Back to the newest entry",
+        "outline.backToMine": "Back to where I scrolled to",
         "turn.jumpReply": "Jump to the start of this turn's model reply",
         "row.end": "Jump to the end of this section",
         "turn.jumpTurn": "Jump to the start of this turn",
@@ -258,7 +262,7 @@ window.__ModuleLoader__.load({
         "settings.fuzzy": "Fuzzy search",
         "settings.hover": "Hover preview card",
         "settings.remember": "Remember the reading position",
-        "settings.remember.tip": "When on, reopening a session returns to the turn you were last reading; the position is stored in this browser only",
+        "settings.autoLoad": "Load history automatically",
         "settings.debug": "Print the mount diagnostic to the console",
         "settings.debug.tip": "The console then prints one mount line (host capabilities and jump-loader state)",
         "settings.overridden": "Customized",
@@ -331,7 +335,7 @@ window.__ModuleLoader__.load({
     // purpose — they describe THIS screen, not the account.
     var NAMESPACE = "dsh-quick-toc";
     // Fields backed by the Host settings document; everything else is localStorage.
-    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, zoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1 };
+    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, zoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1, autoLoad: 1 };
     // The schema defaults (mirrored here for the card's per-field reset and for the
     // one-time import of a 0.5.x install's stored values).
     var DEFAULTS = {
@@ -339,7 +343,7 @@ window.__ModuleLoader__.load({
       levels: [1, 2, 3, 4, 5, 6],
       zoom: 1, handle: 0.5,
       fuzzy: false, hover: true, lang: "auto", debug: false,
-      remember: true
+      remember: true, autoLoad: true
     };
     var PREF_KEYS = {
       dock: "dsh-quick-toc.dock.v2",
@@ -353,6 +357,7 @@ window.__ModuleLoader__.load({
       hover: "dsh-quick-toc.hover.v1",
       lang: "dsh-quick-toc.lang.v1",
       remember: "dsh-quick-toc.remember.v1",
+      autoLoad: "dsh-quick-toc.autoLoad.v1",
       debug: "dsh-quick-toc.debug"
     };
     // Writing a field's schema default through the card IS its reset — a value that
@@ -484,6 +489,8 @@ window.__ModuleLoader__.load({
           hover: read(PREF_KEYS.hover) !== "0",
           // absent means "on" too (the reader asked for this to default on)
           remember: read(PREF_KEYS.remember) !== "0",
+          // and so does the history pull that follows the reader through the outline
+          autoLoad: read(PREF_KEYS.autoLoad) !== "0",
           lang: langRaw === "zh" || langRaw === "en" ? langRaw : "auto",
           debug: read(PREF_KEYS.debug) === "1"
         };
@@ -500,6 +507,7 @@ window.__ModuleLoader__.load({
           fuzzy: function (v) { return v ? "1" : "0"; },
           hover: function (v) { return v ? "1" : "0"; },
           remember: function (v) { return v ? "1" : "0"; },
+          autoLoad: function (v) { return v ? "1" : "0"; },
           lang: function (v) { return v; },
           debug: function (v) { return v ? "1" : "0"; }
         };
@@ -531,6 +539,7 @@ window.__ModuleLoader__.load({
           fuzzy: v.fuzzy === true,
           hover: v.hover !== false,
           remember: v.remember !== false,
+          autoLoad: v.autoLoad !== false,
           debug: v.debug === true
         };
       };
@@ -541,7 +550,7 @@ window.__ModuleLoader__.load({
         return {
           dock: over.dock, y: local.y, w: local.w, h: local.h,
           levels: over.levels, zoom: over.zoom, handle: over.handle, fuzzy: over.fuzzy, hover: over.hover,
-          lang: over.lang, remember: over.remember, debug: over.debug
+          lang: over.lang, remember: over.remember, debug: over.debug, autoLoad: over.autoLoad
         };
       };
       var notify = function () {
@@ -1573,6 +1582,7 @@ window.__ModuleLoader__.load({
       var openFromEdge = function () {
         if (open) return;
         setEdgeLeaving(true);
+        armRestore("dock");   // the position the reader closed the panel at, if any
         setOpen(true);
       };
       react.useEffect(function () {
@@ -1677,6 +1687,27 @@ window.__ModuleLoader__.load({
       var outlineTouchRef = react.useRef(0); // last time the user touched the outline
       var lastScrollTopRef = react.useRef(0);
       var lastHostClickRef = react.useRef(0); // throttle for the "load earlier" click
+      // Auto-load bookkeeping (see the paging block): at most one pull in flight, a beat
+      // between pulls, and a per-gesture budget so a runaway loop can never swallow the
+      // whole log. The switch itself is mirrored into a ref because a scheduled retry
+      // fires from an older render's closure.
+      var pullBusyRef = react.useRef(false);
+      var autoTimerRef = react.useRef(null);
+      var autoBurstRef = react.useRef(0);
+      var autoBusyRef = react.useRef(0);
+      var autoWatchRef = react.useRef(null);   // did the pull we started actually land? (fallback click)
+      var autoProbeRef = react.useRef(0);      // throttle for the on-scroll approach probe
+      var autoStampRef = react.useRef(0);
+      var autoLoadRef = react.useRef(true);
+      var panelVisibleRef = react.useRef(true);
+      // The reader's place in the outline: sampled by the scroll handler and right
+      // before any change of our own, restored in a LAYOUT effect (see the paging
+      // block). `anchorHintRef` remembers where the visible boundary was, so finding it
+      // again stays cheap on a list with hundreds of groups.
+      var anchorRef = react.useRef(null);
+      var anchorHintRef = react.useRef(0);
+      // one confirmation loop at a time, cancelled on unmount (see confirmPlace)
+      var keepPlaceRafRef = react.useRef(null);
 
       // ---- "back to the newest row" button ------------------------------------
       // The list can be scrolled far up into history (that is the whole point of
@@ -1713,6 +1744,110 @@ window.__ModuleLoader__.load({
         else el.scrollTop = el.scrollHeight;
       };
 
+      // ---- "back to where I was when I closed this" ---------------------------
+      // The outline re-centres itself on the turn being read (the follow), and opening a surface
+      // lands on that turn — so a reader who had scrolled the outline somewhere of their own
+      // accord finds it somewhere else afterwards, with no way back. The memory is taken AT
+      // CLOSE TIME and kept PER SURFACE (the docked panel and the curtain are different shapes
+      // and are left at different rows): closing the panel remembers the panel's row, closing
+      // the curtain remembers the curtain's, and opening one of them arms a one-shot button in
+      // the top-right corner FOR THAT SURFACE — the two memories are stored apart and can never
+      // overwrite each other. Using the button — or simply scrolling back there yourself —
+      // consumes that surface's memory and fades the button out, and nothing is remembered
+      // again until the next close.
+      //
+      // What is remembered is the ROW that sat at the top AND where it sat, not a bare pixel
+      // offset: the same list is re-laid out between close and open (widths, curtain handoff,
+      // turns that finish loading), so an offset alone would drift off the row the reader was
+      // actually looking at — but the row alone is not enough either. At the bottom of the list
+      // the row on the top edge is usually CLIPPED (its own top sits above the list's), and
+      // measuring "how far is that row from the top" against 0 made the button light up the
+      // moment the reader reopened a list they had left at the bottom — and then walk them up by
+      // that clipping distance. Comparing the row's offset NOW with the offset it had when they
+      // left answers the real question ("is this a different place?"), and with zero drift
+      // nothing is offered and nothing moves.
+      var closedPosRef = react.useRef({ dock: null, sheet: null }); // recorded at close time
+      var livePosRef = react.useRef({ dock: null, sheet: null });   // armed when that surface opens
+      var _sRestore = react.useState(0);
+      var setRestoreTick = _sRestore[1];
+      // Which surface the reader is looking at right now: the button speaks for that one, and
+      // only that one's memory is ever spent.
+      var surfaceNow = function () { return sheetOpen ? "sheet" : "dock"; };
+      var liveTgt = function () { return livePosRef.current[surfaceNow()]; };
+      var spendRestore = function () {
+        var s = surfaceNow();
+        if (livePosRef.current[s] === null) return;
+        livePosRef.current[s] = null;
+        setRestoreTick(function (n) { return n + 1; });   // the button fades out
+      };
+      var noteClosed = function (which) {
+        var el = listRef.current;
+        if (!el) return;
+        var a = anchorAt(el);                     // the row at the top of the list right now
+        closedPosRef.current[which] = a
+          ? { idx: a.idx, off: a.top - el.getBoundingClientRect().top }
+          : null;
+      };
+      var armRestore = function (which) {
+        var m = closedPosRef.current[which];
+        closedPosRef.current[which] = null;        // one shot: this open consumes it
+        livePosRef.current[which] = (m && m.idx !== undefined) ? m : null;
+        if (m && m.idx !== undefined) {
+          // let the restore win over the follow for a moment: otherwise the follow re-aligns
+          // the READING row the instant the panel is back and eats the memory
+          outlineTouchRef.current = Date.now();
+        }
+        setRestoreTick(function (n) { return n + 1; });
+      };
+      // How far that row has drifted from where the reader left it (0 = still the same place)
+      var restoreDrift = function (el) {
+        var tgt = liveTgt();
+        if (!el || !tgt) return null;
+        var node = el.querySelector('[data-group-idx="' + tgt.idx + '"]');
+        if (!node) return null;                    // that row is gone: nothing to go back to
+        return (node.getBoundingClientRect().top - el.getBoundingClientRect().top) - tgt.off;
+      };
+      var awayFromRestore = function (el) {
+        var d = restoreDrift(el);
+        return d !== null && Math.abs(d) > 40;
+      };
+      var syncBackBtn = function (el) {
+        var d = restoreDrift(el);
+        // the reader brought the row back to where it was by hand: that is the same as using it
+        if (d !== null && Math.abs(d) <= 40) spendRestore();
+      };
+      var backToBrowse = function (e) {
+        if (e && e.stopPropagation) e.stopPropagation();
+        outlineTouchRef.current = Date.now();
+        hoverEnd();
+        var el = listRef.current;
+        var tgt = liveTgt();
+        if (!el || !tgt) return;
+        var node = el.querySelector('[data-group-idx="' + tgt.idx + '"]');
+        if (node) {
+          // put that row back where it SAT (not necessarily at the top): a row the reader left
+          // clipped by 120px goes home clipped by 120px, so the view lands exactly where it was
+          var d = (node.getBoundingClientRect().top - el.getBoundingClientRect().top) - tgt.off;
+          if (Math.abs(d) > 0.5) el.scrollTop = el.scrollTop + d;
+        }
+        syncAtBottom(el);
+        spendRestore();
+      };
+      // The button floats over the LIST, so it has to clear whatever chrome sits above the
+      // list — and that chrome differs between the docked panel (grip bar + header row, plus
+      // the search row when open) and the curtain (its own toolbar). Measuring where the list
+      // actually begins is exact for both, and stays right if the chrome changes height.
+      var _sListTop = react.useState(0);
+      var listTop = _sListTop[0];
+      var setListTop = _sListTop[1];
+      react.useLayoutEffect(function () {
+        var root = panelRootRef.current;
+        var el = listRef.current;
+        if (!root || !el || !root.getBoundingClientRect || !el.getBoundingClientRect) return;
+        var top = Math.round(el.getBoundingClientRect().top - root.getBoundingClientRect().top);
+        if (top > 0 && top !== listTop) setListTop(top);
+      });
+
       // ---- "scroll up to load earlier messages" hint (search mode) -----------
       // Armed by a search when older history is still reachable; dismissed the
       // moment the reader scrolls up (which is when the older page starts loading,
@@ -1958,6 +2093,7 @@ window.__ModuleLoader__.load({
       // re-renders until the curtain is actually gone.
       var closeSheet = function () {
         if (!sheetOpen || sheetTimerRef.current) return;
+        noteClosed("sheet");   // where they were when they shut the curtain
         var el = sheetRef.current;
         if (el && el.classList) {
           el.classList.remove("dqt-sheet-open");
@@ -1975,6 +2111,7 @@ window.__ModuleLoader__.load({
       };
       var openSheet = function () {
         if (sheetOpen || panelAside) return;
+        armRestore("sheet");   // the position the reader closed the curtain at, if any
         if (sheetTimerRef.current) { clearTimeout(sheetTimerRef.current); sheetTimerRef.current = null; }
         // reopening mid-retract: the node still carries the exit class and React
         // would not put the enter class back on its own (that prop never changed)
@@ -2245,82 +2382,408 @@ window.__ModuleLoader__.load({
       var setActiveGroup = _s10[1];
       var activeSigRef = react.useRef("");
 
-      // load older outline groups; when everything is loaded, click the
-      // conversation's own "load older" button so older turns keep appearing
+      // ---- history paging: what is loaded, what is not, and how to ask ------------
+      // The loader does NOT touch the transcript. It used to nudge it 26px off DSH's
+      // stick-to-bottom line before every pull, to stop DSH's `toBottom` re-pin from
+      // undoing an outline-triggered page-in (0.5.1). That nudge is visible in the middle
+      // column, and it fires from the background loader too, so the reader saw the
+      // conversation move while they were only reading the outline ("I did not click
+      // anything, why did the middle panel scroll up"). It is also no longer needed: the
+      // outline's follow has its own quiet window after any outline gesture
+      // (`outlineTouchRef`), so a re-pin cannot drag the rail to the newest turn any more,
+      // and `glideTo` keeps its own guard for the jumps the reader actually asks for.
+      // The session face carries the host's own bookkeeping — `openState`, `hasMore`
+      // and `loadingOlder` — so the panel never has to infer "is there more?" from a
+      // button it found in the DOM. That inference is exactly what used to stall the
+      // outline: the host renders its "load earlier" button only while `hasMore` and
+      // DISABLES it while a page is in flight, so a scroll-up arriving during a load was
+      // read as "nothing older" — the reader was told they had reached the beginning
+      // with hundreds of turns still above them.
+      var sessionFace = function () {
+        var sessions = hostSessions();
+        var binding = sessions && typeof sessions.binding === "function" ? sessions.binding(sessionId) : null;
+        return binding && binding.session ? binding.session : null;
+      };
+      var faceSettled = function (face) { return face.openState === undefined || face.openState === "open"; };
+      var historyBusy = function (face) { return !!face && face.loadingOlder === true; };
+      // The beginning is reached only when the window says so AND nothing is in flight:
+      // `hasMore` is stale while a page is being pulled (it flips once that page lands),
+      // and reading it during a pull is exactly how "still loading" became "no more
+      // history" for the reader.
+      var historyExhausted = function (face) {
+        return !!face && face.hasMore === false && !historyBusy(face) && faceSettled(face);
+      };
+      // The host's own "load earlier" control. The API above is the normal path, but a
+      // build can expose the session face and still ignore the pull; clicking this is
+      // exactly what the reader would do by hand, so the auto-loader falls back to it.
+      // (The reader asked for precisely this: "when it loads, click that for me".)
+      var viaHostButtonRef = react.useRef(function () { return false; });
+      viaHostButtonRef.current = function () {
+        var btn = findLoadOlderButton();
+        if (!btn || btn.disabled) return false;
+          btn.click();
+        return true;
+      };
+      var viaHostButton = function () { return viaHostButtonRef.current(); };
+      // Extend the window backwards by one host page (~50 messages): cheap and bounded,
+      // the way to walk into older history rather than swallow it.
+      // `interactive` = the reader asked for this (their own gesture in the outline). Only
+      // then do we nudge the TRANSCRIPT off DSH's stick-to-bottom line — that nudge is what
+      // used to make the conversation move while the reader was only reading the outline
+      // ("I did not click anything and the middle panel scrolled up"). A background prefetch
+      // leaves the transcript alone: if the reader is at the newest message, DSH keeps them
+      // there, and if they are mid-transcript the host compensates the prepend itself.
+      var pullPage = function () {
+        var face = sessionFace();
+        if (!face || typeof face.loadOlder !== "function") return false;
+        if (historyBusy(face) || historyExhausted(face)) return false;
+          try {
+          var p = face.loadOlder();
+          if (p && typeof p.catch === "function") p.catch(function () {});
+        } catch (e) { return false; }
+        return true;
+      };
+
+      // ---- holding the reader's place while the list reflows ----------------------
+      // Any load changes the list's height ABOVE the reader: the index reveals older
+      // groups at the top, and a group that loads swaps two lines of preview for a whole
+      // subtree. The list is a top-anchored flow, so a box can only grow downward — which
+      // is exactly why the reader was pushed: everything under the grown box moves down.
+      // The cure is not to grow the box upward (document flow cannot do that) but to take
+      // that push back out of `scrollTop` in the SAME frame, which is indistinguishable
+      // from growing upward: nothing the reader is looking at moves, the new rows simply
+      // appear above the viewport. The anchor is the first group box in view, and
+      // `data-group-idx` survives a ghost turning real (the group list does not change
+      // length when a turn loads).
+      // Scanning for it starts at the last known boundary: a full scan per scroll event
+      // reads every rect in the list, which is what made long outlines stutter.
+      var anchorAt = function (el) {
+        var boxes = el.querySelectorAll("[data-group-idx]");
+        if (!boxes || boxes.length === 0) return null;
+        var lr = el.getBoundingClientRect();
+        var limit = lr.top + 1;
+        var i0 = anchorHintRef.current;
+        if (i0 > boxes.length - 1) i0 = boxes.length - 1;
+        if (i0 < 0) i0 = 0;
+        // Walk from where the boundary was last seen — scrolling is gradual, so this reads
+        // one or two rects per call. `i` ends up on the row that straddles the top edge.
+        var i = i0;
+        var r = boxes[i].getBoundingClientRect();
+        while (r.bottom <= limit && i + 1 < boxes.length) { i++; r = boxes[i].getBoundingClientRect(); }
+        while (r.bottom > limit && i > 0) {
+          var prev = boxes[i - 1].getBoundingClientRect();
+          if (prev.bottom <= limit) break;
+          i--; r = prev;
+        }
+        // Choose the anchor. The FIRST REAL row in view wins: the placeholders ("未加载"
+        // rows) are exactly what loads and grows, so anchoring below them keeps every row
+        // the reader can see exactly where it is while the unloaded block grows upward out
+        // of the viewport — which is the behaviour the reader asked for ("grow upward"). An
+        // anchor ON a placeholder would sit still while everything under it slid down, and
+        // an anchor on a row that straddles the top edge measures no growth at all (its own
+        // top does not move). Falls back to the first fully visible row, then to whatever is
+        // visible at the top. Bounded by what is on screen, so a few rects at most.
+        var pick = i, pickTop = r.top, seenReal = false, seenFull = false;
+        for (var k = i; k < boxes.length && k < i + 80; k++) {
+          var rk = (k === i) ? r : boxes[k].getBoundingClientRect();
+          if (rk.top >= lr.bottom) break;                     // past the bottom edge
+          var ghostAttr = boxes[k].getAttribute ? boxes[k].getAttribute("data-ghost-turn") : null;
+          var isGhost = ghostAttr !== null && ghostAttr !== undefined;
+          if (!isGhost && !seenReal) { pick = k; pickTop = rk.top; seenReal = true; break; }
+          if (isGhost && rk.top >= limit && !seenFull) { pick = k; pickTop = rk.top; seenFull = true; }
+        }
+        anchorHintRef.current = pick;
+        return { idx: boxes[pick].getAttribute("data-group-idx"), top: pickTop };
+      };
+      // What the reader is looking at, and where it sits. Sampled by the scroll handler —
+      // so a host-side change landing mid-scroll is still caught — and right before any
+      // change we start ourselves.
+      var sampleAnchor = function (el) {
+        var a = el ? anchorAt(el) : null;
+        anchorRef.current = a ? { idx: a.idx, top: a.top, scrollTop: el.scrollTop } : null;
+        return anchorRef.current;
+      };
+      var restoreAnchor = function (el) {
+        var a = anchorRef.current;
+        if (!a || !el || !el.isConnected) return false;
+        var node = el.querySelector('[data-group-idx="' + a.idx + '"]');
+        if (!node) { sampleAnchor(el); return false; }
+        var top = node.getBoundingClientRect().top;
+        var moved = el.scrollTop - a.scrollTop;   // what the reader (or a jump) scrolled
+        // Growth above the anchor moves it DOWN by exactly as much as the content grew; the
+        // reader scrolling up moves it down by exactly as much as they scrolled. Both happen
+        // at once when a page lands mid-gesture, so subtract the reader's part rather than
+        // refusing to compensate — the old "scrollTop changed, so the reader moved, skip"
+        // guard is exactly why a load landing during a scroll was still seen pushing the
+        // list. (The list carries `overflow-anchor: none`, so the browser is not adjusting
+        // `scrollTop` behind our back and this sum stays honest.)
+        var grew = (top - a.top) + moved;
+        if (Math.abs(grew) < 0.5 || Math.abs(grew) > (el.clientHeight || 0) * 3) {
+          // nothing grew — or something absurd happened (a repaged list, a session swap):
+          // re-baseline instead of chasing it
+          a.scrollTop = el.scrollTop; a.top = top;
+          return false;
+        }
+        var before = el.scrollTop;
+        el.scrollTop = before + grew;
+        if (Math.abs(el.scrollTop - before) < 0.5) {
+          // clamped (the reader is already at one end): nothing to hold on to
+          sampleAnchor(el);
+          return false;
+        }
+        a.scrollTop = el.scrollTop;
+        a.top = top - grew;    // the offset the anchor keeps from now on
+        return true;
+      };
+      var holdPlace = function (el) { sampleAnchor(el); };
+      // A host page lands over several ticks (window → snapshot → React render), so the
+      // layout effect above is re-checked for a few frames — bounded, and it stops as soon
+      // as the height settles, so an idle list costs nothing. Only ONE such loop may run:
+      // a second one would correct the same content twice.
+      var confirmPlace = function (el) {
+        if (keepPlaceRafRef.current) cancelAnimationFrame(keepPlaceRafRef.current);
+        var n = 0, lastH = -1;
+        var step = function () {
+          if (!el.isConnected || n > 8) { keepPlaceRafRef.current = null; return; }
+          n++;
+          restoreAnchor(el);
+          var h = el.scrollHeight;
+          if (h === lastH) { keepPlaceRafRef.current = null; return; }
+          lastH = h;
+          keepPlaceRafRef.current = requestAnimationFrame(step);
+        };
+        keepPlaceRafRef.current = requestAnimationFrame(step);
+      };
+      // ---- auto-load: follow the reader into the part that is not loaded ----------
+      // The reader asked for this by name: "when I scroll into a gap, load it" — and,
+      // just as firmly, "nothing at all when I turn it off". So the trigger is geometric
+      // (an unloaded group that is actually in view) and the switch is consulted first.
+      var AUTO_PACE_MS = 130;        // beat while merely PREFETCHING (nothing to catch up to)
+      var AUTO_WAIT_MS = 40;         // beat while a page is in flight: the host is the limit
+      var AUTO_BURST_MAX = 60;       // runaway guard only: a long gap must stay walkable
+      var AUTO_BURST_IDLE_MS = 3000; // quiet this long and the budget is fresh again
+      var ghostInView = function (el) {
+        var ghosts = el.querySelectorAll("[data-ghost-turn]");
+        if (ghosts.length === 0) return null;
+        var box = el.getBoundingClientRect();
+        for (var i = 0; i < ghosts.length; i++) {
+          var r = ghosts[i].getBoundingClientRect();
+          if (r.bottom > box.top && r.top < box.bottom) return Number(ghosts[i].getAttribute("data-ghost-turn"));
+        }
+        return null;
+      };
+
+      // How far AHEAD of the reader the gap is filled: while the bottom edge of the
+      // nearest unloaded turn is still within this many viewports above the viewport's top
+      // edge, the next page is fetched — so by the time the reader scrolls to where the
+      // unloaded turns are, they are already real. The growth then happens ABOVE the view,
+      // where nothing they are looking at can move; that is the trick that removes the seam
+      // without animating anything.
+      //
+      // Measuring the GHOST (not the loaded/unloaded frontier) is what gives this its
+      // hysteresis: the frontier group sits at the viewport's top edge by definition, so
+      // "the frontier is within a viewport" was true no matter how much had just loaded,
+      // and the loader pulled another page every beat until the whole log was in memory —
+      // continuous host work, which is the stutter the reader hit while sitting still. A
+      // ghost's distance, by contrast, grows by exactly the height of each page that lands,
+      // so the chain stops once a page has put a viewport of real content above the reader.
+      var PREFETCH_AHEAD = 1.2;
+      var firstRealIndex = function () {
+        var list = groupsRef.current || [];
+        for (var i = 0; i < list.length; i++) if (!list[i].ghost) return i;
+        return -1;
+      };
+      // The seq the host needs to page a turn in. The outline carries it for every turn
+      // (loaded or not), because the host's projection and the jump loader both speak seq.
+      var seqOfTurn = function (turn) {
+        var list = groupsRef.current || [];
+        for (var i = 0; i < list.length; i++) {
+          if (list[i] && list[i].turn === turn) return typeof list[i].seq === "number" ? list[i].seq : null;
+        }
+        return null;
+      };
+      // Jump the window straight to a turn the reader has ARRIVED at. `loadThrough(seq)` lets
+      // the host page its own history (200 messages a hop) until the window covers that seq,
+      // so a deep gap closes in ONE call — the reader's complaint was exactly this ("I have
+      // already scrolled into the unloaded part and it is still loading slowly"). Paging
+      // 50 messages at a time stays the fallback, and stays the rule while merely
+      // prefetching ahead of them, where there is nothing to catch up to.
+      //
+      // The target is a MARGIN further back than the row in view: jumping to exactly that one
+      // turn left the next "未加载" row sitting immediately above it, so the reader saw the gap
+      // again as soon as they kept scrolling. Covering `AUTO_JUMP_MARGIN` rows at a time makes
+      // one jump serve the next stretch of scrolling too.
+      var AUTO_JUMP_MARGIN = 8;
+      var jumpSeqFor = function (turn) {
+        var list = groupsRef.current || [];
+        var at = -1;
+        for (var i = 0; i < list.length; i++) if (list[i] && list[i].turn === turn) { at = i; break; }
+        if (at < 0) return seqOfTurn(turn);
+        for (var k = Math.max(0, at - AUTO_JUMP_MARGIN); k <= at; k++) {
+          if (list[k] && typeof list[k].seq === "number") return list[k].seq;
+        }
+        return seqOfTurn(turn);
+      };
+      var loadThroughTurn = function (turn) {
+        var face = sessionFace();
+        if (!face || typeof face.loadThrough !== "function") return false;
+        var seq = jumpSeqFor(turn);
+        if (seq === null) return false;
+        if (historyBusy(face) || historyExhausted(face)) return false;
+          try {
+          var p = face.loadThrough(seq);
+          if (p && typeof p.catch === "function") p.catch(function () {});
+        } catch (e) { return false; }
+        return true;
+      };
+      var frontierApproaching = function (el) {
+        // Read the UNLOADED rows by their own attribute. (They also carry
+        // `data-group-idx`, but asking for the placeholder directly says what this is
+        // about — and it is fewer boxes to measure.)
+        var ghosts = el.querySelectorAll ? el.querySelectorAll("[data-ghost-turn]") : [];
+        var box = el.getBoundingClientRect();
+        var ahead = (box.height || 0) * PREFETCH_AHEAD;
+        var above = null;   // distance from the nearest unloaded turn up to the viewport
+        for (var i = 0; i < ghosts.length; i++) {
+          var r = ghosts[i].getBoundingClientRect();
+          if (r.bottom > box.top) return true;      // unloaded content is in view
+          above = box.top - r.bottom;               // the last ghost is the nearest one
+        }
+        return above !== null && above < ahead;
+      };
+      var autoRetry = function (fast) {
+        if (autoTimerRef.current) return;
+        autoTimerRef.current = setTimeout(function () {
+          autoTimerRef.current = null;
+          pullBusyRef.current = false;
+          var el = listRef.current;
+          if (!el) return;
+          // If our own pull changed nothing while the host still has older history, this
+          // build is not honouring the API pull: fall back to the host's own control, once
+          // per attempt. The reader asked for exactly this ("click that for me").
+          var w = autoWatchRef.current;
+          if (w) {
+            var moved = firstRealIndex() !== w.frontier;
+            if (moved) autoWatchRef.current = null;
+            else {
+              w.tries = (w.tries || 0) + 1;
+              // three beats (≈0.4s) with nothing moving means this build is not landing our
+              // pull: click the host's own control once instead of waiting forever
+              if (!w.clicked && w.tries >= 3) {
+                var face2 = sessionFace();
+                if (!face2 || !historyBusy(face2)) w.clicked = viaHostButton() || true;
+              }
+            }
+          }
+          autoLoadStep(el);
+        }, fast ? AUTO_WAIT_MS : AUTO_PACE_MS);
+      };
+      var autoLoadStep = function (el) {
+        if (!autoLoadRef.current || !el || !el.isConnected) return false;
+        if (pullBusyRef.current) return true;   // a pull is in flight: still progressing
+        var now = Date.now();
+        if (now - autoStampRef.current > AUTO_BURST_IDLE_MS) autoBurstRef.current = 0;
+        if (autoBurstRef.current >= AUTO_BURST_MAX) return false;
+        var face = sessionFace();
+        var ghostTurn = ghostInView(el);
+        if (!face) {
+          // no session service (older host): the host's own control is all there is
+          if (el.scrollTop <= 24 && findLoadOlderButton() && viaHostButton()) {
+            autoBurstRef.current++; autoStampRef.current = now; return true;
+          }
+          return false;
+        }
+        if (historyBusy(face)) {
+          // a page is in flight: WAIT for it, on a SHORT beat, so the next one starts as soon
+          // as the host is done with this one (the host, not our pacing, should be the limit).
+          // Reading "in flight" as "no more history" is the bug that stopped the loading.
+          // These waits are not pages, so they do not spend the page budget — but they are
+          // capped, so a genuinely stuck pull cannot spin here.
+          autoBusyRef.current++;
+          if (autoBusyRef.current <= 60) autoRetry(true);
+          return true;
+        }
+        if (historyExhausted(face)) return false;
+        // A ghost the reader can actually see, or the gap coming up on them.
+        if (ghostTurn !== null || frontierApproaching(el)) {
+          // ARRIVED at an unloaded turn: cover it in one host call (`loadThrough`), which is
+          // what the reader expects ("it should load the moment I scroll to it"). A deep gap
+          // walked 50 messages at a time is what made it feel like it never caught up.
+          // MERELY APPROACHING (the prefetch band): one page at a time, so history is fetched
+          // just ahead of the reader and nothing large lands while they sit still.
+          holdPlace(el);                       // remember the place BEFORE the height changes
+          autoBurstRef.current++; autoStampRef.current = now;
+          pullBusyRef.current = true;
+          var started = ghostTurn !== null
+            ? (loadThroughTurn(ghostTurn) || pullPage())
+            : pullPage();
+          if (!started) { pullBusyRef.current = false; return false; }
+          autoBusyRef.current = 0;   // a load started: the wait cap is per stuck load
+          // One watch across the whole fruitless streak, not one per pull: re-arming it
+          // every beat would reset the count and the fallback would never fire.
+          if (!autoWatchRef.current) autoWatchRef.current = { frontier: firstRealIndex(), tries: 0, clicked: false };
+          confirmPlace(el);                    // a load lands over several ticks
+          autoRetry(true);
+          return true;
+        }
+        // Nothing unloaded is near, so there is nothing to fetch. There used to be an
+        // unconditional "we are at the very top, pull anyway" branch here; it was both
+        // redundant (at the true top the unloaded turns ARE on screen, so the branch above
+        // fires) and harmful: it kept pulling while the reader sat still, page after page,
+        // which is host work they never asked for.
+        return false;
+      };
       var loadOlderOutline = function (el) {
         var grow = function () {
           if (visibleCount < groups.length) {
-            var prevH = el.scrollHeight;
+            // Revealing older rows prepends them, so the reader's content is pushed down.
+            // Sample first and let the layout effect take the push out again in the same
+            // frame: correcting two frames later (the old double-rAF) IS the bounce the
+            // reader saw when they reached the unloaded part of the list.
+            holdPlace(el);
             setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
-            requestAnimationFrame(function () {
-              requestAnimationFrame(function () {
-                el.scrollTop += (el.scrollHeight - prevH);
-              });
-            });
+            // the revealed rows are not in the DOM yet, so re-check once after the render:
+            // if the reveal uncovered unloaded turns, they load within the same gesture
+            autoRetry();
             return true;
           }
           return false;
         };
-        var liftOffBottom = function () {
-          // DSH re-pins the transcript to the newest message whenever it sees a
-          // scroll it does not attribute to the reader while it still believes the
-          // reader is at the bottom (`toBottom`). Paging history in from the OUTLINE
-          // is exactly that case: the prepend compensation DSH applies is a
-          // programmatic scroll, `atBottomRef` was never cleared (the reader never
-          // touched the transcript), so the page-in is immediately undone and the
-          // whole view — and with it the outline's follow — snaps back to the newest
-          // turn. Nudging the transcript just past DSH's 25px stick zone first makes
-          // that scroll read as a reader movement, so the page-in keeps its place.
-          // (Same trick `glideTo` uses so a jump is not yanked back.)
-          var sp = document.querySelector("[data-conversation-scroll]");
-          if (!sp) return;
-          var floor = Math.max(0, sp.scrollHeight - sp.clientHeight);
-          if (floor - sp.scrollTop <= 25) sp.scrollTop = Math.max(0, floor - 26);
-        };
-        var viaHost = function () {
-          var btn = findLoadOlderButton();
-          if (!btn || btn.disabled) return false;
-          liftOffBottom();
-          btn.click();
-          // once the conversation loads more, expand the outline window too
-          setTimeout(function () {
-            var prevH2 = el.scrollHeight;
-            if (grow()) {
-              requestAnimationFrame(function () {
-                requestAnimationFrame(function () {
-                  el.scrollTop += (el.scrollHeight - prevH2);
-                });
-              });
-            }
-          }, 1200);
-          return true;
-        };
-        var viaHostThrottled = function () {
-          var now = Date.now();
-          if (now - lastHostClickRef.current < 900) return false;
-          if (!findLoadOlderButton()) return false;
-          lastHostClickRef.current = now;
-          return viaHost();
-        };
-        // In SEARCH mode the list shows matches, not the outline: paging the
-        // outline's own window would change nothing the reader can see, whereas
-        // loading the conversation's older messages extends what the search can
-        // cover at all (the whole-log index only carries bounded previews). So the
-        // host's own "load earlier" comes first while a query is active.
-        if (query.trim() !== "") return viaHost() || grow();
-        // Outline mode keeps the ORIGINAL contract: scrolling the outline up also
-        // pulls the conversation's older messages in (that is what makes the outline
-        // a substitute for scrolling the transcript), not merely more index entries.
-        // The host click is throttled so one continuous scroll cannot hammer the
-        // pager; grow() still runs first so the index never lags behind the window.
+        var viaHostButton = function () { return viaHostButtonRef.current(); };
+        // In SEARCH mode the list shows matches, not the outline: paging the outline's
+        // own window would change nothing the reader can see, whereas loading the
+        // conversation's older messages extends what the search can cover at all (the
+        // whole-log index only carries bounded previews). So the host pull comes first
+        // while a query is active.
+        if (query.trim() !== "") {
+          holdPlace(el);
+          var pulled = pullPage() || viaHostButton();
+          if (pulled) confirmPlace(el);
+          return pulled || grow();
+        }
+        // Outline mode: reveal more of the index, and let the auto-loader fetch the
+        // history behind the gap the reader has scrolled into (see autoLoadStep).
         var grew = grow();
-        return viaHostThrottled() || grew;
+        var fetched = autoLoadStep(el);
+        return grew || fetched;
       };
 
       // older history still reachable? the outline can always page its own window
-      // further, and beyond that the conversation's own "load older" button decides
+      // further, and beyond that the session face decides (see historyExhausted)
       var canLoadOlder = function () {
-        return visibleCount < groups.length || !!findLoadOlderButton();
+        var face = sessionFace();
+        if (visibleCount < groups.length) return true;
+        if (face) return !historyExhausted(face);
+        return !!findLoadOlderButton();
+      };
+      // Positive evidence that the beginning really is reached — the ONLY state that may
+      // claim it in the hint. A pull in flight, a spent burst budget or a switched-off
+      // auto-loader are all "not now", never "nothing older".
+      var atHistoryStart = function () {
+        if (visibleCount < groups.length) return false;
+        var face = sessionFace();
+        if (face) return historyExhausted(face);
+        return !findLoadOlderButton();
       };
 
       // wheel up (toward older) loads more when the list is at its top or has
@@ -2344,9 +2807,15 @@ window.__ModuleLoader__.load({
           if (!progressed) {
             if (query.trim() !== "") {
               if (hint !== "oldest") setHint("oldest");
-            } else {
+            } else if (atHistoryStart()) {
               showBanner(T("search.hintOldest"));
+            } else if (!prefs.autoLoad) {
+              // the honest message when the reader switched auto-loading off: there IS
+              // more history, it simply is not being fetched behind their back
+              showBanner(T("hint.autoOff"));
             }
+            // otherwise a page is in flight (or this gesture's budget is spent): the
+            // silence is deliberate — "已经是最早" here is what used to lie
           }
         }
       };
@@ -2354,6 +2823,8 @@ window.__ModuleLoader__.load({
       // scroll to the top edge also loads older groups (keeps the visual position)
       var onListScroll = function (e) {
         outlineTouchRef.current = Date.now();
+        // the scroll container itself: a real scroll event's `currentTarget` IS the list
+        // element, which is also what the paging logic reads geometry from
         var el = e.currentTarget;
         syncAtBottom(el);
         var upward = el.scrollTop < lastScrollTopRef.current - 2;
@@ -2362,6 +2833,20 @@ window.__ModuleLoader__.load({
           if (hoverCard) hoverEnd();
         }
         lastScrollTopRef.current = el.scrollTop;
+        syncBackBtn(el);   // reached the remembered place by hand? the button is done
+        // Remember what the reader is looking at. Sampling on every scroll event is what
+        // lets a change the reader did NOT start — the host extending the window by itself
+        // — be compensated too: the layout effect knows where the anchored row was before
+        // the height changed and puts it back before the push is ever painted.
+        sampleAnchor(el);
+        // The gap is filled AHEAD of the reader, so "reached the very top" is not the only
+        // trigger any more: on any upward movement, ask the auto-loader whether the
+        // unloaded stretch is coming into range (it decides, see frontierApproaching).
+        // Throttled, because that probe reads geometry.
+        if (upward && el.scrollTop > 24 && Date.now() - autoProbeRef.current > 120) {
+          autoProbeRef.current = Date.now();
+          autoLoadStep(el);
+        }
         if (el.scrollTop <= 24) {
           // Reaching the top is the ONLY place the exhausted case can be told
           // apart from "keep scrolling": after a search the list is parked at the
@@ -2370,8 +2855,10 @@ window.__ModuleLoader__.load({
           if (!progressed && upward) {
             if (query.trim() !== "") {
               if (hint !== "oldest") setHint("oldest");
-            } else {
+            } else if (atHistoryStart()) {
               showBanner(T("search.hintOldest"));
+            } else if (!prefs.autoLoad) {
+              showBanner(T("hint.autoOff"));
             }
           }
         }
@@ -2610,6 +3097,11 @@ window.__ModuleLoader__.load({
       // render (the "did that turn actually page in?" verdict below).
       var groupsLiveRef = react.useRef(groups);
       groupsLiveRef.current = groups;
+      react.useEffect(function () {
+        return function () {
+          if (keepPlaceRafRef.current) cancelAnimationFrame(keepPlaceRafRef.current);
+        };
+      }, []);
       // One history-rebuild retry per session after a jump that never landed.
       // Hooks must sit ABOVE every early return (this panel returns null for an
       // empty conversation) or React aborts with #310.
@@ -2816,6 +3308,25 @@ window.__ModuleLoader__.load({
         var followFrame = null;
         var followTimer = null;
         var lastRun = 0;
+        // A long session's conversation holds thousands of message anchors, and reading a
+        // rect for every one of them ~16x/s (plus the 250ms poll) is main-thread work that
+        // GROWS with the session length — that is frame loss the reader notices after
+        // leaving the app open for a long time. So the node list is cached and the scan
+        // starts at the boundary seen last time: a handful of rects per update instead of
+        // thousands. The cache is dropped when the port changes or its two ends change
+        // (the host mounts and unmounts messages while it repages the window).
+        var cachedSp = null, cachedRows = null, cachedCount = -1, cachedFirst = null, cachedLast = null;
+        var cursor = 0;
+        var rowsOf = function (sp) {
+          var list = sp.querySelectorAll("[data-chat-anchor-key]");
+          var first = list.length > 0 ? list[0].dataset.chatAnchorKey : null;
+          var last = list.length > 0 ? list[list.length - 1].dataset.chatAnchorKey : null;
+          if (sp !== cachedSp || list.length !== cachedCount || first !== cachedFirst || last !== cachedLast) {
+            cachedSp = sp; cachedRows = list; cachedCount = list.length;
+            cachedFirst = first; cachedLast = last; cursor = 0;
+          }
+          return cachedRows;
+        };
         var update = function (force) {
           // a jump glide carries the conversation past many turns; following each
           // transient position would make the rail sprint through the whole
@@ -2824,9 +3335,13 @@ window.__ModuleLoader__.load({
           if (glide) return;
           // scroll frames are hot and a document-level capture listener sees every
           // scroll in the app; the rail only changes when a different turn crosses
-          // the viewport, so cap the row measurement at ~16/s
+          // the viewport, so cap the row measurement. While the panel is COLLAPSED
+          // (or handed to the curtain) nothing on screen can change, so the cap goes
+          // way up — but the scan still runs, because it is also what remembers the
+          // reader's position.
           var now = Date.now();
-          if (!force && now - lastRun < 60) return;
+          var gap = panelVisibleRef.current ? 60 : 800;
+          if (!force && now - lastRun < gap) return;
           lastRun = now;
           if (!chatViewRef.current) return;
           var sp = document.querySelector("[data-conversation-scroll]");
@@ -2834,16 +3349,25 @@ window.__ModuleLoader__.load({
           var lr = sp.getBoundingClientRect();
           var vTop = lr.top;
           var vBottom = lr.top + lr.height;
-          var rows = sp.querySelectorAll("[data-chat-anchor-key]");
+          var rows = rowsOf(sp);
+          if (!rows || rows.length === 0) return;
+          if (cursor > rows.length - 1) cursor = rows.length - 1;
+          if (cursor < 0) cursor = 0;
+          var cr = rows[cursor].getBoundingClientRect();
+          while (cr.bottom <= vTop && cursor + 1 < rows.length) { cursor++; cr = rows[cursor].getBoundingClientRect(); }
+          while (cr.bottom > vTop && cursor > 0) {
+            var pr = rows[cursor - 1].getBoundingClientRect();
+            if (pr.bottom <= vTop) break;
+            cursor--; cr = pr;
+          }
           var actives = [];
           var seen = {};
-          for (var i = 0; i < rows.length; i++) {
+          for (var i = cursor; i < rows.length; i++) {
             var r = rows[i].getBoundingClientRect();
-            if (r.top < vBottom && r.bottom > vTop) {
-              var k = rows[i].dataset.chatAnchorKey;
-              var gi = keyToGroup[k];
-              if (gi !== undefined && !seen[gi]) { seen[gi] = true; actives.push(gi); }
-            }
+            if (r.top >= vBottom) break;   // document order: nothing below is visible either
+            var k = rows[i].dataset.chatAnchorKey;
+            var gi = keyToGroup[k];
+            if (gi !== undefined && !seen[gi]) { seen[gi] = true; actives.push(gi); }
           }
           var sig = actives.slice().sort().join(",");
           if (sig === activeSigRef.current) return;
@@ -2869,11 +3393,12 @@ window.__ModuleLoader__.load({
             if (!el) return;
             var node = el.querySelector('[data-group-idx="' + gi0 + '"]');
             if (!node) return;
-            var er = node.getBoundingClientRect();
-            var lr2 = el.getBoundingClientRect();
-            if (er.top < lr2.top - 2 || er.bottom > lr2.bottom + 2) {
-              el.scrollTop = el.scrollTop + (er.top - lr2.top) - el.clientHeight / 2 + node.offsetHeight / 2;
-            }
+            // The turn being read goes to the TOP of the list. This used to CENTRE it, which is
+            // why the follow stopped "a little short of the bottom": for the newest turn the
+            // centre is above the end of the list, so the scroll landed half a viewport early.
+            // Aligning to the top needs no clamp at all — the list's own end does the work.
+            var delta = node.getBoundingClientRect().top - el.getBoundingClientRect().top;
+            if (Math.abs(delta) > 1) el.scrollTop = el.scrollTop + delta;
           };
           followFrame = requestAnimationFrame(function () { followFrame = requestAnimationFrame(place); });
           followTimer = setTimeout(place, 90); // the row may only exist after the expansion commits
@@ -3187,7 +3712,14 @@ window.__ModuleLoader__.load({
       var posTimerRef = react.useRef(null);
       var rememberRef = react.useRef(true);
       rememberRef.current = !!prefs.remember;
+      // the auto-loader's switch, mirrored for the same reason: its retry fires from an
+      // older render's closure, and turning the setting off must stop it immediately
+      autoLoadRef.current = !!prefs.autoLoad;
+      // Is any of the outline actually on screen? The follow scan is cheap now, but while
+      // the panel sits collapsed there is no point measuring at scroll-frame rate.
+      panelVisibleRef.current = !!(open || sheetOpen);
       react.useEffect(function () { return function () { if (posTimerRef.current) clearTimeout(posTimerRef.current); }; }, []);
+      react.useEffect(function () { return function () { if (autoTimerRef.current) clearTimeout(autoTimerRef.current); }; }, []);
       // `g` is the outline group the reader is looking at (its turn AND its start seq,
       // so the position can be paged back in later, not just jumped to while loaded)
       var savePosition = function (g) {
@@ -3290,16 +3822,73 @@ window.__ModuleLoader__.load({
         openTurn(saved.turn, seq === null ? undefined : seq, true);
       }, [groups, prefs.remember, chatViewActive, sessionId]);
 
-      // ---- opening the sheet: land on the turn being read ----------------------
+      // ---- holding the reader's place, before the browser paints ----------------
+      // Every render can have changed the list's height: older rows revealed, a ghost
+      // replaced by a whole real subtree, the host extending its window on its own. This
+      // runs after React wrote the DOM and BEFORE the browser paints, which is the only
+      // place the correction is invisible — the reader sees the new rows appear above the
+      // viewport instead of seeing their own content pushed down and then snapped back.
+      // It writes nothing when the anchor has not moved, so an idle list costs one
+      // measurement per render and nothing else.
+      // No dep array on purpose: the height can change for reasons this component does not
+      // get told about (the host repaging its window changes the rows' heights without
+      // necessarily changing the group list's identity), and the check is cheap — one
+      // attribute query and one rect, and it writes nothing when the anchor has not moved.
+      react.useLayoutEffect(function () {
+        var el = listRef.current;
+        if (el) restoreAnchor(el);
+      });
+
+      // ---- opening a surface: land on the turn being read ----------------------
+      // ONE rule for both surfaces: what the reader is reading sits at the TOP of the list —
+      // except when it is one of the newest turns, where the list cannot scroll any further and
+      // the row therefore lands at the bottom. Nothing clamps it: the rule limits itself.
+      // The docked panel used to just show wherever the list had last been left, which is
+      // exactly why the two surfaces disagreed about where they open.
+      //
       // Hooks stay above the early return; the helpers they call are assigned later
       // in the render body, which is fine because this runs after the render.
-      react.useEffect(function () {
-        if (!sheetOpen) return;
+      var landOnReadingRow = function () {
         var el = listRef.current;
-        if (el && typeof el.focus === "function") el.focus();
+        if (!el) return undefined;
+        // A reader who had not scrolled the outline is at its bottom, and opening the CURTAIN
+        // must not move them: its container geometry changes wholesale, and the "hold the
+        // anchor" correction would put a stale row back where it was — the list then sat a
+        // little above the newest turn until the follow walked it down. Pin the bottom instead,
+        // for this transition only, and skip the reveal (there is nothing to reveal to: they
+        // are already reading the newest turn). The docked panel reshapes nothing — it opens
+        // around a list that kept its geometry — so there it has nothing to pin.
+        if (atBottomRef.current) {
+          if (!sheetOpen) return undefined;
+          anchorRef.current = null;          // no compensation against a stale anchor
+          el.scrollTop = el.scrollHeight;
+          syncAtBottom(el);
+          var again = requestAnimationFrame(function () {   // ...and once more, after layout
+            var el2 = listRef.current;
+            if (!el2 || !atBottomRef.current) return;
+            el2.scrollTop = el2.scrollHeight;
+            syncAtBottom(el2);
+            sampleAnchor(el2);
+          });
+          return function () { cancelAnimationFrame(again); };
+        }
         var gi = activeGroup && activeGroup.length > 0 ? activeGroup[0] : -1;
         if (gi >= 0) revealGroupInOutline(gi);
+        return undefined;
+      };
+      react.useEffect(function () {
+        if (!sheetOpen) return undefined;
+        var el = listRef.current;
+        if (el && typeof el.focus === "function") el.focus();
+        return landOnReadingRow();
       }, [sheetOpen]);
+      // The docked panel obeys the same rule when the reader opens IT. Only its own open counts
+      // (`open` false -> true): the curtain handing the panel back leaves `open` true, and there
+      // the list keeps the place the reader was just looking at in the curtain.
+      react.useEffect(function () {
+        if (!open) return undefined;
+        return landOnReadingRow();
+      }, [open]);
 
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
@@ -3323,22 +3912,25 @@ window.__ModuleLoader__.load({
       // rendered at its COLLAPSED geometry, so the same left/clip transition that
       // serves open/collapse also serves the handoff: no teleport, no flash.
       var geoOpen = open && !panelAside;
-      var panelLeft;
+      // The box is always PARKED at its collapsed spot and the open state is a transform
+      // offset on top of it (see panelTransition): same visual geometry as before, but the
+      // slide is compositable. `openLeft` is the clamped open position, `parkedLeft` the
+      // off-area spot the collapsed panel occupies.
+      var openLeft, parkedLeft;
       if (dockRight) {
         // RIGHT dock: keep the panel's VISIBLE right edge pinned at the SAME
         // line when collapsed as when expanded (the expand edge is correct).
-        // open:   left = openRight,           visible right edge = openRight+panelW
-        // closed: left = openRight + panelW,  clip-right panelW hides it fully,
-        //         so the visible right edge stays at openRight+panelW -> the
-        //         collapse shrinks toward that line and vanishes exactly there.
         var openRight = window.innerWidth - (viewport ? viewport.right + 48 : 60) - panelW;
-        panelLeft = geoOpen ? clampLeft(openRight) : (openRight + panelW);
-      } else if (geoOpen) {
-        // LEFT dock open (left dock is the confirmed-correct reference — untouched)
-        panelLeft = clampLeft(viewport ? viewport.left + 8 : 8);
+        openLeft = clampLeft(openRight);
+        parkedLeft = openRight + panelW;
       } else {
-        panelLeft = (viewport ? viewport.left - panelW - 8 : -(panelW + 48));
+        // LEFT dock open (left dock is the confirmed-correct reference — untouched)
+        openLeft = clampLeft(viewport ? viewport.left + 8 : 8);
+        parkedLeft = (viewport ? viewport.left - panelW - 8 : -(panelW + 48));
       }
+      var panelLeft = parkedLeft;
+      var panelOffset = geoOpen ? (openLeft - parkedLeft) : 0;
+      var panelTransform = panelOffset === 0 ? "none" : "translateX(" + zLen(panelOffset) + ")";
       var vMaxH = viewport ? Math.max(200, viewport.height - 28) : "72vh";
       // same reasoning vertically: the draggable offset is stored in localStorage
       // and can outlive the layout it was chosen for
@@ -3762,16 +4354,34 @@ window.__ModuleLoader__.load({
 
       // reveal one group inside the outline list (shared by Enter-stepping and by
       // jumps into a turn that had to be loaded first)
+      // Put a group's row at the TOP of the list, instantly. The previous way —
+      // `scrollIntoView({ behavior: "smooth", block: "nearest" })` — only scrolled the minimum
+      // distance (so the row could end up anywhere in the viewport, which reads as "the jump is
+      // not accurate") and it ANIMATED there, which is the scroll the reader saw when opening
+      // the panel or the curtain.
+      //
+      // Aligning to the top is also self-limiting, which is why it needs no special case: on the
+      // newest turn the list simply cannot scroll further, so `scrollTop` clamps at the end and
+      // that row lands exactly at the bottom.
+      var alignGroupToTop = function (gi) {
+        var el = listRef.current;
+        if (!el) return false;
+        var node = el.querySelector('[data-group-idx="' + gi + '"]');
+        if (!node) return false;
+        var delta = node.getBoundingClientRect().top - el.getBoundingClientRect().top;
+        if (Math.abs(delta) > 0.5) el.scrollTop = el.scrollTop + delta;
+        return true;
+      };
       var revealGroupInOutline = function (gi) {
         setVisibleCount(function (prev) {
           return Math.max(prev, Math.min(groups.length, groups.length - gi));
         });
-        setTimeout(function () {
-          var el = listRef.current;
-          if (!el) return;
-          var node = el.querySelector('[data-group-idx="' + gi + '"]');
-          if (node) node.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 150);
+        // the row may only exist once the commit has happened, so retry across the next frames
+        alignGroupToTop(gi);
+        requestAnimationFrame(function () {
+          alignGroupToTop(gi);
+          requestAnimationFrame(function () { alignGroupToTop(gi); });
+        });
       };
 
       // jump to the n-th match, cycling; also reveal the group in the outline.
@@ -3996,6 +4606,10 @@ window.__ModuleLoader__.load({
           if (!open) return;
           swallow(e);
           setNavIdx(-1);
+          // Esc is a way of LEAVING the docked panel, so it records the same thing the ✕ does.
+          // Without this the memory kept whatever the last ✕ close had stored, and reopening
+          // would offer to go back to a row the reader had left two closes ago.
+          noteClosed("dock");
           setOpen(false);
         }
       };
@@ -4050,7 +4664,14 @@ window.__ModuleLoader__.load({
       // travelling when the curtain took over, which looked like it flashed away.
       var panelAway = !open || panelAside === "tuck";
       var slide = panelAway ? "0.28s " + EASE : "0.6s " + EASE;
-      var panelTransition = (zoomJustChanged ? "" : "left " + slide + ", ")
+      // The slide is a TRANSFORM, not `left`. Animating `left` re-lays out the whole panel —
+      // header, toolbar and every rendered outline row — on every frame of the animation, and
+      // once a long session has loaded thousands of rows that layout can no longer keep up
+      // with the (compositable) `clip-path` wipe next to it: the wipe ran on while the slide
+      // stalled, which is the "a line sweeps across and the panel never really slides" the
+      // reader reported. A transform is handed to the compositor, so the animation no longer
+      // depends on how big the list is.
+      var panelTransition = (zoomJustChanged ? "" : "transform " + slide + ", ")
         + "clip-path " + slide + ", opacity " + (panelAway ? "0.14s ease 0.26s" : "0.45s ease");
 
       // clip the panel at the dock edge while collapsed, so sliding away looks
@@ -4142,7 +4763,7 @@ window.__ModuleLoader__.load({
           viewBox: "0 0 14 14",
           fill: "none",
           stroke: "currentColor",
-          strokeWidth: 1.8,
+          strokeWidth: 2.2,
           strokeLinecap: "round",
           style: { display: "block" },
           children: [
@@ -4163,13 +4784,18 @@ window.__ModuleLoader__.load({
           viewBox: "0 0 14 14",
           fill: "none",
           stroke: "currentColor",
-          strokeWidth: 1.8,
+          strokeWidth: 2.2,
           strokeLinecap: "round",
           strokeLinejoin: "round",
           style: { display: "block" },
           children: [
-            react_jsx_runtime.jsx("rect", { x: 1.6, y: 2.4, width: 10.8, height: 7.2, rx: 1.6 }),
-            react_jsx_runtime.jsx("path", { d: "M4.6 9.6v2.6l2.8-2.6" })
+            // A slightly LARGER bubble (11.4 x 7.7), and the whole glyph sits a touch BELOW the
+            // box centre on purpose: the bubble body is the visual mass while the tail hangs
+            // off the bottom-left, so a geometrically centred bubble reads as top-heavy. The
+            // stroke bbox is 1.4..13.8 (centre 7.6, i.e. 0.6 low) and the horizontal centre is
+            // still exactly 7.
+            react_jsx_runtime.jsx("rect", { x: 1.3, y: 2.5, width: 11.4, height: 7.7, rx: 1.7 }),
+            react_jsx_runtime.jsx("path", { d: "M4.5 10.2v2.5l2.9-2.5" })
           ]
         }),
         { "data-questions": questionsOnly ? "on" : "off" }
@@ -4184,14 +4810,16 @@ window.__ModuleLoader__.load({
           viewBox: "0 0 24 24",
           // overflow visible: the stroke may extend past the
           // viewBox without being clipped at the svg boundary
-          style: { display: "block", transform: "translate(-1px, -1px)", overflow: "visible" },
+          style: { display: "block", overflow: "visible" },
           fill: "none",
           stroke: "currentColor",
           strokeWidth: 3.6,
           strokeLinecap: "round",
           children: [
-            react_jsx_runtime.jsx("circle", { cx: 11, cy: 11, r: 7 }),
-            react_jsx_runtime.jsx("line", { x1: 21, y1: 21, x2: 16, y2: 16 })
+            // centred by geometry (bbox 3.5..20.5, centre 12,12) rather than by a nudge:
+            // a fractional translate leaves the glyph a half pixel off in a round button
+            react_jsx_runtime.jsx("circle", { cx: 10.5, cy: 10.5, r: 7 }),
+            react_jsx_runtime.jsx("line", { x1: 20.5, y1: 20.5, x2: 15.5, y2: 15.5 })
           ]
         })
       );
@@ -4202,13 +4830,14 @@ window.__ModuleLoader__.load({
           width: tbIconLg,
           height: tbIconLg,
           viewBox: "0 0 24 24",
-          style: { display: "block", transform: "translate(1px, 0px)", overflow: "visible" },
+          style: { display: "block", overflow: "visible" },
           fill: "none",
           stroke: "currentColor",
           strokeWidth: 3.4,
           strokeLinecap: "round",
           children: [
-            // cross lines span 5..19, intersection (12,12) centered
+            // cross lines span 5..19, intersection (12,12) centered — no nudge: a translate
+            // here is what left the reader's ✕ visibly right of the round button's centre
             react_jsx_runtime.jsx("line", { x1: 5, y1: 5, x2: 19, y2: 19 }),
             react_jsx_runtime.jsx("line", { x1: 19, y1: 5, x2: 5, y2: 19 })
           ]
@@ -4279,7 +4908,7 @@ window.__ModuleLoader__.load({
       var levelsPopSheetEl = (sheetOpen && (levelsOpen || levelsClosing)) ? buildLevelsPop(true) : null;
       // dock toggle: the triangle tips toward the side it will move TO
       var dockBtnEl = iconBtn(toggleDock, dockRight ? T("handle.dockLeft") : T("handle.dockRight"), dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: -1 } : { x: 1, y: -1 });
-      // the curtain button: a surface with an arrow rising out of it
+      // the curtain button: a surface with the arrow dropping out of its TOP edge
       var sheetBtnEl = react_jsx_runtime.jsx("button", {
         className: "dqt-sheet-btn",
         onClick: openSheet,
@@ -4317,16 +4946,22 @@ window.__ModuleLoader__.load({
           strokeWidth: 1.8,
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          style: { display: "block" },
+          style: { display: "block", overflow: "visible" },
           children: [
-            react_jsx_runtime.jsx("rect", { x: 1.6, y: 3.2, width: 10.8, height: 9.2, rx: 1.6 }),
-            react_jsx_runtime.jsx("path", { d: "M7 9.6V5.6M4.9 7.7L7 5.6l2.1 2.1" })
+            // A landscape surface 12.0 x 9.0 (centred in the 14 box: 1.0..13.0 / 2.5..11.5) —
+            // neither the portrait slab nor the flat strip the earlier attempts were. The
+            // rectangle itself carries the SAME border weight as the questions bubble (2.2,
+            // via its own strokeWidth) while the arrow keeps the lighter inherited 1.8, so the
+            // frame reads as the frame and the arrow stays a mark inside it. `overflow:
+            // visible` because the 2.2 border on a 12-wide rect reaches x = -0.1.
+            react_jsx_runtime.jsx("rect", { x: 1.0, y: 2.5, width: 12.0, height: 9.0, rx: 1.6, strokeWidth: 2.2 }),
+            react_jsx_runtime.jsx("path", { d: "M7 2.5V9.1M5.2 7.3L7 9.1l1.8-1.8" })
           ]
         })
       });
       // collapse (docked panel only): thick SVG cross, nudged slightly down
       var headerCloseBtnEl = react_jsx_runtime.jsx("button", {
-        onClick: function () { setOpen(false); },
+        onClick: function () { noteClosed("dock"); setOpen(false); },
         title: T("handle.collapse"),
         style: {
           width: 24,
@@ -4353,13 +4988,13 @@ window.__ModuleLoader__.load({
           width: 15,
           height: 15,
           viewBox: "0 0 24 24",
-          style: { display: "block", transform: "translate(1px, 0px)", overflow: "visible" },
+          style: { display: "block", overflow: "visible" },
           fill: "none",
           stroke: "currentColor",
           strokeWidth: 3.4,
           strokeLinecap: "round",
           children: [
-            // cross lines span 5..19, intersection (12,12) centered
+            // cross lines span 5..19, intersection (12,12) centered (no nudge here either)
             react_jsx_runtime.jsx("line", { x1: 5, y1: 5, x2: 19, y2: 19 }),
             react_jsx_runtime.jsx("line", { x1: 19, y1: 5, x2: 5, y2: 19 })
           ]
@@ -4699,6 +5334,12 @@ window.__ModuleLoader__.load({
         "aria-label": T("a11y.list"),
         style: {
           overflowY: "auto",
+          // We are the only thing that holds the reader's place in this list (see the
+          // paging block): the browser's own scroll anchoring would also adjust
+          // `scrollTop` when a ghost turns into a real subtree, and two compensations for
+          // one growth fight each other — the browser's is invisible to our measurement,
+          // so our correction would then overshoot and the content would jump UP.
+          overflowAnchor: "none",
           // NO top padding: a sticky child is confined to its containing
           // block, so a padded scroll container would hold the pinned group
           // header that many pixels below the toolbar (a visible gap). Spacing
@@ -4762,6 +5403,10 @@ window.__ModuleLoader__.load({
           ]
         })
       }) : null;
+      // Whether the one-shot "back to where I left this surface" button is on: measured here,
+      // after every piece of this pass's chrome geometry is known, and against the memory of
+      // the surface that is actually on screen (see the restore block near the top).
+      var showBack = awayFromRestore(listRef.current);
       // the outline and the search column share one row in BOTH layouts, so the list
       // is never moved between parents when the curtain opens or closes
       var bodyRowEl = react_jsx_runtime.jsx("div", {
@@ -4819,6 +5464,7 @@ window.__ModuleLoader__.load({
           color: C.text,
           opacity: panelOpacity,
           clipPath: panelClip,
+          transform: panelTransform,
           // inner shadow only (no outer): theme-aware (white bevel in dark mode,
           // soft shade in light) — outer shadow would be clipped by the collapse
           // clip-path and the panel edges.
@@ -4899,8 +5545,10 @@ window.__ModuleLoader__.load({
               // curtain it also clears the pushed-in search column
               right: (sheetOpen && sheetColW > 0 ? SHEET_SEARCH_W : 0) + 18,
               bottom: 12,
-              width: 26,
-              height: 26,
+              // the curtain scales up every other control (24 -> 32); this floating button
+              // was the one left behind at the docked size
+              width: sheetOpen ? 34 : 26,
+              height: sheetOpen ? 34 : 26,
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
@@ -4924,8 +5572,8 @@ window.__ModuleLoader__.load({
               transition: "opacity 0.22s ease, transform 0.22s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease"
             },
             children: react_jsx_runtime.jsx("svg", {
-              width: 14,
-              height: 14,
+              width: sheetOpen ? 18 : 14,
+              height: sheetOpen ? 18 : 14,
               viewBox: "0 0 14 14",
               fill: "none",
               stroke: "currentColor",
@@ -4939,6 +5587,67 @@ window.__ModuleLoader__.load({
               ]
             })
           }),
+          // "back to the place I scrolled to": the mirror of the button above, in the
+          // list's upper-right corner, arrow pointing UP. It appears only while the list is
+          // far from the position the reader last reached by wheel/key — the follow and the
+          // curtain handoff both move the outline for the reader, and until now there was no
+          // way back to where they had been browsing. Same surface vocabulary and same
+          // curtain scaling as the bottom button.
+          react_jsx_runtime.jsx("button", {
+            onClick: backToBrowse,
+            className: "dqt-top-btn",
+            "data-at-mine": showBack ? "off" : "on",
+            title: T("outline.backToMine"),
+            tabIndex: showBack ? 0 : -1,
+            "aria-hidden": showBack ? undefined : "true",
+            onMouseEnter: function (e) {
+              e.currentTarget.style.color = C.accent;
+              e.currentTarget.style.borderColor = C.groupEdgeSoft;
+            },
+            onMouseLeave: function (e) {
+              e.currentTarget.style.color = C.text;
+              e.currentTarget.style.borderColor = C.panelBorder;
+            },
+            style: {
+              position: "absolute",
+              right: (sheetOpen && sheetColW > 0 ? SHEET_SEARCH_W : 0) + 18,
+              // below whatever chrome this surface has (measured, see listTop)
+              top: listTop + 12,
+              width: sheetOpen ? 34 : 26,
+              height: sheetOpen ? 34 : 26,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0,
+              background: "var(--dsw-specific-menu, rgba(44, 49, 60, 0.99))",
+              border: "1px solid " + C.panelBorder,
+              borderRadius: "50%",
+              cornerShape: "round",
+              color: C.text,
+              cursor: "pointer",
+              zIndex: 6,
+              boxShadow: "0 3px 10px rgba(0, 0, 0, 0.30)",
+              opacity: showBack ? 1 : 0,
+              transform: showBack ? "translateY(0)" : "translateY(-6px)",
+              pointerEvents: showBack ? "auto" : "none",
+              transition: "opacity 0.22s ease, transform 0.22s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease"
+            },
+            children: react_jsx_runtime.jsx("svg", {
+              width: sheetOpen ? 18 : 14,
+              height: sheetOpen ? 18 : 14,
+              viewBox: "0 0 14 14",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 1.8,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              style: { display: "block" },
+              children: [
+                react_jsx_runtime.jsx("polyline", { points: "3.5,9.5 7,6 10.5,9.5" }),
+                react_jsx_runtime.jsx("line", { x1: 3.5, y1: 3, x2: 10.5, y2: 3 })
+              ]
+            })
+          }),
           toastEl,
           // Polite live region: match stepping, result counts and cursor moves land
           // here. Visually hidden (`.dqt-sr`) — it exists for assistive tech only.
@@ -5138,7 +5847,14 @@ window.__ModuleLoader__.load({
         title: T("sheet.openHandle"),
         onClick: function () {
           var el = sheetHandleRef.current;
-          if (el && el.parentElement && el.parentElement.style) el.parentElement.style.transform = "scaleY(0.12)";
+          // Pressed FLUSH into the line — `scaleY(0)`, not a small remainder. At 0.12 the
+          // 17px droplet still had ~2px of dome sitting on the strip once the press had
+          // landed, and because the element only leaves the tree a beat later, that
+          // sliver hung there motionless and was then removed in a single frame: the
+          // "it stops, then it is suddenly gone" the reader reported. Collapsed to zero
+          // it sinks out of sight exactly when the press lands, and its hit area goes
+          // with it.
+          if (el && el.parentElement && el.parentElement.style) el.parentElement.style.transform = "scaleY(0)";
           setSheetHandleGone(false);
           // The press has to be SEEN before the curtain takes the stage. With the panel
           // open it already is: the panel's own 300ms tuck comes first. Collapsed, the
@@ -5898,9 +6614,13 @@ window.__ModuleLoader__.load({
     // A turn the paged event window has not loaded yet: the host outline still
     // names it (number + bounded previews), so the outline covers the whole
     // session. Clicking pages that turn in through the session's jump loader.
-    function renderGhostGroup(g, gi, C, extra) {
-      extra = extra || {};
-      var children = [
+    // What an unloaded group shows: the badge, the prompt, and the host's own response
+    // preview. That preview is budgeted by the host at up to THREE rail-card lines, so it
+    // is rendered at three lines and legibly — clamped to two at 0.65 opacity it read as
+    // "there is nothing here but my own question", which is exactly what the reader
+    // reported.
+    function ghostBody(C, g) {
+      var out = [
         react_jsx_runtime.jsx("div", {
           style: { display: "flex", alignItems: "center", gap: 5, minWidth: 0 },
           children: [
@@ -5916,11 +6636,16 @@ window.__ModuleLoader__.load({
         })
       ];
       if (g.preview) {
-        children.push(react_jsx_runtime.jsx("div", {
-          style: { fontSize: 10, lineHeight: "13px", color: C.muted, opacity: 0.65, marginTop: 1, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
+        out.push(react_jsx_runtime.jsx("div", {
+          style: { fontSize: 10.5, lineHeight: "14px", color: C.muted, opacity: 0.8, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical" },
           children: g.preview
         }));
       }
+      return out;
+    }
+    function renderGhostGroup(g, gi, C, extra) {
+      extra = extra || {};
+      var children = ghostBody(C, g);
       return react_jsx_runtime.jsx("div", {
         onClick: function () { extra.onOpenTurn(g.turn, g.seq); },
         onMouseEnter: function (e) {
@@ -6256,7 +6981,8 @@ window.__ModuleLoader__.load({
         field("handle", T("settings.handle"), T("settings.handle.tip"), handleControl, false),
         field("fuzzy", T("settings.fuzzy"), "", onoff(prefs.fuzzy, function (v) { commit({ fuzzy: v }); }), true),
         field("hover", T("settings.hover"), "", onoff(prefs.hover, function (v) { commit({ hover: v }); }), true),
-        field("remember", T("settings.remember"), T("settings.remember.tip"), onoff(prefs.remember, function (v) { commit({ remember: v }); }), true),
+        field("remember", T("settings.remember"), "", onoff(prefs.remember, function (v) { commit({ remember: v }); }), true),
+        field("autoLoad", T("settings.autoLoad"), "", onoff(prefs.autoLoad, function (v) { commit({ autoLoad: v }); }), true),
         field("debug", T("settings.debug"), T("settings.debug.tip"), onoff(prefs.debug, function (v) { commit({ debug: v }); }), true, true)
       ];
       return react_jsx_runtime.jsxs("li", {
@@ -6461,7 +7187,10 @@ window.__ModuleLoader__.load({
         // not a detached pill). It grows out of the line when it appears — after a
         // retract as much as on first paint — and the click squeezes it flat against
         // the line before the curtain takes over (see the element's own transform).
-        "@keyframes dqt-handle-pop{from{transform:scaleY(0.06)}to{transform:scaleY(1)}}" +
+        // Both ends of the pair are flush with the line — 0 -> 1 here, 1 -> 0 on the
+        // press — so the two directions are one motion and its rewind in their
+        // endpoints as well as in their curves.
+        "@keyframes dqt-handle-pop{from{transform:scaleY(0)}to{transform:scaleY(1)}}" +
         ".dqt-sheet-handle{transform-origin:50% 100%}" +
         // coming back it is the press read backwards: FAST OUT OF THE LINE — 74% of the
         // easing is done 30ms in — and then the rest settles over the remaining 170ms.