mirror of https://github.com/getpaseo/paseo.git synced 2026-10-21 08:42:39 +00:00

Files

T

Mohamed Boudra 6215e08efe Smooth streaming replies with a continuous left-to-right fade (#4859 )

* feat(app): reveal streaming text as one continuous fade front

Streaming assistant text is released by word and every character fades in
over the same 150 ms envelope from a start time owned by the message. Start
times never decrease in reading order, so a line paints as a single front
moving left to right, however the text is chunked. Per-word envelopes with an
internal stagger let the next word's first letter overtake the previous word's
last letter, which read as holes and flashing words at the real frame rate;
100 ms frame strips hid it.

Native renderers receive the fade ranges as a prop on a host view wrapping the
root Text, so ranges and text land in the same Fabric mount transaction. The
earlier binding sent ranges through a separate async module call keyed by view
tag and had to reconcile them against the view's text; on a fast phone the UI
thread lags JS by several commits, mounts and calls interleave, and every
reconciliation heuristic guessed wrong. Native code no longer infers newness
or creates start times.

The mock load-test provider now separates cycles with a blank line so a cycle
heading is not appended to the previous paragraph.

* fix(ci): refresh streaming dependencies and isolate E2E setup

* test(app): distinguish fade cleanup from Markdown replacement

* test(app): detect restarted fades during Markdown updates

* docs(app): keep streaming guidance focused on constraints and QA

* test(app): control animation time in Android fade assertions

Fixed wall-clock sleeps let emulator scheduling select the sampled animation frame. Inject the animator time source and drive paint at exact timestamps within one UI-thread operation; production keeps the system clock. Verify the mid-fade sample and the exact cleanup boundary without sleeps, polling, or retries.

* fix(test): compile the desktop renderer before lifecycle checks

The lifecycle fixture treated Metro /status as app readiness. Its first
Settings click therefore spent its 90-second UI budget compiling the cold
bundle. An isolated cold-cache run restricted to one CPU reproduced the
click timeout before the app runtime had loaded.

Reuse the browser suite's existing bundle warmup before launching Electron,
and preserve Metro output in the lifecycle artifacts. The UI timeout,
build-request timeout, lifecycle assertions and product behavior are unchanged.

CI did not preserve Metro output, so its precise startup timing is not
recoverable from the failed run. The retained log makes subsequent startup
failures diagnosable without relying only on an empty renderer text dump.

Validation: three complete lifecycle E2E runs under private Xvfb displays;
existing Metro readiness tests; app typecheck; targeted lint; root format.

* test(file-observer): await burst delivery through native recovery

The deletion phase required every event within 10 seconds, but native
coalescing recovery uses a 30-second safety audit followed by the existing
reconciliation debounce. An idle diagnostic excludes that delayed audit
and therefore cannot act as a completion barrier.

Await the required delivered events instead, preserving every deletion
assertion and the existing overall test watchdog. A real-filesystem test
with controlled native notifications reproduces 95 outstanding paths at
the old deadline and verifies completion when the safety audit delivers
them. No production observer behavior changes.

* test(file-observer): verify burst recovery through public events

The controlled-clock regression constructed a private native backend,
bypassing the interface used by consumers. Consolidate recovery coverage
into the public observer integration test instead: drive real writes,
deletes and directory renames, then await every required public event,
including the 450 surviving files at their renamed paths.

No public capability was added: subscribe callbacks already express
completion. No production behavior or test timeout changes.

* test(app): drive Android fade tests through the native host

The instrumentation suite constructed TailFadeInAnimator directly, advanced
its private clock, and counted FadeInSpan instances. It now mounts the
WordFadeHost that React mounts, feeds it the ranges prop the bridge sends,
and asserts rendered pixels: hidden before a start time, a monotone front
inside and across words, settled frames equal to the baseline, and no frame
callbacks left after settling. Span counts and internal timing state are no
longer asserted.

Choreographer cannot be advanced deterministically from a test and the fade
epoch is the message's wall-clock start time, so the host takes a
WordFadeFrameClock (time plus frame callbacks) as its smallest public seam;
production keeps the Choreographer-backed default.

Fixture text is sized in pixels so every sample stays on one line at any
density; at 420 dpi the 32sp fixture wrapped and the column helper summed
glyphs from the first line.

2026-09-15 03:15:24 +02:00

8.4 KiB

Raw Blame History

Agent stream performance

How assistant text gets from a provider to the screen, and why it is paced on the way. Read this before changing packages/server/src/server/agent/agent-stream-coalescer.ts, the reducer queue in packages/app/src/timeline/session-stream-reducers.ts, or the reveal in packages/app/src/hooks/use-revealed-text.ts.

For terminal output, which is a separate pipeline with separate budgets, see terminal-performance.md.

The pipeline

provider deltas (every provider streams incrementally)
  → AgentStreamCoalescer (daemon, leading + trailing, ≤1 message per 60ms per agent)
  → recordTimeline: one canonical row per flushed item
  → agent_stream ws message
  → reducer queue (app, one commit per frame) → session store
  → source-item plugin transforms → native Markdown blocks / tool grouping
  → paced reveal (app, per displayed item) → paint

Every provider delivers incremental text, so there is no provider that needs special handling: Claude via includePartialMessages, Codex via agent_message_delta, ACP agents via agent_message_chunk, Pi and OMP via text_delta.

Why the reveal is paced

Arrival is lumpy and there is no fixing that at the source. A 60ms coalescing window carries however many characters the model produced in those 60ms, which swings by an order of magnitude within a single turn. Painting each delta as it lands makes the size of those lumps visible, and that is what reads as jagged.

So arrival sets a target and the reveal rate is derived from the backlog instead. A burst shortens the interval within the word cadence. A late frame releases one word, without spending missed frames as credit to show a group at once. Shrinking the coalescing window does not fix this — it makes the lumps smaller and more frequent, at the cost of message rate on a daemon loop that already contends with terminal frames and per-message relay encryption.

Invariants

The coalescer is leading + trailing. The first delta after an idle window flushes synchronously; only the rest of the burst waits for the trailing timer. Reverting to trailing-only adds a full window to the first character of every turn. Same shape and the same reason as TerminalOutputCoalescer.
The leading flush adds a canonical row, and that is fine. A burst's first chunk lands as its own timeline row. mergeAssistantChunks / mergeReasoningChunks in timeline-projection.ts join contiguous same-turn rows, and clients read the projected timeline, so history is unaffected. Tests that assert on raw rows have to account for the extra row; tests that assert on what a client sees do not.
The store holds the full text; only the rendered slice is paced. Copy, selection, the chat outline, and scroll geometry all read the same string the user can see. Pacing the store instead would leave the bottom anchor chasing a content height that is ahead of the reveal.
Markdown blocks belong to presentation. agent-stream/presentation.ts retains completed native blocks and parses only the growing last block during append. Splitting in the reducer discards paragraph separators and exposes fragments to plugin callbacks, which need the whole source text.
First sight of a text is revealed whole. Only growth is paced. This is what makes history hydration, timeline replay, a virtualized row remounting on scroll, and an already-finished message all render complete on first paint without a special case for each.
Completion releases an unfinished word. Every platform drains queued words through the same pacing when the provider finishes; the last word also finishes fading.
The reducer queue commits on a frame, with a timer as the ceiling. A frame callback never fires in a hidden tab, so a timer races it and wins when nothing is painting — the store has to keep advancing either way.
A history row re-renders only when its item or layout item identity changes. The inverted FlatList hands every mounted cell a new index and ref whenever a row is prepended, so without a memo boundary each coalesced tick re-rendered every mounted row (about 50 on a phone, 100–250 ms of JS per tick). layoutStream keeps a layout item's identity when nothing about it changed, useRevisedHistoryRows hands a fresh item identity to rows whose tool-call group, expanded state, or breakpoint changed, and HistoryStreamRow memoizes on both. Every viewport runs its history through that hook; the web viewport once skipped it and history hosts of a live tool group went stale. A new field on StreamLayoutItem must be added to areLayoutItemsEquivalent, or sharing silently stops.

Measuring

Word reveal lives in packages/app/src/word-stream. Native attribution and pinned upstream revisions are in packages/app/modules/paseo-word-stream/UPSTREAM.md.

Judge the visible front across word boundaries at the recording's native frame rate. No character should become more opaque than text before it in reading order, and the front should not visibly change speed at word boundaries. Sampling at 100 ms hid the previous defect: later letters appeared before earlier letters, leaving holes that read as flashing words during playback.

Exercise provisional Markdown and recycled views when checking fade-once behavior. A table forming or inline formatting closing can change the rendered structure without making previously visible text new again.

On native, text and its fade metadata must become visible together. An earlier implementation sent metadata asynchronously and flashed new text fully opaque for one frame before dimming it. Preserve native layout, selection, and inline styles, and keep animation ticks off the JS thread. Do not remove the animation host's layout box with display: contents: RN forcibly flattens it and removes the native animation owner. iOS table cells receive pacing without opacity animation; include that limit in platform QA reports.

Compare release APKs on the same Android device with the mock bursty-stream provider, identical prompts, fresh conversations, and equal sampling windows. Collect agent-device perf frames and perf memory sample; keep screen recording out of the timed runs. Software-rendered emulator results are comparative evidence, not physical-device frame-rate guarantees. Native instrumentation tests in the module check pixels, append/replacement behavior, and cleanup.

Smoothness (user-perceived): packages/app/e2e/browser/agent-stream-smoothness.spec.ts, gated behind PASEO_AGENT_STREAM_PERF_E2E=1. Drives the mock provider's bursty-stream model and reports coefficient of variation of characters painted per frame (smoothness) plus p95 gap between visible updates (stalls). Both numbers are needed: a stalled stream is perfectly smooth.
Reproducing bursty arrival: the bursty-stream model in mock-load-test-agent.ts emits uneven runs of tokens separated by idle gaps. Burst sizes come from a seeded generator, so a run repeats exactly.
Rate policy in isolation: packages/app/src/word-stream/internal/model.test.ts checks the shared word scheduler without a renderer.
Fade behavior: word-stream-fade.spec.ts checks web direction, layout stability, selection, and tail cleanup. Native tests in modules/paseo-word-stream drive the host view React mounts with the same range props the bridge sends, advance frame time through the host's injected frame clock, and check rendered pixels and animation completion on Android and iOS.

Historical character-reveal baseline (2026-08, Expo web against a local dev daemon, real Claude Haiku agent, ~8.5s samples during active streaming). The paint-on-arrival column disabled the former reveal horizon:

	paint on arrival	paced
frames that advanced the text	6%	87%
chars-per-frame CV	4.11	1.86
gap between visible updates, p50	317ms	17ms
gap between visible updates, p95	383ms	17ms

Total characters painted is roughly the same either way — the reveal changes when they land, not how many arrive.

Measure the total length across every assistant-message element, not the last one. A turn emits many assistant messages, so the tail element keeps changing identity and its length is not monotonic; sampling only the tail reads those handovers as resets and reports almost no growth. sampleStreamFrames does this correctly.

8.4 KiB Raw Blame History Unescape Escape