design(cloud): give the machine name and the team name their width back

Merged
TE
17d ago
+187-44

At the default 220pt right sidebar, machine names truncate to "whimsical-cobalt-butte..." and the team name gives way to the controls in the Cloud header. This keeps both ends of a machine name visible and collapses the header's refresh and new-machine buttons into an overflow menu when the full row does not fit.

The compact tree spends leadingMargin 8 + depth × indentPerLevel 10 + disclosureSlot 16 + disclosureGap 2 + the machine band's leading inset 6 + iconSlot 16 + iconGap 4 before the name: 52 + 10L points, or 62pt at depth 1 and 72pt at depth 2. The attention column adds 12pt on rows that show it. At 220pt and depth 2, that leaves roughly 130 to 150pt for the name. The trailing band inset is rowGrid.trailingPadding - 2; hover buttons are AppKit overlays, so they cover the name's tail on hover instead of shortening its layout. Machine rows expand, so their 16 + 2pt disclosure column cannot be reclaimed. Shaving the indent, disclosure slot or band inset saves only 2 to 6pt each and weakens the tree's alignment.

There are three separate parts to this call:

  • Chrome columns: re-land the seven unchanged commits of #15881 on an origin branch. That reviewed PR sits on a fork, so pr-media.yml returns immediately and ci.yml's ui-tests job refuses it; #15881 cannot produce its tour frames or a UI verdict.
  • Machine names: use middle truncation only on the machine-name line. Generated names use adjective-colour-noun, and tail truncation removes the distinguishing noun. Middle truncation keeps both ends. The subtitle and other tree rows retain their current truncation.
  • Cloud header: use ViewThatFits(in: .horizontal) with a full-width team picker in the first candidate and an overflow menu in the narrow fallback. Refresh Machines and New Machine keep their existing labels and help text, and their actions use the same closures. I chose a separate overflow menu because the existing sparkles menu launches Cloud agents; machine management actions fit more naturally in an ellipsis menu beside it. Collapsing two 22pt controls to one returns 28pt, including the removed 6pt gap, to the team name.

TMPDIR=/Users/leoli/Projects/.tmp-verify python3 scripts/verify-local.py passed all 5 selected checks: syntax for 13 Swift files, app-source wiring (13 tests, 0 skipped), test wiring, package groups and feature-flag policy. Native compilation, app tests and app launch were not run locally. No new test asserts a rendering constant; the tour frames are the evidence for these choices. No user-facing string or localization key changed.

This is a taste call for cmux#13742 and must not be merged until the team answers. Before and after frames are coming from the Cloud sidebar audit tour once #15923 lands.

Changelog

Changed: Keep both ends of Cloud machine names visible and collapse machine actions in narrow Cloud headers.

🤖 Generated with Claude Code

Summary by cubic

Keeps both ends of Cloud machine names visible and gives the team name its width back at narrow sidebar widths.

  • Machine names truncate in the middle so the distinguishing noun stays visible; other tree rows keep tail truncation.
  • Narrow Cloud headers collapse refresh and new-machine into an ellipsis overflow menu, returning their width to the team picker.
  • Cloud rows, banners, and notices now read CloudSidebarChromeMetrics instead of hardcoded insets, so they stop on the same column as the header's controls.

This is a visual taste call and should not be merged until the team weighs in.