CLUE-669: WaveRunner date set-up styling

[lbondaryk]

Closes CLUE-669.

Styles the WaveRunner tile's Data Setup panel to Michael's design, and makes an end date before the start date unselectable.

Why the controls had to be replaced

Neither native control can meet the design. <input type="datetime-local"> draws its calendar as browser chrome, and a <select>'s option list is OS chrome — in both cases CSS cannot reach the part the design specifies. So "style the dropdowns and the date pickers" necessarily meant replacing both with markup we own. That is the bulk of the work; the CSS is the easy half.

• Dropdowns → CLUE's existing CustomSelect, already used by the app header, the student/problem/class menus and sort-work. No new dependency, and they inherit the house keyboard behavior.
• Date fields → React Aria's DatePicker. Nothing in the repo or in Concord's own packages does this; both were checked. One new dependency, Apache-2.0.

CustomSelect changes affect every caller

CustomSelect itself changes, so the app header, the student/problem/class menus and sort-work are affected too, not just WaveRunner:

• aria-selected marks the chosen option, not whichever option has the keyboard cursor. Screen readers no longer announce every option the user arrows past as "selected".
• Opening the list focuses the chosen option rather than always the first one.
• Escape in an open list no longer propagates, so it closes the list without also dismissing a surrounding popover (the date picker's month list).
• A new optional ariaLabelledBy prop builds the accessible name from a visible label plus the chosen value.

The root cause of the first two is in useDropdown in accessibility-tools; CustomSelect now overrides it.

Bundle cost: +71.5 KB gzipped, measured before and after on a chunk that is lazily loaded, so only students who open a WaveRunner tile pay it. The first measurement read 0 KB because nothing imported the library yet — that number was an artifact and was redone properly.

Stored values are unchanged

The model still stores "YYYY-MM-DD" strings. @internationalized/date's CalendarDate carries no timezone, so parsing and formatting round-trip exactly and no UTC/local question arises. Nothing downstream of TimeRange changes.

Deliberate behavior changes

Called out here rather than discovered in review:

1. Default range is now 2026-09-01 to 2026-10-01.
2. run accepts a single-day range, matching loadData. The two disagreed — loadData allowed start == end and run did not — which was harmless only while no UI could produce it. The calendar now can.
3. Neither field reaches past today, taken in UTC to match the model's dates and the seismic archive.
4. The tile asks for a height it knows rather than measuring: the panel's rhythm is pinned in _tile-metrics.scss and totals 164px, so the tile requests that side by side and twice it when the panels stack. It cannot feed back, because the layout choice depends on the tile's width.
5. One status line carries whatever the tile has to say. Reserving a row per message left an empty one sitting between the graph and the text that was showing.
6. A typed date commits on blur or Enter, not on each keystroke, and only if it is complete and within the field's bounds. Otherwise the field reverts to the stored date.
7. The end date is inclusive in the shared seismogram too. The range ends at the close of the end day, so the waveform viewport and Timeline It! cover the whole last day, and a single-day range has a full day's span.
8. The date fields' bounds stay consistent with old documents. The end field's minimum is capped at today, so a start date in the future, which master's datetime-local allowed, cannot give the calendar contradictory bounds.

Out of scope

The time is displayed as a fixed 12:00 AM and is not settable — deferred deliberately. Two things surfaced during review that need their own stories:

• Typing a date is spinbutton-style, not free text. React Aria's date field is a row of spinbuttons by design: / is not a separator, two-digit years do not expand, and digits spill to the next segment. None of it is configurable. Making it type naturally means a plain text field we parse ourselves, keeping React Aria for the calendar.
• Event Categories is hardcoded to -. There is no category concept in the WaveRunner model or the shared seismic types; the UI is a placeholder for work not yet done.

Testing

127 tests across the plugin and CustomSelect, mutation-checked at each risky point: the Clear/Cancel/OK buffering, the minValue/maxValue bounds, and the typed-date handling each fail when the mechanism under test is removed.

Two tests were caught asserting nothing and rewritten. One checked a picker bound using an adjacent-month day — React Aria disables those regardless of any bound, so it passed whether or not the bound was wired. Both bounds are now asserted on in-month days.

Worth a reviewer's attention: jest does not compile SCSS, so a green suite says nothing about whether the stylesheets build. A broken stylesheet slipped through on this branch once. Every stylesheet is now compiled with sass directly as part of verification.

Full suite passing, tsc clean, lint 0 errors, all stylesheets compile, no hex colors — every value comes from vars.scss.

🤖 Generated with Claude Code

[lbondaryk]

Thanks — all six addressed. Three were bugs this branch introduced, and one was a test I knew was hollow when it was written.

Dropdown labels (1 & 2). Right, and worse than it reads: title is only supplied while nothing is selected, so the moment a student picks a station the control announced the station name and never the field. Fixed by adding an optional ariaLabel to CustomSelect — deliberately touching the shared component, since the prop is additive and defaults to undefined, so label: ariaLabel || title || titlePrefix and aria-label={undefined} leave the other six call sites byte-identical. npx jest src/clue confirms. The new tests assert each control is findable by its purpose after a selection, while its visible text is the chosen value.

Clear bypassing the bounds (3). Confirmed, including your exact scenario. clear() now clamps the default into [minValue, maxValue], with a test reproducing end=Oct 6 / start moved to Oct 5 / default Oct 1 — it commits Oct 5, and a symmetric test covers the max side.

Stale error masking the status line (4). This one is ours, and it only became reachable in this branch: the panel used to have separate rows per message, and consolidating them to a single line with errors at the top of the priority chain is what let a dead loadDataError sit over a successful run. Each operation now clears the other's error as it starts.

Read-only height requests (5). Correct — onRequestRowHeight mutates the shared row model, so a four-up or published pane could overwrite what the editable pane set. Now skipped when read-only, with a test.

The single-day test (6). You're right that it proved nothing, and that was known when it was written rather than discovered now — the comparison lives only inside run, which the test never called. Replaced with one that gets past all three guards, calls runModel with start === end, and asserts the day was actually processed rather than merely that no error appeared.

Mutation-checked independently: reverting endMs < startMs to <= fails that test — and also fails the new cross-operation error test, which depends on a single-day range being accepted. Two angles of real coverage where there were none.

Full suite 5351 passing, tsc clean, lint 0 errors.

[kswenson]

PR Review Summary

Changes: 25 files, +3442 / -131 lines (of which ~1,674 are the committed plan/spec docs and ~257 package-lock)

What it does

Restyles the WaveRunner tile's Data Setup panel to the design. Because neither a native <select>'s option list nor a datetime-local calendar can be styled, the Station/Model dropdowns move to CLUE's CustomSelect and the date fields move to a new DateField built on React Aria's DatePicker (new deps react-aria-components and @internationalized/date, lazily loaded with the WaveRunner chunk). It also bounds the dates (end ≥ start, nothing past today UTC), accepts a single-day run, consolidates the status area into one line, has runModel/loadEnvelopeData clear each other's errors, and has the tile request a fixed row height.

The approach

DateField converts at its boundary between the model's "YYYY-MM-DD" strings and CalendarDate, so the model's storage is unchanged. It keeps three pieces of local state: pending (a calendar pick staged behind Clear/Cancel/OK), draft (what the segments show while typing), and focused (the calendar's month). A change with the popover closed is treated as typing and committed straight to the model. CustomSelect gains an optional ariaLabel prop. The tile requests 164 + 78 px side by side and 2×164 + 78 stacked, skipping the request when read-only.

Assessment

The calendar path is well built and thoroughly tested. The Clear/Cancel/OK buffering, the bounds in the calendar, and the lazy-load and bundle reasoning all hold up. The 105 plugin tests pass, tsc is clean, the SCSS compiles, and lint is clean. No other CustomSelect consumer is affected.

The typed path is broken, though. I confirmed this with a throwaway jest probe using a controlled wrapper, so onChange fed back into value as the model does. The existing tests pass a fixed value and never re-render from onChange, so they cannot see it. A student who types a year loses the month and day, and the model briefly holds a malformed date. A typed date also bypasses the min/max bounds the PR says make out-of-order dates unselectable. These need fixing before merge.

There is also a real accessibility regression on Station/Model. The aria-label hides the chosen value from screen readers, which a native <select> did not do.

Issues

Requested change for issues 1–3: buffer typed edits in draft, commit them on blur or Enter after checking them against min/max, and revert to the model value if the typed date is invalid or incomplete. Please also add a test that round-trips onChange back into value, as the model does.

1. [major, requested change] Typing a year commits the first digit as a malformed date and blanks the month and day. date-field.tsx:107-114, date-utils.ts:18-22.

   • Confirmed by a jest probe and in the branch build: start with value 2026-09-15, click the year segment and type 2024. The first keystroke sends onChange("2-09-15"), the model stores it, and the segments render mm|dd|2024. The student then has to retype the month and day.
   • Cause: React Aria fires onChange on each keystroke once the date is complete. handlePickerChange commits it immediately, and toDateString doesn't pad the year.
   • fromDateString("2-09-15") fails, so the [value] effect nulls draft, which blanks the other segments.
   • Until the student retypes them, the model holds "2-09-15". The intermediate commit also calls setStartDate/setEndDate, which runs loadData() and clearEventsDataSet().
   • Suggested fix: commit typed dates on blur (or Enter) rather than per keystroke, validate against min/max, and pad the year.

2. [major, requested change] Typed dates bypass minValue/maxValue, silently. date-field.tsx:107-114.

   • Confirmed by probe and in the branch build. With min 2026-09-10 and max 2026-10-08, typing 12 into the month commits 2026-01-15 (below min) and then 2026-12-15 (past today).
   • React Aria's bounds are validation only and do not block onChange. The model setters don't validate either.
   • So "an end date before the start date is unselectable" and "neither field reaches past today" hold only for the calendar.
   • The invalid state shows no feedback: no field styling and no status message. Date changes go through loadData(), which sets no error. "Invalid date range…" appears only once the student presses Load Data or Run.
   • The invalid date also inverts the other field's bounds, so start's max ends up below its value and end's min above its own.

3. [major, requested change] Clearing a segment leaves the field and model disagreeing. date-field.tsx:107-114, :87-91.

   • Confirmed by probe: backspacing the day twice and tabbing away leaves the field showing 09|dd|2026 while the model holds 2026-09-01. The first backspace committed day 1.
   • Confirmed in the branch build: opening the calendar then snaps the field back to the model's date, because handleOpenChange reseeds from value.
   • onChange(null) sets draft to null without committing, and nothing restores draft from value on blur. Run then uses a date the student can't see.

4. [major, requested change] Station/Model announce only "Station, button" / "Model, button" and never the chosen value. custom-select.tsx:109, data-setup.tsx:121,132.

   • On a role="button", aria-label replaces the text content as the accessible name, and triggerProps doesn't override it. The test at data-setup.test.tsx:~136 asserts exactly this name.
   • This regresses from the native <select>, which exposed its value. It fails WCAG 4.1.2 and 2.5.3 (label in name).
   • The new prop's doc comment (custom-select.tsx:33-35) has it backwards: ariaLabel is what stops the value from being announced.
   • This is the other half of Copilot's comments 1 & 2. The ariaLabel fix made the field's purpose announced, but in doing so it replaced the value. The new tests assert that the name is exactly "Station", so they pin the regression rather than catch it.
   • Suggested fix: aria-labelledby pointing at the visible <label> (give it an id) plus the header text. That also fixes the orphaned labels (issue 9).

5. [major, not blocking: follow-up to fix useDropdown in accessibility-tools] Keyboard: Enter, Enter on the month dropdown jumps the calendar back a year. date-field.tsx:176-181, shared useDropdown.

   • Confirmed by a verifier's probe. Opening the list focuses item 0, which is 12 months back, because useDropdown sets aria-selected from activeIndex rather than the chosen item, and its open effect falls back to focusItem(0).
   • So Enter then Enter selects September 2025.
   • Station/Model share the same hook behavior: focus always opens on the first item, and arrowing announces each option as "selected".
   • The root cause is in the shared hook, but this PR introduces the month dropdown where it bites hardest.

6. [minor, not blocking: same follow-up as 5] Escape in the open month list closes the whole date picker and drops the pending pick.

   • Confirmed by probe. useDropdown's list keydown calls preventDefault but not stopPropagation, so Escape reaches React Aria's Popover dismiss handler.

7. [minor, requested change] A wide WaveRunner sharing a row can leave the row stuck at the stacked height. wave-runner-tile.tsx:15-16,24-27.

   • On first render useResizeDetector's width is undefined, so vertical is true and the tile requests 406. Once the width is measured it requests 242.
   • tile-row.tsx:157 refuses to shrink a multi-tile row, so it stays at 406, with about 164px of extra space and no clipping.
   • Separately, the first editable open of an existing document rewrites its stored row height (320 → 242/406) without undo, which dirties the document once.
   • Suggested fix: skip the request until containerWidth is known.

8. [minor, requested change] runModel's early returns don't clear a stale loadDataError. wave-runner-content.ts:205-220.

   • The cross-clear runs only after the "No model selected", metadata and "No station selected" guards.
   • A failed load followed by Run with no station keeps showing the old load error, because the status line shows loadDataError || runError. The comment at :225-227 promises more than the code does. This is what remains of Copilot's comment 4: the fix covers a run that gets started, but not one that bails out early.

9. [minor, requested change (covered by 4)] Visible Station/Model <label>s are orphaned. data-setup.tsx:114,127. They have no htmlFor/id link, whereas master's <select> had htmlFor="wave-runner-station". Clicking the label does nothing, and the label isn't what names the control. The fix for issue 4 covers this.

10. [minor, author's discretion] Contrast.

    • Placeholder date segments use $charcoal-light-1 on white: 3.03:1, against the 4.5:1 needed for text.
    • The date-field border is the same color against the teal-light-7 panel: 2.68:1, against the 3:1 needed for a non-text boundary (WCAG 1.4.11).
    • Something like #767676 passes both.

11. [minor, author's discretion] Gaps in the test suite (the "mutation-checked" claim doesn't extend to these).

    • The typed path never round-trips onChange → value (that is how issues 1-3 escaped).
    • The status-line priority chain (error > loading > running > complete > configured > setup) is untested, apart from the setup message and the configured class.
    • date-field.test.tsx:91-95 asserts the absence of date-field-time-column, a test id that exists nowhere, so the test can never fail.
    • date-field.test.tsx:236-246 claims "pending selection intact" but never picks a day.

12. [minor, not blocking: follow-up story] Single-day ranges give the seismogram viewport and "Timeline It!" a zero-length range. wave-runner-content.ts:82-83.

    • endTimeISO is the start of the end day.
    • This was already reachable through loadData on master. The PR makes single-day ranges an intended feature, so it is worth fixing here or in a follow-up: end-of-day, or + SECONDS_PER_DAY.

13. [nit, author's discretion] Committed plan and spec docs.

    • docs/superpowers/plans/…-clue-669-…md is 1,466 lines and docs/superpowers/specs/… is 208, and both carry Jira keys.
    • There is precedent on master (CLUE-260, among others), so this is a preference rather than a rule.
    • The plan in particular is a task checklist that is stale the moment it ships. I'd drop the plan and keep the spec only if it says something the PR description doesn't.

14. [nit, author's discretion] Smaller items.

    • monthOptions clips only at maxValue, so the end field offers months before the start date, which the calendar then refuses.
    • clear()'s clamp lands below min when min > max (only reachable after issue 2).
    • The new CalendarDate(2026, 9, 1) fallback duplicates kDefaultStartDate.
    • z-index: 11 on .date-field-popover is dead, because React Aria sets z-index: 100000 inline.
    • The 78 chrome constant isn't derived from anything. Its comment says the title adds height, but .title-area is absolutely positioned.
    • The default status line reads "Estimated time to complete run:" with nothing after it.
    • The status line isn't a live region (pre-existing), and errors aren't visually distinct from status text.
    • Disabled CustomSelect has no aria-disabled (pre-existing in the shared component, newly exposed on Station/Model).

Comments and docs (author's discretion)

All items were found by the comment-lens agent; I personally verified the two marked ✔︎. I left out pure wording nits.

Spelling and usage. The repo uses US spellings: gray 29 : grey 3, centered 25 : centred 0.

• "greyed" at _dropdown-appearance.scss:45, "Centred" at status-and-output.scss:14, and "grey" at status-and-output.tsx:15 and in the test titles at status-and-output.test.tsx:33,37.
• "ellipsises" at data-setup.scss:19.
• "tick" for the checkmark at data-setup.scss:39 and data-setup.test.tsx:115.
• "house dropdown/component" is used as a second name for CustomSelect at _dropdown-appearance.scss:15,28,30,44.

Inaccurate or stale

• ✔︎ wave-runner-content.ts:225 and :241 say "loadData" where they mean loadEnvelopeData. loadData() never touches loadDataError.
• custom-select.tsx:33-35: in CustomSelect, title always overrides the selected text. This comment describes WaveRunner's convention, not the component's, and it inverts the a11y effect (see issue 4).
• data-setup.test.tsx:154-156 says the date picker's month select "is a native select". It is a CustomSelect.
• date-field.test.tsx:209-211: the change-event comment dates from the native month select, and it sits on the wrong test.
• _tile-metrics.scss:14 says "the section carries no vertical padding of its own". It has an 8px top padding (wave-runner-tile.scss:58).
• wave-runner-types.ts:3-5: the 78px chrome doesn't add up as described, because the title is absolutely positioned.

Backward-looking. The ones that narrate the code's history:

• data-setup.test.tsx:64: "no longer renders native datetime inputs"
• wave-runner-content.test.ts:355,375: "vs. the old <="
• date-field.scss:144: "no longer unstylable"
• date-field.tsx:84-86: "Handing the picker only the committed date meant…"
• status-and-output.tsx:19-20: "Reserving a row … left an empty one"
• wave-runner-tile.scss:27-28,47-50
• date-utils.ts:5-6
• date-field.test.tsx:138: "Reproduces the reported bug exactly"

Repeated explanations. Collapse each to its canonical site and point to it from the others:

• Title masks the selection: canonical data-setup.tsx:82. Repeated in date-field.test.tsx:201, data-setup.test.tsx:129-132 and custom-select.tsx:33.
• Cross-clearing of errors: canonical wave-runner-content.ts:225. Repeated in wave-runner-content.test.ts:562.
• One status line: canonical status-and-output.tsx:19. Repeated in status-and-output.scss:37 and _tile-metrics.scss:9.
• Known-not-measured height: canonical wave-runner-types.ts. Repeated in _tile-metrics.scss:1-3 and wave-runner-tile.test.tsx:125.
• Clear clamps to bounds: canonical date-field.tsx:123. Repeated in date-field.test.tsx:138.

Adjacent and pre-existing. These test titles sit next to the changed tests and are cheap to fix:

• ✔︎ wave-runner-tile.test.tsx "…less than 450" / "…450 or greater". The threshold is 700.
• wave-runner-content.test.ts "…covering the mock data range".

[lbondaryk]

Thank you — this was the review this branch needed. All four requested changes are in, plus the discretionary items. Eight commits, 70dac5dee..c3908e032.

You were right that the typed path was broken, and right about why it escaped: the tests pass a fixed value and never re-render from onChange, so the component never sees what it committed. There is now a controlled-wrapper helper that feeds onChange back into value as the model does, and the new typed-path tests use it.

1–3, typed dates. The root cause was in toDateString: it padded month and day but not the year, so the first keystroke of 2024 built "2-09-15". Typed edits now stay in draft and commit once, on blur or Enter, validated against min/max, reverting to the model's value when invalid or incomplete. Mutation-checked both ways: removing the year padding fails a unit test, and restoring the per-keystroke commit fails four of the new tests.

Two things we found while implementing that your probes wouldn't have surfaced, and that shaped the fix:

• React Aria never reports a cleared segment. onChange fires only when an edit is complete and valid; backspacing updates its display silently. So draft alone cannot distinguish "complete" from "showing placeholders" — the commit checks for [data-placeholder] in the field, which is how React Aria marks that state. Without it, your case 3 would have committed a stale draft rather than reverting.
• React Aria's own segment auto-advance fires a real blur on the filled segment. A naive blur-to-commit would have committed mid-typing — the very bug being fixed. The commit defers and confirms focus has actually left the field.

4 and 9, the a11y regression. Correct, and worse than a miss: the test I added asserted the name was exactly "Station", so it pinned the regression. ariaLabel is replaced by ariaLabelledBy, which names the visible <label> and the header, so the accessible name now carries both purpose and value. Both tests assert both parts, so either regressing independently fails. That also reconnects the orphaned labels. No other CustomSelect caller used the old prop.

7. The request now waits until containerWidth is known. 8. The cross-clear moved ahead of the three guards, so bailing out early still clears a stale load error, and the two comments saying "loadData" where they meant loadEnvelopeData are corrected.

10, contrast. $charcoal rather than a new token — 4.95:1 on white and 4.37:1 against the panel, so both the text and the boundary thresholds pass.

11, the hollow tests. All three repaired. date-field-time-column appears nowhere in the codebase, as you say; it now asserts the popover contains no role="spinbutton", which is a real consequence of granularity="day". The "pending selection intact" test now picks a day first and asserts OK still commits it after a month change. The status-line priority chain has seven new tests, two of them aimed squarely at the bug that chain introduced.

12, 13, 14 and the comment pass. The small fixes are in — monthOptions clips at minValue too, clear()'s clamp is ordered so a contradictory pair resolves to min, the fallback derives from kDefaultStartDate, the dead z-index is gone, and the default status line now reads "Ready to run the model." The comment pass is applied in full: US spellings, the stale and inaccurate comments, the backward-looking ones rewritten to state the present constraint, and the five repeated explanations collapsed to one site each.

One finding of our own while testing clear(): React Aria's Calendar hangs in an infinite render loop if the popover is opened with minValue > maxValue. Pre-existing in the library, not something this branch introduced, and not reachable now that typed dates are bounded — but it means the contradictory-bounds case is unit-tested against the clamp helper directly rather than through the rendered field.

Left for a decision rather than actioned:

• 12 — the zero-length range for the seismogram viewport and Timeline It!. Reachable on master already, but this branch makes single-day ranges intentional. Happy to fix here or file it.
• 13 — the committed plan and spec docs. My inclination matches yours: drop the 1,466-line plan, keep the spec.
• 5 and 6 — the useDropdown bugs in accessibility-tools. Real, shared, and newly exposed here. Worth their own story.

119 plugin tests, 5369 across the repo, tsc and lint clean, every stylesheet compiled directly with sass — jest does not compile SCSS, and a broken stylesheet slipped through on this branch once.

[lbondaryk]

Items 5, 6, 12 and 13 are now done too, so nothing from the review is outstanding.

5 and 6 — fixed here, in CLUE, with no dependency patch. I'd assumed these had to wait on accessibility-tools, but custom-select.tsx spreads getItemProps last, so anything set after the spread wins. Setting aria-selected on the genuinely chosen item fixes both halves at once: screen readers stop announcing every arrowed option as "selected", and the hook's open effect — which reads the attribute from the live DOM inside a requestAnimationFrame — finally finds a real [aria-selected="true"] to focus instead of falling back to item 0. Escape is handled by wrapping the list's onKeyDown: the hook's handler runs first, then stopPropagation() for Escape only.

That means all seven CustomSelect call sites get the fix, not just the month list — the app header, the student, problem and class menus, and sort-work have all been mis-announcing their options. It also avoids a patch going stale against a 0.1.0-pre package.

custom-select.tsx had no test file despite those seven consumers; there is one now, with three tests. Each was mutation-checked individually — removing the aria-selected override fails two of them, removing only the stopPropagation() fails the third and leaves the other two green, so they are independent rather than one assertion wearing three hats. I re-ran that check myself rather than take it on report.

12 — fixed. endDateISO now returns the end of the end day, matching what run and loadEnvelopeData already assume by adding SECONDS_PER_DAY. A single-day range went from a 0ms span to exactly 86,400,000ms; a test covers both that and a multi-day range, to show the latter was already right and stays right.

13 — the 1,466-line plan is deleted, the spec kept. Nothing referenced the plan; the only link pointed the other way.

Full suite 5374 passing with no regressions at any of the other CustomSelect consumers, tsc and lint clean.

One note on 5 for whenever accessibility-tools is revisited: the root cause is still there, and the hook's aria-selected meaning the keyboard cursor rather than the chosen option is arguably the wrong semantics for any consumer. CLUE now overrides it, but a consumer that does not would hit the same thing.

[Copilot]

🟡 Changes recommended

Legacy date bounds, shared single-day ranges, status styling, and dropdown state contain unresolved functional issues.

6 open findings

• Prevent contradictory date picker bounds · New
• Respect explicit unselected state in CustomSelect · New
• Handle persisted model URLs missing from current config · New
• Disable Model control while data is loading · New
• Remove padding from fixed-height waveform error row · New
• Store inclusive end date in SharedSeismogram · New

6 resolved since last review

• Read-only rendering mutates shared row height
• Stale operation errors mask current status
• Clear can reset date outside picker bounds
• Model dropdown lacks a programmatic accessible label
• Station dropdown lacks a stable accessible label
• Test does not cover equal-date run validation

🧠 Review effort: Balanced

[kswenson]

Approving. Thanks for the thorough follow-up. I checked every item from my earlier review against the code, and all of them are addressed. Fixing the useDropdown problems in CustomSelect was the better call: it fixes every place CustomSelect is used, not just WaveRunner.

I've pushed a few changes to the branch so this can merge without another round. They're described below, along with some smaller items for you to decide on.

Changes I made on the branch

941eb3606: the shared seismogram now gets the inclusive end day. This finishes item 12. endDateISO covered the whole end day, but loadData still stored the start of the end day in SharedSeismogram. Timeline It! copies that range, and TimelineContentModel.setViewRange refuses a view whose start isn't before its end. So a single-day range produced a blank timeline, and a multi-day range lost its last day. loadData now uses endDateISO, and there is a test for the single-day span. (Copilot flagged this.)

5268ed166: two fixes in data-setup.tsx.

• The end picker's bounds and saved future dates. Master's datetime-local had no maximum, so a saved or authored document can already have a start date after today. That start date became the end field's minValue, above its maxValue of today. Opening the end calendar then threw React's "Too many re-renders", which is the contradictory-bounds problem you ran into in the library. The minimum is now capped at today. The new test failed before the fix. (Copilot flagged this.)
• Model is disabled while data loads, as Station already was and as the spec (line 191) calls for. (Copilot flagged this.)

423f0f6c8: merged master and resolved the conflict with the Run/Pause work. The single status line now includes the pause states, in priority order:

1. error
2. loading
3. "Processing day N of M..."
4. "Pausing after day N..." / "Pausing..." / "Model paused at day N of M. Run to continue."
5. "Run complete."
6. "Ready to run the model." / "Set up data then run the model."

Master's screen-reader role="status" region is kept. The Run/Pause tests read .status-line now that .estimated-time is gone. I also combined a duplicate mobx-state-tree import the merge left behind.

The PR description. I added a section on the CustomSelect changes, since they affect the app header, the student/problem/class menus and sort-work, and QA should know. I also added the three new behavior changes (typed-date commit, inclusive end day, end-field bound), updated the test counts and switched a few spellings to US English.

For your consideration

These are non-blocking, so fix them here, in a follow-up or not at all.

1. Before anything is chosen, the first option is announced as "selected". This affects both Station and Model. When no item is marked selected, CustomSelect's selected state falls back to items[0].text. The new aria-selected override then marks the first option as selected before the student has picked one, which is the same state data-setup.scss already hides visually. One fix would be to honor an explicit selected: false and fall back to the first item only when no item sets the property. (Also flagged by Copilot.)
2. A saved model URL that's missing from the unit's config shows as the first model. The placeholder is hidden because selectedModelUrl is set, so CustomSelect displays its first item while runs still use the orphaned URL. Master's native <select> did much the same, but stations already handle the orphan case and models don't. (Flagged by Copilot.)
3. Opening the calendar after typing, without leaving the field, ignores the typed date. The calendar button is inside the Group, so clicking it doesn't trigger the blur commit, and handleOpenChange reseeds from the stored value. The typed date isn't lost, since it commits on the next real blur, but the calendar opens on the old date. I haven't verified this in a browser.
4. The .waveform-error rule in status-and-output.scss no longer does anything on the status line. .status-line's padding: 0 overrides its padding, so the class only adds italics the line already has. It's safe to delete, or to replace with a rule that makes errors look different, which they currently don't.