feat(web): layered architecture layout with orthogonal routes (1.6.1)

[Ponpon55837]

Summary

Redraws the Work Intelligence architecture diagram reader. This changes only the frontend: the architecture JSON v1 format, database schema 30 and MCP contracts stay the same. It also bumps the version to 1.6.1. The 1.6.1 release also includes the unreleased change from #249 (per-section refresh buttons removed), which this PR moves from [Unreleased] into the 1.6.1 CHANGELOG section and release notes.

• Layout (layoutArchitecture): cards without an authored position are laid out along their links. Groups become blocks, and the blocks are layered left to right by the links between groups using longest-path layering. Cycles are broken at the node declared first. Blocks in the same column stack and are centered vertically. Inside a block, cards form sub-columns by their internal links, at most 6 cards tall. Barycenter sweeps order the blocks and the cards. Cards with no links wrap into a near-square grid. An authored position never moves, and automatic cards are placed below authored ones.
• Routing: each connection leaves from the sides of the two cards that face each other. Links that share a side get spread ports, ordered by where the other end sits. Routes are orthogonal with rounded corners. The candidate channels are scored: a route must clear every card and stay off lanes already in use. Among clear routes, crossings weigh most, then bends, then length.
• Visuals: edge.label is drawn as a pill on the line. Long labels are cut to 28 characters, and the full text stays in <title>. Six new categorical tokens, --diagram-tone-1..6, exist in both themes. Each reaches at least 5.2:1 as 12px text on its tint, which passes WCAG AA. A group's tone colors its frame, its cards (tint plus a leading stripe) and its outgoing connections, with arrow markers in the same color. Hovering, focusing or selecting a card highlights its connections in accent and dims the others.
• Upstream archify (MIT) informed the route-quality idea only. No renderer code or HTML was copied.

Before/after screenshots were taken with synthetic data only, on a dev server with a scratch database, in both themes. They are not committed. Before: a 3-per-row index grid with cubic curves that cut through cards. After: a compact left-to-right block layout.

Test plan

• pnpm --filter @work-intelligence/web typecheck
• pnpm lint, pnpm format:check
• pnpm --filter @work-intelligence/web test: 187 passed, including 9 new layout tests covering layering, compactness, tones, authored positions kept, side selection, port spreading, card avoidance, lane separation and labels
• Release-preparation and plugin tests (version bump)
• E2E architecture reader spec on Chromium, which checks CSP, axe, both themes and locales. Firefox and WebKit are not installed locally, so CI covers them.

🤖 Generated with Claude Code