Cloud welcome: larger, accessible playback, truthful team copy, text-size layout

AU
1mo ago
+459-111

Summary

Polishes the Cloud welcome dialog: a larger clip, a clearer primary button, accessible playback, truthful team copy, and a layout that follows cmux text size and screen size.

Size and hierarchy

  • Feature-list layout (the launch default): 840pt wide with a 480×300 clip. Stacked layout: 680pt wide with a 500×312 clip. Clips stay at or below half the recorded clips' pixels, so they are sharp on Retina.
  • Larger title (34pt), captions and footer note.
  • The primary button (Enable Cloud, Upgrade to Pro, Sign In or Set Up Cloud) is semibold with a 120pt minimum width. Not Now is unchanged and still closes on Escape. The primary button still has no Return shortcut.

Accessibility

  • Pause/Play is always on the clip as a labeled button, so keyboard and VoiceOver users can stop the motion. It is dimmed until hovered or paused.
  • Pager dots are labeled buttons with a selected trait. The stacked caption stays an adjustable element. The decorative video is hidden from VoiceOver.
  • Reduce Motion holds every clip still (a new slide on its first frame) until the viewer presses Play. Nothing advances by itself, and captions fade instead of sliding. GIF drafts also stay still.

Truthful copy

  • The team reason's Swift defaultValue said "share any port with a private link", but port sharing (#17122) has not shipped. The catalog already shipped "Invite teammates to the same machine and work together." in all 9 locales. Both call sites (the welcome fallback and the Cloud enablement view) now match it.
  • The German "Included in your plan." note now uses du, like the rest of the German strings.
  • No new keys. Every welcome and enablement key has all 9 locales and matches its English catalog value.

Text size and smaller screens

  • The welcome root now injects cmux text size (cmuxFontMagnificationEnvironment). The buttons use cmux typography.
  • CloudWelcomeLayout.resolve keeps the feature list beside the clip only while the titles keep a 240pt × text-scale column. Otherwise it shrinks the clip to 380pt, then falls back to the stacked layout. The clip also shrinks to fit the screen height.
  • If the welcome is still taller than the screen, the window is capped at the screen height and the title and clips scroll above a pinned footer.
  • The footer buttons wrap below the note when they don't fit, for example at large text or in long locales.

Light-mode badge: the badge sits on a light, mostly opaque fill, and its text darkens the user's accent only as far as the contrast target needs. Dark mode is unchanged.

Debug only: CMUX_DEBUG_SHOW_CLOUD_WELCOME=1 shows the welcome at launch in DEBUG builds without activating it, for screenshot proof.

Plan gating and the enable, not-now and upgrade actions are unchanged.

Changelog

  • Changed: The Cloud welcome is larger, follows cmux text size, has an always-available Pause control that respects Reduce Motion, and its badge is readable in light mode.

Verification

  • python3 scripts/verify-local.py: 7/7 checks passed (swift-syntax, xcstrings, localization parity, defaultValue parity, app-source wiring, test wiring, feature flags). scripts/localization_catalog.py check: 0 parity errors.
  • New tests in cmuxTests/CloudWelcomeTests.swift. They run in hosted CI; no local XCTest, per policy.
    • Default layout.
    • Large text shrinks the clip, then stacks the list.
    • Small screens (1024×640, 800×600, 1280×520) at 100/150/200% text in both layouts: widths fit and the title column holds.
    • Reduce Motion holds still until Play, carries an explicit Play across slides, and turning it off resumes only its own hold.
    • Without Reduce Motion, a new slide plays.
    • The red-first commit was skipped because the tests exercise new API.
  • Review subagents (correctness first):
    • First pass: no bugs.
    • Second pass: no correctness bugs. Each test was traced by hand. It found that the window could exceed screen height at large text, now fixed with the capped, scrolling top. The GIF and Reduce Motion nit and a doc nit were folded in.
  • Fleet tagged build cloud-welcome-proof2 (job a6b4eb7b7ba32b2fa7910671) of 4db001f06ea3: built.
  • Final screenshots from fleet build cloud-welcome-badge2 (job 4d1857b52c58b04b68a98251) of exact HEAD 690ee2152be.
    • Captured from the isolated tagged app's own window with screencapture -l, launched with CMUX_DEBUG_SHOW_CLOUD_WELCOME=1 -appearanceMode <mode> -globalFontMagnificationPercent <pct> on a 1512×982pt display.
    • At 200% the layout falls back to stacked as designed: 680×884pt with no scroll, and the buttons wrap below the note.
    • This tag's dev account had not loaded its plan, so the captures show the plan-unknown state ("Set Up Cloud", "Cloud is available on cmux Pro and Max.").
100% text200% text
Lightlight 100light 200
Darkdark 100dark 200
  • Light-mode badge contrast was measured from the capture's pixels (darkest text pixel against the fill).
    • Before this PR: 1.56:1.
    • At ef3b0cc (4.5:1 model target): 4.15:1, because the glass renders the text lighter than its color.
    • Final 690ee2152be (6.5:1 model target): 6.04:1, which clears WCAG AA.
    • Dark mode is unchanged.
    • lightBadgeContrast checks every system accent color against the model.

🤖 Generated with Claude Code