openclaw-multi-auto 1.3.6 → 1.3.8

package/ui/src/ui/app-scroll.test.ts

@@ -0,0 +1,275 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { handleChatScroll, scheduleChatScroll, resetChatScroll } from "./app-scroll.ts";
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                            */
+/* ------------------------------------------------------------------ */
+
+/** Minimal ScrollHost stub for unit tests. */
+function createScrollHost(
+  overrides: {
+    scrollHeight?: number;
+    scrollTop?: number;
+    clientHeight?: number;
+    overflowY?: string;
+  } = {},
+) {
+  const {
+    scrollHeight = 2000,
+    scrollTop = 1500,
+    clientHeight = 500,
+    overflowY = "auto",
+  } = overrides;
+
+  const container = {
+    scrollHeight,
+    scrollTop,
+    clientHeight,
+    style: { overflowY } as unknown as CSSStyleDeclaration,
+  };
+
+  // Make getComputedStyle return the overflowY value
+  vi.spyOn(window, "getComputedStyle").mockReturnValue({
+    overflowY,
+  } as unknown as CSSStyleDeclaration);
+
+  const host = {
+    updateComplete: Promise.resolve(),
+    querySelector: vi.fn().mockReturnValue(container),
+    style: { setProperty: vi.fn() } as unknown as CSSStyleDeclaration,
+    chatScrollFrame: null as number | null,
+    chatScrollTimeout: null as number | null,
+    chatHasAutoScrolled: false,
+    chatUserNearBottom: true,
+    chatNewMessagesBelow: false,
+    logsScrollFrame: null as number | null,
+    logsAtBottom: true,
+    topbarObserver: null as ResizeObserver | null,
+  };
+
+  return { host, container };
+}
+
+function createScrollEvent(scrollHeight: number, scrollTop: number, clientHeight: number) {
+  return {
+    currentTarget: { scrollHeight, scrollTop, clientHeight },
+  } as unknown as Event;
+}
+
+/* ------------------------------------------------------------------ */
+/*  handleChatScroll – threshold tests                                 */
+/* ------------------------------------------------------------------ */
+
+describe("handleChatScroll", () => {
+  it("sets chatUserNearBottom=true when within the 450px threshold", () => {
+    const { host } = createScrollHost({});
+    // distanceFromBottom = 2000 - 1600 - 400 = 0 → clearly near bottom
+    const event = createScrollEvent(2000, 1600, 400);
+    handleChatScroll(host, event);
+    expect(host.chatUserNearBottom).toBe(true);
+  });
+
+  it("sets chatUserNearBottom=true when distance is just under threshold", () => {
+    const { host } = createScrollHost({});
+    // distanceFromBottom = 2000 - 1151 - 400 = 449 → just under threshold
+    const event = createScrollEvent(2000, 1151, 400);
+    handleChatScroll(host, event);
+    expect(host.chatUserNearBottom).toBe(true);
+  });
+
+  it("sets chatUserNearBottom=false when distance is exactly at threshold", () => {
+    const { host } = createScrollHost({});
+    // distanceFromBottom = 2000 - 1150 - 400 = 450 → at threshold (uses strict <)
+    const event = createScrollEvent(2000, 1150, 400);
+    handleChatScroll(host, event);
+    expect(host.chatUserNearBottom).toBe(false);
+  });
+
+  it("sets chatUserNearBottom=false when scrolled well above threshold", () => {
+    const { host } = createScrollHost({});
+    // distanceFromBottom = 2000 - 500 - 400 = 1100 → way above threshold
+    const event = createScrollEvent(2000, 500, 400);
+    handleChatScroll(host, event);
+    expect(host.chatUserNearBottom).toBe(false);
+  });
+
+  it("sets chatUserNearBottom=false when user scrolled up past one long message (>200px <450px)", () => {
+    const { host } = createScrollHost({});
+    // distanceFromBottom = 2000 - 1250 - 400 = 350 → old threshold would say "near", new says "near"
+    // distanceFromBottom = 2000 - 1100 - 400 = 500 → old threshold would say "not near", new also "not near"
+    const event = createScrollEvent(2000, 1100, 400);
+    handleChatScroll(host, event);
+    expect(host.chatUserNearBottom).toBe(false);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/*  scheduleChatScroll – respects user scroll position                 */
+/* ------------------------------------------------------------------ */
+
+describe("scheduleChatScroll", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("scrolls to bottom when user is near bottom (no force)", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 1600,
+      clientHeight: 400,
+    });
+    // distanceFromBottom = 2000 - 1600 - 400 = 0 → near bottom
+    host.chatUserNearBottom = true;
+
+    scheduleChatScroll(host);
+    await host.updateComplete;
+
+    expect(container.scrollTop).toBe(container.scrollHeight);
+  });
+
+  it("does NOT scroll when user is scrolled up and no force", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 500,
+      clientHeight: 400,
+    });
+    // distanceFromBottom = 2000 - 500 - 400 = 1100 → not near bottom
+    host.chatUserNearBottom = false;
+    const originalScrollTop = container.scrollTop;
+
+    scheduleChatScroll(host);
+    await host.updateComplete;
+
+    expect(container.scrollTop).toBe(originalScrollTop);
+  });
+
+  it("does NOT scroll with force=true when user has explicitly scrolled up", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 500,
+      clientHeight: 400,
+    });
+    // User has scrolled up — chatUserNearBottom is false
+    host.chatUserNearBottom = false;
+    host.chatHasAutoScrolled = true; // Already past initial load
+    const originalScrollTop = container.scrollTop;
+
+    scheduleChatScroll(host, true);
+    await host.updateComplete;
+
+    // force=true should still NOT override explicit user scroll-up after initial load
+    expect(container.scrollTop).toBe(originalScrollTop);
+  });
+
+  it("DOES scroll with force=true on initial load (chatHasAutoScrolled=false)", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 500,
+      clientHeight: 400,
+    });
+    host.chatUserNearBottom = false;
+    host.chatHasAutoScrolled = false; // Initial load
+
+    scheduleChatScroll(host, true);
+    await host.updateComplete;
+
+    // On initial load, force should work regardless
+    expect(container.scrollTop).toBe(container.scrollHeight);
+  });
+
+  it("sets chatNewMessagesBelow when not scrolling due to user position", async () => {
+    const { host } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 500,
+      clientHeight: 400,
+    });
+    host.chatUserNearBottom = false;
+    host.chatHasAutoScrolled = true;
+    host.chatNewMessagesBelow = false;
+
+    scheduleChatScroll(host);
+    await host.updateComplete;
+
+    expect(host.chatNewMessagesBelow).toBe(true);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/*  Streaming: rapid chatStream changes should not reset scroll        */
+/* ------------------------------------------------------------------ */
+
+describe("streaming scroll behavior", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+      cb(0);
+      return 1;
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("multiple rapid scheduleChatScroll calls do not scroll when user is scrolled up", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 500,
+      clientHeight: 400,
+    });
+    host.chatUserNearBottom = false;
+    host.chatHasAutoScrolled = true;
+    const originalScrollTop = container.scrollTop;
+
+    // Simulate rapid streaming token updates
+    scheduleChatScroll(host);
+    scheduleChatScroll(host);
+    scheduleChatScroll(host);
+    await host.updateComplete;
+
+    expect(container.scrollTop).toBe(originalScrollTop);
+  });
+
+  it("streaming scrolls correctly when user IS at bottom", async () => {
+    const { host, container } = createScrollHost({
+      scrollHeight: 2000,
+      scrollTop: 1600,
+      clientHeight: 400,
+    });
+    host.chatUserNearBottom = true;
+    host.chatHasAutoScrolled = true;
+
+    // Simulate streaming
+    scheduleChatScroll(host);
+    await host.updateComplete;
+
+    expect(container.scrollTop).toBe(container.scrollHeight);
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/*  resetChatScroll                                                    */
+/* ------------------------------------------------------------------ */
+
+describe("resetChatScroll", () => {
+  it("resets state for new chat session", () => {
+    const { host } = createScrollHost({});
+    host.chatHasAutoScrolled = true;
+    host.chatUserNearBottom = false;
+
+    resetChatScroll(host);
+
+    expect(host.chatHasAutoScrolled).toBe(false);
+    expect(host.chatUserNearBottom).toBe(true);
+  });
+});

package/ui/src/ui/app-scroll.ts

@@ -0,0 +1,179 @@
+/** Distance (px) from the bottom within which we consider the user "near bottom". */
+const NEAR_BOTTOM_THRESHOLD = 450;
+
+type ScrollHost = {
+  updateComplete: Promise<unknown>;
+  querySelector: (selectors: string) => Element | null;
+  style: CSSStyleDeclaration;
+  chatScrollFrame: number | null;
+  chatScrollTimeout: number | null;
+  chatHasAutoScrolled: boolean;
+  chatUserNearBottom: boolean;
+  chatNewMessagesBelow: boolean;
+  logsScrollFrame: number | null;
+  logsAtBottom: boolean;
+  topbarObserver: ResizeObserver | null;
+};
+
+export function scheduleChatScroll(host: ScrollHost, force = false, smooth = false) {
+  if (host.chatScrollFrame) {
+    cancelAnimationFrame(host.chatScrollFrame);
+  }
+  if (host.chatScrollTimeout != null) {
+    clearTimeout(host.chatScrollTimeout);
+    host.chatScrollTimeout = null;
+  }
+  const pickScrollTarget = () => {
+    const container = host.querySelector(".chat-thread") as HTMLElement | null;
+    if (container) {
+      const overflowY = getComputedStyle(container).overflowY;
+      const canScroll =
+        overflowY === "auto" ||
+        overflowY === "scroll" ||
+        container.scrollHeight - container.clientHeight > 1;
+      if (canScroll) {
+        return container;
+      }
+    }
+    return (document.scrollingElement ?? document.documentElement) as HTMLElement | null;
+  };
+  // Wait for Lit render to complete, then scroll
+  void host.updateComplete.then(() => {
+    host.chatScrollFrame = requestAnimationFrame(() => {
+      host.chatScrollFrame = null;
+      const target = pickScrollTarget();
+      if (!target) {
+        return;
+      }
+      const distanceFromBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+      // force=true only overrides when we haven't auto-scrolled yet (initial load).
+      // After initial load, respect the user's scroll position.
+      const effectiveForce = force && !host.chatHasAutoScrolled;
+      const shouldStick =
+        effectiveForce || host.chatUserNearBottom || distanceFromBottom < NEAR_BOTTOM_THRESHOLD;
+
+      if (!shouldStick) {
+        // User is scrolled up — flag that new content arrived below.
+        host.chatNewMessagesBelow = true;
+        return;
+      }
+      if (effectiveForce) {
+        host.chatHasAutoScrolled = true;
+      }
+      const smoothEnabled =
+        smooth &&
+        (typeof window === "undefined" ||
+          typeof window.matchMedia !== "function" ||
+          !window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+      const scrollTop = target.scrollHeight;
+      if (typeof target.scrollTo === "function") {
+        target.scrollTo({ top: scrollTop, behavior: smoothEnabled ? "smooth" : "auto" });
+      } else {
+        target.scrollTop = scrollTop;
+      }
+      host.chatUserNearBottom = true;
+      host.chatNewMessagesBelow = false;
+      const retryDelay = effectiveForce ? 150 : 120;
+      host.chatScrollTimeout = window.setTimeout(() => {
+        host.chatScrollTimeout = null;
+        const latest = pickScrollTarget();
+        if (!latest) {
+          return;
+        }
+        const latestDistanceFromBottom =
+          latest.scrollHeight - latest.scrollTop - latest.clientHeight;
+        const shouldStickRetry =
+          effectiveForce ||
+          host.chatUserNearBottom ||
+          latestDistanceFromBottom < NEAR_BOTTOM_THRESHOLD;
+        if (!shouldStickRetry) {
+          return;
+        }
+        latest.scrollTop = latest.scrollHeight;
+        host.chatUserNearBottom = true;
+      }, retryDelay);
+    });
+  });
+}
+
+export function scheduleLogsScroll(host: ScrollHost, force = false) {
+  if (host.logsScrollFrame) {
+    cancelAnimationFrame(host.logsScrollFrame);
+  }
+  void host.updateComplete.then(() => {
+    host.logsScrollFrame = requestAnimationFrame(() => {
+      host.logsScrollFrame = null;
+      const container = host.querySelector(".log-stream") as HTMLElement | null;
+      if (!container) {
+        return;
+      }
+      const distanceFromBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight;
+      const shouldStick = force || distanceFromBottom < 80;
+      if (!shouldStick) {
+        return;
+      }
+      container.scrollTop = container.scrollHeight;
+    });
+  });
+}
+
+export function handleChatScroll(host: ScrollHost, event: Event) {
+  const container = event.currentTarget as HTMLElement | null;
+  if (!container) {
+    return;
+  }
+  const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+  host.chatUserNearBottom = distanceFromBottom < NEAR_BOTTOM_THRESHOLD;
+  // Clear the "new messages below" indicator when user scrolls back to bottom.
+  if (host.chatUserNearBottom) {
+    host.chatNewMessagesBelow = false;
+  }
+}
+
+export function handleLogsScroll(host: ScrollHost, event: Event) {
+  const container = event.currentTarget as HTMLElement | null;
+  if (!container) {
+    return;
+  }
+  const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+  host.logsAtBottom = distanceFromBottom < 80;
+}
+
+export function resetChatScroll(host: ScrollHost) {
+  host.chatHasAutoScrolled = false;
+  host.chatUserNearBottom = true;
+  host.chatNewMessagesBelow = false;
+}
+
+export function exportLogs(lines: string[], label: string) {
+  if (lines.length === 0) {
+    return;
+  }
+  const blob = new Blob([`${lines.join("\n")}\n`], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  const stamp = new Date().toISOString().slice(0, 19).replace(/[:T]/g, "-");
+  anchor.href = url;
+  anchor.download = `openclaw-logs-${label}-${stamp}.log`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+
+export function observeTopbar(host: ScrollHost) {
+  if (typeof ResizeObserver === "undefined") {
+    return;
+  }
+  const topbar = host.querySelector(".topbar");
+  if (!topbar) {
+    return;
+  }
+  const update = () => {
+    const { height } = topbar.getBoundingClientRect();
+    host.style.setProperty("--topbar-height", `${height}px`);
+  };
+  update();
+  host.topbarObserver = new ResizeObserver(() => update());
+  host.topbarObserver.observe(topbar);
+}

package/ui/src/ui/app-settings.test.ts

@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { setTabFromRoute } from "./app-settings.ts";
+import type { Tab } from "./navigation.ts";
+
+type SettingsHost = Parameters<typeof setTabFromRoute>[0] & {
+  logsPollInterval: number | null;
+  debugPollInterval: number | null;
+};
+
+const createHost = (tab: Tab): SettingsHost => ({
+  settings: {
+    gatewayUrl: "",
+    token: "",
+    sessionKey: "main",
+    lastActiveSessionKey: "main",
+    theme: "system",
+    chatFocusMode: false,
+    chatShowThinking: true,
+    splitRatio: 0.6,
+    navCollapsed: false,
+    navGroupsCollapsed: {},
+  },
+  theme: "system",
+  themeResolved: "dark",
+  applySessionKey: "main",
+  sessionKey: "main",
+  tab,
+  connected: false,
+  chatHasAutoScrolled: false,
+  logsAtBottom: false,
+  eventLog: [],
+  eventLogBuffer: [],
+  basePath: "",
+  themeMedia: null,
+  themeMediaHandler: null,
+  logsPollInterval: null,
+  debugPollInterval: null,
+});
+
+describe("setTabFromRoute", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("starts and stops log polling based on the tab", () => {
+    const host = createHost("chat");
+
+    setTabFromRoute(host, "logs");
+    expect(host.logsPollInterval).not.toBeNull();
+    expect(host.debugPollInterval).toBeNull();
+
+    setTabFromRoute(host, "chat");
+    expect(host.logsPollInterval).toBeNull();
+  });
+
+  it("starts and stops debug polling based on the tab", () => {
+    const host = createHost("chat");
+
+    setTabFromRoute(host, "debug");
+    expect(host.debugPollInterval).not.toBeNull();
+    expect(host.logsPollInterval).toBeNull();
+
+    setTabFromRoute(host, "chat");
+    expect(host.debugPollInterval).toBeNull();
+  });
+});