D607: the Ops canvas graduates, and /account's sections are one menu on a phone (part of #1165)

[guillaumelauzier]

Objective

Your new Ops export, applied. You sent five links on #1165. They are one canvas, the Ops canvas from D566: four carry the same newer Ops Page, and the fifth is the export before it. The newer export changes one thing: on a phone, the Account center's sections become a single "Section ▾" row instead of a row of chips that scrolls sideways. This PR:

• builds that row on /account;
• moves the Ops canvas out of the intake queue, since all five of its areas run on main.

Part of #1165, which stays open for areas 6 to 8; their design prompts are posted there.

Implementation

The phone section menu (pages/account/AccountCenter.jsx)

• From lg up, nothing changes. The section list is the column beside the content, with "More" over the four kept sections.
• Below lg, it is one row. The row reads "Section", then the open section's name, then ▾. It is 44px tall and drawn as a card with a hairline border, as the canvas draws .op-secdrop.
• The row is a native select under the canvas's drawing, labelled "Account section":
  • a phone opens its own picker;
  • the keyboard and a screen reader get a real control;
  • focus shows a ring on the row.
• The options are the same sections, in the same order: the canvas's six, then the four kept ones in a "More" group.
• A section id the list does not hold names the first section rather than a blank row.
• D568's sideways chip row is gone, and with it the effect that scrolled the active chip into view.

The canvas files

• The moves. Ops · Boards.dc.html, Ops Page.dc.html and ops-data.js move from design/incoming/ to design/canvases/integrated/. All five areas are built: D567 to D571.

• The newer export replaces Ops Page. Its diff against the committed file is the design's change and nothing else:

  • the phone CSS;
  • the op-secdrop row;
  • acCurrent;
  • Space Grotesk 800 in the font link.

  The export's three serialisation differences were kept in the committed form.

• The counts. integrated/ goes from 77 to 79 in both READMEs.

• The intake README's row for the four later areas now names their routes and decisions; it read "not yet triaged".

• ROUTE_MAP's Account row records D568 and D607.

Where the build departs from the canvas, and why

• The canvas draws only the closed row. The open list is the phone's own picker, not a drawn dropdown. Before D568, this page had a custom dropdown: a button over a role="listbox" list that answered Escape but no arrow keys. A native select needs no focus code, and on a phone it is the picker people already know.

Files changed

• Frontend:
  • frontend/src/pages/account/AccountCenter.jsx (AccountSectionNav)
  • frontend/test/account_center_d568.test.mjs
• Design:
  • design/canvases/integrated/Ops Page.dc.html, Ops · Boards.dc.html and ops-data.js (moved; Ops Page replaced)
  • design/canvases/README.md
  • design/incoming/README.md
• Docs:
  • documentation/architecture/decisions/D607.md (new)
  • documentation/architecture/ROUTE_MAP.md (the Account row)

Testing

The full suite. npm run build, then npm run test:drift, gave EXIT=0 on this PR's head (938136c10, on main at 892392af6):

• frontend: 5,048 pass;
• Worker: 5,903 pass, 3 skipped;
• retention: 127 pass;
• the guards, both type checks, lint:undef and the dark-mode check all pass.

The D568 test checks:

• the column is the lg shape;
• the phone row is hidden from lg up, and is 44px tall;
• the row reads "Section Billing and orders ▾" with that section open;
• the options come in the list's order, with the kept ones under "More" and the open one selected;
• a pick reaches onSelect;
• a stray id names the first section;
• the sideways row is gone.

A rendered check. The built bundle was served with stubbed /api replies at 390, 820 and 1280 wide, in light and dark:

• on a phone, the row is 358×44 and the column is hidden;
• picking "Following" opens that section and its address (/account/following);
• the focus ring shows;
• nothing scrolls sideways;
• at 1280, the column shows and the row is hidden;
• no page errors.

Risks

• What ships: the frontend only. There is no Worker change and no migration.
• Who notices: members on a phone or a tablet narrower than lg see one Section row on /account instead of a row of chips.
• Roll back by reverting the merge.

Dependencies

None. D604 (#1303) merged first; this is rebased onto it.

Agent

S01 · Claude Code

Review requested

The owner.

🤖 Generated with Claude Code

https://claude.ai/code/session_018jkNYLq29UXAvcqYxGCSB3

---

Generated by Claude Code

[github-actions]

Preview: https://studioos-pr-1318.guillaumelauzier.workers.dev (built from 938136c)

The pull request's SPA build on a Worker with no bindings: pages and deep links work, /api/* is a 404, and nothing here can reach production data. Redeployed on every push; deleted when the PR closes.