@aiti-ai/aiti-msg-nav 0.0.0-stage → 0.1.8

package/dist/aiti-msg-nav-client.mjs

@@ -0,0 +1,841 @@
+let _ctx = null;
+function __setCtx(ctx) {
+  _ctx = ctx;
+}
+function c(name) {
+  return _ctx?.[name] ?? (() => void 0);
+}
+function createElement(...args) {
+  return c("h").call(null, ...args);
+}
+function mergeKey(args) {
+  const [type, props, key, ...rest] = args;
+  if (props && typeof props === "object") {
+    const merged = { ...props };
+    if (key !== void 0 && key !== null) merged.key = key;
+    return [type, merged, ...rest];
+  }
+  return args;
+}
+const jsx = (...args) => createElement(...mergeKey(args));
+const jsxs = (...args) => {
+  const props = args[1];
+  const children = props?.children;
+  if (Array.isArray(children)) {
+    for (const c2 of children) {
+      if (c2 && typeof c2 === "object" && c2._store) {
+        c2._store.validated = 1;
+      }
+    }
+  }
+  return createElement(...mergeKey(args));
+};
+const useState = (init) => c("useState")(init);
+const useEffect = (fn, deps) => c("useEffect")(fn, deps);
+const useRef = (v) => c("useRef")(v);
+const useCallback = (fn, deps) => c("useCallback")(fn, deps);
+function t(key, params) {
+  const fn = _ctx?.t;
+  return typeof fn === "function" ? fn(key, params) : key;
+}
+function getFeatures() {
+  const fn = _ctx?.getFeatures;
+  return typeof fn === "function" ? fn() : {};
+}
+function onFeatureChange(cb) {
+  const fn = _ctx?.onFeatureChange;
+  return typeof fn === "function" ? fn(cb) : () => {
+  };
+}
+const SCROLL_ANCHOR_THRESHOLD = 80;
+const CHAT_MINIMAP_WIDTH = 4;
+const TOOLBAR_W = 44;
+const TOOLBAR_MIN_H = 206;
+function getMsgEls(container) {
+  return Array.from(container.querySelectorAll("[data-chat-msg-role]"));
+}
+function getUserEls(container) {
+  return getMsgEls(container).filter((el) => el.getAttribute("data-chat-msg-role") === "user");
+}
+function elTopInContainer(el, c2) {
+  if (!el || !el.isConnected) return -1;
+  return el.getBoundingClientRect().top - c2.getBoundingClientRect().top + c2.scrollTop;
+}
+function useWakeLock(active) {
+  const [supported, setSupported] = useState(false);
+  useEffect(() => {
+    if (typeof navigator !== "undefined" && "wakeLock" in navigator) setSupported(true);
+  }, []);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    if (typeof navigator === "undefined" || !("wakeLock" in navigator)) return;
+    let disposed = false;
+    const acquire = async () => {
+      if (disposed || !activeRef.current || sentinelRef.current) return;
+      try {
+        const sentinel = await navigator.wakeLock.request("screen");
+        if (disposed || !activeRef.current) {
+          sentinel.release().catch(() => {
+          });
+          return;
+        }
+        sentinelRef.current = sentinel;
+        sentinel.addEventListener("release", () => {
+          if (sentinelRef.current === sentinel) sentinelRef.current = null;
+          if (activeRef.current && !disposed && document.visibilityState === "visible") acquire();
+        });
+      } catch {
+      }
+    };
+    acquire();
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") acquire();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      disposed = true;
+      document.removeEventListener("visibilitychange", onVisibility);
+      const s = sentinelRef.current;
+      sentinelRef.current = null;
+      if (s) s.release().catch(() => {
+      });
+    };
+  }, [active]);
+  return supported;
+}
+const DEFAULT_POS = { align: "right", y: 12 };
+function ArrowUp() {
+  return /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) });
+}
+function ArrowDown() {
+  return /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) });
+}
+function PrevUserIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 5, r: 1.6 }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8v6" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 13h8" })
+  ] });
+}
+function NextUserIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: 12, cy: 19, r: 1.6 }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-6" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 11h8" })
+  ] });
+}
+const btnBase = {
+  pointerEvents: "auto",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: TOOLBAR_W,
+  height: TOOLBAR_W,
+  borderRadius: "50%",
+  border: "1px solid var(--border)",
+  background: "color-mix(in srgb, var(--bg-panel) 92%, transparent)",
+  color: "var(--text-muted)",
+  cursor: "pointer",
+  boxShadow: "0 2px 8px rgba(15,23,42,0.18)",
+  transition: "color 0.12s, background 0.12s"
+};
+const tooltipTop = {
+  earliest: 17,
+  prevUser: 71,
+  nextUser: 125,
+  latest: 179
+};
+function ScrollNavToolbar(props) {
+  const agentRunning = props.agentRunning === true;
+  const isMobile = typeof props.isMobile === "boolean" ? props.isMobile : typeof window !== "undefined" && window.innerWidth < 768;
+  const revealHistoryRef = useRef(null);
+  revealHistoryRef.current = props.revealHistory ?? null;
+  const [, force] = useState(0);
+  useEffect(() => onFeatureChange(() => force((v) => v + 1)), []);
+  const features = getFeatures();
+  const showToolbar = features["show.toolbar"] !== false;
+  const keepAwakeFeature = features["behavior.keepAwake"] !== false;
+  const [pos, setPos] = useState(() => {
+    try {
+      const raw = localStorage.getItem("pi-scroll-toolbar-pos");
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed.y === "number" && (parsed.align === "left" || parsed.align === "right")) {
+          return { align: parsed.align, y: parsed.y };
+        }
+      }
+    } catch {
+    }
+    return DEFAULT_POS;
+  });
+  const posRef = useRef(pos);
+  const setPosAndRef = useCallback((p) => {
+    posRef.current = p;
+    setPos(p);
+  }, []);
+  const dragRef = useRef(null);
+  const toolbarRef = useRef(null);
+  const dragModeRef = useRef(false);
+  const tapNavigatedRef = useRef(false);
+  const lastNavTargetRef = useRef(null);
+  const [scrollAnchors, setScrollAnchors] = useState({ atTop: true, atBottom: true });
+  const [scrollActive, setScrollActive] = useState(false);
+  const [scrollBtnsHovered, setScrollBtnsHovered] = useState(false);
+  const [scrollTooltip, setScrollTooltip] = useState(null);
+  const tooltipTimerRef = useRef(null);
+  const showScrollTooltip = useCallback((kind) => {
+    if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
+    setScrollTooltip(kind);
+    tooltipTimerRef.current = setTimeout(() => setScrollTooltip(null), 1500);
+  }, []);
+  const hideScrollTooltip = useCallback(() => {
+    if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
+    tooltipTimerRef.current = null;
+    setScrollTooltip(null);
+  }, []);
+  const scrollIdleTimerRef = useRef(null);
+  const tailFollowUntilRef = useRef(0);
+  const earliestFollowUntilRef = useRef(0);
+  const navSeqRef = useRef(0);
+  const cancelTailFollow = useCallback(() => {
+    tailFollowUntilRef.current = 0;
+  }, []);
+  const cancelEarliestFollow = useCallback(() => {
+    earliestFollowUntilRef.current = 0;
+  }, []);
+  const trackedContainerRef = useRef(null);
+  const trackedContentRef = useRef(null);
+  const roRef = useRef(null);
+  const recomputeTimerRef = useRef(null);
+  const syncFrameRef = useRef(null);
+  const mousePosRef = useRef({ x: -9999, y: -9999 });
+  const toolbarRectRef = useRef(null);
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      mousePosRef.current = { x: e.clientX, y: e.clientY };
+      const r = toolbarRectRef.current;
+      if (!r) return;
+      const inside = e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+      setScrollBtnsHovered(inside);
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    return () => window.removeEventListener("mousemove", onMouseMove);
+  }, []);
+  const [keepAwakeToast, setKeepAwakeToast] = useState(false);
+  const keepAwakeToastTimerRef = useRef(null);
+  const tooltipShowCountRef = useRef(0);
+  const keepAwakeToastCountRef = useRef(0);
+  const [keepAwake, setKeepAwake] = useState(false);
+  const wakeLockSupported = useWakeLock(keepAwake && agentRunning);
+  const longPressTimerRef = useRef(null);
+  const didLongPressRef = useRef(false);
+  const clearLongPress = useCallback(() => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+  }, []);
+  const onToolbarPointerDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    dragRef.current = { startX: e.clientX, startY: e.clientY, startY0: pos.y, moved: false, pointerId: e.pointerId };
+    dragModeRef.current = true;
+    const onMove = (ev) => {
+      const drag = dragRef.current;
+      if (!drag || ev.pointerId !== drag.pointerId) return;
+      const dx = ev.clientX - drag.startX;
+      const dy = ev.clientY - drag.startY;
+      if (!drag.moved && Math.abs(dx) + Math.abs(dy) < 8) return;
+      drag.moved = true;
+      try {
+        ev.preventDefault();
+      } catch {
+      }
+      clearLongPress();
+      const el = toolbarRef.current;
+      if (!el) return;
+      const maxY = Math.max(8, window.innerHeight - el.offsetHeight - 8);
+      const ny = Math.min(Math.max(8, drag.startY0 + dy), maxY);
+      const nx = ev.clientX < window.innerWidth / 2 ? "left" : "right";
+      setPosAndRef({ align: nx, y: ny });
+    };
+    const onUp = () => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const wasDrag = drag.moved;
+      dragRef.current = null;
+      dragModeRef.current = false;
+      if (wasDrag) {
+        try {
+          localStorage.setItem("pi-scroll-toolbar-pos", JSON.stringify({ align: posRef.current.align, y: posRef.current.y }));
+        } catch {
+        }
+      }
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+    window.addEventListener("pointermove", onMove, { passive: false });
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+  }, [pos.y, clearLongPress, setPosAndRef]);
+  const recomputeAnchors = useCallback(() => {
+    const c2 = trackedContainerRef.current;
+    if (!c2 || !c2.isConnected) return;
+    const atTop = c2.scrollTop <= SCROLL_ANCHOR_THRESHOLD;
+    const atBottom = c2.scrollHeight - c2.scrollTop - c2.clientHeight <= SCROLL_ANCHOR_THRESHOLD;
+    setScrollAnchors((prev) => prev.atTop === atTop && prev.atBottom === atBottom ? prev : { atTop, atBottom });
+    if (Date.now() < tailFollowUntilRef.current) {
+      const dist = c2.scrollHeight - c2.scrollTop - c2.clientHeight;
+      if (dist > 4) c2.scrollTo({ top: c2.scrollHeight, behavior: "auto" });
+    }
+    if (Date.now() < earliestFollowUntilRef.current) {
+      if (c2.scrollTop > 0) c2.scrollTo({ top: 0, behavior: "auto" });
+    }
+  }, []);
+  const scheduleRecompute = useCallback(() => {
+    if (recomputeTimerRef.current) return;
+    recomputeTimerRef.current = setTimeout(() => {
+      recomputeTimerRef.current = null;
+      recomputeAnchors();
+    }, 120);
+  }, [recomputeAnchors]);
+  const observeContainer = useCallback((c2) => {
+    roRef.current?.disconnect();
+    tailFollowUntilRef.current = 0;
+    earliestFollowUntilRef.current = 0;
+    const ro = new ResizeObserver(scheduleRecompute);
+    ro.observe(c2);
+    trackedContainerRef.current = c2;
+    trackedContentRef.current = null;
+    const content = c2.firstElementChild;
+    if (content) {
+      ro.observe(content);
+      trackedContentRef.current = content;
+    }
+    roRef.current = ro;
+    recomputeAnchors();
+  }, [scheduleRecompute, recomputeAnchors]);
+  const syncContainer = useCallback(() => {
+    const next = document.querySelector("[data-chat-scroll]");
+    if (next && next === trackedContainerRef.current) {
+      if (!roRef.current) {
+        observeContainer(next);
+        return;
+      }
+      const content = next.firstElementChild;
+      if (content && content !== trackedContentRef.current) {
+        trackedContentRef.current = content;
+        roRef.current?.observe(content);
+      }
+      return;
+    }
+    if (!next && !trackedContainerRef.current) return;
+    if (next) {
+      observeContainer(next);
+    } else {
+      roRef.current?.disconnect();
+      roRef.current = null;
+      trackedContainerRef.current = null;
+      trackedContentRef.current = null;
+      tailFollowUntilRef.current = 0;
+      earliestFollowUntilRef.current = 0;
+      setScrollAnchors((prev) => prev.atTop && prev.atBottom ? prev : { atTop: true, atBottom: true });
+    }
+  }, [observeContainer]);
+  const getContainer = useCallback(() => {
+    if (trackedContainerRef.current?.isConnected) return trackedContainerRef.current;
+    const next = document.querySelector("[data-chat-scroll]");
+    if (next && next !== trackedContainerRef.current) observeContainer(next);
+    return trackedContainerRef.current;
+  }, [observeContainer]);
+  const handleScrollEvent = useCallback((e) => {
+    if (e.target !== trackedContainerRef.current) syncContainer();
+    recomputeAnchors();
+    if (e.target === trackedContainerRef.current) {
+      setScrollActive(true);
+      if (scrollIdleTimerRef.current) clearTimeout(scrollIdleTimerRef.current);
+      scrollIdleTimerRef.current = setTimeout(() => setScrollActive(false), 2e3);
+    }
+  }, [recomputeAnchors, syncContainer]);
+  useEffect(() => {
+    syncContainer();
+    const onScroll = (e) => handleScrollEvent(e);
+    document.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    const mo = new MutationObserver(() => {
+      if (syncFrameRef.current !== null) return;
+      syncFrameRef.current = requestAnimationFrame(() => {
+        syncFrameRef.current = null;
+        syncContainer();
+      });
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      document.removeEventListener("scroll", onScroll, { capture: true });
+      mo.disconnect();
+      roRef.current?.disconnect();
+      roRef.current = null;
+      trackedContainerRef.current = null;
+      trackedContentRef.current = null;
+      if (recomputeTimerRef.current) {
+        clearTimeout(recomputeTimerRef.current);
+        recomputeTimerRef.current = null;
+      }
+      if (syncFrameRef.current !== null) {
+        cancelAnimationFrame(syncFrameRef.current);
+        syncFrameRef.current = null;
+      }
+    };
+  }, [handleScrollEvent, syncContainer]);
+  const sessionId = props.sessionId;
+  const prevSessionIdRef = useRef(sessionId);
+  useEffect(() => {
+    if (prevSessionIdRef.current === sessionId) return;
+    prevSessionIdRef.current = sessionId;
+    tailFollowUntilRef.current = 0;
+    earliestFollowUntilRef.current = 0;
+    syncFrameRef.current !== null && (cancelAnimationFrame(syncFrameRef.current), syncFrameRef.current = null);
+    syncContainer();
+  }, [sessionId, syncContainer]);
+  useEffect(() => {
+    const onWheel = (e) => {
+      if (e.deltaY < 0) cancelTailFollow();
+      else if (e.deltaY > 0) cancelEarliestFollow();
+    };
+    const onTouchStart = () => {
+      cancelTailFollow();
+      cancelEarliestFollow();
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowUp" || e.key === "PageUp" || e.key === "Home") cancelTailFollow();
+      if (e.key === "ArrowDown" || e.key === "PageDown" || e.key === "End") cancelEarliestFollow();
+    };
+    window.addEventListener("wheel", onWheel, { passive: true, capture: true });
+    window.addEventListener("touchstart", onTouchStart, { passive: true, capture: true });
+    window.addEventListener("keydown", onKey, { capture: true });
+    return () => {
+      window.removeEventListener("wheel", onWheel, { capture: true });
+      window.removeEventListener("touchstart", onTouchStart, { capture: true });
+      window.removeEventListener("keydown", onKey, { capture: true });
+    };
+  }, [cancelTailFollow, cancelEarliestFollow]);
+  useEffect(() => () => {
+    if (scrollIdleTimerRef.current) clearTimeout(scrollIdleTimerRef.current);
+    if (tooltipTimerRef.current) clearTimeout(tooltipTimerRef.current);
+    if (keepAwakeToastTimerRef.current) clearTimeout(keepAwakeToastTimerRef.current);
+    if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current);
+  }, []);
+  const showScrollButtons = (!scrollAnchors.atTop || !scrollAnchors.atBottom) && (scrollActive || !isMobile && scrollBtnsHovered);
+  useEffect(() => {
+    const el = toolbarRef.current;
+    if (!el) return;
+    const read = () => {
+      const r = el.getBoundingClientRect();
+      toolbarRectRef.current = { left: r.left, right: r.right, top: r.top, bottom: r.bottom };
+      const m = mousePosRef.current;
+      if (m.x >= r.left && m.x <= r.right && m.y >= r.top && m.y <= r.bottom) setScrollBtnsHovered(true);
+    };
+    read();
+    const onResize = () => {
+      const el2 = toolbarRef.current;
+      if (!el2) return;
+      const rr = el2.getBoundingClientRect();
+      toolbarRectRef.current = { left: rr.left, right: rr.right, top: rr.top, bottom: rr.bottom };
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [pos.align, pos.y, isMobile, showScrollButtons]);
+  const scrollToEarliest = useCallback(() => {
+    const c2 = getContainer();
+    if (!c2) return;
+    cancelTailFollow();
+    navSeqRef.current += 1;
+    if (revealHistoryRef.current) {
+      earliestFollowUntilRef.current = Date.now() + 8e3;
+      revealHistoryRef.current();
+      c2.scrollTo({ top: 0, behavior: "auto" });
+      recomputeAnchors();
+    } else {
+      c2.scrollTo({ top: 0, behavior: "smooth" });
+    }
+  }, [getContainer, cancelTailFollow, recomputeAnchors]);
+  const scrollToLatest = useCallback(() => {
+    const c2 = getContainer();
+    if (!c2) return;
+    cancelEarliestFollow();
+    navSeqRef.current += 1;
+    tailFollowUntilRef.current = Date.now() + 2500;
+    c2.scrollTo({ top: c2.scrollHeight, behavior: "smooth" });
+    recomputeAnchors();
+  }, [getContainer, recomputeAnchors, cancelEarliestFollow]);
+  const revealActionMenu = useCallback((el) => {
+    try {
+      const menuTarget = el.firstElementChild ?? el;
+      if (lastNavTargetRef.current && lastNavTargetRef.current !== menuTarget) {
+        lastNavTargetRef.current.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
+      }
+      menuTarget.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+      lastNavTargetRef.current = menuTarget;
+    } catch {
+    }
+  }, []);
+  const scrollToUserMessageRef = useRef(null);
+  const prevRevealUsedRef = useRef(false);
+  const scrollToUserMessage = useCallback((dir) => {
+    const seq = ++navSeqRef.current;
+    const c2 = getContainer();
+    if (!c2) return;
+    cancelTailFollow();
+    cancelEarliestFollow();
+    const allEls = getMsgEls(c2);
+    if (allEls.length === 0) return;
+    const userEls = getUserEls(c2);
+    if (dir === -1) {
+      let anchor = -1;
+      const limit = c2.scrollTop + 8;
+      for (let i = 0; i < userEls.length; i++) {
+        const t0 = elTopInContainer(userEls[i], c2);
+        if (t0 < 0) continue;
+        if (t0 <= limit + 4) {
+          anchor = i;
+          continue;
+        }
+        if (anchor === -1) anchor = i;
+        break;
+      }
+      if (anchor === -1) anchor = userEls.length - 1;
+      const anchorEl = userEls[anchor];
+      const anchorTop = elTopInContainer(anchorEl, c2);
+      const anchorVisible = anchorTop >= c2.scrollTop;
+      const start = anchorVisible ? anchor - 1 : anchor;
+      for (let i = start; i >= 0; i--) {
+        const el = userEls[i];
+        if (!el || !el.isConnected) continue;
+        const t0 = elTopInContainer(el, c2);
+        if (t0 < 0) continue;
+        c2.scrollTo({ top: Math.max(0, t0 - 24), behavior: "smooth" });
+        revealActionMenu(el);
+        prevRevealUsedRef.current = false;
+        return;
+      }
+    } else {
+      let anchor = -1;
+      for (let i = 0; i < allEls.length; i++) {
+        const el = allEls[i];
+        if (!el || !el.isConnected) continue;
+        const t0 = elTopInContainer(el, c2);
+        if (t0 < 0) continue;
+        if (t0 >= c2.scrollTop) {
+          anchor = i;
+          break;
+        }
+      }
+      if (anchor === -1) anchor = allEls.length - 1;
+      for (let i = anchor + 1; i < allEls.length; i++) {
+        const el = allEls[i];
+        if (!el || !el.isConnected || el.getAttribute("data-chat-msg-role") !== "user") continue;
+        const t0 = elTopInContainer(el, c2);
+        if (t0 < 0) continue;
+        c2.scrollTo({ top: Math.max(0, t0 - 24), behavior: "smooth" });
+        revealActionMenu(el);
+        return;
+      }
+      const distEnd = c2.scrollHeight - c2.scrollTop - c2.clientHeight;
+      if (distEnd > 4) {
+        cancelEarliestFollow();
+        tailFollowUntilRef.current = Date.now() + 1500;
+        c2.scrollTo({ top: c2.scrollHeight, behavior: "smooth" });
+        recomputeAnchors();
+      }
+    }
+    if (dir === -1) {
+      if (revealHistoryRef.current && !prevRevealUsedRef.current) {
+        prevRevealUsedRef.current = true;
+        earliestFollowUntilRef.current = Date.now() + 8e3;
+        revealHistoryRef.current();
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+          setTimeout(() => {
+            if (navSeqRef.current === seq) scrollToUserMessageRef.current?.(-1);
+          }, 60);
+        }));
+        return;
+      }
+      let attempts = 0;
+      const retry = async () => {
+        attempts += 1;
+        if (attempts > 3) return;
+        if (navSeqRef.current !== seq) return;
+        cancelEarliestFollow();
+        const c22 = getContainer();
+        if (!c22) return;
+        const h0 = c22.scrollHeight;
+        c22.scrollTo({ top: Math.min(c22.scrollHeight, 300), behavior: "auto" });
+        await new Promise((r) => setTimeout(r, 90));
+        c22.scrollTo({ top: 0, behavior: "auto" });
+        for (let i = 0; i < 20; i++) {
+          await new Promise((r) => setTimeout(r, 100));
+          if (navSeqRef.current !== seq) return;
+          if (i >= 2 && c22.scrollHeight !== h0) break;
+        }
+        if (getContainer()?.scrollHeight === h0) return;
+        setTimeout(() => {
+          if (navSeqRef.current === seq) scrollToUserMessageRef.current?.(-1);
+        }, 120);
+      };
+      retry();
+    }
+  }, [revealActionMenu, getContainer, cancelTailFollow, cancelEarliestFollow, recomputeAnchors]);
+  scrollToUserMessageRef.current = scrollToUserMessage;
+  const onHover = useCallback((kind) => (e) => {
+    if (tooltipShowCountRef.current < 3) {
+      tooltipShowCountRef.current += 1;
+      showScrollTooltip(kind);
+    }
+    e.currentTarget.style.background = "var(--bg-hover)";
+    e.currentTarget.style.color = "var(--text)";
+  }, [showScrollTooltip]);
+  const onHoverOut = useCallback((e) => {
+    hideScrollTooltip();
+    e.currentTarget.style.background = "color-mix(in srgb, var(--bg-panel) 92%, transparent)";
+    e.currentTarget.style.color = "var(--text-muted)";
+  }, [hideScrollTooltip]);
+  if (!showToolbar) return null;
+  const latestBtnStyle = {
+    ...btnBase,
+    border: keepAwake ? "1px solid color-mix(in srgb, var(--accent) 55%, var(--border))" : "1px solid var(--border)",
+    background: keepAwake ? "color-mix(in srgb, var(--accent) 18%, var(--bg-panel))" : "color-mix(in srgb, var(--bg-panel) 92%, transparent)",
+    color: keepAwake ? "var(--accent)" : "var(--text-muted)",
+    boxShadow: "0 2px 8px rgba(15,23,42,0.22)"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: toolbarRef,
+      style: {
+        position: "absolute",
+        left: pos.align === "left" ? 12 : void 0,
+        right: pos.align === "right" ? isMobile ? 12 : `max(${CHAT_MINIMAP_WIDTH + 12}px, calc((100% - 820px) / 2 - 12px))` : void 0,
+        top: pos.y,
+        width: TOOLBAR_W,
+        // hover 感知层：常驻（按钮隐藏后仍可把指针停在原位唤出）；pointerEvents:none 纯传感
+        minHeight: TOOLBAR_MIN_H,
+        zIndex: 30,
+        pointerEvents: "none",
+        touchAction: "none"
+      },
+      children: [
+        showScrollButtons && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onPointerDown: onToolbarPointerDown,
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              position: "relative",
+              zIndex: 30,
+              pointerEvents: "auto",
+              cursor: dragModeRef.current ? "grabbing" : "grab",
+              touchAction: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "scrollToEarliest",
+                  onClick: scrollToEarliest,
+                  onMouseEnter: onHover("earliest"),
+                  onMouseLeave: onHoverOut,
+                  style: btnBase,
+                  children: /* @__PURE__ */ jsx(ArrowUp, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "scrollToPrevUser",
+                  onClick: () => {
+                    if (tapNavigatedRef.current) {
+                      tapNavigatedRef.current = false;
+                      return;
+                    }
+                    scrollToUserMessage(-1);
+                  },
+                  onPointerUp: () => {
+                    const drag = dragRef.current;
+                    if (drag && !drag.moved) {
+                      tapNavigatedRef.current = true;
+                      scrollToUserMessage(-1);
+                    }
+                  },
+                  onMouseEnter: onHover("prevUser"),
+                  onMouseLeave: onHoverOut,
+                  style: btnBase,
+                  children: /* @__PURE__ */ jsx(PrevUserIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "scrollToNextUser",
+                  onClick: () => {
+                    if (tapNavigatedRef.current) {
+                      tapNavigatedRef.current = false;
+                      return;
+                    }
+                    scrollToUserMessage(1);
+                  },
+                  onPointerUp: () => {
+                    const drag = dragRef.current;
+                    if (drag && !drag.moved) {
+                      tapNavigatedRef.current = true;
+                      scrollToUserMessage(1);
+                    }
+                  },
+                  onMouseEnter: onHover("nextUser"),
+                  onMouseLeave: onHoverOut,
+                  style: btnBase,
+                  children: /* @__PURE__ */ jsx(NextUserIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    pointerEvents: "auto",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 60,
+                    height: 60,
+                    margin: -8,
+                    userSelect: "none",
+                    WebkitUserSelect: "none"
+                  },
+                  onPointerDown: (e) => {
+                    e.stopPropagation();
+                    clearLongPress();
+                    if (!keepAwakeFeature || !wakeLockSupported) return;
+                    longPressTimerRef.current = setTimeout(() => {
+                      didLongPressRef.current = true;
+                      const nowOn = !keepAwake;
+                      setKeepAwake(nowOn);
+                      document.getSelection()?.removeAllRanges();
+                      const prev = document.body.style.userSelect;
+                      document.body.style.userSelect = "none";
+                      if (nowOn && keepAwakeToastCountRef.current < 3) {
+                        keepAwakeToastCountRef.current += 1;
+                        setKeepAwakeToast(true);
+                      }
+                      if (keepAwakeToastTimerRef.current) clearTimeout(keepAwakeToastTimerRef.current);
+                      keepAwakeToastTimerRef.current = setTimeout(() => {
+                        setKeepAwakeToast(false);
+                        document.body.style.userSelect = prev;
+                      }, 2e3);
+                    }, 600);
+                  },
+                  onPointerUp: clearLongPress,
+                  onPointerCancel: clearLongPress,
+                  onPointerLeave: clearLongPress,
+                  onContextMenu: (e) => e.preventDefault(),
+                  children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "aria-label": "scrollToLatest",
+                      onClick: () => {
+                        if (didLongPressRef.current) {
+                          didLongPressRef.current = false;
+                          return;
+                        }
+                        scrollToLatest();
+                      },
+                      onMouseEnter: (e) => {
+                        if (tooltipShowCountRef.current < 3) {
+                          tooltipShowCountRef.current += 1;
+                          showScrollTooltip("latest");
+                        }
+                        e.currentTarget.style.background = keepAwake ? "color-mix(in srgb, var(--accent) 26%, var(--bg-panel))" : "var(--bg-hover)";
+                        e.currentTarget.style.color = keepAwake ? "var(--accent)" : "var(--text)";
+                      },
+                      onMouseLeave: (e) => {
+                        hideScrollTooltip();
+                        e.currentTarget.style.background = keepAwake ? "color-mix(in srgb, var(--accent) 18%, var(--bg-panel))" : "color-mix(in srgb, var(--bg-panel) 92%, transparent)";
+                        e.currentTarget.style.color = keepAwake ? "var(--accent)" : "var(--text-muted)";
+                      },
+                      style: latestBtnStyle,
+                      children: /* @__PURE__ */ jsx(ArrowDown, {})
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        scrollTooltip && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              right: "calc(100% + 10px)",
+              top: tooltipTop[scrollTooltip],
+              whiteSpace: "nowrap",
+              fontSize: 12,
+              color: "var(--text)",
+              background: "color-mix(in srgb, var(--bg-panel) 96%, transparent)",
+              border: "1px solid var(--border)",
+              borderRadius: 6,
+              padding: "4px 8px",
+              boxShadow: "0 2px 10px rgba(15,23,42,0.25)",
+              pointerEvents: "none",
+              zIndex: 31
+            },
+            children: t(scrollTooltip === "latest" ? "nav.latestHint" : `nav.${scrollTooltip}`)
+          }
+        ),
+        keepAwakeToast && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 12,
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: 40,
+              fontSize: 13,
+              color: "var(--text)",
+              background: "color-mix(in srgb, var(--bg-panel) 96%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--accent) 50%, var(--border))",
+              borderRadius: 8,
+              padding: "6px 14px",
+              boxShadow: "0 2px 12px rgba(15,23,42,0.25)",
+              pointerEvents: "none",
+              textAlign: "center",
+              maxWidth: "min(80vw, 480px)"
+            },
+            children: t("nav.keepAwakeOn")
+          }
+        )
+      ]
+    }
+  );
+}
+function register(ctx) {
+  __setCtx(ctx);
+  ctx.registerItems?.("chatOverlay", [{
+    id: "msg-nav-toolbar",
+    render: (props) => /* @__PURE__ */ jsx(
+      ScrollNavToolbar,
+      {
+        agentRunning: props.agentRunning === true,
+        isMobile: props.isMobile === true,
+        revealHistory: typeof props.revealHistory === "function" ? props.revealHistory : void 0,
+        sessionId: props.currentSession?.id
+      }
+    )
+  }]);
+}
+export {
+  register as default
+};