[IAmJSD]

Stacked on #1603: merge that first; until then this diff includes it. This PR's own commits: bdf8f04.

In the Commitment Laddering per-account config modal, the ramp schedule was a raw JSON textarea: to change it you edited {"steps":[{"after_days":0,"fraction":0.5}, ...]} by hand, and a schedule the backend refuses (shares not adding to 1, days out of order) only showed up as a failed save. This PR adds a step editor: one row per step with "After (days)" and "Share (%)", Add/Remove, quick presets, a proportional bar and a live summary ("Total 100% across 3 steps · last purchase on day 60"). Problems show beside the step as you type. "Edit as JSON" still opens the textarea, and the two stay in sync.

Part of the UI modernization sweep.

What changed

• frontend/src/ladder-ramp-schedule.ts (new): the model. It decodes the JSON the way the backend's Go decoder does, validates with the backend's rules (see Notes for review), converts shares between percent and fraction, and writes the JSON back in the format the modal has always used (JSON.stringify(schedule, null, 2)). Typed percents convert by moving the decimal point, so 33.3% is stored as 0.333, not 33.3 / 100 (0.33299999999999996). Also has the three presets.
• frontend/src/ladder-ramp-editor.ts (new): the editor's DOM. The rows are a view over the textarea:
  • Editing a row rewrites the JSON. Each row keeps its exact fraction, so a share you did not touch is written back unchanged, even when the input shows it rounded (1/3 shows as 33.3333333333).
  • Valid JSON typed in the textarea redraws the rows. Invalid JSON, or JSON the backend could not decode (for example "after_days": "7"), leaves the rows alone and shows the error under the textarea.
  • Top-level keys other than steps are kept when the rows are edited.
  • A blank or non-whole value in a row cannot be written as JSON. The textarea keeps its last good value until it is fixed, and Save refuses it.
  • Add step goes 7 days after the last step and takes the share that is left. If the shares already total 100%, it splits the last step's share in two, so the total stays the same.
  • Remove is a trash icon button with an aria-label. It is disabled while only one step is left.
  • Focus: after Add it moves to the new step's days, and after Remove to the Remove button of the row that took the removed row's place.
  • Each input has a visually hidden label ("Step 2 share (%)"). Row errors set aria-invalid and are linked with aria-describedby. The summary is a polite live region, and the bar is aria-hidden.
  • The bar segments are sized through CSSOM, not style="", because the CSP has no 'unsafe-inline' for styles.
• frontend/src/ladder-config-modal.ts: the ramp field is the editor markup. The textarea keeps id="ladder-cfg-ramp-schedule", its label, hint and placeholder inside the "Edit as JSON" panel, and has a static error line, #ladder-cfg-ramp-schedule-error.
• frontend/src/ladder.ts:
  • The modal draws the editor from the JSON it already puts in the textarea (the stored schedule, or the same default {"steps":[{"after_days":0,"fraction":1}]}).
  • The save path still JSON.parses the textarea, so the request body is built exactly as before.
  • Invalid JSON keeps today's toast ("Ramp schedule is not valid JSON.") and now opens the JSON panel to show the parser message.
  • New: a schedule the backend would refuse is refused the same way. Save shows a toast ("Check the ramp schedule. Step 2: must be later than step 1 (day 0)."), the message stays beside the step, and focus moves to that input.
• frontend/src/styles/ladder-form.css: editor styles using --cudly-* tokens, with standard 2.25rem inputs and the 2.25rem icon button on the same row, a gap above Add step, the error colour on invalid inputs, and a red outline on the bar when the total is off. The ui(ladder): taller ramp-schedule field with an inline JSON error #1603 textarea sizing now targets the textarea in its new place.
• Tests: src/__tests__/ladder-ramp-schedule.test.ts (model, one case per backend rule) and src/__tests__/ladder-ramp-editor.test.ts (rows and JSON in sync both ways, live errors and their ARIA wiring, add/remove focus, presets, save payload and refusals). The new Playwright spec tests-e2e/ladder-ramp-editor.spec.ts edits steps in the real modal and asserts the PUT body. tests-e2e/ladder-account-selector.spec.ts's layout test now checks that the editor spans both columns with compact inputs, then opens "Edit as JSON" before checking the textarea and hint as before.

Why

Hand-editing JSON fractions was the only way to set up a ramp, and mistakes came back as a server error after Save. Keeping the textarea as the value the save reads means the editor cannot change what is sent, only how it is entered. The JSON view stays for anyone who prefers it or wants to paste a schedule.

Screenshots

Before = the base branch (#1603, main at 43dd618 plus its commit); after = this branch. Headless Chromium at 1440x900 (mobile: 390x844) against a mocked API. The edited config has steps of 50% on day 0, 30% on day 30 and 20% on day 60.

Before	After
Edit modal: the schedule is a JSON textarea, scrolled.	The same schedule as a bar, a summary and three step rows, with "Edit as JSON" at the top right.
The ramp field close up.	Day/share inputs, trash icon buttons, Add step and presets.
Add Account Config: the default schedule as JSON.	The default single step (100% on day 0). Remove is disabled because a schedule needs a step.
	After Add step and two edits: the total is 90% (red summary, outlined bar with the missing 10% as empty track), and step 4 repeats day 60 (red input, message under the row).
	Save with that schedule is refused and focus goes to step 4's days. No request is sent.
	"Edit as JSON" open with half-typed JSON: the parser error is under the textarea and the rows keep the last valid schedule.
	390px wide: the rows keep their columns, and the presets wrap onto lines under Add step.

Verification

Run on this branch's head bdf8f043 (own commit bdf8f043 on top of #1603 at cb79608d), from frontend/:

• npm run typecheck: passes. npm run lint: 0 errors (141 warnings, all pre-existing; none in the touched files). npm run build: passes.
• Jest (npx jest --silent --maxWorkers=3): 177 suites, 4650 passed, 1 skipped (4651). New: ladder-ramp-schedule.test.ts (30 tests) and ladder-ramp-editor.test.ts (23 tests).
• Playwright (e2e-local.sh, whole suite): 278 passed, including the new ladder-ramp-editor.spec.ts (2 tests), the updated layout test in ladder-account-selector.spec.ts, and ladder-config.spec.ts, which checks that an untouched schedule round-trips into the PUT body.
• Merges cleanly (git merge-tree) with ui(dialogs): one dialog chrome with a header close button #1598 and ui(settings): laddering and planned purchases section spacing #1607.

Notes for review

The editor checks exactly what the backend checks, so it never blocks a schedule the server would accept. Backend references are to this repo at the base commit and to cloud-commitments-go/pkg at the pinned v0.0.0-20261026123645-88b95b64b043:

• internal/config/validation.go:911-922 validateLadderRampSchedule: empty input is refused, then json.Unmarshal into pkg/ladder.RampSchedule (a decode failure is "ramp_schedule is not valid JSON"), then rs.Validate(). internal/config/store_postgres_ladder.go:514-523 marshalRampSchedule only adds a json.Valid check on write.
• Decoding (pkg/ladder/types.go:291-310, Go encoding/json): keys match case-insensitively, with the last matching key winning. Missing or null values become zero values (null or no steps is an empty list, a null step is {0, 0}, a missing after_days is 0). after_days must decode into an int and fraction must be a number. Unknown keys are ignored. ladder-ramp-schedule.ts decodeRampSchedule does the same.
• RampSchedule.Validate (pkg/ladder/types.go:317-347):
  • at least one step (:318);
  • after_days strictly greater than the previous step's, starting from prev := -1 (:322-324). So the first step can be any day from 0 up, and duplicates are refused;
  • each fraction in (0, 1], NaN refused (:333);
  • fractions summed in order in float64 within rampSumEpsilon = 1e-9 of 1.0 (:280, :344). JavaScript numbers are float64 and the editor sums in the same order, so both sides reach the same verdict on borderline sums.
• Two edges are stricter or looser than the server, documented in the code:
  • after_days above 2^53 is refused here (Go's int is 64-bit), so that JavaScript never rounds it silently.
  • A literal like 7.0 or 7e0 for after_days passes here, because JSON.parse cannot tell it from 7, but Go refuses to decode it into an int. The row editor never writes those forms; only hand-typed JSON could reach the server's error.
• The save sends the parsed textarea, as before. Opening and saving a stored config untouched sends the stored schedule back byte for byte (jest "an untouched stored schedule is sent back unchanged").
• Design calls for you: Add step splits the last step's share when the total is already 100%, rather than adding a 0% step that would show as an error at once. The presets are "All at once", "2 monthly steps" (0/30 days) and "4 weekly steps" (0/7/14/21). The JSON view starts closed, except when a stored value cannot be shown as rows; then it opens with the error.

Overlaps

• ui(dialogs): one dialog chrome with a header close button #1598 also touches the ladder modal: it moves the header, body and footer chrome out of ladder-form.css into the shared dialog styles. This PR's CSS sits in a different part of the file and merges cleanly with that branch (checked with git merge-tree).
• ui(settings): laddering and planned purchases section spacing #1607 also edits frontend/src/ladder.ts (the "Per-Account Configurations" heading) and appends to ladder-form.css. It merges cleanly with this branch.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD asked for this PR; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 46 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 43dd618
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 6514b9bf-a444-40a9-b5bb-1e7fab8caefd

Commits

Reviewing files that changed from the base of the PR and between 43dd618 and bdf8f04.

Files selected for processing: 9

• frontend/src/__tests__/ladder-ramp-editor.test.ts
• frontend/src/__tests__/ladder-ramp-schedule.test.ts
• frontend/src/ladder-config-modal.ts
• frontend/src/ladder-ramp-editor.ts
• frontend/src/ladder-ramp-schedule.ts
• frontend/src/ladder.ts
• frontend/src/styles/ladder-form.css
• frontend/tests-e2e/ladder-account-selector.spec.ts
• frontend/tests-e2e/ladder-ramp-editor.spec.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[IAmJSD]

Replaced by #1624: the same branch and commits, reopened from LeanerCloud/cloud-commitments-platform so it can be part of a native GitHub stack (cross-fork stacks aren't supported). Please review there.