feat(branding): installer and sidebar artwork for the cotton reel - #477

The macOS installer and the sidebar banner still had the look that predates the cotton reel. The installer was a "styal Desktop" text header over a small sky, and the sidebar showed upstream's blueprint callouts and nightly clouds. The default theme also still had indigo and violet glows, because the fork's teal colours never replaced them.

Installer

• Layout. Takes the build-script half of upstream 10632: a 640×432 background, 120pt icons at (166, 214) and (474, 214), and 1280×864 retina renders. The intake recorded it as "not applied" because its artwork carried T3 Code branding, and noted a styal refresh at the new size as a follow-up. This is that follow-up.
• Artwork. A strip of cloth with pinked (zigzag) edges runs under both icons, with a line of stitching along each edge. The drag arrow is a length of the reel's teal thread with one curl, like the loose end on the icon. Latest uses the production icon's light ground (#F2EEE6). Nightly uses the nightly icon's teal night sky, with stars, the icon's horizon along the bottom and a NIGHTLY tag. On both, Finder's black filenames sit on the light cloth.
• CoreSVG. sips rasterises these SVGs with CoreSVG. It ignores font-weight unless a text element names exactly one font family, so a fallback list or -apple-system renders as regular Helvetica. It also skips feMerge. The text uses Helvetica Neue and Menlo, the cloth's shadow is a separately blurred path, and a comment in each SVG records both limits.

Sidebar banner

• Dev becomes a cutting mat, matching the development icon: the 8/32 grid and ruler stay, 45° guides replace the dimension lines, dashed circles and crosshairs, and a loose curled thread lies across the mat.
• Nightly replaces the clouds with the nightly icon's two-layer horizon, below the existing stars and glow.
• Default theme glows. fork-theme.css now sets the seven stage colours it had missed (celeste, violet, grid line, nightly glow, sparkle) to the icons' teal, so the default banner has no indigo or violet glow left.
• The same art drives the composer's send button and the sign-in screen. The other built-in themes still recolour it.

Before and after

Installer. Before (540×380) and after (640×432), rendered by sips with the real icons composited at Finder's positions:

Sidebar banner, in the running app. Before and after for Dev and Nightly, light and dark, on the default and Grove themes:

All built-in themes, with the send button (real components mounted with each theme's colours):

Validation

• Installer. Rendered both backgrounds with sips at 1280×864, as stageDesktopDmgBackground does, with no CoreSVG warnings. Composited the real app icons and Finder's Applications folder icon at the configured positions and sizes to check spacing and label legibility.
• Installer, real DMG. Opened the preview:mac build in Finder in Dark Mode. Its .background.tiff carries dmg-background-latest.png at 640×432 and @2x at 1280×864, the window opens at exactly 640×432, and Finder keeps the icon labels black on the light cloth. The first build showed that Finder draws labels about 9pt lower than the drafts assumed, so the lower stitch line ran through them and the selection highlight reached the upper one. The cloth now spans 132–320pt, which clears the icon, its highlight and its label as measured from that window.
• Sidebar, dev. Ran vp run dev against an empty worktree environment and checked the real sidebar header and composer send button, in light and dark, on the default, Grove and Ember themes.
• Sidebar, nightly. Checked the header by running dev with VITE_HOSTED_APP_CHANNEL=nightly. That hosted mode has no composer, so the nightly send button and all six built-in themes were checked by mounting the real SidebarStageBackdrop and StageBackdropButtonArt through Vite's module graph with each theme's computed colours.
• Tests. vp test run scripts/build-desktop-artifact.test.ts apps/web/src/components/SidebarStageBackdrop.test.tsx apps/web/src/components/chat/ComposerPrimaryActions.test.tsx: 80 tests pass. apps/web typechecks, and targeted lint and format checks pass.

Notes

• The styal Link "authorization complete" page (apps/server/src/cloud/cliAuthHtml.ts) has its own CSS approximation of the stage banner in the old blue and indigo. Recolouring the banner alone would clash with that page's blue accents, so restyling it is left for a separate change.
• docs/brand.md describes where the channel grounds reappear, and the fork-distribution-identity ledger entry lists the installer backgrounds and stage art.

Written by an agent (Claude Code, claude-opus-5-5).