mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-05 07:54:38 +00:00
Mohamed Boudra
4f7813d3aa
* Keep a disclosure's trigger in place on web Expanding or collapsing a turn summary, tool-call group, tool call details or todo badge now holds the row that owns the trigger. Rows inside the timeline get a disclosure context; each toggle runs its state change through `useDisclosureHold()`, and the viewport's new `holdRow(rowId, apply)` replaces `holdReadingPosition()`. On web the hold pins the reading anchor to that row, stops following output, and resumes following when the change leaves the list at its end. Native keeps its previous behaviour (detach, then apply) until the anchored toggle lands. * Render the native chat timeline with LegendList in forward order The native timeline was an inverted FlatList. Disclosure toggles moved their trigger, and a cold open settled visibly. It is now a forward-order LegendList that stays virtualized, and one owner moves the scroll offset at a time: - Before placement: LegendList's initial scroll, behind its hidden reveal. - While following: the end pin (native-end-pin.tsx). This is a zero-height first child at the bottom of the content, which native maintainVisibleContentPosition keeps in place. A content shrink or growth never scrolls from JS; only a viewport resize or an explicit jump does. - During a disclosure hold and while detached: LegendList MVCP with shouldRestorePosition (native-disclosure-hold.ts), so a toggle keeps its trigger at the same y and paints one layout change. - Every newly mounted row starts at a per-kind estimate (new-row-estimates.ts). PaseoScrollView defers React Native's content clamp while MVCP is set. A shrink below an unmoved anchor no longer draws a frame past the end (RN #58578, PR #58695). VisibleContentPositionClampTest covers this. LegendList 3.7.1 patch, one "Paseo patch" comment per hunk: - The content height comes from React state on the new architecture. - Rows get a per-row size estimate. - The MVCP anchor lock runs on native too. Upstream gated it to web in d24a9d93 without a native reason. Without the lock, the size pass for prepended history re-anchors on a prepended row and moves the rows on screen. Native ends the lock when its row leaves the view, not on the 300 ms clock. - Header and footer reveal together with the rows. - Only lists that keep their end preserve the initial end. - A remeasure within one pixel plus the 1/8 dp floor of the known size is noise. Upstream compares the raw size with the floored one, so the live turn's assistant row (1380 -> 1381 px) read as a resize and moved every row a frame after the reveal. - The Android silent initial scroll retry sends its 1 dp nudge and the return to the target in one task. Upstream returns on the next frame, but its 16 ms check can finish the scroll first and cancel that frame, so the list revealed 3 px short of its end and moved into place a frame later. - The top-padding shrink hold applies on iOS only. Android, emulator. Evidence is in .artifacts/legend-impl. - J1, J2 at the end, J3, J4, J5, J6, J7: pass. - J2 while streaming: not reachable on the Ten second stream fixture; its turns never fold. - J8: no blank frames over 10 fresh flings, at host load 32-37. J4: still. Before these two hunks, 6 of 7 cold opens moved every row one frame after the reveal. After them, 9 valid cold opens show no shift. 5 of those were traced through the nudge path. Runs that hit the dev client's startup SIGSEGV in MountingCoordinator::pullTransaction were left out. That crash is in the emulator's dropbox from before this work. * Revise a history row when its turn summary line changes LegendList renders a row again only when its item changes. The forward-order timeline in d1f2ae352 folds a finished turn into its host user message, but the host's item does not change when the fold appears, so a turn that folded live lost its summary line until something else revised the row. collapseTurns now reports the hosts whose summary line appeared, changed or went away since the previous fold (updatedHostIds), and the history row revision treats them as changed content. * Stop following the end while a user scroll owns the viewport The bottom anchor controller kept sticky-bottom for the whole of a drag and its momentum and only decided at the end. While it is sticky the native list mounts the end pin, so a drag started during a stream had every new line move the rows under the finger: on the iOS simulator the offset jumped by each line's height (+22, +35, +22 pt) mid-drag, and Android does the same with the same code. beginUserScroll now detaches. endUserScroll resumes following when the gesture ends at the end (scrolling there without animation) and otherwise stays detached and drops any pending anchor, as before. The re-stick is not animated: on Android a line that mounts during a smooth scroll cancels it, and the list then followed 40 pt short of the end until the controller detached it. Measured after the change, frame by frame: - iOS and Android, drag up mid-stream: the content tracks the finger and momentum with no line steps; the stream grows below; tapping the pill re-sticks and follows again. - A short drag at the end, mid-stream: following resumes; the release lands on the end in one frame (the drag distance, here 8 pt on iOS and 21 dp on Android). A line already mounting when the drag begins can still move the rows once in its first frame, because the detach reaches native one commit after the touch. * Correct the iOS scroll view under maintainVisibleContentPosition Phase 2 of the LegendList timeline. The native timeline relies on maintainVisibleContentPosition for the end pin and the disclosure hold, and React Native 0.86 on iOS gets two cases wrong. modules/paseo-scroll now registers PaseoScrollViewComponentView, a subclass of RCTScrollViewComponentView, for the iOS scroll view, like PaseoScrollView on Android. - A mount that removes its own anchor: detaching removes the end pin in the same mount that opens the tapped disclosure, and the offset jumped by the removed view's frame. The subclass keeps the offset when the anchor's tag is no longer registered, the check React Native 0.88 adds in https://github.com/react/react-native/pull/57294. That PR's extra superview check is not copied because it skips anchors detached by removeClippedSubviews (https://github.com/react/react-native/issues/58910). - A shrink at the end: UIKit clamps the offset to the new end during the mount, then React Native adds the anchor's movement, so a turn folding while following landed above the end (https://github.com/react/react-native/issues/58578). The subclass restores the pre-mount offset for the adjustment and clamps after it, as https://github.com/react/react-native/pull/58695 does. The dev client was rebuilt with the module. Verified on the iPhone 16 Pro simulator, frame by frame: the summary far up and the latest turn's summary while following each keep the trigger at 0 px with one layout change per toggle, the todo card the same, the cold open lands still, older history pages keep the visible rows in place, and the keyboard, send-time shrink and streaming stay pinned to the end. Freshly mounted markdown on iOS paints one frame after its layout, because enriched-markdown renders asynchronously (https://github.com/software-mansion/enriched-markdown/issues/1131). A synchronous first render removed that frame but raised fling frame time at p90 and p99, so it is not part of this change. docs/agent-stream-disclosure.md now describes the clamp correction on both platforms. * Keep the rows under the finger at a drag's start and its release Two one-frame row movements remained around a user scroll while the timeline streams. A drag's first frames. The end pin stays mounted until JS stops following, one round trip after the drag begins, so a line mounting in those frames scrolled the rows under the finger by its height. Both scroll view subclasses now skip the content-position correction while the user drags and the anchor is the end pin, which they recognise by its native ID ("paseo-end-pin"). Android overrides scrollToPreservingMomentum, the position keeper's only scroll call, from the begin-drag event until the finger lifts; iOS skips the adjustment while the scroll view is dragging. The skip is limited to the pin: LegendList's own anchoring for the detached list also uses the native correction, and a history page landing mid-drag needs it. It starts at the drag rather than at touch-down: a tap or long press while following would otherwise leave the list stranded short of its end, still following, once the finger lifts. The release. A gesture ending within 32 pt of the end re-stuck with an instant scroll, a snap of up to 56 px. Following now resumes only when the finger lifts at or past the end, or momentum stops there, within 1 px, the distance web resumes at (strategy-web.tsx). Anything else stays detached with the pill. The check runs when the gesture is decided, so output that arrived below meanwhile counts. A release past the end counts as at the end: on iOS it bounces back, and a line landing during the bounce scrolls in as following would. endUserScroll takes isAtEnd, like releaseDisclosure. Tests: VisibleContentPositionClampTest gains growth at the end during a drag (red before the change: the offset moved by the 120 px growth, 352 -> 472) and growth without a touch (the pin still follows); the module suite passes on emulator-5558, 11 tests. bottom-anchor-controller.test.ts: a release near but short of the end stays detached. Device, frame scans while streaming (dev clients rebuilt): - Android, 8 slow drags with a pill tap between: no frame moves against the finger once a drag starts; the stream follows between drags. Three short releases 50 px short of the end stay put until the pill; three drags back past the end resume following. - iOS simulator, 6 drags: no line step during any drag or its momentum. Two short releases stay detached with no snap; three drags past the end resume following within 0.5 s of the bounce. * Document the LegendList timeline and remove what the inverted list left The native section of docs/agent-stream-disclosure.md described the FlatList hold (anchor neighbour, native child index, frame spacing, render window). It now covers why the timeline is forward order, who owns the offset in each state, the hold and its sync layout trigger, user scroll and release, draw distance numbers, the LegendList patch and the scroll view corrections. Draw distance stays at 2000. The spike measured it on a chat with a 15,000 px turn expanded: 500 blanked the viewport 1.0 to 1.5 s per fling and 2000 not at all. A re-measure on the collapsed chat (500, 1000, 1500, 2000, interleaved) blanked at no value and its jank followed host load, which stayed between 19 and 40, so it could not separate 1000 or 1500 from 2000. The patch file now opens with a header listing its eight hunks by purpose and linking LegendApp/legend-list#593, which reports each one upstream. The markdown doc records the iOS first-paint delay (software-mansion/enriched-markdown#1131). Removed with the inverted list: PaseoScrollView's child-reveal override (a no-op without the inverting transform) and ScrollSelectionTest, the invertedWrapper style, and the inverted-list passages in android.md, native-text-selection.md, mobile-testing.md, floating-panels.md and agent-stream-performance.md. model.test, layout.test and footer-spacing.test still asserted the inverted native order and failed; they now assert forward order, and footer-spacing uses the real strategies instead of an inverted stub. * fix(app): show a reply's footer when the next prompt arrives on native LegendList re-renders a mounted row only when its item or extraData changes. When a new prompt arrives, the previous reply's footer moves from the live auxiliary slot into that reply's layout item (completedFooter). The reply's StreamItem keeps its identity, and renderItem is a stable event, so the row never rendered its new layout and the footer (copy, timing, fork) disappeared until the row remounted. FlatList had the same gap. The history renderer is now LegendList's extraData. Its identity changes with the history layout map, and StreamRow's memo limits the pass to rows whose layout item changed. * test(app): run the web disclosure hold cases in a real browser The three hold cases simulated layout in jsdom: hand-written row heights, scroll clamping and resize callbacks. They could pass while Chromium paints the trigger somewhere else. They now run in Vitest browser mode with real layout, ResizeObserver and scroll clamping. The two hold cases fail when the hold is bypassed. The browser project pre-bundles @tanstack/react-virtual, so its first import no longer reloads the test mid-run. The lucide stub gains ArrowDown, which pane-find imports. * fix(app): let a drag end a disclosure hold on native A drag detached the bottom controller but kept the disclosure hold. Every item size change restarts the hold's quiet frames, including a streaming row's, so the hold can outlive the toggle. While it lasts, shouldRestorePosition accepts only the held row. Once the drag scrolls that row away, a history page arriving mid-gesture gets no anchor, and the rows the reader was on move by the page's height. The drag now cancels the hold without releasing it. The controller keeps no hold state of its own beyond detached, and the gesture's end decides whether following resumes. * perf(app): keep the scroll-to-bottom button's state out of the timeline Opening a tool call or turn at the end of the chat now holds its trigger in place, so the timeline detaches and the scroll-to-bottom button appears. That visibility was useState in AgentStreamView, so showing the button re-rendered the whole timeline view for a change only the button reads. The viewport now writes near-bottom into a per-agent store that only the button subscribes to. * fix(app): show the scroll-to-bottom button on native whenever following has stopped A gesture now resumes following only when it ends within 1 px of the end, but the button still hid within 32 px. A release 2-32 px short of the end left the list detached with no button to return. While detached the button now hides only at the end; while following it keeps the 32 px tolerance so content growth that the offset trails for a frame does not flash it. The button also updates when following starts or stops without a scroll. * fix(app): stop the timeline jumping when the keyboard opens or closes on native The keyboard's settled height was committed to the list after the motion, as paddingTop on Android and contentInset.top on iOS, to keep the top of the history reachable under the translated dock. While following, the end pin absorbed it in the same mount. While detached or holding a disclosure, nothing did: Android's native anchor is LegendList's ScrollAdjust view, which padding does not move, and LegendList compensates a padding change only on iOS. Every row jumped by the keyboard height 0.2-1 s after the keyboard settled, and back after it closed. On send, the same commit raced the jump to the end. The keyboard now only translates the list with the composer. The cost: while the keyboard is open, the composer viewport clips the top keyboard-height of the list, so the start of a short conversation is hidden until it closes. * chore(app): describe the native timeline as LegendList in stream comments * fix(app): keep a disclosure's trigger in place when its row is cut off at the top on native LegendList's idsInView starts at the first fully visible row. When a turn host's prompt bubble sat above the viewport, a disclosure hold found no anchor in the data pass (shouldRestorePosition rejects every other row), and the size pass anchored on the row below the host instead, so the trigger moved by the host's size change. The patch appends the partly visible rows to idsInView after the fully visible ones, so the held row anchors while every pass that does not restrict the anchor keeps the first fully visible row. The browser test renders the patched native build, which vitest now aliases instead of the package's unpatched web build. * fix(app): let a turn's summary line collapse again after it opens The React Compiler cached StreamRow's `renderStreamItem(layoutItem)` on the layout item and the renderer. The revised item that useRevisedHistoryRows hands a row whose display state changed only fed the row id, so the row reused its cached content. Opening a turn usually inserts its rows directly below the host, which also gives the host a new layout item. When another row sits between them, such as a compaction marker, the host kept its layout item, its summary line stayed collapsed, and every later tap asked to open the turn again. The renderer now takes the item it renders, so the compiler's cache keys on the revision. StreamRow moves to its own module, which the tests compile the way Expo does. * test(app): alias the patched LegendList build in browser tests only Unit tests load @legendapp/list outside Vite, so the native build's react-native import skipped the react-native-web alias and reached React Native's Flow source, failing every unit suite that imports the native strategy. * fix(app): keep a size-only disclosure's trigger in place when its row is cut off at the top on native LegendList's prepareMVCP picks the anchor for a size change with no data change as the first row in view, without asking shouldRestorePosition. A disclosure that only grows its own row (a todo card) while that row's top was above the viewport therefore held the row below it, and the trigger moved by the row's size change. The patch now applies shouldRestorePosition to size changes as it already does to data changes. * test(app): render the timeline row revision test in a real browser The repo's unit tests do not mount components in JSDOM. The test still compiles stream-row.tsx with the React Compiler, so it fails when a revised row ignores the item it was handed.
164 lines
9.6 KiB
Markdown
164 lines
9.6 KiB
Markdown
# Agent stream disclosures
|
|
|
|
Expanding or collapsing something in the chat timeline (a turn's summary line, a tool-call group,
|
|
a tool call's inline details, a todo card) keeps the tapped trigger at the same screen y in the
|
|
first painted frame. No animation.
|
|
|
|
## The contract
|
|
|
|
A disclosure component knows nothing about the list. It wraps its state change:
|
|
|
|
```tsx
|
|
const hold = useDisclosureHold();
|
|
const handleToggle = () => hold(() => setExpanded((value) => !value));
|
|
```
|
|
|
|
`view.tsx` wraps every timeline row in `DisclosureRow`, which routes `hold` to the strategy's
|
|
`holdRow(rowId, apply)` (`packages/app/src/agent-stream/disclosure.tsx`). Outside a timeline row,
|
|
`apply` runs as is. The strategy owns when `apply` runs and how the row keeps its place.
|
|
|
|
Following output:
|
|
|
|
- A hold always detaches the bottom anchor controller (`holdForDisclosure`).
|
|
- When the hold ends, the controller re-sticks only if the list sits at its end and no user scroll
|
|
owns the viewport (`releaseDisclosure({ isAtEnd })`). Expanding at the bottom therefore leaves
|
|
the list detached with the scroll-to-bottom pill showing; collapsing back to the end resumes
|
|
following.
|
|
- Scroll events during the hold never re-stick: the correction is a programmatic scroll that
|
|
would otherwise read as "back at the bottom".
|
|
|
|
The trigger can only stay put when the list has scroll room for the change. When the loaded
|
|
content fits the viewport, or a collapse at the end would need an offset past the end, the list
|
|
ends at its end and the trigger moves by the difference.
|
|
|
|
## Web
|
|
|
|
`holdRow` pins the row in the reading anchor and runs `apply`; the next reading reconcile restores
|
|
the row's top after layout, before paint (`strategy-web.tsx`).
|
|
|
|
## Native
|
|
|
|
On compact layouts, tool calls and tool-call groups open a sheet instead of expanding, so they do
|
|
not hold. Summary lines and todo cards expand inline.
|
|
|
|
The timeline is a LegendList in forward order: one `data` array of history rows followed by the
|
|
live head, oldest first (`strategy-native.tsx`). LegendList keeps a row in place across a size
|
|
change in the commit that makes it, so a hold needs no anchor neighbour, native child index or
|
|
render window stretch. The inverted FlatList it replaced needed all three, and three commits per
|
|
toggle; its applied commit took up to 3.5 s of JS on a long turn.
|
|
|
|
### Who owns the offset
|
|
|
|
One owner keeps the scroll offset at any moment:
|
|
|
|
| State | Owner |
|
|
| ---------------------- | ----------------------------------------------------------------------------------------- |
|
|
| Before rows are placed | LegendList's initial scroll to the end. It keeps the rows hidden until they are measured. |
|
|
| Following the end | The end pin (`native-end-pin.tsx`). |
|
|
| Disclosure hold | LegendList's `maintainVisibleContentPosition`, restoring only the held row. |
|
|
| User scroll | The finger. The controller detaches at drag start. |
|
|
| Detached | LegendList's `maintainVisibleContentPosition` on the first visible row. |
|
|
| Keyboard motion | Nobody. The keyboard translates the list with the composer and leaves the offset alone. |
|
|
|
|
The end pin is a zero-height view at the bottom of the content and the content's first native
|
|
child, with React Native's `maintainVisibleContentPosition` set to `{ minIndexForVisible: 0 }`. The
|
|
native correction runs on the UI thread around each mount, so a row that grows or lands at the end
|
|
scrolls in the frame it lays out. The controller scrolls only for a viewport resize (the composer
|
|
growing or shrinking) and an explicit jump, both through the native `scrollToEnd`.
|
|
|
|
Do not use LegendList's `maintainScrollAtEnd` instead. It scrolls from JS after the mount to the end
|
|
its JS sizes predict: growth paints below the viewport for a frame, and the scroll lands short of
|
|
the native end, which the controller reads as the user scrolling away.
|
|
|
|
The keyboard never changes the list's size, padding or offset. `KeyboardTranslateView` moves the list
|
|
and the composer together on the UI thread, and the composer viewport clips the top of the list
|
|
while the keyboard is open. Do not add a keyboard-sized inset to keep that content reachable: it can
|
|
only commit after the motion, and while detached or holding nothing corrects for it, so every row
|
|
jumps by the keyboard height after the keyboard settles.
|
|
|
|
### The hold
|
|
|
|
`holdRow(rowId, apply)` runs in the toggle's event:
|
|
|
|
1. Mark the row held and detach the controller (`holdForDisclosure`). The pin goes away and
|
|
LegendList's `maintainVisibleContentPosition` takes over, restoring only the held row
|
|
(`shouldRestorePosition`). Upstream LegendList anchors only rows from the first fully visible
|
|
one down, and a size change with no data change keeps the first row in view whatever
|
|
`shouldRestorePosition` says. A row cut off at the top would then let the row below it hold
|
|
instead, moving the trigger by the row's size change. The LegendList patch counts rows cut off
|
|
at the top as in view and applies `shouldRestorePosition` to size changes too.
|
|
2. Run `apply`.
|
|
3. Call the row's `useSyncLayout` trigger. The toggle changes the row from its own state, so
|
|
LegendList's container does not re-render and would learn the new height from `onLayout` a task
|
|
later, after the change painted. The trigger puts the measurement and the corrected positions
|
|
in the toggle's own commit.
|
|
|
|
The hold ends two frames after the last item size change, since the list measures the toggled row
|
|
and any rows it inserted over several frames (`native-disclosure-hold.ts`). The controller then
|
|
re-sticks only if the list is within 1 px of its end, the same distance web resumes from.
|
|
|
|
### User scroll
|
|
|
|
The controller detaches at `onScrollBeginDrag`, so lines that stream in during a drag grow below
|
|
the rows under the finger. The detach reaches native a JS round trip after the drag begins, so for
|
|
those frames the pin is still mounted. The scroll view subclasses skip the pin's correction while
|
|
the user drags (see [scroll view corrections](#scroll-view-corrections)). They skip only the pin's:
|
|
in the detached state LegendList uses the same native correction, and a history page that lands
|
|
mid-drag needs it. They key on the drag, not the touch, so a tap or long press while following
|
|
keeps following.
|
|
|
|
Following resumes only for a gesture that ends within 1 px of the end, either when the finger lifts
|
|
or when momentum stops. A release past the end counts: iOS bounces back to the end, and lines that
|
|
land during the bounce must keep scrolling in. A release anywhere short of the end stays detached
|
|
with the scroll-to-bottom pill, so the rows the user let go of never move.
|
|
|
|
### Draw distance
|
|
|
|
`drawDistance` is 2000 px on each side of the viewport. A fling over rows that were never measured
|
|
blanks the viewport until LegendList renders and measures them. Twelve flings over a chat with a
|
|
15,000 px turn expanded, Android emulator, dev build:
|
|
|
|
| List | Blank viewport | Janky frames | p50 / p90 / p99 |
|
|
| ----------------------------- | -------------------------- | ------------ | ---------------- |
|
|
| Inverted FlatList | 1.3 to 1.7 s over 5 flings | 10.8% | 27 / 48 / 109 ms |
|
|
| LegendList, drawDistance 500 | 1.0 to 1.5 s per fling | | |
|
|
| LegendList, drawDistance 2000 | none | 1.7% | 24 / 32 / 48 ms |
|
|
|
|
With every turn collapsed, flinging from a cold open into history did not blank at any value from
|
|
500 to 2000, and jank followed host load (19 to 40 on 16 cores) rather than draw distance. Measure
|
|
1000 and 1500 on the expanded chat, on a host under load 10, before lowering it.
|
|
|
|
### LegendList patch
|
|
|
|
`patches/@legendapp+list+3.7.1.patch` carries ten changes for the timeline. Its header lists
|
|
them by purpose, and
|
|
[legend-list #593](https://github.com/LegendApp/legend-list/issues/593) reports each upstream.
|
|
Drop a hunk when the installed LegendList ships its fix.
|
|
|
|
### Scroll view corrections
|
|
|
|
`modules/paseo-scroll` replaces React Native's scroll view on both platforms with a subclass:
|
|
Android's `PaseoScrollView` and iOS's `PaseoScrollViewComponentView`.
|
|
`VisibleContentPositionClampTest` covers Android; iOS has no native test harness.
|
|
|
|
**Content clamp.** A mount that shrinks the content while `maintainVisibleContentPosition` is set
|
|
applies the shrink twice on both platforms: the scroll view clamps its offset to the new end during
|
|
the mount, and React Native then adds the anchor's movement to the clamped offset
|
|
([RN #58578](https://github.com/react/react-native/issues/58578), fix in
|
|
[PR #58695](https://github.com/react/react-native/pull/58695)). A turn that folds while the list
|
|
follows its end lands above the end. Android defers the clamp to the pre-draw pass, and iOS restores
|
|
the pre-mount offset for the adjustment and clamps after it.
|
|
|
|
**Removed anchor (iOS).** A hold removes the end pin in the same mount that opens the tapped
|
|
disclosure, and React Native 0.86 on iOS moves the offset by the removed view's frame. The iOS
|
|
subclass keeps the offset. Android keeps a removed view's last frame, so it keeps the offset already.
|
|
React Native 0.88 skips the adjustment for a removed anchor
|
|
([PR #57294](https://github.com/react/react-native/pull/57294)).
|
|
|
|
**End pin during a drag.** Both subclasses recognize the pin by its native ID, `paseo-end-pin`,
|
|
and skip its correction while the user drags ([user scroll](#user-scroll)). This one has no React
|
|
Native counterpart; it stays while the timeline uses the pin.
|
|
|
|
Remove the content clamp and removed-anchor overrides once the installed React Native includes
|
|
their fixes.
|