fix(chat): improve auto-scroll behavior and test listing snapshot suppor

tyulyukov · tyulyukov · commit e6ee1c830887 · 2026-04-10T18:10:19.000+03:00
- Refactor auto-scroll logic to check shouldAutoScrollRef before scrolling
- Add enableAutoScroll parameter to scrollMessagesToBottom for explicit control
- Implement getListingSnapshot and getThread RPC methods in test harnesses
- Add toThreadSummary helper for thread-to-summary conversion
- Improve wsRpcHarness with proper PubSub cleanup and ping/pong handling
- Clarify GitLab CLI token scopes in Installation guide
diff --git a/apps/landing/src/components/Installation.tsx b/apps/landing/src/components/Installation.tsx
@@ -54,8 +54,8 @@ const STEPS: Step[] = [
         <span className="text-foreground font-medium">
           System Settings &rarr; Privacy &amp; Security
         </span>{" "}
-        &rarr; scroll down &rarr;{" "}
-        <span className="text-foreground font-medium">Open Anyway</span>. The code is{" "}
+        &rarr; scroll down &rarr; <span className="text-foreground font-medium">Open Anyway</span>.
+        The code is{" "}
         <ExternalLink href="https://github.com/tyulyukov/marcode" color="fresh-syntax">
           fully open source
         </ExternalLink>{" "}
@@ -74,10 +74,7 @@ const STEPS: Step[] = [
           <ExternalLink href="https://cli.github.com" color="curious-sky">
             GitHub CLI
           </ExternalLink>
-          <ExternalLink
-            href="https://gitlab.com/gitlab-org/cli#installation"
-            color="curious-sky"
-          >
+          <ExternalLink href="https://gitlab.com/gitlab-org/cli#installation" color="curious-sky">
             GitLab CLI
           </ExternalLink>
         </span>
@@ -88,7 +85,16 @@ const STEPS: Step[] = [
             color="muted"
           >
             Personal Access Token
-          </ExternalLink>
+          </ExternalLink>{" "}
+          with at least{" "}
+          <code className="rounded bg-white/5 px-1 py-0.5 font-mono text-[11px] text-muted-foreground">
+            api
+          </code>{" "}
+          and{" "}
+          <code className="rounded bg-white/5 px-1 py-0.5 font-mono text-[11px] text-muted-foreground">
+            write_repository
+          </code>{" "}
+          scopes.
         </span>
       </>
     ),
@@ -185,18 +191,12 @@ export function Installation() {
         className="mb-14 text-center text-3xl font-medium tracking-tight sm:text-4xl"
         style={{ letterSpacing: "-0.02em" }}
       >
-        Up and running{" "}
-        <span className="text-muted-foreground">in minutes</span>
+        Up and running <span className="text-muted-foreground">in minutes</span>
       </h2>
 
       <div>
         {STEPS.map((step, i) => (
-          <TimelineStep
-            key={step.title}
-            step={step}
-            index={i}
-            isLast={i === STEPS.length - 1}
-          />
+          <TimelineStep key={step.title} step={step} index={i} isLast={i === STEPS.length - 1} />
         ))}
       </div>
     </section>
diff --git a/apps/web/src/components/ChatView.browser.tsx b/apps/web/src/components/ChatView.browser.tsx
@@ -287,7 +287,14 @@ function createSnapshotForTargetUser(options: {
         branch: "main",
         worktreePath: null,
         additionalDirectories: [],
-        latestTurn: null,
+        latestTurn: {
+          turnId: "turn-1" as TurnId,
+          state: "completed" as const,
+          requestedAt: NOW_ISO,
+          startedAt: NOW_ISO,
+          completedAt: NOW_ISO,
+          assistantMessageId: null,
+        },
         createdAt: NOW_ISO,
         updatedAt: NOW_ISO,
         archivedAt: null,
@@ -661,12 +668,48 @@ function createSnapshotWithPlanFollowUpPrompt(): OrchestrationReadModel {
   };
 }
 
+function toThreadSummary(thread: OrchestrationReadModel["threads"][number]) {
+  return {
+    id: thread.id,
+    projectId: thread.projectId,
+    title: thread.title,
+    modelSelection: thread.modelSelection,
+    runtimeMode: thread.runtimeMode,
+    interactionMode: thread.interactionMode,
+    branch: thread.branch,
+    worktreePath: thread.worktreePath,
+    additionalDirectories: thread.additionalDirectories,
+    latestTurn: thread.latestTurn,
+    session: thread.session,
+    createdAt: thread.createdAt,
+    updatedAt: thread.updatedAt,
+    archivedAt: thread.archivedAt,
+    deletedAt: thread.deletedAt,
+    latestUserMessageAt: null,
+    hasPendingApprovals: false,
+    hasPendingUserInput: false,
+    hasActionableProposedPlan: false,
+  };
+}
+
 function resolveWsRpc(body: NormalizedWsRpcRequestBody): unknown {
   const customResult = customWsRpcResolver?.(body);
   if (customResult !== undefined) {
     return customResult;
   }
   const tag = body._tag;
+  if (tag === ORCHESTRATION_WS_METHODS.getListingSnapshot) {
+    return {
+      snapshotSequence: fixture.snapshot.snapshotSequence,
+      projects: fixture.snapshot.projects,
+      threads: fixture.snapshot.threads.map(toThreadSummary),
+      updatedAt: fixture.snapshot.updatedAt,
+    };
+  }
+  if (tag === ORCHESTRATION_WS_METHODS.getThread) {
+    const threadId = body.threadId as string;
+    return fixture.snapshot.threads.find((t) => t.id === threadId) ?? null;
+  }
   if (tag === ORCHESTRATION_WS_METHODS.getSnapshot) {
     return fixture.snapshot;
   }
@@ -1081,6 +1124,16 @@ async function mountChatView(options: {
     customWsRpcResolver = null;
     await screen.unmount();
     host.remove();
+    wsRequests.length = 0;
+    await __resetNativeApiForTests();
+    useStore.setState({ projects: [], threads: [], bootstrapComplete: false });
+    useComposerDraftStore.setState({
+      draftsByThreadId: {},
+      draftThreadsByThreadId: {},
+      projectDraftThreadIdByProjectId: {},
+      stickyModelSelectionByProvider: {},
+      stickyActiveProvider: null,
+    });
   };
 
   return {
diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
@@ -844,7 +844,6 @@ export default function ChatView({ threadId }: ChatViewProps) {
   } | null>(null);
   const pendingInteractionAnchorFrameRef = useRef<number | null>(null);
   const lastContentHeightRef = useRef(0);
-  const lastSmoothScrollTimestampRef = useRef(0);
   const composerEditorRef = useRef<ComposerPromptEditorHandle>(null);
   const composerFormRef = useRef<HTMLFormElement>(null);
   const composerFormHeightRef = useRef(0);
@@ -2300,13 +2299,18 @@ export default function ChatView({ threadId }: ChatViewProps) {
 
   // Auto-scroll on new messages
   const messageCount = timelineMessages.length;
-  const scrollMessagesToBottom = useCallback((behavior: ScrollBehavior = "auto") => {
-    const scrollContainer = messagesScrollRef.current;
-    if (!scrollContainer) return;
-    scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior });
-    lastKnownScrollTopRef.current = scrollContainer.scrollTop;
-    shouldAutoScrollRef.current = true;
-  }, []);
+  const scrollMessagesToBottom = useCallback(
+    (behavior: ScrollBehavior = "auto", { enableAutoScroll = false } = {}) => {
+      const scrollContainer = messagesScrollRef.current;
+      if (!scrollContainer) return;
+      scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior });
+      lastKnownScrollTopRef.current = scrollContainer.scrollTop;
+      if (enableAutoScroll) {
+        shouldAutoScrollRef.current = true;
+      }
+    },
+    [],
+  );
   const cancelPendingStickToBottom = useCallback(() => {
     const pendingFrame = pendingAutoScrollFrameRef.current;
     if (pendingFrame === null) return;
@@ -2323,6 +2327,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
     if (pendingAutoScrollFrameRef.current !== null) return;
     pendingAutoScrollFrameRef.current = window.requestAnimationFrame(() => {
       pendingAutoScrollFrameRef.current = null;
+      if (!shouldAutoScrollRef.current) return;
       if (pendingUserScrollUpIntentRef.current || isPointerScrollActiveRef.current) return;
       scrollMessagesToBottom();
     });
@@ -2409,19 +2414,18 @@ export default function ChatView({ threadId }: ChatViewProps) {
       pendingUserScrollUpIntentRef.current = false;
     } else if (shouldAutoScrollRef.current && pendingUserScrollUpIntentRef.current) {
       const scrolledUp = currentScrollTop < lastKnownScrollTopRef.current - 1;
-      if (scrolledUp && !isNearBottom) {
+      if (scrolledUp) {
         shouldAutoScrollRef.current = false;
         pendingUserScrollUpIntentRef.current = false;
       } else if (!scrolledUp) {
         pendingUserScrollUpIntentRef.current = false;
       }
     } else if (shouldAutoScrollRef.current && isPointerScrollActiveRef.current) {
       const scrolledUp = currentScrollTop < lastKnownScrollTopRef.current - 1;
-      if (scrolledUp && !isNearBottom) {
+      if (scrolledUp) {
         shouldAutoScrollRef.current = false;
       }
     } else if (shouldAutoScrollRef.current && !isNearBottom) {
-      // Catch-all for keyboard/assistive scroll interactions.
       const scrolledUp = currentScrollTop < lastKnownScrollTopRef.current - 1;
       if (scrolledUp) {
         shouldAutoScrollRef.current = false;
@@ -2434,6 +2438,10 @@ export default function ChatView({ threadId }: ChatViewProps) {
   const onMessagesWheel = useCallback((event: React.WheelEvent<HTMLDivElement>) => {
     if (event.deltaY < 0) {
       pendingUserScrollUpIntentRef.current = true;
+      const scrollContainer = messagesScrollRef.current;
+      if (scrollContainer) {
+        scrollContainer.scrollTo({ top: scrollContainer.scrollTop });
+      }
     }
   }, []);
   const onMessagesPointerDown = useCallback((_event: React.PointerEvent<HTMLDivElement>) => {
@@ -2586,14 +2594,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
       if (pendingUserScrollUpIntentRef.current || isPointerScrollActiveRef.current) return;
       cancelPendingStickToBottom();
       pendingAutoScrollFrameRef.current = null;
-      const heightDelta = nextHeight - previousHeight;
-      const now = performance.now();
-      const recentlySmoothed = now - lastSmoothScrollTimestampRef.current < 400;
-      const useSmoothScroll = heightDelta > 100 && !recentlySmoothed;
-      if (useSmoothScroll) {
-        lastSmoothScrollTimestampRef.current = now;
-      }
-      scrollMessagesToBottom(useSmoothScroll ? "smooth" : "auto");
+      scrollMessagesToBottom();
     });
 
     observer.observe(contentElement);
@@ -4750,7 +4751,7 @@ export default function ChatView({ threadId }: ChatViewProps) {
               <div className="pointer-events-none absolute bottom-1 left-1/2 z-30 flex -translate-x-1/2 justify-center py-1.5">
                 <button
                   type="button"
-                  onClick={() => scrollMessagesToBottom("smooth")}
+                  onClick={() => scrollMessagesToBottom("smooth", { enableAutoScroll: true })}
                   className="pointer-events-auto flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-3 py-1 text-muted-foreground text-xs shadow-sm transition-colors hover:border-border hover:text-foreground hover:cursor-pointer"
                 >
                   <ChevronDownIcon className="size-3.5" />
diff --git a/apps/web/src/components/KeybindingsToast.browser.tsx b/apps/web/src/components/KeybindingsToast.browser.tsx
@@ -165,7 +165,44 @@ function buildFixture(): TestFixture {
   };
 }
 
-function resolveWsRpc(tag: string): unknown {
+function toThreadSummary(thread: OrchestrationReadModel["threads"][number]) {
+  return {
+    id: thread.id,
+    projectId: thread.projectId,
+    title: thread.title,
+    modelSelection: thread.modelSelection,
+    runtimeMode: thread.runtimeMode,
+    interactionMode: thread.interactionMode,
+    branch: thread.branch,
+    worktreePath: thread.worktreePath,
+    additionalDirectories: thread.additionalDirectories,
+    latestTurn: thread.latestTurn,
+    session: thread.session,
+    createdAt: thread.createdAt,
+    updatedAt: thread.updatedAt,
+    archivedAt: thread.archivedAt,
+    deletedAt: thread.deletedAt,
+    latestUserMessageAt: null,
+    hasPendingApprovals: false,
+    hasPendingUserInput: false,
+    hasActionableProposedPlan: false,
+  };
+}
+
+function resolveWsRpc(request: { _tag: string; [key: string]: unknown }): unknown {
+  const tag = request._tag;
+  if (tag === ORCHESTRATION_WS_METHODS.getListingSnapshot) {
+    return {
+      snapshotSequence: fixture.snapshot.snapshotSequence,
+      projects: fixture.snapshot.projects,
+      threads: fixture.snapshot.threads.map(toThreadSummary),
+      updatedAt: fixture.snapshot.updatedAt,
+    };
+  }
+  if (tag === ORCHESTRATION_WS_METHODS.getThread) {
+    const threadId = request.threadId as string;
+    return fixture.snapshot.threads.find((t) => t.id === threadId) ?? null;
+  }
   if (tag === ORCHESTRATION_WS_METHODS.getSnapshot) {
     return fixture.snapshot;
   }
@@ -325,7 +362,7 @@ describe("Keybindings update toast", () => {
 
   beforeEach(async () => {
     await rpcHarness.reset({
-      resolveUnary: (request) => resolveWsRpc(request._tag),
+      resolveUnary: resolveWsRpc,
       getInitialStreamValues: (request) => {
         if (request._tag === WS_METHODS.subscribeServerLifecycle) {
           return [
diff --git a/apps/web/test/wsRpcHarness.ts b/apps/web/test/wsRpcHarness.ts
@@ -1,6 +1,7 @@
 import { Effect, Exit, PubSub, Scope, Stream } from "effect";
 import { WS_METHODS, WsRpcGroup } from "@marcode/contracts";
 import { RpcSerialization, RpcServer } from "effect/unstable/rpc";
+import { constPong } from "effect/unstable/rpc/RpcMessage";
 
 type RpcServerInstance = RpcServer.RpcServer<any>;
 
@@ -77,9 +78,11 @@ export class BrowserWsRpcHarness {
     if (this.scope) {
       void Effect.runPromise(Scope.close(this.scope, Exit.void)).catch(() => undefined);
     }
-    if (this.streamPubSubs.size === 0) {
-      this.initializeStreamPubSubs();
+    for (const pubsub of this.streamPubSubs.values()) {
+      Effect.runSync(PubSub.shutdown(pubsub));
     }
+    this.streamPubSubs.clear();
+    this.initializeStreamPubSubs();
     this.client = client;
     this.scope = Effect.runSync(Scope.make());
     this.serverReady = Effect.runPromise(
@@ -115,6 +118,14 @@ export class BrowserWsRpcHarness {
     }
     const messages = this.parser.decode(rawData);
     for (const message of messages) {
+      const msg = message as { _tag?: string };
+      if (msg._tag === "Ping") {
+        const pong = this.parser.encode(constPong);
+        if (typeof pong === "string") {
+          this.client?.send(pong);
+        }
+        continue;
+      }
       await Effect.runPromise(server.write(0, message as never));
     }
   }
