Make the agent panel's copy button a secondary control - #48
Merged
Conversation
The panel shipped with a brand-filled Copy prompt button, taken from the technical spec's illustrative markup rather than from the design system. DESIGN.md allows one brand-filled button per view, and the endpoint page already spends it on the Send submit. Copy is listed there among the secondary and text-only actions, and the copy button directly above this one, on the endpoint URL, is already secondary. The panel body also stacked its intro, its prompt and its action on one even gap. A stack that distributes one gap evenly cannot express which things belong together, so the intro now sits 0.5rem above the block it introduces and the action 0.75rem below it, matching the endpoint URL panel. Claude-Session: https://claude.ai/code/session_01XkbFE6pgcxRfsMAvnwyuqS
The two panels disagreed on where their action lives. Connect an agent opened on the left with an icon; Send a test request pushed its submit to the right edge with no icon, so the eye had to cross the panel to find the control and the two panels read as different kinds of thing. Send now sits on the left with the paper plane its own panel header already uses, and the status message follows it rather than being pushed away from it: the status is a consequence of the button, not a caption for the form. The fills still differ, and deliberately. Send is the endpoint page's one brand-filled action; the copy button is secondary. Claude-Session: https://claude.ai/code/session_01XkbFE6pgcxRfsMAvnwyuqS
DESIGN.md contradicted itself on how far "one primary action" reaches. The Buttons entry scopes .btn-primary to a panel; the Don'ts scoped it to a screen. The panel reading is the right one: these panels are collapsed by default, and an opened one is the thing the reader is working in, so it carries its own primary rather than deferring to whatever else the page holds. The rule now says so, and Copy prompt is brand-filled again. Send a test request also moves above Connect an agent. Sending a request is how someone confirms the endpoint works at all, so it comes before handing the endpoint to something else. Claude-Session: https://claude.ai/code/session_01XkbFE6pgcxRfsMAvnwyuqS
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.
Follow-up to #47, correcting it against
DESIGN.md. I built the panel from the surrounding markup and the technical spec's §3.7 snippet without checking that snippet against the design system.One brand-filled button per view
DESIGN.md: "Don't add a second brand-filled button to a view. One primary action per screen; everything else is an outlined, bare, or destructive control."The endpoint page already spends its primary on the Send submit, so the panel's
btn-primarywas the second. It is also wrong on its own terms:DESIGN.mdlists Copy among the text-only and secondary actions, and the copy button one panel above it, on the endpoint URL, is alreadybtn-secondary.Now
btn btn-secondary. Verified computationally identical to the copy-url button: white fill, neutral-300 stroke, control-ink label, 0.375rem control radius. Each view now carries exactly onebtn-primary.Spacing expresses grouping
The panel body used
space-y-3, giving the intro paragraph, the prompt block and the copy button one even gap.DESIGN.mdon the same problem: a stack that "distributes one gap evenly cannot express the grouping", which is why the endpoint URL panel carries an explicit comment choosing explicit margins overspace-y.The intro now sits 0.5rem above the block it introduces and the action 0.75rem below it, both on the 0.25rem base scale. Measured in the browser: 8px above, 12px below.
Dropping
space-y-3also removes the only new utility #47 added, sopublic/app.cssreturns to what it was.Verification
go vet,go test,npm run lint, prettier and thenpm run cssstaleness check all pass. 64/64 Playwright tests pass. Checked in the browser that the button matches its sibling and that the gaps land where intended.Nothing else from #47 is affected: the icons already met the 24×24 /
stroke-width="2"/fill="none"/aria-hiddenrule, the panel reuses.panel,.code-block,.iconand.btnrather than respelling them, the homepage card is a copy of its three siblings, and no new colour, shadow, breakpoint or uppercase text was introduced.🤖 Generated with Claude Code
https://claude.ai/code/session_01XkbFE6pgcxRfsMAvnwyuqS