/settings shows each setting as one line: its name, its value and its control, with the reason one tap deeper #11033

Only part of #10999 is done: the "Branch and gates" form on a repository's General page now shows each setting as one row. Cloud, secrets, the other settings pages and the issue's before/after looks are not done.

What changed

• The six settings in src/web/pages/settings.ts are now one row each, with the reason in a <details> on that row (summary "Why"). They are default branch, protect default branch, require review, require checks, outsiders may trigger the crew, and polish share.
• A checkbox row shows a label, an "on" or "off" value and the control. The default branch and polish share rows show their value in the control itself.
• It is still one form posting to /settings, so the Save button and the handler are unchanged.
• I removed the section's intro paragraph and the loose hint paragraphs inside the form.
• test/settings-lines.test.ts (new) lists the six keys and checks each is a data-setting row inside the gates form with its input in place. It also checks the reason sits in a <details>, with no loose paragraph before it on the row, and that the form has no <p class="hint"> left.
• I ran bun x tsc --noEmit, bun scripts/design-lint.ts and the new test, which pass. I also ran a handful of settings tests, which pass; the two skipped ones are the crew-settings phone-look test (no chromium here) and one other.
• bun scripts/gate.ts printed a pre-push message asking for a "Try:" commit, so I reworded the commit and the push went through.

What I left out

• The Cut a wave, Archive, Move, Mirror and provenance cards still use <p class="muted"> paragraphs, because each is a single action rather than a setting row. The cloud, secrets and app settings pages are untouched.
• No before/after screenshots at desktop and 390 px, light and dark. This sandbox has no chromium.
• I did not look at the page in a browser. The new rows use existing classes (field, check, hint), so there is no new CSS or component class, and I did not check how the <details> summary renders.

Try it Open /<owner>/<repo>/settings as an admin and tap "Why" on any gate.

Closes #10999

Only part of #10999 is done: the "Branch and gates" form on a repository's General page now shows each setting as one row. Cloud, secrets, the other settings pages and the issue's before/after looks are not done.

What changed

• The six settings in src/web/pages/settings.ts are now one row each, with the reason in a <details> on that row (summary "Why"). They are default branch, protect default branch, require review, require checks, outsiders may trigger the crew, and polish share.
• A checkbox row shows a label, an "on" or "off" value and the control. The default branch and polish share rows show their value in the control itself.
• It is still one form posting to /settings, so the Save button and the handler are unchanged.
• I removed the section's intro paragraph and the loose hint paragraphs inside the form.
• test/settings-lines.test.ts (new) lists the six keys and checks each is a data-setting row inside the gates form with its input in place. It also checks the reason sits in a <details>, with no loose paragraph before it on the row, and that the form has no <p class="hint"> left.
• I ran bun x tsc --noEmit, bun scripts/design-lint.ts and the new test, which pass. I also ran a handful of settings tests, which pass; the two skipped ones are the crew-settings phone-look test (no chromium here) and one other.
• bun scripts/gate.ts printed a pre-push message asking for a "Try:" commit, so I reworded the commit and the push went through.

What I left out

• The Cut a wave, Archive, Move, Mirror and provenance cards still use <p class="muted"> paragraphs, because each is a single action rather than a setting row. The cloud, secrets and app settings pages are untouched.
• No before/after screenshots at desktop and 390 px, light and dark. This sandbox has no chromium.
• I did not look at the page in a browser. The new rows use existing classes (field, check, hint), so there is no new CSS or component class, and I did not check how the <details> summary renders.

Try it Open /<owner>/<repo>/settings as an admin and tap "Why" on any gate.

Each gate on a repository's General settings page is now one row: the name, its state (on/off) and the checkbox. That covers Protect, Require review, Require deploy and Outsiders, and Default branch and Polish share keep their controls on a row too. The reasons moved out of the rows into a single closed "Why these" details after them, so each reason is one tap away.

The check failed for two reasons, both fixed:

• Attention budget: the crew page (/settings/crew) embeds these gates, and one "Why" summary per row pushed it from 87 to 91 text blocks, over its budget. One shared details brings it to 86. No budget was raised.
• Workflow tests: test/web-workflows.test.ts looked for the old label wording. I changed the expected text to "Require an approving review", which was a wording change and not a behaviour change. The second failure in that file ("an approval opens the gate…") only failed because the first test left the setting unsaved.

All the settings keep their form field names and post to the same route. test/settings-lines.test.ts now checks that each of the six settings is a row with no loose paragraph in it, and that the reasons live in a <details>. test/attention.test.ts, test/web-workflows.test.ts and test/settings-lines.test.ts pass, tsc is clean, and design-lint and gate.ts are clean. I did not run the full suite.

I left out a reason beside each setting. The block budget wouldn't allow six summaries, so one shared details holds them all.

To try it, open /olive/proj/settings, read the gates as rows, and tap "Why these".

🤖 Generated with Claude Code

The failing check was test/polish-share.test.ts, and I've fixed it and pushed the fix. That test looked for the polish-share reason in sentence case, "Percent of the week's agent spend…". The reasons now sit in the shared "Why these" details after "Polish share —", so the text starts lowercase. I changed the expected string to match the new wording; the behaviour it checks is the same.

test/polish-share.test.ts now passes (8 tests). test/outsiders-switch.test.ts also matched my search for the old reason text; I ran it and it passes (7 tests). tsc is clean. I did not run the full suite; the forge's check does that on this push.

The pull itself is unchanged from before. Each gate on the repository's General settings page is one row with its name, its on/off state and the checkbox. The reasons sit in one closed "Why these" details after the rows, which keeps the crew page inside its block budget. All fields still post to the same route.

To try it, open /olive/proj/settings and tap "Why these".

🤖 Generated with Claude Code

Each gate's reason is back on its own row, as a <details>; I did not produce the before/after looks, and the summary shows a help icon, not the word "Why". I ran the settings, attention budget, design and crew-settings tests plus design-lint, and they pass. fast.ts named 1557 test files for this diff, too many to run here, so the forge's full check is the wider run.

• Per-row reasons (box 1, items 3 and 5): Default branch, Protect, Require review, Require deploy, Outsiders and Polish share each hold their own <details id="why-<key>">. Each control points at it with aria-describedby. test/settings-lines.test.ts now fails if any row lacks its own details, or if the form has any other count than six.
• Summary text (item 6): this is where I depart from you. The summary is the help icon alone, named "Why" for screen readers and as a tooltip, not a visible word. A visible word makes one more text block per row, and six of them put the crew page back at 91 blocks, over its budget of 87. The icon version counts 85. The budget file now records the lower figures, 85 blocks and 739 words, and nothing was raised. If you want the visible word, the crew page needs about four blocks cut elsewhere.
• Stale "on/off" (item 1): the word is gone and the checkbox is the value.
• Polish share (item 2): its label now reads "Polish share, % of the week's spend (0 to 50)".
• Look of the icon: I added a few lines of CSS for the summary on .field details.hint, in src/web/style/components.ts. They hide the caret and give a 44 px tap target on touch screens. This adds no new component class.
• Looks (item 4): not done. The sandbox cannot take screenshots and the preview is only reachable by curl. Please look at /olive/proj/settings at 390 px, in light and dark, on the preview once it is up.

Settings now lists each setting on one line. This push fixes the check failure on #11033, which was a test that broke on the new wording.

The fix: test/proposal-token-settings.test.ts ("a non-writer sees no section and their POSTs are 403") ran decodeURIComponent over the whole settings page. The new polish-share label contains a literal % ("Polish share, % of the week's spend (0 to …)"), which made it throw URI error. The test now matches the token id in the raw HTML. The test was wrong, not the page. No source file changed in this push.

The second failure: looks-owner.test.ts ("a page listed as owner carries the admin grant…") failed at 90 s, but passes alone here in 7 s with 22 of 22 green. That matches the check's note that it only fails beside other tests, so I judged it a load-related flake and changed nothing. If it fails again on the forge, it needs a look in its own right.

Checks run: bun scripts/gate.ts and bun x tsc --noEmit ran clean. I ran only the two test files above, not the full suite.

To try it: open /olive/proj/settings and read each gate as one row.

Each setting in a repository's Branch and gates form is now one row: its name, its control (which shows the value), and a round mark that opens the reason underneath. Tests and design-lint pass, but box 3 is still open: I could not take the before/after looks.

What changed in this round:

• One row per setting (principles 1/3): each row is a wrapping flex row (.setting-line), with name, control and mark side by side at desktop and 390 px. The branch select and polish-share number are sized to fit beside their label. An opened reason takes the full width under its row. This was checked by reading the CSS, not by screenshot.
• The mark looks like a control (principle 8): it is a 28 px bordered round button (44 px on touch), with hover, open and focus-visible states, named "Why" for screen readers and as a tooltip. I chose this over a visible word because the attention counter counts a <summary> with text as its own block, so "Why" would add six blocks to the crew page. The crew budget is unchanged from the previous round and was not raised.
• Cleanup: the why helper moved into src/web/setting_line.ts, with settingLine and toggleLine (renamed from toggleRow) beside it. The mis-indented ${cellMemory === undefined line is fixed. .setting-line and .why are written up in docs/design/areas/settings.md.
• No % in the label: it now reads "Polish share, percent (0 to N)". The proposal-token test change from the last round stays as it was.
• Box 2: test/settings-lines.test.ts now checks that the form posts exactly the field names the page posted before this change, to the same /settings route with card=gates. It then posts everything on (polish share 7) and everything off (polish share 0), and reads each value back from the page.
• Scope: only the General page's Branch and gates form is converted. The cloud and secrets sections already use .setting-list rows and are not touched; the test file says so.

Looks (box 3) are not attached. Chromium will not start in my sandbox ("chromium exited before printing its devtools address"), which is the same limit noted in docs/features/measure-page.md. The forge's own round at 86ba7ab58 took 50 looks, but none of /preview-admin/sample/settings. My token reaches the preview, but it does not see the admin-only gates form, so the preview HTML could not be checked either. Someone with a browser can run bun scripts/measure-page.ts --shots out/ /alice/demo/settings, with --root pointed at a checkout of main for the "before" pictures.

Checks: gate, tsc, design-lint and 20 test files covering settings, the crew page and the attention budget (141 tests) pass here. The forge's full check passed on 86ba7ab58.

To try it: open /olive/proj/settings at 390 px and at desktop width, then tap a mark to open its reason.

🤖 Generated with Claude Code

Left #10999 open: 1 unticked item remain (design-lint is clean; looks before and after, light and dark, at desktop and 390 px).