Release — Transparent Stream churn reduction (#5456, #5367)

[nesquena-hermes]

Release — Transparent Stream churn reduction (#5456, #5367)

Ships @Stacey2911's follow-up to the identity-preserving live-row reconcile: the renderer skips redundant work while a response streams, reducing visible flicker and jank.

What it does

1. Skip rewriting a preserved row's innerHTML when the incoming HTML is unchanged (exact-string compare).
2. Skip reinserting a preserved row when it's already in the correct sibling position (reverse-walk with expectedNextSibling, reproduces the old terminal order).
3. Stop internal scrollbar flicker on long thinking blocks via scrollbar-gutter:stable (matches four in-repo precedents).

Gate results (Codex + Fable-UX + full suite + independent deep review)

• Deep-review subagent: SAFE TO SHIP — attrs/className synced unconditionally above the skip gate; _tcData carry-forward + interactive-state restore run always via _rehydrateTransparentLiveRow even on skip; only the redundant DOM write is gated. Identity-preservation invariant intact.
• Codex: SAFE TO SHIP — no findings.
• Fable-UX: SHIP-UX — the three reconcile skips are a pure no-op-work reduction (terminal DOM test-verified identical; the only visible difference is the absence of flicker/animation-restart/scroll-reset). The scrollbar-gutter line is a ~5px static delta matching in-repo precedent, below the screenshot-gate threshold. No visual sign-off required for merge.
• Full suite: 11970 passed (+ the PR's extensive reconcile coverage); the only 2 failures are the known env-flaky nous_picker/service_tier pair (unrelated, green on CI).

Note: the PR branched before master's #4295 scroll-anchor fix, so the raw head showed 2 unrelated scroll-anchor reds; they clear on merge-forward (verified: 114 transparent/anchor tests green on the merged tree). Staged on current master.

Diff scope: static/ui.js, static/style.css + tests. Credit: @Stacey2911.

[greptile-apps]

Greptile Summary

This release PR ships three complementary streaming churn-reduction optimisations for the Transparent Stream renderer, building on the identity-preserving live-row reconcile: it skips innerHTML writes when HTML is unchanged, skips DOM reinsertion when a row is already in the correct sibling position, and preserves thinking-block scroll containers during refresh.

• Row-position skip (_renderLiveAnchorActivitySceneTransparent): rows are now collected into targetRenderedRows[] and placed via a reverse-walk that checks node.nextSibling === expectedNextSibling, so already-correctly-positioned rows produce zero DOM mutations.
• innerHTML skip (_refreshTransparentLiveRow): an exact-string compare guards the innerHTML assignment, preventing layout thrash on unchanged prose rows; _rehydrateTransparentLiveRow still runs unconditionally so _tcData, copy-button handlers, and expand/collapse state are always synced.
• Thinking-specific refresh (_refreshTransparentThinkingLiveRow): thinking-card bodies are updated by patching only pre.textContent (preserving scrollTop) rather than blowing away innerHTML, accompanied by a targeted _decorateTransparentEventRow call to keep the preview in sync; scrollbar-gutter:stable on the body element prevents the scrollbar from causing a layout shift when the block first overflows.

Confidence Score: 4/5

Safe to merge — the changes are a pure no-op-work reduction with no changes to what actually renders or how state is preserved.

The three optimisation gates all sit beneath the unconditional attribute/className sync and the always-executed _rehydrateTransparentLiveRow call, so _tcData carry-forward, copy-button rewiring, and expand/collapse state restoration are unaffected by every skip path. The reverse-walk position check correctly handles stale rows present between valid rows before removal, causing at most a harmless extra insertBefore rather than a skip, with the final order still correct. The thinking-specific refresh preserves the scroll container's DOM node identity and scrollTop by updating only pre.textContent. The score is not 5 because the DOM manipulation logic is intricate enough that edge cases in production are difficult to rule out purely from static analysis.

static/ui.js — the reverse-walk insertion logic and the thinking-row refresh path are the most complex new code, particularly the transparentLiveRowAlreadyPositioned check when stale rows are still present between valid rows.

Important Files Changed

Filename	Overview
static/ui.js	Three optimisation gates added: reverse-walk position-skip in _renderLiveAnchorActivitySceneTransparent, exact-string innerHTML guard in _refreshTransparentLiveRow, and new _refreshTransparentThinkingLiveRow specialisation. Logic is sound; _rehydrateTransparentLiveRow and preservedState capture are unchanged so interactive-state restoration is unaffected.
static/style.css	Adds scrollbar-gutter:stable to .transparent-event-row .thinking-card.open .thinking-card-body; one-line change matching existing precedent in the stylesheet.
tests/test_issue5367_transparent_live_row_reconcile.py	Extensive new test coverage: position-skip counting, stable-render zero-insertion, reorder correctness, footer-repair, _tcData carry-forward, innerHTML-skip with interactive-state survival, and thinking-scroll-container preservation.
tests/test_issue3820_chat_activity_display_mode.py	Single assertion updated to include scrollbar-gutter:stable in the expected CSS snapshot string; change is mechanical and correct.
tests/test_live_to_final_anchor_visible_order.py	Adds eval of the new _refreshTransparentThinkingLiveRow function so existing live-to-final order tests can load the updated _refreshTransparentLiveRow dependency chain; no logic changes to test assertions.
CHANGELOG.md	Adds the release entry for the churn-reduction work; maintained by the release process as expected for this repository.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[_renderLiveAnchorActivitySceneTransparent] --> B[Build targetRenderedRows\nforward walk over scene rows]
    B --> C{renderedNode exists?}
    C -- No --> D[skip]
    C -- Yes --> E[push to targetRenderedRows\nwrote=true]
    E --> F[Reverse-walk targetRenderedRows]
    F --> G{transparentLiveRowAlreadyPositioned?\nparentElement===blocks\nnextSibling===expectedNextSibling}
    G -- Yes skip DOM op --> H[expectedNextSibling = renderedNode]
    H --> F
    G -- No --> I{expectedNextSibling\nin blocks?}
    I -- Yes --> J[blocks.insertBefore\nrenderedNode, expectedNextSibling]
    I -- No --> K[blocks.appendChild\nrenderedNode]
    J --> H
    K --> H
    F --> L[preserveByKey: remove stale rows]
    L --> M{wrote?}
    M -- Yes --> N[_syncTransparentEventControls]

    subgraph _refreshTransparentLiveRow
        R1[Sync attributes + className unconditionally] --> R2{_refreshTransparentThinkingLiveRow?}
        R2 -- Yes thinking row --> R3[Update pre.textContent only\npreserves scrollTop\n_decorateTransparentEventRow]
        R3 --> R4[_rehydrateTransparentLiveRow\ntcData carry-forward\nrewire interactive state]
        R2 -- No general row --> R5{innerHTML changed?}
        R5 -- Yes --> R6[existing.innerHTML = newHtml]
        R5 -- No skip DOM write --> R4
        R6 --> R4
    end

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[_renderLiveAnchorActivitySceneTransparent] --> B[Build targetRenderedRows\nforward walk over scene rows]
    B --> C{renderedNode exists?}
    C -- No --> D[skip]
    C -- Yes --> E[push to targetRenderedRows\nwrote=true]
    E --> F[Reverse-walk targetRenderedRows]
    F --> G{transparentLiveRowAlreadyPositioned?\nparentElement===blocks\nnextSibling===expectedNextSibling}
    G -- Yes skip DOM op --> H[expectedNextSibling = renderedNode]
    H --> F
    G -- No --> I{expectedNextSibling\nin blocks?}
    I -- Yes --> J[blocks.insertBefore\nrenderedNode, expectedNextSibling]
    I -- No --> K[blocks.appendChild\nrenderedNode]
    J --> H
    K --> H
    F --> L[preserveByKey: remove stale rows]
    L --> M{wrote?}
    M -- Yes --> N[_syncTransparentEventControls]

    subgraph _refreshTransparentLiveRow
        R1[Sync attributes + className unconditionally] --> R2{_refreshTransparentThinkingLiveRow?}
        R2 -- Yes thinking row --> R3[Update pre.textContent only\npreserves scrollTop\n_decorateTransparentEventRow]
        R3 --> R4[_rehydrateTransparentLiveRow\ntcData carry-forward\nrewire interactive state]
        R2 -- No general row --> R5{innerHTML changed?}
        R5 -- Yes --> R6[existing.innerHTML = newHtml]
        R5 -- No skip DOM write --> R4
        R6 --> R4
    end

Loading

_{Reviews (1): Last reviewed commit: "release #5456: transparent-stream churn ..." | Re-trigger Greptile}