Files
npub17jjz49l9jjmhhk7cac63j8yt9z555n9cw8vk7v5jz4vzw4ppld5qgj57ccandTyler Longwell ee6fb0ac9d fix(desktop): keep agent activity feed pinned to bottom across smooth-scroll
`useStickToBottom` recomputed `isNearBottomRef` from raw `scrollTop` on
every scroll event. When the hook scheduled a `behavior: "smooth"`
scroll to follow new content, the browser emitted intermediate scroll
events whose `scrollTop` was mid-animation — `distance` > 100 even
though the viewport was animating *toward* the bottom. The buggy
handler flipped `isNearBottom` to false during those events, and the
next content append refused to follow. User-visible symptom: the
agent observer / activity feed scrolls down on the first message,
then "jumps back a couple lines" as more tokens arrive.

Make `onScroll` direction-aware via `lastScrollTopRef`:

- `distance < 100` → always sticky (handles initial state and
  resticks once an animation settles).
- `scrollTop < lastScrollTop` → user pulled the viewport upward.
  Detach.
- Otherwise → leave the sticky bit alone (smooth-scroll in flight
  toward the bottom).

Seed `lastScrollTopRef` in the initial-scroll effect so the first
real scroll event has a meaningful prior value.

Regression test: a Playwright spec drives a fixture that uses the
real hook through a deterministic mid-animation race — grow the
scroll range with a content burst, then synthetically dispatch an
intermediate `scroll` event whose `scrollTop` is climbing toward the
new bottom but `distance > 100`. Pre-fix that assertion fails on
`isNearBottom`; post-fix it passes. A second spec guards the
direction-aware unstick path so the fix doesn't over-correct.

Co-authored-by: Tyler Longwell <tlongwell@squareup.com>
Signed-off-by: Tyler Longwell <tlongwell@squareup.com>
2026-06-19 13:00:08 -04:00
..
2026-06-11 15:06:24 +00:00
2026-06-11 15:06:24 +00:00

Buzz

Desktop chat shell with:

  • Tauri + React + TypeScript + Vite
  • Tailwind CSS
  • shadcn/ui-ready shared components
  • Biome (lint/format/check)
  • Feature-driven frontend structure

Scripts

  • pnpm dev - run the web frontend
  • pnpm tauri dev - run the desktop app
  • pnpm build - typecheck and build frontend
  • pnpm typecheck - TypeScript checks
  • pnpm lint - Biome lint
  • pnpm format - Biome format (write)
  • pnpm check - Biome check

Structure

  • src/shared - reusable app-wide code (ui, lib, styles)
  • src/features - feature modules (vertical slices)
  • src/app - top-level app composition