Conversation
The Usage header printed two labels for one control: the caption "Recorded usage range" and, beside it, the segmented picker's own "Usage range" label, wrapped onto two lines inside the picker's fixed width. Hide the picker's label, as the chart-measure picker already does, keep the caption as the control's accessibility name, and size the picker to its segments. Snapshots used to stand in for the picker with a single "7d" chip, so no reference showed the header as users see it. A `SegmentedStandIn` now draws the three windows with the selected one filled, so the usage references (7-day and 90-day lanes) show the one caption beside the real segment set. `UsageRangePresentation` carries the caption and the offered windows and is covered by `UsageRangePresentationTests`. References re-recorded on the canonical renderer. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
The Usage page mixed two vocabularies: the Dashboard's usage card switches series with a designed segmented track (24 pt segments, the selected one on a card fill inside a tinted track), while the Usage header and chart measure used the native macOS segmented picker, a foreign gray widget on a designed page, sitting under a plain caption on its own row. Extract the Dashboard's switch into `SegmentedChoice` (one shape, one type role, one hover/press/focus feedback model) and use it everywhere a page offers a choice: the Dashboard series switch (its references are pixel- identical, which is the proof the extraction changed nothing), the recorded-usage range, and the chart measure. The range control moves onto the title row, trailing, behind a "RECORDED RANGE" caps label — the same composition as the Dashboard card's header. Buttons render under ImageRenderer, so the snapshot stand-ins (the range chip, the measure chip and the interim SegmentedStandIn) go away and every usage reference shows the real control; the interactive-only grouping menu stays hidden in snapshots. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
FZ2000
changed the title
On a live window the page's top-trailing corner is where recording notices surface, and the range control placed there disappeared behind the notice card. Move it onto the Recorded usage section's title row — the section it actually governs, together with the capacity table's "Recorded use" column — trailing, behind the same "RECORDED RANGE" caps label. The page title row is the title and its help again. References re-recorded. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Short labels (7d, 30d, 90d, Cost) hugged their glyphs, so the track read as cramped. Every SegmentedChoice segment is now at least 52 pt wide and 26 pt tall with 12 pt side padding — one rule in the shared control, so the Dashboard's Tokens/Cost switch, the recorded-usage range and the chart measure all share the proportion. Dashboard and usage references re-recorded. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
…el-once # Conflicts: # apps/agentacct/Tests/agentacctTests/ReferenceImages/macos-26-xcode-26.6-arm64-2x/PLATFORM.json
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was wrong
The Usage header printed two labels for one control (the caption Recorded usage range plus the picker's own Usage range, wrapped onto two lines), and the control itself was the native macOS segmented picker: a gray system widget sitting under a plain caption on its own row, while the Dashboard's usage card already switches Tokens/Cost with a designed segmented track. Two vocabularies for the same interaction.
What changes on screen
SegmentedChoice(segments at least 52 pt wide and 26 pt tall incaptionSemibold, the selected one lifted onto a card fill inside atintNeutraltrack, hover/press/focus feedback fromButtonFeedback). The Dashboard now uses it too, so its Tokens/Cost switch takes the same roomier proportion; the extraction itself was verified pixel-identical before the cells were widened.Usage & limits ⓘalone. The Recorded usage section's title row carriesRECORDED RANGE [7d | 30d | 90d]trailing, the same composition as the Dashboard card header. It is not on the page header on purpose: the page's top-trailing corner is where recording notices surface, and a control there vanishes behind the notice card on a live window. The control's accessibility name is the full phrase "Recorded usage range".MEASURE [Cost | Fresh tokens]uses the same control instead of the native picker.How it is tested
7dchip, the measure chip) are gone and everyusage-*reference shows the real control on the section row; the 90-day lane shows90dselected.dashboard-*references are re-recorded for the wider cells. All references re-recorded on the canonical renderer (macos-26-xcode-26.6-arm64-2x);visual-snapshots verifypasses.UsageRangePresentationTestspins the caps label, the accessibility name and the offered windows.🤖 Generated with Claude Code