Skip to content

Show inline edit placeholders while the diff renderer loads - #27650

Merged
teamleaderleo merged 25 commits into
feat-cmux-nextfrom
lane/aiforui-inline-diff-loading-20261029
Nov 2, 2026
Merged

teamleaderleo merged 25 commits into
feat-cmux-nextfrom
lane/aiforui-inline-diff-loading-20261029

Conversation

@teamleaderleo

@teamleaderleo teamleaderleo commented Oct 29, 2026 •

Copy link
Copy Markdown
Collaborator

Opening a transcript edit currently shows its filename above a blank body until the lazy diff renderer arrives. This change draws static line placeholders using the existing code line height, preview cap and fade; header controls remain usable.

Leo (2026-10-29):

"I think you guys should just keep going indefinitely. Like just, there's so much random nonsense that you can probably associate every single one of his pointers to one of our situations."

"https://aiforui.dev/learn ... you guys should be taking this course and then reading into how it goes."

Audit

File:line Rule Before After
webviews/src/agent-session/acpmux/conversation/EditDiff.tsx:98 (base) Course item 9: loading never renders nothing; match the loaded layout Suspense fallback={null} leaves only the header and optional preview action A lightweight placeholder body follows known line counts and the existing eight-line preview; known no-line edits retain their existing explanation

No syntax-renderer dependency is added to the initial bundle. One painted placeholder block per edit avoids creating a DOM element per line. There are no new timers, observers or animations.

Geometry limit: the collapsed preview retains its existing cap. Expanded wrapped text and skipped-line separators receive their exact height only after the renderer loads. The fallback does not duplicate the diff parser or wrapping engine.

Validation

  • Local bun run check and scripts/web-lint.sh: passed.
  • Remote deferred-renderer red/green tests and gallery captures: pending.
  • Tests cover pending → loaded, expanding a 1,284-line pending edit, and the existing no-line explanation.
  • Localization reuses changes.loading and changes.noLineChanges; no new product copy.
  • Overlap search found the original lazy-loading PR cmux-next: the agent page's diff and highlighting code loads after its first frame (cx-z9kz0) #19974, already merged. pr-overlap was run but its API form is unsupported by the publishing broker; symbol search found no competing inline loading fix.

Before / after

Pending gallery capture of agent-pane.inline-diff-loading in both themes. Fixtures contain synthetic code only.

UI review

Verdict: blocked

Blockers

  • Before/after capture and rendered inspection are pending.

Should fix

  • None identified in source inspection.

Nits

  • Expanded diffs with skipped sections or wrapped lines cannot reserve their final measured height before the renderer arrives.

Needs a human / needs a device

  • No new empty-state copy. Browser capture pending.

Agent session: agent session


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Shows placeholder lines while the inline diff renderer loads, so opening a transcript edit no longer leaves a blank body under its filename, and keeps the transcript from jumping when a fitting chat overflows.

  • Placeholders draw each edit's lines as painted text in the diff's font, gutter, wrapping and scroller, plus a separator before hunks that skip file lines; edits past 400 lines draw the remainder as one block.
  • The placeholder and rendered diff share a grid cell until every diff host has its height, so the swap is free of layout shift; a chat that a placeholder makes overflow now opens where the reader is, not at the latest row, and its tool outputs open during the fold hold.
  • The existing preview cap, expand control, and empty-edit explanation are unchanged. Adds gallery fixtures, browser and unit tests, and a release note.

Written for commit 51bdab0. Summary will update on new commits.

View guided diff Turn on auto-fix

@github-actions github-actions Bot added the risk:normal Risk tier (docs/ci/risk-tiers.md) label Oct 29, 2026
@github-actions

github-actions Bot commented Oct 29, 2026 •

Copy link
Copy Markdown
Contributor

cmux status (one comment, edited in place; each line is updated by the job that owns it)

Review 51bdab0: HQ feed card · gallery before/after runs · checks

App of this head (app.zip, kept 1 day)

gh workflow run reload-build.yml -R manaflow-ai/cmux --ref feat-cmux-next -f tag=pr27650 -f ref=lane/aiforui-inline-diff-loading-20261029 -f platform=macos -f backend_mode=local

Gallery before/after for 51bdab0: 16 states rendered, 0 images differ, 2983 more touched states not rendered. Images are in the run's artifact, not on this public PR; the independent review of this head reads them on its own, so the PR needs no hand-made screenshots of these states.

gh run download 41429765319 -R manaflow-ai/cmux -n gallery-advisory-27650-51bdab0687055470f97c5507fd4442804a3d88c8 (then read gallery-review.json)

States
State Theme Status Diff Picked by
agent-pane.access-offer/turn-no-credits Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-credits Apple System Colors unchanged 0% own conversation.css
agent-pane.access-offer/turn-low-credits Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-low-credits Apple System Colors unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-offer Apple System Colors Light unchanged 0% own conversation.css
agent-pane.access-offer/turn-no-offer Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/single Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/single Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/grouped Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/grouped Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/single-multiedit Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/single-multiedit Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/grouped-multiedit Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/grouped-multiedit Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/single-long Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/single-long Apple System Colors unchanged 0% own conversation.css
agent-pane.approval-edits/grouped-long Apple System Colors Light unchanged 0% own conversation.css
agent-pane.approval-edits/grouped-long Apple System Colors unchanged 0% own conversation.css
agent-pane.attachment-source/before Apple System Colors Light unchanged 0% own conversation.css
agent-pane.attachment-source/before Apple System Colors unchanged 0% own conversation.css
agent-pane.attachment-source/corner Apple System Colors Light unchanged 0% own conversation.css
agent-pane.attachment-source/corner Apple System Colors unchanged 0% own conversation.css
agent-pane.attachment-source/small Apple System Colors Light unchanged 0% own conversation.css
agent-pane.attachment-source/small Apple System Colors unchanged 0% own conversation.css
agent-pane.attachment-source/labelled Apple System Colors Light unchanged 0% own conversation.css
agent-pane.attachment-source/labelled Apple System Colors unchanged 0% own conversation.css
agent-pane.attachment-source/outside Apple System Colors Light unchanged 0% own conversation.css
agent-pane.attachment-source/outside Apple System Colors unchanged 0% own conversation.css
agent-pane.background-activity/duration-columns Apple System Colors Light unchanged 0% own conversation.css
agent-pane.background-activity/duration-columns Apple System Colors unchanged 0% own conversation.css
agent-pane.background-activity/pinned-live-tail-light Apple System Colors Light unchanged 0% own conversation.css
agent-pane.background-activity/pinned-live-tail-light Apple System Colors unchanged 0% own conversation.css

Pick other states with a Gallery: entry.id, entry.id/variant line in the PR body.

Passes: CI passes on 51bdab0687.

CI passes on 51bdab0687 (run 41429765501 attempt 1).

Written by scripts/ci/classify_failures.py (ci-failure-attribution.yml); signatures are its SIGNATURES table. A machine verdict is the runner's fault, not this PR's; yours means the failing file is one this PR changes, also red on main that main's latest full suite fails the same way, seen on other PRs that it failed on another pull request's run lately.

web and size checks: green

Shipped in:

@blacksmith-sh

blacksmith-sh Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Found 2 test failures on Blacksmith runners:

Failures

Test View Logs
test/transcript-upward-anchor.test.ts/transcript-upward-anchor.test View Logs
test/transcript-upward-anchor.test.ts/transcript-upward-anchor.test View Logs

Fix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Owned by an agent session · session

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at 523e862

Reviewer: codex gpt-6-astra high, fast tier.

Follow-ups: 1. Each lands as an issue in this repo that links this receipt; the lane that opened the PR fixes it forward.

SHIP at 523e862

Visual verdict: no images; Leo tries the build

No correctness regressions found in source review. Tests could not run: Bun and webview dependencies are unavailable.

  1. [P2] [follow-up] webviews/src/agent-session/acpmux/conversation/EditDiffLoading.gallery.tsx:47 — No screenshots are available for this head. Capture and inspect the pending and loaded states in both themes.

Follow-ups:

  • Capture and inspect the inline-diff gallery states in both themes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo
teamleaderleo marked this pull request as ready for review November 1, 2026 03:34
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (carry): SHIP at e5aca49 (base merge only since 523e862; patch-id unchanged)

@cubic-dev-ai cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 issue found across 7 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="webviews/test/edit-diff-loading.test.tsx">

<violation number="1" location="webviews/test/edit-diff-loading.test.tsx:126">
P3: This assertion only checks that the empty-edit explanation has some text. Assert the exact `changes.noLineChanges` string so a wrong or missing message fails the test.</violation>
</file>

Reply with feedback, questions, or to request a fix.

View guided diff | Turn on auto-fix | Re-trigger cubic

const empty = file(0);
empty.edits[0]!.hunks = [];
await draw(empty);
expect(host.querySelector(".cv-edit-diff__empty")?.textContent).toBeTruthy();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3: This assertion only checks that the empty-edit explanation has some text. Assert the exact changes.noLineChanges string so a wrong or missing message fails the test.

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At webviews/test/edit-diff-loading.test.tsx, line 126:

<comment>This assertion only checks that the empty-edit explanation has some text. Assert the exact `changes.noLineChanges` string so a wrong or missing message fails the test.</comment>

<file context>
@@ -0,0 +1,128 @@
+  const empty = file(0);
+  empty.edits[0]!.hunks = [];
+  await draw(empty);
+  expect(host.querySelector(".cv-edit-diff__empty")?.textContent).toBeTruthy();
+  expect(host.querySelector(".cv-edit-diff__loading-lines")).toBeNull();
+});
</file context>

@cmux-bot
cmux-bot Bot temporarily deployed to ci-routing-agent November 1, 2026 04:17 Inactive
@cmux-bot
cmux-bot Bot temporarily deployed to ci-routing-agent November 1, 2026 04:23 Inactive
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (carry): SHIP at 06f2d6c (base merge only since dba3d7b; patch-id unchanged)

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Orphaned: no activity for 13 h, and no lane holds a lease on it. The orphan sweep could not merge feat-cmux-next in: conflicts in webviews/src/agent-session/acpmux/conversation/EditDiff.tsx. Listed for a lane to resolve.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (subagent claude-opus-5-5 medium, conflict-resolution delta): SHIP at f8c93b8

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (next-review patch-id; carried): SHIP at 508bb57

The independent SHIP at a7a177c carries to this head: the PR's own change (git diff $(git merge-base feat-cmux-next HEAD) HEAD) has the same git patch-id --verbatim (385b646d0234c86c) at both heads, and no merge between them was resolved by hand. Nothing new to review. A newer BLOCK, or any change to the PR's own diff, ends the carry.

…ve it

Red on 4367630: the fold's placeholder makes the transcript overflow mid-fold, the
not-yet-opened chat jumps to its latest row and the user row reads 25 px, not 44.
cmux-ci test: bun test test/edit-diff-loading.browser.test.ts (run 41413975193): 1 fail.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-fc739fd2f4e557ae7189
@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex gpt-6.1-sol high, sweep, via the review router; full diff from merge base 35647a2 to this head): SHIP at 508bb57

[P2] [follow-up] webviews/src/agent-session/acpmux/conversation/EditDiffLoading.tsx:39 - For wrapped prose edits, all lines beyond the first 400 are collapsed into a single line-height block, although each long line may wrap to multiple rendered rows; resolving the diff therefore expands the body and causes visible transcript layout shift - preserve per-line placeholders for wrapped edits or calculate the remaining wrapped row count.

teamleaderleo and others added 2 commits November 2, 2026 09:14
…here the reader is

Opening an edit's card in a chat that fit drew its placeholder at the rendered diff's
height, so the fold's height animation made the transcript overflow mid-fold. The
not-yet-opened chat then took its first overflow as "open at latest": it set the
offset to the end (18.7 px), and the fold hold put it back a frame later. Rows above
the card bounced -19/-9/-7 px (gallery health, transcript#edit-long-line-*). Past the
hold the same path moved the whole thread up under the clicked line (base: -113 px
when the diff painted 430 ms after the click).

While a clicked disclosure holds its line, the chat opens at the current offset and
follows only if that is the end.

Box shift of the edit states is now 0 (was 0.0024-0.0098). What gallery health still
counts is Chromium's layout-shift entries for the rows below the card moving down
while the fold opens to the diff's real height, as every tool disclosure does
(cut-line-open 0.0129). On base the card folded open to its header only and the
diff popped in after the step's settle window, so the motion was unmeasured, not
absent. The four rows take the measured values: code 0.0125, code-cut 0.0156,
prose 0.015, preview-open 0.0781 (its Show all step alone is 0.0619).

Red/green: bun test test/edit-diff-loading.browser.test.ts via cmux-ci
- red without this commit (run 41413975193): user row 25 px, expected 44
- green with it (run 41414663522): 8 pass; also edit-diff-loading.test.tsx,
  agent-pane-fold-keeps-place, transcript-fold-motion, reopened-chat-history,
  transcript-parked-stream all pass. Gallery health on 46 transcript cases
  (run 41417656420): edit states box shift 0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-fc739fd2f4e557ae7189
…m:manaflow-ai/cmux into lane/aiforui-inline-diff-loading-20261029
@cursor

cursor Bot commented Nov 2, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at f769f6b

Reviewer: codex gpt-6.1-sol xhigh, fast tier.

Follow-ups: 2. Each lands as an issue in this repo that links this receipt; the lane that opened the PR fixes it forward.

SHIP at f769f6b
Visual verdict: no images; Leo tries the build

  1. [P2] [follow-up] webviews/src/agent-session/acpmux/conversation/conversation.css:1562: Paint the aggregated remainder. .cv-edit-diff__loading-rest reserves height without painting anything, so expanding the 1,284-line pending fixture exposes 884 blank rows. A repeating background could preserve placeholders without additional DOM nodes.

  2. [P2] [follow-up] webviews/src/agent-session/acpmux/conversation/EditDiffLoading.gallery.tsx:57: Supply loading/loaded captures in both themes; none were available for this head.

Source inspection and syntax parsing completed. Tests could not run because Bun and dependencies are absent.

Follow-ups:

  • Paint placeholder rows beyond the 400-line text budget.
  • Capture and inspect loading/loaded states in both themes.

cmux-bot[bot]
cmux-bot Bot previously approved these changes Nov 2, 2026

@cmux-bot cmux-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cmux-bot approves f769f6b: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

@cmux-bot
cmux-bot Bot temporarily deployed to ci-routing-agent November 2, 2026 09:47 Inactive
@cmux-bot
cmux-bot Bot temporarily deployed to ci-routing-agent November 2, 2026 09:48 Inactive
@cmux-bot
cmux-bot Bot dismissed their stale review November 2, 2026 09:51

A newer verdict blocks 07685a9 (no independent SHIP at the head).

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (next-review patch-id; carried): SHIP at 07685a9

The independent SHIP at f769f6b carries to this head: the PR's own change (git diff $(git merge-base feat-cmux-next HEAD) HEAD) has the same git patch-id --verbatim (3d8310b148bd8353) at both heads, and no merge between them was resolved by hand. Nothing new to review. A newer BLOCK, or any change to the PR's own diff, ends the carry.

teamleaderleo and others added 2 commits November 2, 2026 10:08
…old hold is over

The reading play opens a tool output. Outside a transcript its fold keeps the
clicked line in place by moving the scroller until the fold and FOLD_SETTLE_MS are
over (useAnchoredCollapse keepHeader). With the edit's placeholder holding its
height the stage is ready inside that window, so the test's scrollIntoView was put
back to 0 and the off-screen diagram never drew its error: the webview verdict's
own red on #27650 (transcript-content-font, dark and light).

cmux-ci: bun test test/transcript-content-font.test.ts
- red at f769f6b (run 41423087171): 2 fail, .cv-diagram__error never visible
- green (run 41425507433): 2 pass

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-fc739fd2f4e557ae7189
…m:manaflow-ai/cmux into lane/aiforui-inline-diff-loading-20261029
@cursor

cursor Bot commented Nov 2, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex gpt-6.1-sol xhigh, router-review): BLOCK at 0e2a2bb

BLOCK at 0e2a2bb

Visual verdict: no images; Leo tries the build

  1. [P1] [blocking] webviews/test/transcript-content-font.test.ts:76 adds an unmarked page.waitForTimeout. check:fixed-waits scans this file, has no baseline allowance, and requires a // fixed-wait: marker or condition-based wait, so bun run check fails. Replace it with a condition/event wait or explicitly mark the timing exception.

Review BLOCK at 0e2a2bb (router-review): the fixed waitForTimeout broke
check:fixed-waits. The diagram is now scrolled to on each frame until its error
draws, so a fold hold that puts the scroll back only delays it.

cmux-ci (run 41428914421): transcript-content-font 2 pass; bun run check rc 0.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Agent-Session: https://cmux.com/deeplink/agent?id=aid-fc739fd2f4e557ae7189
@cursor

cursor Bot commented Nov 2, 2026

Copy link
Copy Markdown

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

@teamleaderleo

Copy link
Copy Markdown
Collaborator Author

Review (codex, router-review): SHIP at 51bdab0

Reviewer: codex gpt-6.1-sol xhigh, fast tier.

Follow-ups: 1. Each lands as an issue in this repo that links this receipt; the lane that opened the PR fixes it forward.

SHIP at 51bdab0
Visual verdict: no images; Leo tries the build

Source review found no blocking correctness issue. Unit/type checks could not start because dependencies are absent.

Follow-ups:

  1. [P2] [follow-up] webviews/src/agent-session/acpmux/conversation/EditDiffLoading.gallery.tsx:55: Capture and inspect pending and loaded states in both themes.

@cmux-bot cmux-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cmux-bot approves 51bdab0: an independent review passed this exact head (router-review receipt by teamleaderleo). A push needs a new review; a later BLOCK at this head dismisses this approval.

@teamleaderleo
teamleaderleo merged commit d75784f into feat-cmux-next Nov 2, 2026
192 of 197 checks passed
@teamleaderleo
teamleaderleo deleted the lane/aiforui-inline-diff-loading-20261029 branch November 2, 2026 11:01

This branch was previously deployed

1 inactive deployment
ci-routing-agent — 51bdab06 Deployed Nov 2, 2026 by teamleaderleo via cmux-tui tree preflight #100712
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

risk:normal Risk tier (docs/ci/risk-tiers.md)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant