From 19068933ebd1ce3a3703375de94bb68606f9dc2c Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Fri, 30 Oct 2026 10:42:36 -0500
Subject: [PATCH 1/2] feat: the formula box on a roll's ADD and AGAINST and a
 rest's amounts: words, the sample rolling its stat, dice as least to most,
 fixes, shapes (formula box 2)

---
 CHANGELOG.md                                  | 10 ++
 README.md                                     | 10 +-
 .../system_builder_formula_preview.test.js    | 50 ++++++++++
 backend/systemBuilder/formulaPreview.js       | 79 +++++++++++++---
 backend/systemBuilder/tierRolls.js            |  2 +-
 e2e/COVERAGE.md                               |  2 +-
 e2e/README.md                                 |  2 +-
 e2e/tests/builder-formula-box.spec.ts         | 55 +++++++++++
 frontend/src/components/GraphPanel.tsx        |  2 +-
 frontend/src/components/RestsPage.tsx         | 90 ++++++++++--------
 frontend/src/components/RollsTab.tsx          | 29 ++++--
 .../hooks/__tests__/useFormulaBox.test.tsx    | 47 +++++++++-
 frontend/src/hooks/useFormulaBox.tsx          | 52 +++++++---
 .../src/sheets/__tests__/formulaBox.test.ts   | 39 ++++++++
 frontend/src/sheets/builderHelp.ts            |  6 +-
 frontend/src/sheets/formulaBox.ts             | 94 +++++++++++++++----
 frontend/src/sheets/systemsApi.ts             |  2 +-
 17 files changed, 465 insertions(+), 106 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 59f23c32..caf02433 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,16 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Added
 
+- **The formula box on ROLLS and RESTS.** A roll's ADD and AGAINST, and a rest's refill amounts,
+  now get the same box as CHOICES. A line under each says it in words with what it comes to for
+  the sample character: "against your rolled stat · sample, rolling Strength, rolled stat 16:
+  target 16", "1d8 + CON modifier · sample CON modifier 2: 3 to 10". A roll's box rolls the first
+  stat in ROLLED BY. Dice in a rest are said as the least and most they can come to. A misspelt
+  name shows in red with a fix (`@thsi` offers USE @this). A typo in ADD or AGAINST used to count
+  as 0 at the table without a word. The formula button writes common ones for you: THE STAT
+  ROLLED and ITS MODIFIER on a roll, DICE and DICE AND A STAT on a rest (pick how many, which die
+  and which stat or formula). INSERT lists what each box can read, the stat being rolled first on
+  a roll.
 - **Subclasses follow their class's level.** A list a feature opens, like Fighter's Martial
   Archetype opening the archetypes at 3, now takes the level of the pick that opened it. Champion's
   features get AT LEVEL on CHOICES, grouped by level, and unlock by the Fighter's level: Improved
diff --git a/README.md b/README.md
index f87bf9df..06b07701 100644
--- a/README.md
+++ b/README.md
@@ -449,7 +449,7 @@ CITY_NET/
 │   │   ├── choices.js          # A system's choices (7a1a; approved mockup builder-choices, 2026-10-27): the lists a character picks from (classes, backgrounds, feats), each named one and many, picked once, so many times or any, levelled or not, and MORE THAN ONCE for multiclassing; options with an optional requirement (a formula) and features, each unlocking at a level in a levelled list and doing any of: modifiers on a stat, formula or health field, uses refilled by a rest, rolls it gives, a change it lets a roll take, another list to pick from, or only words. Option and feature ids share one set; an option's level is read as @<option>_level, so that name must be free. A character's picks (7a1b) are kept on their sheet under _choices, which players never write as a field (sheets/templates.js), and read keeping only what holds; their levels (@soldier_level, a levelled list's sum @classes_level, and @level unless the system has its own), the features unlocked by level, and overlayOf: each stat with its modifiers and each formula's modifiers, worked out on every save and never written into a stat, so a pick taken away takes its effects with it. A modifier's amount reads the sheet as typed and levels, never a formula. Rolls (tableRolls.js) and PUBLISH's preview (versionDiff.js) read the same numbers. At the table (7a3a): spent uses kept under _uses; every save writes _worked (workedOf: picks, levels, where each change comes from, uses left, options not met); requirements met or not on the sheet as it reads, and in words (INTELLECT >= 13); choicesShown, the lists as the sheet draws them, never a formula
 │   │   ├── choicesImport.js    # A list's options and features read from a file (choices import 1; approved mockup choices-import, 2026-10-28): `[options]` and `[features]` rows matched by name against the draft, nothing deleted; an empty cell leaves a part, `-` clears it; a feature found by level too only when its name repeats; a line with a mistake skipped and named by its line; only words, levels, requirements and uses read. Returns the list as it would be and what changes; saves nothing
 │   │   ├── tokenMax.js         # A feature's modifier on the token's maximum (7a5a3; decision 10 of the approved mockup nested-choices): Tough's `2 * @level` put on the token's real HP MAX or WOUNDS while the pick counts and taken off when it doesn't, the current moving with it; the sheet keeps what it added and to which token, so a second save adds nothing and a new token starts clean; after any sheet change, and every player's when a new version of the running game is published
-│   │   ├── formulaPreview.js   # The builder's formula box (formula box 1; approved mockup formula-box, 2026-10-29): a modifier's amount, a requirement or a feature's uses read by the game's own parser for the sample character (every level at 3), with each name it reads and its value; or its mistake, stricter than PUBLISH: a name the system hasn't got (with the nearest real one) and an amount reading a formula. POST /api/systems/preview-formulas
+│   │   ├── formulaPreview.js   # The builder's formula box (formula box 1; approved mockup formula-box, 2026-10-29): a modifier's amount, a requirement or a feature's uses read by the game's own parser for the sample character (every level at 3), with each name it reads and its value; or its mistake, stricter than PUBLISH: a name the system hasn't got (with the nearest real one) and an amount reading a formula. POST /api/systems/preview-formulas. Formula box 2 adds a roll's ADD and AGAINST (also reading @this, @this_mod, @tie, @tie_mod for the first stat the roll is ROLLED BY, named as `rolling`) and a rest's refill amounts (the character's own numbers, dice said as the least and most they come to)
 │   │   ├── conditions.js       # A system's conditions: the standard set every system starts with (Blinded, Bleeding, Poisoned... ten in all), each renamed, described, given modifiers and an end (when removed, after rounds, or at the rests it names) or turned off, and the system's own, up to 60 in all. A definition stores only its changes; conditionsOf gives each one whole. Icons are one of 24 drawn for CITY_NET or an uploaded picture; modifiers name a stat, a formula or all rolls, one on all rolls reaching every roll of the system's own (tableRolls.js); any condition may wait on a house rule
 │   │   ├── diceFaces.js        # A system's own dice (6c1a): symbols (a name, a mark of a character or two or one of the condition icons, what each cancels as a pair, what it also counts as, one step) and dice whose faces show a signed number, symbols, both or nothing (2 to 100 faces, a danger color for a bad die); checked as an untrusted file is, read whole for the rolls (symbolsOf, diceOf); a symbol's look (6c2b1): its mark, a drawn or uploaded icon (as a condition's), or a 16 by 16 drawing kept in the system (16 rows of 4 hex digits), one picture at a time
 │   │   ├── rollStyles.js       # A custom system's own rolls (Phase 6): dice of any size, Fate dice and named dice, counts worked out from the character; read as a sum, the highest or lowest kept, or successes counted; formula text added, a target met over or under, bands read like a lookup table; exploding dice and naturals; matched dice (a pair of 10s adding successes, doubles), ones that cancel successes, glitches (and the worse one with nothing succeeding), a named die's own effect (Messy, Bestial), and the zero-dice rule; the changes a player picks before rolling (advantage and disadvantage cancelling, a push, a bonus) with what each costs, taken from a stat or added to one (Blades' push adds 2 Stress); CP:R's exploding-and-imploding first die; and the presets the builder starts from (D&D, PbtA, Blades, Vampire, Fate, CWN, CP:R, SR6); the system's `rolls` section checked (up to 60, different ids, ROLLED BY stats, stats groups and formulas it has, its tables callable). Each roll checked in the builder's words; dice only from the source handed in (the server's secure one at the table). A system's own dice (6c1b): a kind of dice may be one of them, landing on one of its faces, its number (0 for none) what every rule reads; COUNT THE SYMBOLS counts the kept dice's symbols (one that also counts as another counted as both), cancels each pair one for one, and reads what is left of `on` (or the numbers); every check against the system's own dice and symbols
@@ -615,7 +615,7 @@ CITY_NET/
 │       ├── system_builder_choices_numbers.test.js # What picks do to a character's numbers: picks read from the sheet keeping only what holds (a known option, once, within what the list allows, MORE THAN ONCE for multiclassing, levels from 1 to the highest); each option's level, a list's sum and @level, a system's own level left alone; features unlocked by level; on a save, a stat's modifier reaching the formulas reading it while the stat stays as typed, a formula's added before what reads it, amounts from levels, a pick taken away taking its effects; an amount reading a formula refused, a list's sum name kept free; rolls reading the same numbers; PUBLISH's preview showing a feature changed; the picks never a player's to write
 │       ├── system_builder_nested_choices.test.js # Lists inside lists (7a5a1): PICKED and HOW MANY checked, loops through other lists named; a pick under a feature counting while it is unlocked and has room, kept waiting when it locks, deeper lists in any order, a list picked both ways counting its own apart, picks a list's way no longer counts kept; only what counts reaching the numbers; what the sheet is told; picking under a feature and every refusal
 │       ├── system_builder_token_max.test.js # A feature on the token's maximum (7a5a3): its bonus summed and never added to the sheet twice; the token moved by what changed since the sheet last said, a new token clean; at the table a pick, a level and a drop moving the maximum and current (never below 0, never over the maximum), a stat the bonus reads changed by the player, the GM's sheet route or an import; nothing without a token, with token health off or in a game not running; a new version published
-│       ├── system_builder_formula_preview.test.js # Level formulas at the sample level, stats, formulas, tables and functions read, a name the system hasn't got with the nearest (a tie to the first), an amount reading a formula refused but a level with a formula's id allowed, what doesn't read, empty, no levels without a levelled list, at most 20 a request; the route, main admin only
+│       ├── system_builder_formula_preview.test.js # Level formulas at the sample level, stats, formulas, tables and functions read, a name the system hasn't got with the nearest (a tie to the first), an amount reading a formula refused but a level with a formula's id allowed, what doesn't read, empty, no levels without a levelled list, at most 20 a request; the route, main admin only; formula box 2: a roll's own names for its first ROLLED BY stat and a skill's tie, known only in a roll, a roll not found reading 0; a rest's amount with dice as least and most, by-name dice counts, sheet fields by label, a misspelt name, a table and a one-sided die refused; the new kinds in a request
 │       ├── system_builder_picking.test.js # Picking: a player's pick (room, not twice, a requirement in words), never a drop, their own levels and spent uses within bounds; the GM past a requirement but not past room, and taking a pick away; every save writing the picks, levels, where each change comes from, uses and what isn't met (none for a system without choices); the lists as the sheet draws them, never a formula; a rest refilling the uses it or what it counts as refills; no _ name a player's to write; through the socket as a player (their own only, told why not, nothing written) and as the GM (on the player named)
 │       ├── system_builder_citysys_zip.test.js # Sharing with pictures: the uploads a system names and where a symbol shows, left out cleanly (a mark for a bare symbol), a zip made and read back, a picture missing from disk left out, one shared picture; a zip someone sent refused when broken, empty, too large or holding two systems, nothing unpacked outside its places, past an upload's size or past the count (a broken entry proves it), and only named pictures stored; through the routes: the count listed, ?images=1 a zip, otherwise the .citysys without, a zip installed on a server without its pictures, nothing stored when refused, GM only
 │       ├── system_builder_words.test.js # Every term in every form resolved for the builder; only the terms a system renamed sent with its sheet; the server's own text, the starter sheet and a one-pool HEALTH folder using a system's word only where it chose one
@@ -1014,7 +1014,7 @@ CITY_NET/
 │   │   │   ├── useEnemyVehicles.ts # The GM's enemy vehicles, and the tokens on the map level that could fill their seats. Asked for rather than pushed, and refused to anyone but the GM — so a player's client never holds enemy pools or armour at all, which is what keeps "what may players see" from being a question the feature has to answer
 │   │   │   ├── useVehicleRoster.ts # Every vehicle in play and who is in which seat. Held outside the window because the buttons that open it need to know whether the table owns a vehicle at all — one subscription, so the two cannot disagree. Takes the socket ref, not its current value: a ref is not reactive, and reading it before the socket exists binds to nothing forever
 │   │   │   ├── useFormulaInsert.ts # INSERT for formulas: where the cursor last was, in which box (a formula's text or a condition's IF, THEN or ELSE), and a name put there; FORMULAS and the node panel share it
-│   │   │   ├── useFormulaBox.tsx  # The formula box (formula box 1; approved mockup formula-box, 2026-10-29): a formula's text with a FORMULA button (FormulaIcon.tsx), given to the page as the box and the help under its row; under it, always, the formula in words with the sample's value, or its mistake in red with USE @name; the button alone opens SHAPE (a common formula written from a number and a name) and INSERT (names put at the cursor). On CHOICES: REQUIRES, each modifier's amount (the × beside it red), USES
+│   │   │   ├── useFormulaBox.tsx  # The formula box (formula box 1; approved mockup formula-box, 2026-10-29): a formula's text with a FORMULA button (FormulaIcon.tsx), given to the page as the box and the help under its row; under it, always, the formula in words with the sample's value, or its mistake in red with USE @name; the button alone opens SHAPE (a common formula written from a number and a name) and INSERT (names put at the cursor). On CHOICES: REQUIRES, each modifier's amount (the × beside it red), USES. Formula box 2: on a roll's ADD and AGAINST (naming its roll to the server) and a rest's amounts (DICE and DICE AND A STAT asking which die and which stat or formula; the box's length limit passed in)
 │   │   │   ├── usePreviewValues.ts # A draft's formulas worked out by the server for its sample character a moment after editing stops, and with each house rule an alternative follows on: FORMULAS and the graph view show the same values; the graph view asks with the house rules TRY ON THE MAP has on
 │   │   │   ├── usePlayerSheet.ts   # Shared sheet state, debounced saves, house-rule flags, action emitters (roll/deathSave/stabilize/castSpell); used by CharacterSheetWindow and SheetPage
 │   │   │   └── __tests__/
@@ -1106,7 +1106,7 @@ CITY_NET/
 │   │   │   ├── houseRules.ts       # HOUSE RULES as logic: a system's own house rules (up to 20, a new one starting off), changed keeping their ids, deleted leaving what waited on them always there (no part, section or condition waits on it, a formula loses its alternative), and what waits on a rule with the page GO TO opens; the draft as it would be worked out with one rule on, or as the game would run it with a set of rules on (the server's withHouseRules mirrored, held to it); the rules a running game has on (useHouseRules) and the boxes changed from them; held to the server's checks
 │   │   │   ├── choices.ts         # CHOICES as logic (7a2b1): a system's lists and their options read, made (named to rename, ids free of every option's, feature's and level name's), changed (one pick, not levelled and not again store nothing; several capped) and removed (a list taking with it any feature opening it; an option from its own list only), and the level names formulas read; an option's features (7a2b2) made at a level, changed (blank words, level 1 or any level outside a levelled list, empty lists, no uses and no list store nothing; a level past the highest is the highest) and removed, what each does as tags, and what a feature can name: the stats, formulas and health fields, every rest (the off ones said so), the rolls and their changes. Mirrors backend choices.js, every edit held to its checks
 │   │   │   ├── choicesImport.ts   # IMPORT as logic (choices import 2): DOWNLOAD EXAMPLE made from the system (its @names, its rests by name, a level column only for a levelled list, made-up rows) and DOWNLOAD THIS LIST (cells quoted as a spreadsheet would, rests by name where the reader finds them so, a # note for what a feature does beyond words and uses), a previewed list put into the draft, a line to select, and changes in the page's words
-│   │   │   ├── formulaBox.ts      # The formula box as logic (formula box 1): a formula in words (+2 for each level, needs Strength 13 or more), its sample line, INSERT's groups (no formulas for an amount), and the SHAPES with why one can't be used yet and what each writes (a name at the cursor is statsRules.ts' insertToken)
+│   │   │   ├── formulaBox.ts      # The formula box as logic (formula box 1): a formula in words (+2 for each level, needs Strength 13 or more), its sample line, INSERT's groups (no formulas for an amount), and the SHAPES with why one can't be used yet and what each writes (a name at the cursor is statsRules.ts' insertToken). Formula box 2: ADD (+ your rolled stat's modifier), AGAINST (against 13, against your rolled stat) and a rest's amount (1d8 + CON modifier, sample 3 to 10); THIS ROLL in INSERT, no levels or tables for a rest; the shapes THE STAT ROLLED, ITS MODIFIER, DICE, DICE AND A STAT
 │   │   │   ├── choicesShown.ts    # The CHOICES block as logic (7a3b1): the lists in words from the render copy, the character's picks, levels, uses and what isn't met from the sheet's worked-out view (_worked) read safely; each list as drawn (picks with levels, unlocked features by level, the next to come, room, what's left to pick and what it needs, the total and its breakdown), a use pip's click, and what a feature does in a few words. Works no number out: the server does. choiceEffects (7a3b2): what the picks do to each field, for the sheet's badge (a stat as typed and with its bonuses, a formula as saved and without them, each bonus named), from what the server says each modifier came from
 │   │   │   ├── builderHelp.ts      # Every word of the builder's help in one place: the first-time tour (welcome, then the rail SETUP to PUBLISH), the HELP page's topics (getting started, every page with GO TO, formulas, THE MAP (GRAPH: nodes and wires, + ADD, CUT, diamonds, notes, groups, UNDO, PROBLEMS, TRY ON THE MAP), dice, health models, sharing and versions, who sees the target, the examples to open) and the formula reference, held to the engine's own functions by a test; and the words of the "?" beside each setting, by page. The tour's STATS & RULES step points to HOUSE RULES and the map, and CHOICES has a step of its own (nine since 2026-10-28)
 │   │   │   ├── versionPreview.ts   # What PUBLISH would change, as the builder says it: each change the server names in words (KEPT where something stops showing), grouped BY CHANGE with who it reaches and their own value (or the SAMPLE when nobody plays it; a number moving because a formula it reads changed gets its own line), BY CHARACTER, the one line for what touches no character, the heading and the line under it; HOUSE RULES as a group, and a formula's alternative apart from its own change
@@ -1288,7 +1288,7 @@ CITY_NET/
 │       ├── sheet-nested-choices.spec.ts # Lists inside lists (7a5a2): in the builder SPECIALTIES (OPENED BY the Soldier's Specialty) set THROUGH FEATURES and COMMONS EVERYONE HAS IT; at the table a specialty picked under the feature at level 3, kept waiting at 2, back at 3; COMMONS every character's, its Improvement at level 2
 │       ├── sheet-subclass-levels.spec.ts # A list a feature opens follows its opener's level (7a5d): in the builder ARCHETYPES set THROUGH FEATURES, told it follows the FIGHTER, Remarkable Athlete put at 7; at the table CHAMPION picked under Martial Archetype at Fighter 3 with Improved Critical only, Remarkable Athlete at Fighter 7, the character level 7
 │       ├── sheet-token-max.spec.ts # A feature on the token's maximum (7a5a3): a FIGHTER at level 3 picks TOUGH and the token goes from 20 to 26 of 26, the sheet naming the bonus and MAX HEALTH following; a level down, 24; the GM drops TOUGH from the player's sheet and it is back at 20
-│       ├── builder-formula-box.spec.ts # The formula box (formula box 1): a misspelt name in red and USE @level, the words with the sample's value, PER CLASS LEVEL and an INSERT name, AT LEAST on REQUIRES, saved as written with no problems
+│       ├── builder-formula-box.spec.ts # The formula box (formula box 1): a misspelt name in red and USE @level, the words with the sample's value, PER CLASS LEVEL and an INSERT name, AT LEAST on REQUIRES, saved as written with no problems; formula box 2: on ROLLS, @thsi in AGAINST fixed with USE @this and read rolling Strength, ADD from ITS MODIFIER; on RESTS, 1d8 + @con_mod from DICE AND A STAT, 3 to 10 for the sample; saved with no problems
 │       ├── sheet-visibility.spec.ts # Who sees what on a customized sheet: the owner (the GM's field read-only), another player looking them up from GLOBAL_CHAT (public lines only, nothing else sent), the GM opening the whole sheet the same way and setting the GM's field (coverage family 1)
 │       └── builder-smoke.spec.ts   # The GM signs in, opens the System Builder, meets and skips the first-time tour (reset first), finds MY SYSTEMS, and goes back to the map
 ├── Dockerfile.backend
diff --git a/backend/__tests__/system_builder_formula_preview.test.js b/backend/__tests__/system_builder_formula_preview.test.js
index fb96b9ac..ca624a27 100644
--- a/backend/__tests__/system_builder_formula_preview.test.js
+++ b/backend/__tests__/system_builder_formula_preview.test.js
@@ -89,6 +89,56 @@ describe('a formula read for the box', () => {
   });
 });
 
+describe('a roll\'s ADD and AGAINST, and a rest\'s amount (formula box 2)', () => {
+  const ROLLING = {
+    ...DEF,
+    stats: [...DEF.stats, { id: 'skills', label: 'SKILLS', stats: [{ id: 'athletics', label: 'Athletics', tie: 'str' }] }],
+    samples: { ...DEF.samples, athletics: 2 },
+    derived: [...DEF.derived, { id: 'str_mod', label: 'STR modifier', formula: 'mod(@str)' }],
+    rolls: [
+      { id: 'save', label: 'Save', dice: [{ count: '1', sides: 20 }], add: '@this_mod', by: ['con'] },
+      { id: 'skill', label: 'Skill', dice: [{ count: '2', sides: 6 }], add: '@this + @tie_mod', by: ['skills'] },
+    ],
+  };
+
+  it('reads the first stat a roll is ROLLED BY as @this, with its modifier, and a skill\'s tie', () => {
+    expect(previewFormula(ROLLING, '@this_mod + 1', 'add', undefined, 'save')).toEqual({
+      ok: true, value: 3, reads: [{ id: 'this_mod', label: 'rolled stat\'s modifier', value: 2 }], rolling: 'Constitution',
+    });
+    expect(previewFormula(ROLLING, '@this + @tie_mod', 'add', undefined, 'skill')).toEqual({
+      ok: true, value: 4, reads: [{ id: 'this', label: 'rolled stat', value: 2 }, { id: 'tie_mod', label: 'tied stat\'s modifier', value: 2 }], rolling: 'Athletics',
+    });
+    expect(previewFormula(ROLLING, '@tie', 'against', undefined, 'skill').value).toBe(16);
+    // Stats, formulas and levels read as in any formula.
+    expect(previewFormula(ROLLING, '@str_mod + @level', 'add', undefined, 'save').value).toBe(5);
+  });
+
+  it('knows a roll\'s own names only in a roll, and samples nothing for a roll it can\'t find', () => {
+    expect(previewFormula(ROLLING, '@thsi', 'against', undefined, 'save')).toEqual({ ok: false, problem: '@thsi isn\'t one of this system\'s names', name: 'thsi', suggest: 'this' });
+    expect(previewFormula(ROLLING, '@this', 'amount')).toMatchObject({ ok: false, name: 'this' });
+    expect(previewFormula(ROLLING, '@this + 13', 'against', undefined, 'gone')).toEqual({ ok: true, value: 13, reads: [{ id: 'this', label: 'rolled stat', value: 0 }] });
+  });
+
+  it('works a rest\'s amount out with its dice as the least and the most, naming the character\'s own numbers', () => {
+    expect(previewFormula(ROLLING, '1d8 + @con_mod', 'refill')).toEqual({ ok: true, value: 3, most: 10, reads: [{ id: 'con_mod', label: 'CON modifier', value: 2 }] });
+    expect(previewFormula(ROLLING, '2d6', 'refill')).toEqual({ ok: true, value: 2, most: 12, reads: [] });
+    expect(previewFormula(ROLLING, '@athletics d4', 'refill')).toMatchObject({ value: 2, most: 8 });
+    expect(previewFormula(ROLLING, '5', 'refill')).toEqual({ ok: true, value: 5, reads: [] });
+    // A sheet field reads by its label too.
+    expect(previewFormula(ROLLING, '@hp_max', 'refill').reads).toEqual([{ id: 'hp_max', label: expect.any(String), value: 0 }]);
+  });
+
+  it('says a rest amount\'s mistakes: a name it hasn\'t got, a table, dice that don\'t read', () => {
+    expect(previewFormula(ROLLING, '@con_md', 'refill')).toEqual({ ok: false, problem: '@con_md isn\'t one of this system\'s names', name: 'con_md', suggest: 'con_mod' });
+    expect(previewFormula(ROLLING, 'mod(@con)', 'refill').ok).toBe(false);
+    expect(previewFormula(ROLLING, '1d1', 'refill')).toEqual({ ok: false, problem: 'A die has 2 to 1000 sides' });
+  });
+
+  it('takes the new kinds and a roll in a request', () => {
+    expect(previewFormulas(ROLLING, [{ text: '@this', kind: 'add', roll: 'save' }, { text: '1d4', kind: 'refill' }]).map((r) => [r.value, r.most])).toEqual([[14, undefined], [1, 4]]);
+  });
+});
+
 describe('the route', () => {
   let app;
   beforeEach(async () => {
diff --git a/backend/systemBuilder/formulaPreview.js b/backend/systemBuilder/formulaPreview.js
index 89f0d5bc..5febbcbc 100644
--- a/backend/systemBuilder/formulaPreview.js
+++ b/backend/systemBuilder/formulaPreview.js
@@ -10,16 +10,30 @@
 //
 // The sample character has stats only (stats.js `samples`); every level name reads SAMPLE_LEVEL,
 // so a formula on levels shows something worth reading.
+//
+// Formula box 2 adds a roll's ADD and AGAINST, which also read the stat being rolled (@this,
+// @this_mod, @tie, @tie_mod, tableRolls.js): the sample rolls the first stat the roll is ROLLED BY.
+// And a rest's refill amounts (rests.js), which name the character's own numbers and may hold dice:
+// what dice decide is said as a range, the least to the most they can come to.
 
 const { parse, evaluate, references } = require('./expression');
 const { ruleValue } = require('./rules');
 const { tablesOf, lookupIn, previewDerived } = require('./derived');
 const { namesOf, levelNamesOf } = require('./choices');
+const { fieldsRolledBy, fieldsFor } = require('./tableRolls');
+const { reachOf } = require('./rests');
+const { prepare } = require('./tierRolls');
+const { effectiveSheet, fieldsOf } = require('./sheet');
 
 /** What every level name reads for the sample character. */
 const SAMPLE_LEVEL = 3;
-/** What a formula box holds: a modifier's amount, an option's requirement, a feature's uses. */
-const KINDS = new Set(['amount', 'requires', 'uses']);
+/**
+ * What a formula box holds: a modifier's amount, an option's requirement, a feature's uses; a roll's
+ * ADD and AGAINST; a rest's refill amount.
+ */
+const KINDS = new Set(['amount', 'requires', 'uses', 'add', 'against', 'refill']);
+/** What a roll's own names are called in words. */
+const ROLL_OWN = new Map([['this', 'rolled stat'], ['this_mod', 'rolled stat\'s modifier'], ['tie', 'tied stat'], ['tie_mod', 'tied stat\'s modifier']]);
 /** The most formulas one request reads. */
 const MOST = 20;
 
@@ -60,43 +74,84 @@ const sampleOf = (definition) => {
   return { ...samples, ...values, ...levels };
 };
 
+/** A name the box doesn't know, as its mistake, with the nearest it does. */
+const unknownName = (name, known) => {
+  const suggest = nearest(name, known);
+  return { ok: false, problem: `@${name} isn't one of this system's names`, name, ...(suggest ? { suggest } : {}) };
+};
+
+const num = (v) => { const n = Number(v); return Number.isFinite(n) ? n : 0; };
+
+/**
+ * A rest's refill amount: a number, a formula or dice, naming the character's own numbers and no
+ * tables. With dice, `value` is the least it comes to and `most` the most.
+ */
+const previewRefill = (definition, text, sample) => {
+  const reach = reachOf(definition);
+  const written = [...new Set([...text.matchAll(/@([a-zA-Z_][a-zA-Z0-9_]*)/g)].map((m) => m[1]))];
+  const unknown = written.find((n) => !reach.names.has(n));
+  if (unknown) return unknownName(unknown, reach.names);
+  let prepared;
+  try { prepared = prepare(text, { known: (n) => reach.names.has(n), refused: (n) => `@${n} isn't one of this system's names` }); } catch (e) { return { ok: false, problem: e.message }; }
+  const counts = prepared.dice.map((d) => (typeof d.count === 'object' ? Math.max(0, Math.round(num(sample[d.count.name]))) : d.count));
+  const at = (face) => evaluate(prepared.tree, {
+    field: (n) => { const m = /^tier_die_(\d+)$/.exec(n); return m ? counts[Number(m[1])] * face(prepared.dice[Number(m[1])].sides) : num(sample[n]); },
+    rule: () => 0, table: () => 0,
+  });
+  const labels = new Map([...fieldsOf(effectiveSheet(definition)).filter((f) => f && typeof f.id === 'string').map((f) => [f.id, f.label || f.id]), ...namesOf(definition)]);
+  const least = at(() => 1);
+  const most = at((sides) => sides);
+  return {
+    ok: true, value: least, ...(prepared.dice.length ? { most } : {}),
+    reads: written.map((id) => ({ id, label: labels.get(id) || id, value: num(sample[id]) })),
+  };
+};
+
 /**
  * One formula read against `definition`: `{ ok: false, problem, suggest? }` when it can't be used,
  * else `{ ok: true, value, reads }`, `reads` naming each @name it reads with its label and value.
+ * A roll's box (`kind` add or against) names its roll in `roll`; it says the stat it samples in
+ * `rolling`.
  */
-const previewFormula = (definition, text, kind, sample = sampleOf(definition)) => {
+const previewFormula = (definition, text, kind, sample = sampleOf(definition), roll = null) => {
   if (typeof text !== 'string' || !text.trim()) return { ok: false, problem: 'Empty' };
+  if (kind === 'refill') return previewRefill(definition, text, sample);
   const tables = tablesOf(isPlainObject(definition.lookups) ? definition.lookups : undefined);
   const isTable = (name) => own(tables, name);
   let tree;
   try { tree = parse(text, isTable); } catch (e) { return { ok: false, problem: e.message }; }
-  const names = namesOf(definition);
+  const rolled = kind === 'add' || kind === 'against';
+  const names = new Map([...namesOf(definition), ...(rolled ? ROLL_OWN : [])]);
   const fields = [...references(tree).fields];
   const unknown = fields.find((n) => !names.has(n));
-  if (unknown) {
-    const suggest = nearest(unknown, names.keys());
-    return { ok: false, problem: `@${unknown} isn't one of this system's names`, name: unknown, ...(suggest ? { suggest } : {}) };
-  }
+  if (unknown) return unknownName(unknown, names.keys());
   if (kind === 'amount') {
     const formulas = new Set((Array.isArray(definition.derived) ? definition.derived : []).filter(isPlainObject).map((d) => d.id));
     const levels = levelNamesOf(definition);
     const formula = fields.find((n) => formulas.has(n) && !levels.has(n));
     if (formula) return { ok: false, problem: `@${formula} is a formula: an amount reads stats as typed and levels` };
   }
-  const num = (v) => { const n = Number(v); return Number.isFinite(n) ? n : 0; };
+  // A roll's box reads the first stat it is ROLLED BY as @this, as the table would.
+  const found = rolled && Array.isArray(definition.rolls) ? definition.rolls.find((r) => isPlainObject(r) && r.id === roll) : null;
+  const stat = found ? fieldsRolledBy(definition, found)[0] : undefined;
+  const field = rolled ? fieldsFor(definition, sample, stat) : (name) => num(sample[name]);
   const value = evaluate(tree, {
-    field: (name) => num(sample[name]),
+    field,
     rule: (name) => ruleValue(name, sample),
     table: (name, x) => lookupIn(isTable(name) ? tables[name] : [], x),
   });
-  return { ok: true, value, reads: fields.map((id) => ({ id, label: names.get(id), value: num(sample[id]) })) };
+  return {
+    ok: true, value, reads: fields.map((id) => ({ id, label: names.get(id), value: field(id) })),
+    ...(stat ? { rolling: names.get(stat) || stat } : {}),
+  };
 };
 
-/** Up to MOST formulas, `{ text, kind }` each, read against one sample: the box's request. */
+/** Up to MOST formulas, `{ text, kind, roll? }` each, read against one sample: the box's request. */
 const previewFormulas = (definition, formulas) => {
   const sample = sampleOf(definition);
   return (Array.isArray(formulas) ? formulas : []).slice(0, MOST).map((f) => previewFormula(
     definition, isPlainObject(f) ? f.text : undefined, isPlainObject(f) && KINDS.has(f.kind) ? f.kind : 'requires', sample,
+    isPlainObject(f) && typeof f.roll === 'string' ? f.roll : null,
   ));
 };
 
diff --git a/backend/systemBuilder/tierRolls.js b/backend/systemBuilder/tierRolls.js
index d5b56c33..69c992e3 100644
--- a/backend/systemBuilder/tierRolls.js
+++ b/backend/systemBuilder/tierRolls.js
@@ -122,4 +122,4 @@ const rollTier = (tier, level, fields, limits, rng = cryptoRng) => {
   return { level: levelOf(level), hp, defense, values };
 };
 
-module.exports = { rollBox, rollAmount, rollTier, boxProblem, levelOf, LIMITS };
+module.exports = { rollBox, rollAmount, rollTier, boxProblem, levelOf, prepare, LIMITS };
diff --git a/e2e/COVERAGE.md b/e2e/COVERAGE.md
index aaf1d35e..79da64c6 100644
--- a/e2e/COVERAGE.md
+++ b/e2e/COVERAGE.md
@@ -88,7 +88,7 @@ panel), so a control that looks fine but does nothing is caught for all of them.
 | A bonus named on the field it changes | a stat as typed and with it; a formula with it | `choices_numbers` | `sheet-choices` (10 → 11, Guard Stance +1) | **AT THE TABLE** |
 | A rest refilling a feature's uses | the rest itself; one it counts as | `picking` | `sheet-choices` (a short rest) | **AT THE TABLE** (the rest itself) |
 | A list filled from a file | IMPORT: new and changed options and features, empty cells and `-`, skipped lines, same-named features | `choices_import` | `builder-choices-import` (this list downloaded, changed with one wrong line, uploaded, warned of, applied; played on a sheet) | **AT THE TABLE** |
-| Writing a formula | the formula box on REQUIRES, modifier amounts and USES: words and the sample's value, a mistake with its fix, SHAPE, INSERT | `formula_preview` | `builder-formula-box` | **BUILDER ONLY** (a builder aid: what it writes is played at the table by `sheet-choices` and `sheet-token-max`) |
+| Writing a formula | the formula box on REQUIRES, modifier amounts and USES, a roll's ADD and AGAINST, and a rest's amounts: words and the sample's value, a mistake with its fix, SHAPE, INSERT | `formula_preview` | `builder-formula-box` | **BUILDER ONLY** (a builder aid: what it writes is played at the table by `sheet-choices`, `sheet-token-max`, `sheet-rolls` and the rests' own journeys) |
 
 ## Sheets and NPCs
 
diff --git a/e2e/README.md b/e2e/README.md
index 2d0433c9..2f3ffd1c 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -151,7 +151,7 @@ frontend suites.
 | `tests/sheet-nested-choices.spec.ts` | Lists inside lists, and a list everyone has (7a5a2): in the builder SPECIALTIES shows OPENED BY · SOLDIER: SPECIALTY (LV 3) and is set THROUGH FEATURES, COMMONS EVERYONE HAS IT, saved with no problems; published, a player's sheet has no SPECIALTIES block, COMMONS every character's with Improvement next at level 2 and then unlocked; SOLDIER at 3 offers PICK A SPECIALTY under its feature, DUELIST picked there with its own feature; lowered to 2 it waits, kept; back at 3 it counts again; as the server keeps it |
 | `tests/sheet-subclass-levels.spec.ts` | A list a feature opens takes the level of what opened it (7a5d): in the builder ARCHETYPES is set THROUGH FEATURES and says each one's features unlock by the level of the pick that opened it: FIGHTER; Champion's Remarkable Athlete is put at LEVEL 7, saved with no problems; published, a player raises FIGHTER to 3, picks CHAMPION under Martial Archetype (Pick an Archetype) and has Improved Critical with NEXT · LV 7: Remarkable Athlete; at Fighter 7 it unlocks, the archetype's worked level is 7 and the character's levels stay 7 |
 | `tests/sheet-token-max.spec.ts` | A feature on the token's maximum (7a5a3): a player with a 20 HP token, a FIGHTER at level 3, picks TOUGH (+2 HP per level) and sees 26 / 26 on HIT_POINTS, the bonus named on the sheet's HP and MAX HEALTH at 26; a level down, 24; the GM opens their sheet from VIEW_PLAYER_INFO and drops TOUGH, and the token is back at 20 |
-| `tests/builder-formula-box.spec.ts` | The formula box (formula box 1): on Tough, `2 * @lvl` in red with USE @level, then +2 for each level · sample Level 3: +6 from the real server; PER CLASS LEVEL for FIGHTER at 3 and @con from INSERT at the cursor; AT LEAST on Fighter's REQUIRES (the sample meets it); the draft saved as written with no problems |
+| `tests/builder-formula-box.spec.ts` | The formula box (formula box 1): on Tough, `2 * @lvl` in red with USE @level, then +2 for each level · sample Level 3: +6 from the real server; PER CLASS LEVEL for FIGHTER at 3 and @con from INSERT at the cursor; AT LEAST on Fighter's REQUIRES (the sample meets it); the draft saved as written with no problems; and formula box 2: on ROLLS, `@thsi` in AGAINST shown in red and fixed with USE @this, then against your rolled stat · sample, rolling Strength, rolled stat 16: target 16; ADD written by ITS MODIFIER; on RESTS, a short rest's amount written by DICE AND A STAT with CON MODIFIER as 1d8 + @con_mod, said 1d8 + CON modifier · sample CON modifier 2: 3 to 10; the draft saved as written with no problems |
 | `tests/sheet-visibility.spec.ts` | Who sees what on a customized sheet (coverage family 1): its owner fills in a public field, a private one and a combat value and can't change the GM's field; another player, looking them up from GLOBAL_CHAT's user list (VIEW_PLAYER_INFO), sees only the public lines, and the server sends nothing else; the GM opens the whole sheet the same way (OPEN_SHEET) and sets the GM's field, which the owner then sees |
 | `tests/player-journey.spec.ts` | A custom system running (set up through the API), played in two browsers at once: a player makes a character and sees the system's words and its formula worked out; the GM types in a catalogue, gives the player something from it with a note, and calls a rest from the GAME tab; the player sees the gift arrive and the rest change their sheet |
 | `tests/builder-smoke.spec.ts` | The GM signs in, opens the System Builder, meets and skips the first-time tour (reset first, so it always shows), and goes back to the map |
diff --git a/e2e/tests/builder-formula-box.spec.ts b/e2e/tests/builder-formula-box.spec.ts
index 9583d886..f958b4ac 100644
--- a/e2e/tests/builder-formula-box.spec.ts
+++ b/e2e/tests/builder-formula-box.spec.ts
@@ -70,3 +70,58 @@ test('the formula box says a formula in words, catches a misspelt name, and writ
     .toEqual(['3 * @fighter_level + @con', '@str >= 13']);
   expect(problems).toEqual([]);
 });
+
+// Formula box 2: a roll's AGAINST with a misspelt @this, fixed and read for the sample rolling its
+// first ROLLED BY stat; ADD written with ITS MODIFIER; a rest's amount written with DICE AND A STAT,
+// said with the least and most it comes to. Saved as written.
+test('the formula box on a roll\'s ADD and AGAINST and a rest\'s amount', async ({ page, request }, info) => {
+  const name = `Formula Rolls ${info.retry + 1}`;
+  const token = await gmToken(request);
+  const { id } = await asGm(request, token, 'post', '/api/systems', { definition: {
+    format: 1, name,
+    stats: [{ id: 'abilities', label: 'ABILITIES', stats: [{ id: 'str', label: 'Strength' }, { id: 'con', label: 'Constitution' }] }],
+    samples: { str: 16, con: 14 },
+    derived: [{ id: 'con_mod', label: 'CON modifier', formula: 'floor((@con - 10) / 2)' }],
+    core: { health: { model: 'pool' } },
+    rolls: [{ id: 'save', label: 'Save', dice: [{ count: '1', sides: 20 }], by: ['abilities'] }],
+    rests: { short_rest: { refills: [{ what: 'health', how: 'by', amount: '1' }] } },
+  } });
+  await asGm(request, token, 'put', '/api/systems/view', { page: 'rules', view: 'forms' });
+  await signInAsGm(page);
+  await openBuilder(page);
+  const card = page.getByTestId(/^system-/).filter({ hasText: name.toUpperCase() });
+  if (!(await card.getByRole('button', { name: 'OPEN', exact: true }).isVisible())) await card.getByRole('button').first().click();
+  await card.getByRole('button', { name: 'OPEN', exact: true }).click();
+  await builderPage(page, 'STATS & RULES');
+  await page.getByRole('tab', { name: 'ROLLS' }).click();
+  const compare = page.getByTestId('roll-save').getByRole('region', { name: 'ADD AND COMPARE' });
+
+  // AGAINST: @thsi in red, USE @this, then the sample rolling Strength.
+  const against = compare.getByRole('textbox', { name: 'Against' });
+  await against.fill('@thsi');
+  await expect(compare.getByText("@thsi isn't one of this system's names")).toBeVisible();
+  await compare.getByRole('button', { name: 'USE @this' }).click();
+  await expect(against).toHaveValue('@this');
+  await expect(compare.getByTestId('formula-words')).toHaveText('against your rolled stat · sample, rolling Strength, rolled stat 16: target 16');
+
+  // ADD: ITS MODIFIER from SHAPE.
+  await compare.getByRole('button', { name: 'Help writing Add' }).click();
+  await compare.getByRole('group', { name: 'Help writing Add' }).getByRole('button', { name: 'ITS MODIFIER', exact: true }).click();
+  await expect(compare.getByRole('textbox', { name: 'Add' })).toHaveValue('@this_mod');
+
+  // A short rest heals 1d8 + CON modifier: 3 to 10 for the sample.
+  await builderPage(page, 'RESTS');
+  await page.getByRole('button', { name: /^SHORT REST/ }).click();
+  const rest = page.getByRole('region', { name: 'Short rest rest' });
+  await rest.getByRole('button', { name: 'Help writing Refill 1: amount' }).click();
+  const help = rest.getByRole('group', { name: 'Help writing Refill 1: amount' });
+  await help.getByRole('button', { name: 'DICE AND A STAT' }).click();
+  await help.getByRole('combobox', { name: 'Which', exact: true }).selectOption({ label: 'CON MODIFIER' });
+  await expect(rest.getByRole('textbox', { name: 'Refill 1: amount' })).toHaveValue('1d8 + @con_mod');
+  await expect(rest.getByTestId('formula-words')).toHaveText('1d8 + CON modifier · sample CON modifier 2: 3 to 10');
+
+  await expect(page.getByTestId('save-status')).toHaveText(/· SAVED /, { timeout: 15_000 });
+  const { draft, problems } = await asGm(request, token, 'get', `/api/systems/${id}`);
+  expect([draft.rolls[0].add, draft.rolls[0].against, draft.rests.short_rest.refills[0].amount]).toEqual(['@this_mod', '@this', '1d8 + @con_mod']);
+  expect(problems).toEqual([]);
+});
diff --git a/frontend/src/components/GraphPanel.tsx b/frontend/src/components/GraphPanel.tsx
index 38ab33c0..ab83f4fc 100644
--- a/frontend/src/components/GraphPanel.tsx
+++ b/frontend/src/components/GraphPanel.tsx
@@ -239,7 +239,7 @@ export function GraphPanel({ definition, edit, node, preview, tried, onClose, on
     const roll = rollList(definition).find((r) => `roll:${r.id}` === node.id);
     body = roll && (
       <>
-        <RollEditor definition={definition} edit={edit} roll={roll} onRemoved={onClose} />
+        <RollEditor definition={definition} edit={edit} roll={roll} api={api} onRemoved={onClose} />
         <TestRoll key={roll.id} definition={definition} api={api} roll={roll} />
       </>
     );
diff --git a/frontend/src/components/RestsPage.tsx b/frontend/src/components/RestsPage.tsx
index e6b37338..32f709cf 100644
--- a/frontend/src/components/RestsPage.tsx
+++ b/frontend/src/components/RestsPage.tsx
@@ -13,6 +13,7 @@ import { changeText } from '../sheets/restCalls';
 import { HINTS } from '../sheets/builderHelp';
 import { FieldName } from './HelpHint';
 import { ToggleSwitch } from './ToggleSwitch';
+import { useFormulaBox } from '../hooks/useFormulaBox';
 
 // The builder's RESTS page (4f4a; approved mockup docs/mockups/builder-rests.html, 2026-10-09): the
 // moments the game refills things and wears things off. The standard four, each with a switch,
@@ -25,7 +26,7 @@ interface Props {
   definition: Definition;
   edit: (next: Definition) => void;
   /** For the sheet the system plays with (what a rest can refill), and ON THE SAMPLE. */
-  api?: Pick<ReturnType<typeof systemsApi>, 'previewSheet' | 'tryRest'>;
+  api?: Pick<ReturnType<typeof systemsApi>, 'previewSheet' | 'tryRest' | 'previewFormulas'>;
 }
 
 const small: React.CSSProperties = { fontSize: 10, letterSpacing: 2, opacity: 0.75 };
@@ -44,7 +45,54 @@ const tick = (on: boolean): React.CSSProperties => ({
 /** The ways a target allows, as its select offers them. */
 const howLabel = (t: Target | undefined, how: string) => (t?.kind === 'section' ? 'ALL TO THEIR MAXIMUMS' : HOW_LABELS[how as keyof typeof HOW_LABELS] ?? how);
 
-function Refills({ rest, definition, edit, targets }: { rest: Rest; definition: Definition; edit: Props['edit']; targets: Target[] }) {
+/**
+ * One refill: what, how, and an amount where it takes one, a formula box (formula box 2) saying it in
+ * words with the least and most it comes to for the sample, its help under the row.
+ */
+function RefillRow({ rest, i, definition, edit, targets, api }: { rest: Rest; i: number; definition: Definition; edit: Props['edit']; targets: Target[]; api?: Props['api'] }) {
+  const r = rest.refills[i];
+  const t = targets.find((x) => x.id === r.what);
+  const needsAmount = r.how === 'by' || r.how === 'to';
+  const amount = useFormulaBox({
+    definition, api, kind: 'refill', value: r.amount ?? '', label: `Refill ${i + 1}: amount`, inputStyle: input, maxLength: LIMITS.amount,
+    placeholder: r.how === 'by' ? '-1, @level, 1d8 + @con_mod' : '0',
+    onChange: (text) => edit(withRest(definition, rest.id, { refills: rest.refills.map((x, j) => (j === i ? { ...x, amount: text } : x)) })),
+  });
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
+      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto', gap: 6 }}>
+        <select aria-label={`Refill ${i + 1}: what`} value={r.what} style={input}
+          onChange={(e) => edit(withRefill(definition, rest.id, i, { what: e.target.value }, targets))}>
+          {targets.map((x) => <option key={x.id} value={x.id}>{x.label}</option>)}
+          {!t && <option value={r.what}>{r.what} (GONE)</option>}
+        </select>
+        <select aria-label={`Refill ${i + 1}: how`} value={r.how} style={input}
+          onChange={(e) => edit(withRefill(definition, rest.id, i, { how: e.target.value as Rest['refills'][number]['how'] }, targets))}>
+          {(t?.hows ?? [r.how]).map((h) => <option key={h} value={h}>{howLabel(t, h)}</option>)}
+        </select>
+        {needsAmount
+          ? (
+            <span style={{ display: 'flex', gap: 4, minWidth: 0 }}>
+              <span style={{ flex: 1, minWidth: 0 }}>{amount.field}</span>
+              {t?.tracks && r.how === 'by' && (
+                <select aria-label={`Refill ${i + 1}: track`} value={r.track ?? ''} style={input}
+                  onChange={(e) => edit(withRefill(definition, rest.id, i, { track: e.target.value }, targets))}>
+                  <option value="">{t.tracks[0]?.label ?? 'FIRST'}</option>
+                  {t.tracks.slice(1).map((x) => <option key={x.id} value={x.id}>{x.label}</option>)}
+                </select>
+              )}
+            </span>
+          )
+          : <span />}
+        <button type="button" className="utility-btn danger-btn" style={btn} aria-label={`Remove refill ${i + 1}`}
+          onClick={() => edit(withoutRefill(definition, rest.id, i))}>×</button>
+      </div>
+      {needsAmount && amount.help}
+    </div>
+  );
+}
+
+function Refills({ rest, definition, edit, targets, api }: { rest: Rest; definition: Definition; edit: Props['edit']; targets: Target[]; api?: Props['api'] }) {
   const inherited = countedAs(definition, rest.id).flatMap((id) => {
     const other = restList(definition).find((r) => r.id === id);
     return other ? other.refills.map((r) => `${other.name.toUpperCase()}: ${describeRefill(r, targets)}`) : [];
@@ -54,41 +102,7 @@ function Refills({ rest, definition, edit, targets }: { rest: Rest; definition:
       {inherited.map((text, i) => (
         <div key={`from-${i}`} style={{ ...why, fontSize: 11, opacity: 0.7, borderLeft: '2px solid var(--dark-green)', paddingLeft: 8 }}>{text}</div>
       ))}
-      {rest.refills.map((r, i) => {
-        const t = targets.find((x) => x.id === r.what);
-        const needsAmount = r.how === 'by' || r.how === 'to';
-        return (
-          <div key={i} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto', gap: 6 }}>
-            <select aria-label={`Refill ${i + 1}: what`} value={r.what} style={input}
-              onChange={(e) => edit(withRefill(definition, rest.id, i, { what: e.target.value }, targets))}>
-              {targets.map((x) => <option key={x.id} value={x.id}>{x.label}</option>)}
-              {!t && <option value={r.what}>{r.what} (GONE)</option>}
-            </select>
-            <select aria-label={`Refill ${i + 1}: how`} value={r.how} style={input}
-              onChange={(e) => edit(withRefill(definition, rest.id, i, { how: e.target.value as Rest['refills'][number]['how'] }, targets))}>
-              {(t?.hows ?? [r.how]).map((h) => <option key={h} value={h}>{howLabel(t, h)}</option>)}
-            </select>
-            {needsAmount
-              ? (
-                <span style={{ display: 'flex', gap: 4, minWidth: 0 }}>
-                  <input type="text" aria-label={`Refill ${i + 1}: amount`} value={r.amount ?? ''} maxLength={LIMITS.amount} style={{ ...input, flex: 1 }}
-                    placeholder={r.how === 'by' ? '-1, @level, 1d8 + @con_mod' : '0'}
-                    onChange={(e) => edit(withRest(definition, rest.id, { refills: rest.refills.map((x, j) => (j === i ? { ...x, amount: e.target.value } : x)) }))} />
-                  {t?.tracks && r.how === 'by' && (
-                    <select aria-label={`Refill ${i + 1}: track`} value={r.track ?? ''} style={input}
-                      onChange={(e) => edit(withRefill(definition, rest.id, i, { track: e.target.value }, targets))}>
-                      <option value="">{t.tracks[0]?.label ?? 'FIRST'}</option>
-                      {t.tracks.slice(1).map((x) => <option key={x.id} value={x.id}>{x.label}</option>)}
-                    </select>
-                  )}
-                </span>
-              )
-              : <span />}
-            <button type="button" className="utility-btn danger-btn" style={btn} aria-label={`Remove refill ${i + 1}`}
-              onClick={() => edit(withoutRefill(definition, rest.id, i))}>×</button>
-          </div>
-        );
-      })}
+      {rest.refills.map((_, i) => <RefillRow key={i} rest={rest} i={i} definition={definition} edit={edit} targets={targets} api={api} />)}
       <div style={row}>
         <button type="button" className="utility-btn" style={btn} disabled={!targets.length || rest.refills.length >= LIMITS.refills}
           onClick={() => edit(withNewRefill(definition, rest.id, targets))}>+ REFILL</button>
@@ -184,7 +198,7 @@ function Detail({ rest, definition, edit, targets, api }: { rest: Rest; definiti
         </div>
 
         <FieldName boxStyle={{ justifySelf: 'end', paddingTop: 6 }} hint={HINTS['rests.refills']} style={small}>REFILLS</FieldName>
-        <Refills rest={rest} definition={definition} edit={edit} targets={targets} />
+        <Refills rest={rest} definition={definition} edit={edit} targets={targets} api={api} />
 
         <span style={{ ...small, textAlign: 'right', paddingTop: 6 }}>WEARS OFF</span>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>
diff --git a/frontend/src/components/RollsTab.tsx b/frontend/src/components/RollsTab.tsx
index 5a685bd6..cc879188 100644
--- a/frontend/src/components/RollsTab.tsx
+++ b/frontend/src/components/RollsTab.tsx
@@ -15,6 +15,7 @@ import { FieldName, HelpHint } from './HelpHint';
 import { HINTS } from '../sheets/builderHelp';
 import { SEEN_LEVELS, systemSeen, rollSeen, seenLabel, seenLine, withSystemSeen, withRollSeen, previewOf, type Seen } from '../sheets/targetSeen';
 import { ToggleSwitch } from './ToggleSwitch';
+import { useFormulaBox } from '../hooks/useFormulaBox';
 
 // STATS & RULES' ROLLS tab (Phase 6, 6b1a; approved mockup docs/mockups/builder-rolls.html,
 // 2026-10-19, on the builder design's Dice page): the system's rolls on the left; the one picked in
@@ -170,20 +171,30 @@ function ReadStep({ definition, edit, roll }: { definition: Definition; edit: (n
   );
 }
 
-/** Step 3: what is added, a target met at or over it (or under), and the bands the total is read on. */
-function CompareStep({ definition, edit, roll }: { definition: Definition; edit: (next: Definition) => void; roll: Roll }) {
+/**
+ * Step 3: what is added, a target met at or over it (or under), and the bands the total is read on.
+ * ADD and AGAINST are formula boxes (formula box 2): said in words, worked out for the sample
+ * rolling the roll's first ROLLED BY stat, a mistake in red with its fix.
+ */
+function CompareStep({ definition, edit, roll, api }: { definition: Definition; edit: (next: Definition) => void; roll: Roll; api?: ReturnType<typeof systemsApi> }) {
   const bands = roll.bands ?? [];
+  const add = useFormulaBox({
+    definition, api, kind: 'add', roll: roll.id, value: roll.add ?? '', onChange: (text) => edit(withRollAdd(definition, roll.id, text)),
+    label: 'Add', placeholder: 'NOTHING · @this + @tie_mod', inputStyle: field,
+  });
+  const against = useFormulaBox({
+    definition, api, kind: 'against', roll: roll.id, value: roll.against ?? '', onChange: (text) => edit(withRollAgainst(definition, roll.id, text)),
+    label: 'Against', placeholder: 'NOTHING · @this, 13', inputStyle: field,
+  });
   return (
     <>
       <div style={{ display: 'grid', gridTemplateColumns: '84px minmax(0, 1fr)', gap: 6, alignItems: 'center' }}>
         <FieldName hint={HINTS['rolls.add']}>ADD</FieldName>
-        <input type="text" aria-label="Add" maxLength={1000} value={roll.add ?? ''} placeholder="NOTHING · @this + @tie_mod" style={{ ...field, width: '100%' }}
-          onChange={(e) => edit(withRollAdd(definition, roll.id, e.target.value))} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>{add.field}{add.help}</div>
       </div>
       <div style={{ display: 'grid', gridTemplateColumns: '84px minmax(0, 1fr)', gap: 6, alignItems: 'center' }}>
         <FieldName hint={HINTS['rolls.against']}>AGAINST</FieldName>
-        <input type="text" aria-label="Against" maxLength={1000} value={roll.against ?? ''} placeholder="NOTHING · @this, 13" style={{ ...field, width: '100%' }}
-          onChange={(e) => edit(withRollAgainst(definition, roll.id, e.target.value))} />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0 }}>{against.field}{against.help}</div>
         <span />
         <ToggleSwitch label="ROLL UNDER: AT OR UNDER SUCCEEDS" on={!!roll.under} disabled={roll.against === undefined}
           onChange={(under) => edit(withRollAgainst(definition, roll.id, roll.against ?? '', under))} />
@@ -435,7 +446,7 @@ function ChangesStep({ definition, edit, roll }: { definition: Definition; edit:
 }
 
 /** The roll picked: its name, its preset, its five steps, ROLLED BY and REMOVE. */
-export function RollEditor({ definition, edit, roll, onRemoved }: Props & { roll: Roll; onRemoved: () => void }) {
+export function RollEditor({ definition, edit, roll, onRemoved, api }: Props & { roll: Roll; onRemoved: () => void }) {
   const [replacing, setReplacing] = useState<string | null>(null);
   const choices = rollables(definition);
   const by = new Set(roll.by ?? []);
@@ -462,7 +473,7 @@ export function RollEditor({ definition, edit, roll, onRemoved }: Props & { roll
       </div>
       <Step n={1} hint={HINTS['rolls.dice']} title="DICE"><DiceStep definition={definition} edit={edit} roll={roll} /></Step>
       <Step n={2} hint={HINTS['rolls.read']} title="READ THE DICE"><ReadStep definition={definition} edit={edit} roll={roll} /></Step>
-      <Step n={3} hint={HINTS['rolls.compare']} title="ADD AND COMPARE"><CompareStep definition={definition} edit={edit} roll={roll} /></Step>
+      <Step n={3} hint={HINTS['rolls.compare']} title="ADD AND COMPARE"><CompareStep definition={definition} edit={edit} roll={roll} api={api} /></Step>
       <Step n={4} hint={HINTS['rolls.special']} title="SPECIAL RESULTS"><SpecialStep definition={definition} edit={edit} roll={roll} /></Step>
       <Step n={5} hint={HINTS['rolls.changes']} title="CHANGE A ROLL" note="ASKED BEFORE ROLLING"><ChangesStep definition={definition} edit={edit} roll={roll} /></Step>
       <section aria-label="Rolled by" style={{ border: '1px solid var(--dark-green)', padding: '8px 10px', display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
@@ -629,7 +640,7 @@ export function RollsTab({ definition, edit, api, onHelp }: Props) {
             {roll && <div><button type="button" className="utility-btn" style={btn} onClick={() => setAdding(false)}>CANCEL</button></div>}
           </div>
         ) : (
-          <RollEditor key={`edit:${roll.id}`} definition={definition} edit={edit} roll={roll} onRemoved={() => setPicked(null)} />
+          <RollEditor key={`edit:${roll.id}`} definition={definition} edit={edit} roll={roll} api={api} onRemoved={() => setPicked(null)} />
         )}
         {roll && !adding ? <TestRoll key={`test:${roll.id}`} definition={definition} api={api} roll={roll} /> : <span />}
       </div>
diff --git a/frontend/src/hooks/__tests__/useFormulaBox.test.tsx b/frontend/src/hooks/__tests__/useFormulaBox.test.tsx
index 6891a323..af9d0f31 100644
--- a/frontend/src/hooks/__tests__/useFormulaBox.test.tsx
+++ b/frontend/src/hooks/__tests__/useFormulaBox.test.tsx
@@ -22,9 +22,9 @@ const apiAnswering = (answer: (text: string) => FormulaRead) => ({
   previewFormulas: vi.fn(async (_d: Definition, formulas: { text: string }[]) => ({ ok: true, value: { results: formulas.map((f) => answer(f.text)), sampleLevel: 3 } })),
 }) as unknown as ReturnType<typeof systemsApi> & { previewFormulas: ReturnType<typeof vi.fn> };
 
-function Harness({ kind = 'amount', start = '', api }: { kind?: FormulaKind; start?: string; api?: ReturnType<typeof systemsApi> }) {
+function Harness({ kind = 'amount', start = '', api, roll }: { kind?: FormulaKind; start?: string; api?: ReturnType<typeof systemsApi>; roll?: string }) {
   const [text, setText] = useState(start);
-  const box = useFormulaBox({ definition: DEF, api, kind, value: text, onChange: setText, label: 'Modifier 1: by', inputStyle: {} });
+  const box = useFormulaBox({ definition: DEF, api, kind, roll, value: text, onChange: setText, label: 'Modifier 1: by', inputStyle: {} });
   return <div>{box.field}{box.help}</div>;
 }
 const textbox = () => screen.getByRole('textbox', { name: 'Modifier 1: by' }) as HTMLInputElement;
@@ -116,3 +116,46 @@ describe('the formula box', () => {
     expect(textbox().selectionStart).toBe(18);
   });
 });
+
+describe('on a roll and a rest (formula box 2)', () => {
+  it('names its roll to the server, which says the stat the sample rolls', async () => {
+    const api = apiAnswering(() => ({ ok: true, value: 13, reads: [{ id: 'this', label: 'rolled stat', value: 13 }], rolling: 'Strength' }));
+    render(<Harness kind="against" start="@this" roll="save" api={api} />);
+    await waitFor(() => expect(words().textContent).toBe('against your rolled stat · sample, rolling Strength, rolled stat 13: target 13'));
+    expect(api.previewFormulas).toHaveBeenCalledWith(DEF, [{ text: '@this', kind: 'against', roll: 'save' }]);
+  });
+
+  it('AGAINST\'s A NUMBER starts at 13; THE STAT ROLLED writes @this', async () => {
+    render(<Harness kind="against" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Help writing Modifier 1: by' }));
+    const help = within(screen.getByRole('group', { name: 'Help writing Modifier 1: by' }));
+    await userEvent.click(help.getByRole('button', { name: 'A NUMBER' }));
+    expect(textbox().value).toBe('13');
+    expect(help.getByText(/AGAINST/)).toBeTruthy();
+    await userEvent.click(help.getByRole('button', { name: 'THE STAT ROLLED' }));
+    expect(textbox().value).toBe('@this');
+  });
+
+  it('a rest\'s DICE and DICE AND A STAT, with how many, which die and which stat or formula', async () => {
+    const def = { ...DEF, derived: [{ id: 'con_mod', label: 'CON modifier', formula: '1' }] } as unknown as Definition;
+    function Rest() {
+      const [text, setText] = useState('');
+      const box = useFormulaBox({ definition: def, kind: 'refill', value: text, onChange: setText, label: 'Modifier 1: by', inputStyle: {}, maxLength: 200 });
+      return <div>{box.field}{box.help}</div>;
+    }
+    render(<Rest />);
+    expect(textbox().maxLength).toBe(200);
+    await userEvent.click(screen.getByRole('button', { name: 'Help writing Modifier 1: by' }));
+    const help = within(screen.getByRole('group', { name: 'Help writing Modifier 1: by' }));
+    await userEvent.click(help.getByRole('button', { name: 'DICE' }));
+    expect(textbox().value).toBe('1d8');
+    fireEvent.change(help.getByRole('spinbutton', { name: 'How many' }), { target: { value: '2' } });
+    await userEvent.selectOptions(help.getByRole('combobox', { name: 'Which die' }), 'D6');
+    expect(textbox().value).toBe('2d6');
+    await userEvent.click(help.getByRole('button', { name: 'DICE AND A STAT' }));
+    expect(textbox().value).toBe('1d8 + @str');
+    await userEvent.selectOptions(help.getByRole('combobox', { name: 'Which' }), 'CON MODIFIER');
+    expect(textbox().value).toBe('1d8 + @con_mod');
+    expect(words().textContent).toBe('1d8 + con_mod');
+  });
+});
diff --git a/frontend/src/hooks/useFormulaBox.tsx b/frontend/src/hooks/useFormulaBox.tsx
index 1d2583fd..e82d1aa3 100644
--- a/frontend/src/hooks/useFormulaBox.tsx
+++ b/frontend/src/hooks/useFormulaBox.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import type { Definition, systemsApi } from '../sheets/systemsApi';
 import {
-  wordsOf, sampleLine, insertGroups, shapesOf, writeShape, levelTokens,
+  wordsOf, sampleLine, insertGroups, shapesOf, writeShape, levelTokens, DIE_SIDES,
   type FormulaKind, type FormulaRead, type Shape,
 } from '../sheets/formulaBox';
-import { allStats, insertToken } from '../sheets/statsRules';
+import { allStats, formulaList, insertToken } from '../sheets/statsRules';
 import { FormulaIcon } from '../components/FormulaIcon';
 import { PREVIEW_DELAY_MS } from './usePreviewValues';
 
@@ -14,12 +14,15 @@ import { PREVIEW_DELAY_MS } from './usePreviewValues';
 // a name nearly right. The button opens SHAPE (a common formula written for you) and INSERT (the
 // names it can read, put at the cursor); only the button opens them, so typing is never covered.
 // The words, shapes and names are sheets/formulaBox.ts; the server reads the formula. The
-// button's mark is components/FormulaIcon.tsx.
+// button's mark is components/FormulaIcon.tsx. Formula box 2 puts it on a roll's ADD and AGAINST
+// (which name their roll, for the stat the sample rolls) and a rest's amounts (dice and all).
 
 interface Options {
   definition: Definition;
-  api?: ReturnType<typeof systemsApi>;
+  api?: Pick<ReturnType<typeof systemsApi>, 'previewFormulas'>;
   kind: FormulaKind;
+  /** A roll's box: which roll, so the sample rolls its first ROLLED BY stat. */
+  roll?: string;
   value: string;
   onChange: (text: string) => void;
   /** The box's name: `Modifier 1: by`. */
@@ -27,6 +30,8 @@ interface Options {
   /** The text box's id, for a label beside it. */
   id?: string;
   placeholder?: string;
+  /** The most characters it takes: 1000 unless the box says less. */
+  maxLength?: number;
   inputStyle: React.CSSProperties;
 }
 
@@ -37,18 +42,21 @@ const chip = (on: boolean): React.CSSProperties => ({
 });
 const askBox: React.CSSProperties = { background: 'var(--black)', color: 'var(--cyan)', border: '1px solid var(--cyan)', fontFamily: 'monospace', fontSize: 11, padding: '2px 5px' };
 
-/** What a shape starts at: 1 to add, 13 for a stat, 5 for a level. */
-const startOf = (s: Shape) => (s.id === 'at_least' ? 13 : s.id === 'level_at_least' ? 5 : s.id === 'per_level' || s.id === 'per_class_level' ? 2 : 1);
+/** What a shape starts at: 1 to add, 13 for a stat or a target, 5 for a level. */
+const startOf = (s: Shape, kind: FormulaKind) => (s.id === 'at_least' || (kind === 'against' && s.id === 'number') ? 13
+  : s.id === 'level_at_least' ? 5 : s.id === 'per_level' || s.id === 'per_class_level' ? 2 : 1);
+/** What a shape's ask row starts with. */
+const LEAD: Partial<Record<FormulaKind, string>> = { requires: 'NEEDS', amount: 'ADD', add: 'ADD', against: 'AGAINST' };
 
 /**
  * The box, as two parts the caller places: `field`, the text and its FORMULA button, where the
  * text box was; and `help`, the words line and (while open) SHAPE and INSERT, under the row.
  */
-export function useFormulaBox({ definition, api, kind, value, onChange, label, id, placeholder, inputStyle }: Options): { field: React.ReactElement; help: React.ReactElement } {
+export function useFormulaBox({ definition, api, kind, roll, value, onChange, label, id, placeholder, maxLength = 1000, inputStyle }: Options): { field: React.ReactElement; help: React.ReactElement } {
   const [open, setOpen] = useState(false);
   // What the server said, kept with the text it was said of: an answer for older text is never shown.
   const [read, setRead] = useState<{ text: string; result: FormulaRead } | null>(null);
-  const [shape, setShape] = useState<{ id: string; n: number; name: string } | null>(null);
+  const [shape, setShape] = useState<{ id: string; n: number; name: string; sides: number } | null>(null);
   const input = useRef<HTMLInputElement | null>(null);
   const cursor = useRef(value.length);
   const placeAt = useRef<number | null>(null);
@@ -58,10 +66,10 @@ export function useFormulaBox({ definition, api, kind, value, onChange, label, i
     if (!api || !value.trim()) return undefined;
     let live = true;
     const timer = setTimeout(() => {
-      api.previewFormulas(definition, [{ text: value, kind }]).then((r) => { if (live && r.ok && r.value.results[0]) setRead({ text: value, result: r.value.results[0] }); });
+      api.previewFormulas(definition, [{ text: value, kind, ...(roll ? { roll } : {}) }]).then((r) => { if (live && r.ok && r.value.results[0]) setRead({ text: value, result: r.value.results[0] }); });
     }, PREVIEW_DELAY_MS);
     return () => { live = false; clearTimeout(timer); };
-  }, [api, definition, value, kind]);
+  }, [api, definition, value, kind, roll]);
 
   // After INSERT, the cursor goes after what was put in.
   useEffect(() => {
@@ -75,10 +83,13 @@ export function useFormulaBox({ definition, api, kind, value, onChange, label, i
   const shapes = shapesOf(definition, kind);
   const levels = levelTokens(definition);
   const stats = allStats(definition).map((s) => ({ token: `@${s.id}`, label: (s.label || s.id).toUpperCase() }));
-  const write = (s: { id: string; n: number; name: string }) => { setShape(s); onChange(writeShape(s.id, s.n, s.name)); };
+  // DICE AND A STAT may add a formula too: a CON modifier more often than CON.
+  const statsAndFormulas = [...stats, ...formulaList(definition).map((f) => ({ token: `@${f.id}`, label: (f.label || f.id).toUpperCase() }))];
+  const write = (s: { id: string; n: number; name: string; sides: number }) => { setShape(s); onChange(writeShape(s.id, s.n, s.name, s.sides)); };
   const pick = (s: Shape) => {
-    const names = s.asks === 'number-and-stat' ? stats : s.asks === 'number-and-level' ? levels.filter((l) => s.id !== 'per_class_level' || l.token !== '@level') : [];
-    write({ id: s.id, n: startOf(s), name: names[0]?.token ?? '@level' });
+    const names = s.asks === 'number-and-stat' ? stats : s.asks === 'dice-and-stat' ? statsAndFormulas
+      : s.asks === 'number-and-level' ? levels.filter((l) => s.id !== 'per_class_level' || l.token !== '@level') : [];
+    write({ id: s.id, n: startOf(s, kind), name: names[0]?.token ?? '@level', sides: 8 });
   };
   const current = shapes.find((s) => s.id === shape?.id);
   const shown = value.trim() && read?.text === value ? read.result : null;
@@ -86,7 +97,7 @@ export function useFormulaBox({ definition, api, kind, value, onChange, label, i
 
   const field = (
     <span style={{ display: 'flex', gap: 6, minWidth: 0 }}>
-      <input ref={input} id={id} type="text" aria-label={label} maxLength={1000} value={value} placeholder={placeholder} spellCheck={false}
+      <input ref={input} id={id} type="text" aria-label={label} maxLength={maxLength} value={value} placeholder={placeholder} spellCheck={false}
         aria-invalid={bad ? true : undefined}
         style={{ ...inputStyle, flex: 1, minWidth: 0, ...(bad ? { borderColor: 'var(--danger)' } : {}) }}
         onChange={(e) => { setShape(null); onChange(e.target.value); cursor.current = e.target.selectionStart ?? e.target.value.length; }}
@@ -129,7 +140,7 @@ export function useFormulaBox({ definition, api, kind, value, onChange, label, i
           </div>
           {shape && current && current.asks !== 'none' && (
             <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', alignItems: 'center', color: 'var(--cyan)' }}>
-              {kind === 'requires' ? 'NEEDS' : kind === 'amount' ? 'ADD' : ''}
+              {LEAD[kind] ?? ''}
               {kind === 'requires' && (
                 <select aria-label="Which" value={shape.name} style={askBox} onChange={(e) => write({ ...shape, name: e.target.value })}>
                   {(current.asks === 'number-and-stat' ? stats : levels).map((o) => <option key={o.token} value={o.token}>{o.label}</option>)}
@@ -138,6 +149,17 @@ export function useFormulaBox({ definition, api, kind, value, onChange, label, i
               {kind === 'requires' && 'OF AT LEAST'}
               <input type="number" aria-label="How many" value={shape.n} style={{ ...askBox, width: 56 }} onChange={(e) => write({ ...shape, n: Number(e.target.value) })} />
               {kind === 'uses' && shape.id === 'number' && 'USES'}
+              {(current.asks === 'dice' || current.asks === 'dice-and-stat') && (
+                <select aria-label="Which die" value={shape.sides} style={askBox} onChange={(e) => write({ ...shape, sides: Number(e.target.value) })}>
+                  {DIE_SIDES.map((n) => <option key={n} value={n}>D{n}</option>)}
+                </select>
+              )}
+              {current.asks === 'dice-and-stat' && <>
+                +
+                <select aria-label="Which" value={shape.name} style={askBox} onChange={(e) => write({ ...shape, name: e.target.value })}>
+                  {statsAndFormulas.map((o) => <option key={o.token} value={o.token}>{o.label}</option>)}
+                </select>
+              </>}
               {shape.id === 'per_level' && 'FOR EACH LEVEL'}
               {shape.id === 'per_class_level' && <>
                 FOR EACH
diff --git a/frontend/src/sheets/__tests__/formulaBox.test.ts b/frontend/src/sheets/__tests__/formulaBox.test.ts
index ad5b1a65..fc1153d7 100644
--- a/frontend/src/sheets/__tests__/formulaBox.test.ts
+++ b/frontend/src/sheets/__tests__/formulaBox.test.ts
@@ -117,3 +117,42 @@ describe('SHAPES', () => {
     expect(writeShape('nonsense', 1)).toBe('');
   });
 });
+
+describe('a roll\'s ADD and AGAINST, and a rest\'s amount (formula box 2)', () => {
+  const ROLLED = [{ id: 'this', label: 'rolled stat', value: 16 }];
+
+  it('says them in words', () => {
+    expect(wordsOf('add', '@this_mod', [{ id: 'this_mod', label: 'rolled stat\'s modifier', value: 3 }])).toBe('+ your rolled stat\'s modifier');
+    expect(wordsOf('add', '2')).toBe('+2, always');
+    expect(wordsOf('against', '13')).toBe('against 13');
+    expect(wordsOf('against', '@this', ROLLED)).toBe('against your rolled stat');
+    expect(wordsOf('against', '10 + @this', ROLLED)).toBe('against a target worked out from rolled stat');
+    expect(wordsOf('refill', '1d8  +  @con_mod', [{ id: 'con_mod', label: 'CON modifier', value: 2 }])).toBe('1d8 + CON modifier');
+    expect(wordsOf('refill', '@hp_max')).toBe('hp_max');
+  });
+
+  it('says the sample: the stat it rolls, a target, and what dice can come to', () => {
+    expect(sampleLine('add', { ok: true, value: 3, reads: [{ id: 'this_mod', label: 'rolled stat\'s modifier', value: 3 }], rolling: 'Strength' }))
+      .toBe('sample, rolling Strength, rolled stat\'s modifier 3: +3');
+    expect(sampleLine('add', { ok: true, value: 2, reads: [], rolling: 'Strength' })).toBe('sample, rolling Strength: +2');
+    expect(sampleLine('against', { ok: true, value: 16, reads: ROLLED })).toBe('sample rolled stat 16: target 16');
+    expect(sampleLine('refill', { ok: true, value: 3, most: 10, reads: [{ id: 'con_mod', label: 'CON modifier', value: 2 }] })).toBe('sample CON modifier 2: 3 to 10');
+    expect(sampleLine('refill', { ok: true, value: 5, reads: [] })).toBe('5');
+  });
+
+  it('INSERT: the stat rolled first in a roll, no levels or tables in a rest', () => {
+    expect(insertGroups(DEF, 'add').map((g) => g.title)).toEqual(['THIS ROLL', 'LEVELS', 'STATS', 'FORMULAS', 'TABLES', 'WORKINGS']);
+    expect(insertGroups(DEF, 'against')[0].items.map((i) => i.token)).toEqual(['@this', '@this_mod', '@tie', '@tie_mod']);
+    expect(insertGroups(DEF, 'refill').map((g) => g.title)).toEqual(['STATS', 'FORMULAS', 'WORKINGS']);
+  });
+
+  it('SHAPES: the stat rolled and its modifier, a target, dice', () => {
+    expect(shapesOf(DEF, 'add').map((s) => s.label)).toEqual(['A NUMBER', 'THE STAT ROLLED', 'ITS MODIFIER', 'PER LEVEL']);
+    expect(shapesOf(DEF, 'against').map((s) => s.label)).toEqual(['A NUMBER', 'THE STAT ROLLED']);
+    expect(shapesOf(DEF, 'refill').map((s) => [s.label, s.asks])).toEqual([['A NUMBER', 'number'], ['DICE', 'dice'], ['DICE AND A STAT', 'dice-and-stat']]);
+    expect(shapesOf({ format: 1, name: 'B' } as Definition, 'refill')[2].needs).toBe('No stats yet: make them on STATS & RULES');
+    expect(shapesOf({ format: 1, name: 'B' } as Definition, 'add')[3].needs).toBe('No levels yet: make a list levelled on CHOICES');
+    expect([writeShape('rolled', 1), writeShape('rolled_mod', 1)]).toEqual(['@this', '@this_mod']);
+    expect([writeShape('dice', 2, '@level', 6), writeShape('dice', 0), writeShape('dice_and_stat', 1, '@con_mod', 10)]).toEqual(['2d6', '1d8', '1d10 + @con_mod']);
+  });
+});
diff --git a/frontend/src/sheets/builderHelp.ts b/frontend/src/sheets/builderHelp.ts
index 9c7c21c7..8e98b83b 100644
--- a/frontend/src/sheets/builderHelp.ts
+++ b/frontend/src/sheets/builderHelp.ts
@@ -229,8 +229,8 @@ export const HINTS = {
   'rolls.dice': 'What is rolled: how many, as a number or a formula like @this, and of which size, or the system\'s own dice. Name a kind, like Hunger, to show it apart and give it effects.',
   'rolls.read': 'How the dice become a number: SUM them, KEEP the HIGHEST or LOWEST few, COUNT SUCCESSES at or over a face, or COUNT THE SYMBOLS on the system\'s own dice.',
   'rolls.compare': 'What is added to the dice, the target the total is held against, and words for where it lands. Each is optional: with none, the roll is its total.',
-  'rolls.add': 'A formula added to what the dice come to, like @this + @tie_mod. At the table, conditions that change every roll are added on top.',
-  'rolls.against': 'The target the total must meet or beat to succeed, like 13 or @this. ROLL UNDER turns it round: at or under succeeds. Empty: no success or failure.',
+  'rolls.add': 'A formula added to what the dice come to, like @this + @tie_mod. At the table, conditions that change every roll are added on top. The line under it says it in words with what it comes to for the sample, rolling the first stat in ROLLED BY; the formula button beside it writes common ones (THE STAT ROLLED, ITS MODIFIER) and lists the names it can read.',
+  'rolls.against': 'The target the total must meet or beat to succeed, like 13 or @this. ROLL UNDER turns it round: at or under succeeds. Empty: no success or failure. The line under it says the target the sample would roll against; the formula button writes A NUMBER or THE STAT ROLLED for you.',
   'rolls.seen': 'How much of a roll\'s target your players see, for every roll in the system. SHOWN: "vs 12: SUCCESS". VERDICT ONLY: "SUCCESS", never the number. GM ONLY: their total alone; you see it all. HELP\'s WHO SEES THE TARGET shows each.',
   'rolls.rollSeen': 'This roll\'s own, when it shouldn\'t follow the system\'s: a save whose number is on the player\'s sheet anyway can be SHOWN in a GM ONLY game. Needs a target to keep.',
   'rolls.bands': 'Words for the total, read top to bottom like a table: the first band the total isn\'t above is the one shown, like 6− MISS, 7–9 A COST, 10+ A HIT.',
@@ -264,7 +264,7 @@ export const HINTS = {
   'conditions.description': 'What it means at the table, shown under the chips in the token\'s HEALTH folder to everyone who sees them.',
   'conditions.ends': 'WHEN REMOVED: it stays until someone who may change the token\'s health takes it off. AFTER ROUNDS: it counts down with the initiative rounds. AT A REST: it comes off at the rests you pick.',
   // RESTS
-  'rests.refills': 'What the rest puts back, line by line in order: health, a number on the sheet, or a whole section, to its maximum, by an amount or to a number. Rolled for each character.',
+  'rests.refills': 'What the rest puts back, line by line in order: health, a number on the sheet, or a whole section, to its maximum, by an amount or to a number. Rolled for each character. Under an amount, a line says it in words with the least and most it comes to for the sample; the formula button writes DICE or DICE AND A STAT for you.',
   'rests.sample': 'This rest on the sample character, its token hurt to half, worked out the way the game would. Nothing is saved.',
   // ONLY WITH, on PARTS, CHARACTER SHEET (and the NPC stat block) and CONDITIONS
   'only.alternative': 'A house rule under which this formula is worked out another way, like fewer hit points with GRITTY WOUNDS. Off, it is worked out as written.',
diff --git a/frontend/src/sheets/formulaBox.ts b/frontend/src/sheets/formulaBox.ts
index 7420bccc..1ec9ae99 100644
--- a/frontend/src/sheets/formulaBox.ts
+++ b/frontend/src/sheets/formulaBox.ts
@@ -2,19 +2,31 @@
 // 2026-10-29): what a formula says in words, the line its sample value is told in, the SHAPES that
 // write a common one for you, and the names INSERT offers. The server reads the formula itself
 // (POST /api/systems/preview-formulas, the game's own parser) and says what it reads; nothing here
-// parses. Pure, so the box (components/FormulaBox.tsx) only draws.
+// parses. Pure, so the box (hooks/useFormulaBox.tsx) only draws.
+//
+// Formula box 2 adds a roll's ADD and AGAINST, which read the stat being rolled too (@this,
+// @this_mod, @tie, @tie_mod), and a rest's refill amounts, which may hold dice: the sample line says
+// what dice decide as a range, the least to the most.
 
 import type { Definition } from './systemsApi';
 import { allStats, formulaList, tableList, FUNCTIONS } from './statsRules';
 import { choiceLists } from './choices';
 
-/** What a box holds: a modifier's amount, an option's requirement, a feature's uses. */
-export type FormulaKind = 'amount' | 'requires' | 'uses';
+/** What a box holds: a modifier's amount, an option's requirement, a feature's uses; a roll's ADD and AGAINST; a rest's amount. */
+export type FormulaKind = 'amount' | 'requires' | 'uses' | 'add' | 'against' | 'refill';
 
 /** One name a formula reads, as the server worked it out for the sample. */
 export interface FormulaReads { id: string; label: string; value: number }
 /** What the server made of a formula (backend systemBuilder/formulaPreview.js). */
-export type FormulaRead = { ok: true; value: number; reads: FormulaReads[] } | { ok: false; problem: string; name?: string; suggest?: string };
+export type FormulaRead =
+  | {
+    ok: true; value: number; reads: FormulaReads[];
+    /** With dice (a rest's amount), the most it comes to; `value` is then the least. */
+    most?: number;
+    /** A roll's box: the stat the sample rolls. */
+    rolling?: string;
+  }
+  | { ok: false; problem: string; name?: string; suggest?: string };
 
 const signed = (n: number) => (n < 0 ? `−${-n}` : `+${n}`);
 const word = (id: string, reads: FormulaReads[]) => reads.find((r) => r.id === id)?.label ?? id;
@@ -32,6 +44,13 @@ export const wordsOf = (kind: FormulaKind, text: string, reads: FormulaReads[] =
     const names = [...new Set(reads.length ? reads.map((r) => r.label) : [...t.matchAll(/@([a-z][a-z0-9_]*)/g)].map((x) => x[1]))];
     return names.length ? `worked out from ${names.join(', ')}` : 'a fixed number';
   };
+  // A rest's amount, dice and all, said with names in place of the @ids: 1d8 + CON modifier.
+  if (kind === 'refill') return t.replace(/@([a-z][a-z0-9_]*)/g, (_, id: string) => word(id, reads)).replace(/\s+/g, ' ');
+  if (kind === 'against') {
+    if ((m = t.match(/^(-?\d+)$/))) return `against ${m[1]}`;
+    if ((m = t.match(/^@([a-z][a-z0-9_]*)$/))) return `against your ${word(m[1], reads)}`;
+    return `against a target ${named()}`;
+  }
   if (kind === 'requires') {
     if ((m = t.match(/^@([a-z][a-z0-9_]*)\s*>=\s*(-?\d+)$/))) return `needs ${word(m[1], reads)} ${m[2]} or more`;
     if ((m = t.match(/^@([a-z][a-z0-9_]*)\s*>\s*(-?\d+)$/))) return `needs ${word(m[1], reads)} over ${m[2]}`;
@@ -50,13 +69,21 @@ export const wordsOf = (kind: FormulaKind, text: string, reads: FormulaReads[] =
   return named();
 };
 
-/** What it comes to for the sample: `sample Level 3: +6`, `the sample (Strength 16) meets it`, `sample: 3 uses`. */
+/**
+ * What it comes to for the sample: `sample Level 3: +6`, `the sample (Strength 16) meets it`,
+ * `sample: 3 uses`, `sample, rolling Strength, rolled stat 16: target 16`, `sample CON modifier 2: 3 to 10`.
+ */
 export const sampleLine = (kind: FormulaKind, read: FormulaRead & { ok: true }): string => {
   const names = [...new Map(read.reads.map((r) => [r.id, `${r.label} ${r.value}`])).values()].join(', ');
   if (kind === 'requires') return `the sample${names ? ` (${names})` : ''} ${read.value !== 0 ? 'meets it' : 'doesn\'t meet it'}`;
-  const v = Math.round(read.value * 100) / 100;
-  const said = kind === 'uses' ? `${v} use${v === 1 ? '' : 's'}` : signed(v);
-  return names ? `sample ${names}: ${said}` : said;
+  const round = (n: number) => Math.round(n * 100) / 100;
+  const v = round(read.value);
+  const said = kind === 'uses' ? `${v} use${v === 1 ? '' : 's'}`
+    : kind === 'against' ? `target ${v}`
+    : kind === 'refill' ? (read.most !== undefined ? `${v} to ${round(read.most)}` : String(v))
+    : signed(v);
+  const sample = read.rolling ? `sample, rolling ${read.rolling}${names ? ',' : ''}` : 'sample';
+  return names || read.rolling ? `${sample}${names ? ` ${names}` : ''}: ${said}` : said;
 };
 
 /** One list of names INSERT offers, under a title. */
@@ -81,15 +108,23 @@ const WORKINGS: Record<string, string> = {
   floor: 'ROUNDED DOWN', ceil: 'ROUNDED UP', round: 'ROUNDED', min: 'THE SMALLER', max: 'THE LARGER', abs: 'WITHOUT ITS SIGN', clamp: 'KEPT BETWEEN', if: 'ONE OR THE OTHER',
 };
 
+/** What a roll's box reads of the stat being rolled. */
+export const ROLL_TOKENS = [
+  { token: '@this', label: 'THE STAT ROLLED' }, { token: '@this_mod', label: 'ITS MODIFIER' },
+  { token: '@tie', label: 'ITS TIED STAT' }, { token: '@tie_mod', label: 'THE TIED STAT\'S MODIFIER' },
+];
+
 /**
- * What INSERT offers a box: its levels, stats, formulas (never for an amount, which reads the sheet
- * as typed and levels), tables and the workings. Empty groups left out.
+ * What INSERT offers a box: the stat being rolled (a roll's), its levels, stats, formulas (never for
+ * an amount, which reads the sheet as typed and levels), tables and the workings. A rest's amount
+ * reads no levels or tables. Empty groups left out.
  */
 export const insertGroups = (def: Definition, kind: FormulaKind): InsertGroup[] => [
-  { title: 'LEVELS', items: levelTokens(def) },
+  { title: 'THIS ROLL', items: kind === 'add' || kind === 'against' ? ROLL_TOKENS : [] },
+  { title: 'LEVELS', items: kind === 'refill' ? [] : levelTokens(def) },
   { title: 'STATS', items: allStats(def).map((s) => ({ token: `@${s.id}`, label: (s.label || s.id).toUpperCase() })) },
   { title: 'FORMULAS', items: kind === 'amount' ? [] : formulaList(def).map((f) => ({ token: `@${f.id}`, label: (f.label || f.id).toUpperCase() })) },
-  { title: 'TABLES', items: tableList(def).map((t) => ({ token: `${t.id}()`, label: 'A TABLE' })) },
+  { title: 'TABLES', items: kind === 'refill' ? [] : tableList(def).map((t) => ({ token: `${t.id}()`, label: 'A TABLE' })) },
   { title: 'WORKINGS', items: FUNCTIONS.map((fn) => ({ token: `${fn}()`, label: WORKINGS[fn] ?? '' })) },
 ].filter((g) => g.items.length);
 
@@ -97,19 +132,37 @@ export const insertGroups = (def: Definition, kind: FormulaKind): InsertGroup[]
 export interface Shape {
   id: string; label: string;
   /** What it asks before writing: a number, a number and which level or stat, or nothing. */
-  asks: 'number' | 'none' | 'number-and-level' | 'number-and-stat';
+  asks: 'number' | 'none' | 'number-and-level' | 'number-and-stat' | 'dice' | 'dice-and-stat';
   /** Why it can't be used yet, when it can't. */
   needs?: string;
 }
 
 /**
  * The shapes a box offers. Amounts and uses: A NUMBER, PER LEVEL, PER CLASS LEVEL, HALF LEVEL;
- * requirements: AT LEAST (a stat) and LEVEL AT LEAST. A shape needing levels or stats says so
- * when the system has none.
+ * requirements: AT LEAST (a stat) and LEVEL AT LEAST; a roll's ADD: A NUMBER, THE STAT ROLLED, ITS
+ * MODIFIER, PER LEVEL; its AGAINST: A NUMBER, THE STAT ROLLED; a rest's amount: A NUMBER, DICE, DICE
+ * AND A STAT. A shape needing levels or stats says so when the system has none.
  */
 export const shapesOf = (def: Definition, kind: FormulaKind): Shape[] => {
   const levels = levelTokens(def).length ? undefined : 'No levels yet: make a list levelled on CHOICES';
   const stats = allStats(def).length ? undefined : 'No stats yet: make them on STATS & RULES';
+  if (kind === 'add' || kind === 'against') {
+    return [
+      { id: 'number', label: 'A NUMBER', asks: 'number' },
+      { id: 'rolled', label: 'THE STAT ROLLED', asks: 'none' },
+      ...(kind === 'add' ? [
+        { id: 'rolled_mod', label: 'ITS MODIFIER', asks: 'none' as const },
+        { id: 'per_level', label: 'PER LEVEL', asks: 'number' as const, needs: levels },
+      ] : []),
+    ];
+  }
+  if (kind === 'refill') {
+    return [
+      { id: 'number', label: 'A NUMBER', asks: 'number' },
+      { id: 'dice', label: 'DICE', asks: 'dice' },
+      { id: 'dice_and_stat', label: 'DICE AND A STAT', asks: 'dice-and-stat', needs: stats },
+    ];
+  }
   if (kind === 'requires') {
     return [
       { id: 'at_least', label: 'AT LEAST', asks: 'number-and-stat', needs: stats },
@@ -124,10 +177,17 @@ export const shapesOf = (def: Definition, kind: FormulaKind): Shape[] => {
   ];
 };
 
-/** The text a shape writes, from its number and the name picked (a level or a stat, `@id` form). */
-export const writeShape = (shape: string, n: number, name = '@level'): string => {
+/** The dice a shape offers. */
+export const DIE_SIDES = [4, 6, 8, 10, 12, 20];
+
+/** The text a shape writes, from its number, the name picked (a level or a stat, `@id` form) and a die's sides. */
+export const writeShape = (shape: string, n: number, name = '@level', sides = 8): string => {
   const k = Number.isFinite(n) ? Math.trunc(n) : 0;
   switch (shape) {
+    case 'rolled': return '@this';
+    case 'rolled_mod': return '@this_mod';
+    case 'dice': return `${Math.max(1, k)}d${sides}`;
+    case 'dice_and_stat': return `${Math.max(1, k)}d${sides} + ${name}`;
     case 'number': return String(k);
     case 'per_level': return `${k} * @level`;
     case 'per_class_level': return `${k} * ${name}`;
diff --git a/frontend/src/sheets/systemsApi.ts b/frontend/src/sheets/systemsApi.ts
index ea20c5cf..b0d9b4b9 100644
--- a/frontend/src/sheets/systemsApi.ts
+++ b/frontend/src/sheets/systemsApi.ts
@@ -165,7 +165,7 @@ export const systemsApi = (token: string, fetcher: typeof fetch = fetch) => {
     previewValues: (definition: Definition) =>
       call<{ values: Record<string, number>; problems: Problem[] }>(fetcher, token, '/api/systems/preview-values', 'POST', { definition }),
     /** The formula box (formula box 1): each formula read as the game reads it, for the sample character. */
-    previewFormulas: (definition: Definition, formulas: { text: string; kind: FormulaKind }[]) =>
+    previewFormulas: (definition: Definition, formulas: { text: string; kind: FormulaKind; roll?: string }[]) =>
       call<{ results: FormulaRead[]; sampleLevel: number }>(fetcher, token, '/api/systems/preview-formulas', 'POST', { definition, formulas }),
     /**
      * TEST ROLL (6b1a): one of a draft's rolls made for its sample character by the table's own

From 25e65dac5874fc463e1caba621f2562f901063c9 Mon Sep 17 00:00:00 2001
From: Developer <dev@example.com>
Date: Fri, 30 Oct 2026 11:34:54 -0500
Subject: [PATCH 2/2] ci: browser journeys in four parts at once, test by test,
 under one Browser Journeys check; builder journey finds PUBLISH's message by
 its words

---
 .github/workflows/ci.yml          | 31 +++++++++++++++++++++++++------
 CHANGELOG.md                      |  6 ++++++
 e2e/README.md                     | 22 +++++++++++++++-------
 e2e/playwright.config.ts          |  3 ++-
 e2e/tests/builder-journey.spec.ts |  2 +-
 5 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2e6ee76d..df9d7732 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -190,10 +190,18 @@ jobs:
 
   # The browser journeys (e2e/, 4l): the real backend and frontend started on a throwaway database,
   # driven in Playwright's own headless Chromium. On a developer's machine they run only when asked
-  # (e2e/README.md); here, on every pull request.
-  test-e2e:
-    name: Browser Journeys
+  # (e2e/README.md); here, on every pull request, split across four machines at once (Playwright's
+  # --shard), each with its own servers and database. Split test by test (--fully-parallel; each
+  # machine still runs one at a time) so the long graph file is shared out too: about 12 minutes in
+  # place of 27.
+  test-e2e-part:
+    name: Browser Journeys (${{ matrix.part }}/4)
     runs-on: ubuntu-latest
+    strategy:
+      # Every part runs to the end, so one failure never hides another's.
+      fail-fast: false
+      matrix:
+        part: [1, 2, 3, 4]
     steps:
       - name: Checkout Code
         uses: actions/checkout@v4
@@ -226,15 +234,26 @@ jobs:
 
       - name: Run the journeys
         working-directory: ./e2e
-        run: npx playwright test
+        run: npx playwright test --shard=${{ matrix.part }}/4 --fully-parallel
 
-      # What failed and why: screenshots, a trace of every step, and the HTML report.
+      # What failed and why: screenshots, a trace of every step, and the HTML report, one per part.
       - name: Keep the report of a failed run
         if: failure()
         uses: actions/upload-artifact@v4
         with:
-          name: e2e-report
+          name: e2e-report-${{ matrix.part }}
           path: |
             e2e/playwright-report
             e2e/test-results
           retention-days: 14
+
+  # The one check named Browser Journeys, as before the split: it passes only when every part did,
+  # so a branch rule asking for that name keeps working.
+  test-e2e:
+    name: Browser Journeys
+    runs-on: ubuntu-latest
+    needs: test-e2e-part
+    if: always()
+    steps:
+      - name: Every part passed
+        run: test "${{ needs.test-e2e-part.result }}" = "success"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index caf02433..23c40e50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -693,6 +693,12 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Under the hood
 
+- **The browser journeys run in four parts at once on CI.** Each pull request's journeys were run
+  one after another on one machine, about 27 minutes. They now run on four machines at once, each with
+  its own servers and database and a share of the tests, about 12 minutes. The check is still called
+  Browser Journeys and passes only when all four parts do; a failed part uploads its own report
+  (e2e-report-1 to 4). Nothing changes when they are run on a developer's machine. The builder's
+  journey now finds PUBLISH's message by its words, as the formula box added a second status line.
 - **Browser tests.** The first tests in a real browser (e2e/, Playwright): the real app started on a throwaway
   database, the GM signing in, building a system through the builder's screens, publishing it twice and switching
   the game to it; and a custom game played in two browsers at once, a player making a character in its words
diff --git a/e2e/README.md b/e2e/README.md
index 2f3ffd1c..2c38e699 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -85,14 +85,17 @@ npx playwright test --debug
   npx playwright show-trace test-results/<the test's folder>/trace.zip
   ```
 
-- In CI the same files, and an HTML report, are attached to the run as an artifact
-  (**e2e-report**), downloadable from the run's summary page on GitHub.
+- In CI the same files, and an HTML report, are attached to the run as an artifact, one per part
+  (**e2e-report-1** to **e2e-report-4**), downloadable from the run's summary page on GitHub.
 
 ## In CI
 
-`.github/workflows/ci.yml` runs these on every pull request, in the **Browser Journeys** job, with
-Playwright's own Chromium (`CI` is set there). They are part of the same check as the backend and
-frontend suites.
+`.github/workflows/ci.yml` runs these on every pull request with Playwright's own Chromium (`CI`
+is set there), split across four machines at once: **Browser Journeys (1/4)** to **(4/4)**, each with
+its own servers and database, the tests shared out one by one (`--shard=N/4 --fully-parallel`), each
+part still one test at a time. About 12 minutes in place of 27. A last job named **Browser Journeys**
+passes only when all four did, so the check keeps its name. On a developer's machine nothing changes:
+one machine, files in order.
 
 ## Writing a journey
 
@@ -107,6 +110,11 @@ frontend suites.
   player journey does, so each has their own sign-in.
 - The tests share one database and run in order, one at a time, files alphabetically. A journey that needs a
   fresh state (the tour unseen) sets it up through the API first, rather than counting on running first.
+- Every test stands alone. In CI each part gets its own fresh database and only some of the tests,
+  split one by one, so a test may run without the tests before it in its file: never lean on what
+  an earlier test made, and keep `beforeAll` to what the test itself sets up.
+- Look a status up within its panel, never on the whole page: the formula box's words line is a
+  `role="status"` under every formula, so `page.getByRole('status')` finds more than one.
 - In CI a failed journey is tried once more, on the same database, so a journey that makes something
   named gives the retry a name of its own (`Hearthfall 2`).
 - The builder's rail widens over the page while the pointer is on it. Click it with `clickRail` (or
@@ -121,8 +129,8 @@ frontend suites.
   to narrow, and on CI the clicks sweep once measured the page under the rail still closing; so
   `clickRail` also waits for `getAnimations()` on the rail to be empty. Do the same for anything
   that slides or fades over the page before checking what's under it.
-- When a journey fails only on CI, the run's **e2e-report** download (bottom of the run's Summary
-  page) holds each failure's `trace.zip`; its screencast frames show the page at the failing step.
+- When a journey fails only on CI, the failing part's **e2e-report-N** download (bottom of the run's
+  Summary page) holds each failure's `trace.zip`; its screencast frames show the page at the failing step.
 - Put shared steps (signing in, opening the builder) in `tests/helpers.ts`.
 
 ## Files
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
index 7782bac7..6aa055b2 100644
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -8,7 +8,8 @@ import path from 'path';
 // system's temp folder and a GM account that exists only there. Secure Mode is on, as at a real
 // table: everyone signs in.
 //
-// CI runs it on every pull request (.github/workflows/ci.yml), with Playwright's own Chromium. On a
+// CI runs it on every pull request (.github/workflows/ci.yml), with Playwright's own Chromium, in four
+// parts on four machines (--shard=N/4 --fully-parallel), each still one test at a time. On a
 // developer's machine it runs only when asked (cd e2e && npm test), with the Chrome already
 // installed there, so nothing large is downloaded.
 
diff --git a/e2e/tests/builder-journey.spec.ts b/e2e/tests/builder-journey.spec.ts
index a7e4320e..d8432b38 100644
--- a/e2e/tests/builder-journey.spec.ts
+++ b/e2e/tests/builder-journey.spec.ts
@@ -83,7 +83,7 @@ test('the GM builds a system, publishes it twice, switches the game to it, and a
 
   // PUBLISH: the first version goes straight through.
   await clickRail(page, 'PUBLISH');
-  await expect(page.getByRole('status')).toContainText('Published v1.');
+  await expect(page.getByRole('status').filter({ hasText: 'Published v1.' })).toBeVisible();
   await expect(page.getByTestId('builder-system')).toContainText('PUBLISHED v1');
 
   // A change, then PUBLISH again: the version preview first, then v2.