feat(web): the mode landing is two ActionTiles, and the tiles are coloured

[Sawtaytoes]

What changed

The front door at / drew eight hand-written <Link>s under
.mode-primary-action and .mode-management-link: one accent colour for
every glyph on the page, a neutral border that went accent on hover, and a
→ standing in for affordance.

The owner, looking at four apps side by side:

mux-magic, points-market, and gallery-downloader have nice tiles. I'd
like those to exist in Charcuterie. I don't like what we built for
QueuePilot. It's not as flashy. Very boring, not colorful.

It is two Charcuterie ActionTiles sets now. This is the fourth app to
take the shape — mux-magic, gallery-downloader and points-market adopted
it yesterday.

The landing

	Before	After
Dark
Light

The queue-type chooser

It has been an ActionTiles since 2026-09-01. What changes is that
@charcuterie/ui@4.1.0 colours it, and its two tiles gain a glyph so the
colour lands on a shape rather than only the left bar.

	Before	After
Dark
Light

Every frame is fixture data from e2e/fixtures/landing.*.yaml, captured
by the new e2e/shot-mode-landing.ts. That script asserts
data-scheme before each shot, so a frame named -dark cannot be a
light render.

Three decisions in the diff

Six CSS rule groups are deleted, not trimmed.
.mode-primary-action, .mode-primary-icon, .mode-action-arrow,
.mode-management-link, .mode-management-icon,
.mode-management-arrow, plus both grid-template-columns overrides in
the 760px media query. A leftover rule repaints one app's copy of a shape
four apps share. .mode-primary-actions survives as one property,
margin-top, because the gap above the set is still this page's to say.

Each destination gets a named hue, not a per-set position. Queues is
drawn twice — once as the second start, once as the first management
link. Two ActionTiles sets each walk the palette from their own first
index, so the one destination would have been two colours and the eye
would have read two places. NAVIGATION_CATEGORICAL is keyed by
href, because that is the identity a destination has here.

The column count comes from the container. Both
grid-template-columns declarations and both media-query overrides are
gone. A 600px panel on a 2560px monitor is exactly as narrow as a phone,
and a max-width: 760px query could never see that.

One bug I wrote and caught

CategoricalIndex is 1-based — 1..10, not 0..9.

The first draft built the hue map as index as CategoricalIndex over the
array position, so the first destination got a 0. Every lookup inside
ActionTiles is a plain Record<CategoricalIndex, …>, so the 0 was
undefined and the tile died reading .ghost off it. The landing
rendered as a blank page.

Nothing in the toolchain reported it. as is an assertion, so tsc
believed the claim instead of checking it; lint has no opinion about
arithmetic; the unit suite does not render the landing. A browser probe
after the build caught it. The value is read out of CATEGORICAL_INDEXES
now, which needs no cast at all.

Gates

• yarn typecheck — clean (web, server, e2e).
• yarn lint — 74 warnings, identical to main, none in the changed
  files.
• yarn test — 695 pass (web 324, server 371).
• e2e/narrow-scroll-test.ts — passes at 320px, 390px and both emulated
  widths. Its landing selector moved from .mode-primary-action to the
  set's named role="group".
• e2e/routing-test.ts — passes, including "the task home offers two
  starts and four management destinations".

🤖 Generated with Claude Code