Files
PaperClipAI/ui
DottaandPaperclip ad0c4f0767 fix(ui): keep mobile task output above the composer (#15282)
## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work.
> - People read agent output in the task conversation.
> - Mobile tasks scroll the document and keep the composer above the
footer.
> - The document body keeps a fixed height while the thread grows.
> - The old observer misses late thread growth, and a layout scroll
event can cancel follow mode.
> - This pull request observes the thread and preserves follow mode
until the reader scrolls up.
> - The benefit is visible new output without repeated manual scrolling.

## Linked Issues or Issue Description

**What happened?**

New task output can move behind the mobile composer while the reader is
already at the bottom. Late content layout does not resize the
fixed-height body. A scroll event after layout growth can also clear
follow mode before the resize observer runs.

**Expected behavior**

Keep new output visible above the composer while the reader follows the
bottom. Hold the reading position after an upward scroll. Resume
following when the reader returns to the bottom.

**Steps to reproduce**

1. Open a long task conversation on mobile and scroll to the bottom.
2. Let a streamed row or delayed content grow after the parent renders.
3. Check whether the latest output stays above the composer.
4. Scroll up to read earlier output, then return to the bottom.

**Paperclip version or commit**

Reproduced by regression tests against master at 6c36c07a4.

**Deployment mode**

Built from source. This is a mobile UI bug and does not depend on an
adapter or database.

Related work: #15228, #13229, and #13095. The search found no duplicate
fix for mobile document auto-follow.

## What Changed

- Observe the conversation box as well as the body for late layout
growth.
- Preserve bottom-follow intent when a layout scroll event arrives
without an upward scroll.
- Reconcile document scrolling when the viewport resizes.
- Add regressions for late growth, event ordering, reading position,
return to bottom, and viewport changes.
- Add a bounded Storybook streaming fixture with the production thread,
composer, and mobile footer.

## Verification

- 244 focused tests pass across `useWindowAutoFollow`,
`TaskMessageScroller`, and `TaskChatThread`. Three new regressions fail
before the fix.
- All 7,439 UI tests pass across 683 files (`pnpm exec vitest run
--project @paperclipai/ui`).
- `pnpm check:token-gates`, `pnpm -r typecheck`, and `pnpm build` pass.
- The full repository test shards and browser E2E checks pass in CI on
commit 43354eb38. The duplicate local `pnpm test:run` was stopped after
37 minutes once those CI test shards passed; that local run did not
complete.
- Browser check at 402 by 874: controlled streamed output stayed at
document bottom, with the newest paragraph above the composer. Scrolling
up held position as output grew. Returning to bottom resumed following.
- Open Storybook's **Task chat / Mobile streaming follow / Streaming**
story to repeat the check. The fixture makes no agent or provider calls.
- Greptile is 5/5 on commit 43354eb38. All review threads are resolved.
- All CI checks pass on the final commit, including the canary packaging
gate.

## Risks

- Scroll event order differs between browsers. The regression tests
cover a scroll event before resize reconciliation and deliberate upward
scrolling during growth.
- The change affects the mobile document scroll owner. Desktop scrolling
stays covered by its existing tests.
- Existing same-task targets and browser history restoration still pass.

## Model Used

OpenAI GPT-6 through Codex. The exact serving variant and context window
are not exposed in this session. Capabilities used: reasoning, code
editing, tool execution, and browser verification.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
2026-10-05 17:33:29 -05:00
..
…

@paperclipai/ui

Published static assets for the Paperclip board UI.

What gets published

The npm package contains the production build under dist/. It does not ship the UI source tree or workspace-only dependencies.

Storybook

Storybook config, stories, and fixtures live under ui/storybook/.

pnpm --filter @paperclipai/ui storybook
pnpm --filter @paperclipai/ui build-storybook

Typical use

Install the package, then serve or copy the built files from node_modules/@paperclipai/ui/dist.

Editor dependency identity

Keep the root and workspace overrides for @codemirror/state, @codemirror/view, and @lezer/common aligned. CodeMirror requires shared extension identity, while Lezer parsers and syntax highlighters require shared NodeProp IDs. Multiple Lezer copies can crash code-block highlighting with tags is not iterable. src/lib/codemirror-single-instance.test.ts checks the installed dependency graph and highlights sample code through the editor's real language dependencies. GitHub Actions owns regeneration of pnpm-lock.yaml.