docs(merge-queue): editable SVG animation prototypes for optimization pages by samgutentag · Pull Request #234 · trunk-io/docs2

samgutentag · 2026-06-10T23:14:04Z

What this does

Adds hand-authored, editable SVG animations to docs pages about testing and the merge queue, on pages where we did not already have a visual. The existing Merge Queue videos are left in place.

What lands:

Animations on pages with no existing visual — flaky-tests detection (failure-rate monitor, pass-on-retry monitor) and quarantining, plus merge-queue pending-failure-depth, priority-merging, and advanced-settings.
Excalidraw drawings replaced with style-matched statics — the parallel-queues impacted-target diagram and the priority-merging HIGH/URGENT outcome diagrams now share the animation visual system instead of the old GitBook excalidraw look.

The Merge Queue videos stay on predictive-testing, optimistic-merging, anti-flake-protection, batching, and parallel-queues. Earlier in this branch the videos were swapped for animations; that is reverted. The animations built for those five pages live in /assets, unused, so the work is kept and available later without shipping over the videos.

Sample

One of the parked animations (predictive testing "happy path"), embedded straight from the asset in this branch so you can see the style:

If the motion does not play in your client, the frozen frame still reads correctly by design.

How it works

Each diagram is a single standalone .svg file under /assets/, embedded with a one-line <img src="...">. Editing the .svg updates every page that references it. Inline <svg>/<style> is stripped by Mintlify's MDX, which is why these are external assets.

Shared conventions:

Pure CSS keyframes (no JS, no SMIL), so they animate as <img> and respect prefers-reduced-motion.
One test cycle (one progress-bar scan) is a consistent 0.5s; a green check badge pops into a box's corner when its bar completes.
Each loop holds on the finished frame for about 3s before repeating.
Reads correctly frozen. The static boxes and labels carry the meaning and motion only enhances, so printing or reduced-motion loses nothing.

Notes

The five Merge Queue optimization pages are unchanged from main except parallel-queues, which keeps its video and swaps only the old excalidraw drawing for the new static.
A temporary review gallery and its nav entry are kept local only and are not part of this PR.

🤖 Generated with Claude Code

Adds a standalone, hand-editable SVG diagram above the existing video on the optimistic merging page. It shows the core idea: all three PRs start testing at once at different speeds, and the moment PR c passes (its bundle already contains a and b), PRs a and b snap to finished and all three merge together. Referenced as an <img> because Mintlify's MDX strips inline <style>/<svg>. The animation is pure CSS keyframes inside the .svg (no JS), reads correctly when frozen, and respects prefers-reduced-motion. The original Vidyard video is left in place for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Adds a standalone, hand-editable SVG diagram above the existing video on the predictive testing page. A right-anchored queue (front of queue on the right) shows each PR tested with the code ahead of it: A alone, B with A, C with A and B, then all three merge into main in order. Referenced as an <img> because Mintlify's MDX strips inline <style>/<svg>. Pure CSS keyframes (no JS), reads correctly frozen, respects prefers-reduced-motion. The original Vidyard video is left in place for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Adds a standalone, hand-editable SVG diagram above the existing video on the anti-flake protection page. It shows the rescue: A, B, C test predictively, B fails on a flaky run, pending failure depth holds B in the queue instead of evicting it, C passes with B's changes included (proving B was fine), and optimistic merging merges all three. Referenced as an <img> because Mintlify's MDX strips inline <style>/<svg>. Pure CSS keyframes (no JS), reads correctly frozen, respects prefers-reduced-motion. The original video is left in place for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Adds a standalone, hand-editable SVG above the existing video on the batching page. A without-vs-with comparison on one loop: 6 PRs tested one at a time (6 runs) versus grouped into 2 batches of 3 (2 runs, ABC then DEF). main is on the right; each panel's main pill glows when its work lands, so batching visibly reaches main while the unbatched lane is still going. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Adds a standalone, hand-editable SVG above the existing video on the parallel queues page. Two panels contrast a single queue (four PRs tested one at a time, finishes late) with three lane boxes split by impacted target (frontend, backend, docs) running concurrently and finishing early. PRs are column-aligned A (front, right) to D (back, left); C touches frontend and backend so its tile is split. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…and a hold Applies a shared convention across the predictive testing, optimistic merging, and anti-flake protection prototypes: a green check badge pops into a box's upper-right corner when its progress bar completes, and each 9s loop holds its finished frame for ~3s before resetting. Bars carry state by color (amber testing, green done) so the frozen and reduced-motion states read as done. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mintlify · 2026-06-10T23:14:50Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
trunk	🟢 Ready	View Preview	Jun 10, 2026, 11:16 PM

samgutentag · 2026-06-11T14:26:31Z

❓ Verdict: unknown — June 11, 2026

No eng PR reference, no LaunchDarkly flag, no Linear ticket found in this PR. SVG animation prototypes — unclear if these need to block on any feature gate. Manual review needed to determine if this should be merged.

Verified by Daily Docs Sweep · June 11, 2026

Generated by Claude Code

Adds a hand-editable animated SVG to each of the six "keeper" concept pages, embedded above the relevant section: - flaky-tests pass-on-retry monitor, failure rate monitor, quarantining - merge-queue pending failure depth, priority merging, testing concurrency Each animation is a standalone .svg in the page's asset folder, referenced with a one-line <img>. Pure CSS keyframes (no JS), reads correctly frozen, respects prefers-reduced-motion. Built with the generate-animations skill. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Removes the Vidyard / iframe.ly video embeds from the five optimization pages (predictive testing, optimistic merging, anti-flake protection, batching, parallel queues) and promotes the editable SVG animation in their place, keeping each video's original caption. Also commits the latest refinements to the anti-flake, batching, and parallel-queues animations (sequential cycling, without-vs-with throughput, right-aligned lanes, consistent 0.5s scan timing). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Swap the legacy GitBook excalidraw drawings on the priority-merging and parallel-queues pages for static SVGs that match the animation visual system. Priority merging now reads as animation then two outcome statics: the animated sequence carries the motion, and high/urgent statics act as at-a-glance end-state references. The redundant base-state diagram is dropped and folded into one line of prose. Parallel queues gets a static of the concrete A/B/C/D impacted-target example the prose enumerates, and drops the single-vs-parallel animation prototype that was no longer needed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

…s unused Per Eli: keep the Vidyard videos we made for the merge queue. Restore the videos on predictive-testing, optimistic-merging, anti-flake-protection, batching, and parallel-queues, and pull the animations off those pages. The animation SVGs stay in /assets, unused, so the work is preserved and available later without shipping over the videos. Kept: the parallel-queues impacted-target static (replaces the old GitBook excalidraw drawing, not a video), and the animations on pages that never had a visual (flaky-tests detection + quarantining, MQ pending-failure-depth, priority-merging, advanced-settings), which Eli welcomed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Replace the static three-lane diagram with an animated version in the same visual system. The front PRs A, B and D test concurrently across the frontend, backend and docs lanes, each finishing with a green check, then C tests in both the frontend and backend lanes since it includes A's and B's changes. The video stays in place above it; this carries the concrete impacted-target example in motion. Reads correctly frozen and pins to the completed end-state under prefers-reduced-motion. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

samgutentag and others added 6 commits June 10, 2026 15:22

mintlify Bot deployed to staging June 10, 2026 23:16 View deployment

samgutentag and others added 3 commits June 11, 2026 08:38

mintlify Bot deployed to staging June 11, 2026 17:25 View deployment

mintlify Bot deployed to staging June 11, 2026 18:59 View deployment

mintlify Bot deployed to staging June 11, 2026 21:12 View deployment

samgutentag merged commit a0c6b9d into main Jun 11, 2026
2 checks passed

samgutentag deleted the sam-gutentag/docs-animations branch June 11, 2026 21:17

mintlify Bot mentioned this pull request Jun 11, 2026

docs: fix typos and broken markdown in merge-queue and flaky-tests pages #242

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(merge-queue): editable SVG animation prototypes for optimization pages#234

docs(merge-queue): editable SVG animation prototypes for optimization pages#234
samgutentag merged 11 commits into
mainfrom
sam-gutentag/docs-animations

samgutentag commented Jun 10, 2026 •

edited

Loading

Uh oh!

mintlify Bot commented Jun 10, 2026 •

edited

Loading

Uh oh!

samgutentag commented Jun 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

1 participant

Conversation

samgutentag commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What this does

Sample

How it works

Notes

Uh oh!

mintlify Bot commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

samgutentag commented Jun 11, 2026

❓ Verdict: unknown — June 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

1 participant

samgutentag commented Jun 10, 2026 •

edited

Loading

mintlify Bot commented Jun 10, 2026 •

edited

Loading