[IAmJSD]

The ladder "Planned purchases" block sat flush under the "Add Account Config" button inside the laddering card, with large body-text labels glued to their controls and four plain paragraphs stacked with no hierarchy. Its From/To filters were datetime-local pickers that display in the browser locale (e.g. "10/24/2026, 09:15:00 AM") under a "(UTC)" label. This PR renders the block as its own settings card with labelled form groups, a stat line and muted footnotes, and replaces the date pickers with ISO UTC text inputs.

Closes #753

What changed

• frontend/src/ladder-timeline.ts:
  • The block is its own fieldset.settings-category card with the legend "Planned purchases". The intro text is .settings-help.
  • Each control is a .form-group whose <label for> sits above it; Reload timeline is .btn-secondary; Clear filters is .btn-tertiary (link style).
  • The totals line is .ladder-timeline-stat (bold). The run snapshot, the date hint and the "Service, instance type ... unavailable" caveat are muted .ladder-timeline-note footnotes, and the caveat moved below the table.
  • From/To are text inputs with placeholder YYYY-MM-DD HH:MM and the hint "Enter dates in UTC as YYYY-MM-DD HH:MM (24-hour); the time is optional." Valid input is shown back in ISO form. Invalid input sets aria-invalid, shows a role="alert" .field-error, and keeps the last valid filter; Clear filters clears the error.
• frontend/src/ladder-timeline-filters.ts: new parseLadderUtcInput/formatLadderUtcInput. They accept YYYY-MM-DD optionally with HH:MM or HH:MM:SS, a T or space separator, and a trailing Z/UTC, and reject impossible dates by round-tripping the value. A bare "to" date covers through 23:59:59.
• frontend/src/ladder.ts: moves the #ladder-purchase-timeline div out of the laddering fieldset (3 lines) so the two cards don't nest. It stays inside #commitment-laddering-settings, so the Purchasing "Laddering" nav link and main's hidden-section guard in ladder-timeline.ts still cover it.
• frontend/src/styles/charts.css: replaces the old label grid rule with filter-row, 12px muted label, stat and note rules built on the design tokens.
• Tests: ladder-timeline-filters.test.ts, ladder-timeline.test.ts, and new tests-e2e/ladder-timeline-layout.spec.ts.

Why this approach

No browser lets a page control the datetime-local display format (Chromium ignores lang and the page locale and uses the OS locale), so showing and accepting the ISO string is the only way to make UTC unambiguous. The cost is the native picker; in exchange, typing and pasting are exact and match the "Scheduled (UTC)" column. The card and .form-group pattern copies the other Admin settings cards, as the issue suggests, instead of adding new components. The caveat moved to a footnote so the totals line sits directly above the chart it describes.

Screenshots

Screenshots were taken before this branch was merged with main; before = main at a14dc8f. After is this branch at that time. Both are headless Chromium at 1440x900 against the repo's mocked e2e API (the narrow pair is at 390px wide).

Before	After

• 1440px: on main, "Planned purchases" is glued under "Add Account Config" inside the laddering card, with big body-text labels, From (UTC) showing "10/24/2026, 09:15:00 AM", and four plain stacked paragraphs. After: its own card with a legend, small muted labels above the controls, ISO UTC date inputs with a format hint, Clear filters as a link button, and a bold totals line above the chart.
• 390px: on main, the same unstyled stack with locale date pickers. After: the card and label-above-control groups wrap cleanly with no horizontal overflow.

Verification

Run on this branch's head a06f34c5, merged with main 6122fa24:

• Lint: 0 errors. Typecheck and build pass.
• Jest: 4099 passed, 1 skipped, 0 failed. New tests: ladder-timeline-filters.test.ts covers the parse/format rules (whole-day edges; rejects 02.01.2030, 01/02/2030, 2030-02-30, 24:00 and 8:30). ladder-timeline.test.ts adds 2 tests: the card and legend render, every control has a labelled .form-group, there is no datetime-local input and the default From is ISO; valid To dates filter and normalize while an invalid one is flagged and ignored until Clear filters.
• Playwright via e2e-local.sh: 233 passed, 0 failed. New ladder-timeline-layout.spec.ts at 1280px and 390px checks that the card is separate from the laddering card, labels sit above controls at 12px, typed dates filter the summary, an invalid date shows the alert and changes nothing, Clear filters resets, and the card doesn't overflow horizontally.
• Secrets scan clean.
• Merged with main at 6122fa2; conflicts in ladder-timeline.test.ts resolved, see the merge commits.

Notes for review

• Main UX trade-off: the native date/time picker is replaced by ISO text inputs. Keeping the picker and adding an ISO readout next to it is the alternative, but the picker would still show locale/AM-PM text.
• Clear filters uses the existing .btn-tertiary link style as the "ghost" button.
• Copy: the hint text and the error 'To date "..." is not a valid UTC date. Use YYYY-MM-DD HH:MM.'
• The status line ("Timeline loaded. All amounts are planning budgets.") stays body-size because it is the live status; only the other paragraphs were demoted.
• With two invalid dates the error message can go stale: if From is still invalid after To is fixed, the alert keeps naming To.
• The single-event editor modal (ladder-timeline-editor.ts) still uses a datetime-local input for the scheduled date. It is outside this block and could get the same treatment later.

Overlaps

Measured with git merge-tree:

• fix(frontend): ladder config asks for a raw account UUID and hides auto-approve impact #742 also edits ladder.ts in other hunks (table, mode warning, save); merges cleanly.
• fix(frontend): dashboard charts have no text alternative and layers differ only by shade #744 appends .chart-table rules to styles/charts.css right after the ladder rules rewritten here; merges cleanly, but keep both sides if a conflict appears at the end of the file.
• fix(frontend): low-severity copy, toast, confirm and stale-state fixes #728 adds refreshLadderTimeline to ladder-timeline.ts; source merges cleanly, only the appended tests in ladder-timeline.test.ts conflict (keep both).
• chore(frontend): replace mixed Unicode glyphs with one SVG icon set #751 also edits ladder.ts and chore(frontend): no dark mode or theming path, literals bypass color tokens #699 edits styles/charts.css; both merge cleanly.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Caution

Review failed

The pull request is closed.

Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

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

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

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE a06f34c51aa3c7b35a53176ed0b8ad9a0540a222

Blocking:

• none
  Non-blocking:
• frontend/src/ladder-timeline.ts:179-183: with two invalid dates the error text goes stale. Scenario: type a bad From (the message names From), then a bad To (the message now names To), then fix To. Because From is still aria-invalid, the error is not cleared or rewritten, so the alert still says To date "…" is not a valid UTC date while To shows a valid normalized value and the real offender is From. Rebuild the message from whichever inputs are still invalid.
• frontend/src/ladder-timeline.ts:53: role="alert" with identical repeated text (re-entering the same bad value) may not be re-announced by some screen readers, because the textContent doesn't change. This is minor.
• The editor modal (ladder-timeline-editor.ts) still uses datetime-local for its scheduled date, so the same block now uses two date-entry formats. The body already acknowledges this.
  Attacked: Read git diff origin/main...HEAD in full. Both merges (4420923 and a06f34c) diff against their main parent to exactly the branch's 7 files. Main's fix(ladder): timeline editor 409 recovery, focus and chart cleanup #667 (fix(ladder): dispose the timeline chart when leaving its section #1357) disposeLadderTimeline, the root.closest('.hidden') guard and its "chart teardown on navigation" describe block are intact. The conflicted test file keeps both describe blocks verbatim. The moved #ladder-purchase-timeline div is still inside #commitment-laddering-settings, so feat(frontend): Admin Purchasing policies page is very long with a mid-page partial load #190's "Laddering" nav anchor and the hidden-panel guard still cover it. Checked XSS: the template only interpolates static labels, and the error uses textContent with the user's input. Every new control has a label for and an id. Checked the parser: round-trip rejects 02-30, 13-01, 24:00 and 8:30, and a bare "to" date covers through 23:59:59. Main's design tokens used in charts.css exist. Existing tests that type ISO T values still pass. f2ab673 merges cleanly. Cross-checked with merge-tree: 753 vs 742 and 753 vs 744 are clean. Ran jest (ladder-timeline*, ladder, css*) in a scratch worktree: 299/299.

[IAmJSD]

Local verification at a06f34c5 merged onto current main (49de8f86; merge-tree 04af8e9b; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree 04af8e9b, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4122 passed, 4123 total), and the full Playwright suite (238 passed).
• CI is green on a06f34c5 (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at a06f34c5.