feat(desktop, web): surface Claude Code custom endpoint as a clickable badge - #7486
feat(desktop, web): surface Claude Code custom endpoint as a clickable badge#7486chopll wants to merge 2 commits into
Conversation
Add a 'Custom endpoint' pill to the active Claude Code card in Settings → Execution → Local CLI when ANTHROPIC_BASE_URL or ANTHROPIC_API_KEY is configured. Clicking the badge expands the existing 'Advanced: proxy & custom paths' disclosure and scrolls it into view, making third-party proxy / BYOK setup discoverable. - Add agentCliEnvDetailsRef and badge click handler in SettingsDialog - Add .agent-card-benefit--clickable hover style - Add settings.claudeCustomEndpointBadge i18n key (19 locales) - Add 5 unit tests covering visibility, agent scoping, and expand/scroll
chopll
changed the title
lefarcen
added
size/M
|
🧪 This PR has changes that need a manual QA pass before merge — please hold off self-merging for now; we'll loop QA in once it's merge-ready (and design/product have signed off, where applicable). Nothing else is needed from you on the QA side yet. Thanks for the contribution! |
|
Hey @chopll, the badge → disclosure flow is easy to understand from your summary, and the focused test coverage helps. Before we route the UI/product pass, could you fill in |
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
The new badge introduces a nested interactive control in the Claude provider card. Please move it outside the card-selection button so the disclosure shortcut has valid, reliable keyboard and assistive-technology behavior.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.| <span | ||
| className="agent-card-benefit agent-card-benefit--clickable" | ||
| data-testid={`settings-agent-card-${a.id}-custom-endpoint-badge`} | ||
| role="button" | ||
| tabIndex={0} |
There was a problem hiding this comment.
Move this disclosure control outside settings-agent-select-${a.id} and render it as a native shared Button (or restructure the card so the two actions are sibling buttons). This focusable role="button" span is currently a descendant of the card's existing <button className="agent-card-select">, which creates nested interactive content. That is invalid button markup and assistive technologies can flatten or misannounce the inner action; keyboard users can therefore reach a control whose semantics and activation are unreliable even though the synthetic click test passes. Keep the badge visually associated with the card, but make selection and “open Advanced settings” separate sibling controls, then cover Enter/Space activation in the focused test.
Reviewer feedback: the badge was a nested interactive control inside the card-selection <button>, which is invalid markup and unreliable for keyboard/assistive-technology users. - Move the badge out of .agent-card-select and render it as a sibling <Button> from @open-design/components. - Rename CSS class to .agent-card-advanced-btn and keep pill styling. - Add Enter and Space keyboard activation tests.
lefarcen
added
the
needs-product-review
|
Hey @chopll — @PerishCode's blocking review on the current head is the one to address first: the custom-endpoint shortcut needs to move out of the existing card button so selection and “open Advanced settings” are separate controls with reliable keyboard and assistive-technology behavior. Once that's updated, the remaining non-code item from our side is still the PR body/screenshot follow-up above.
|
PerishCode
left a comment
PerishCode
left a comment
There was a problem hiding this comment.
@chopll I reviewed the full changed range for the Claude custom-endpoint shortcut, including the follow-up that moves it outside the provider-selection button. The current implementation uses the shared native Button as a sibling action, preserves active-Claude scoping, opens and scrolls the existing CLI environment disclosure, and adds focused visibility plus keyboard-activation coverage. The prior accessibility blocker is resolved cleanly—thanks for turning that feedback around thoughtfully.
🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.
Visual regression reviewHead: 9 changed · 44 unchanged · 0 new without baseline · 0 failed Changed cases
Unchanged cases
Visual diff is advisory only and does not block merging. |
3 participants
Add a 'Custom endpoint' pill to the active Claude Code card in Settings → Execution → Local CLI when ANTHROPIC_BASE_URL or ANTHROPIC_API_KEY is configured. Clicking the badge expands the existing 'Advanced: proxy & custom paths' disclosure and scrolls it into view, making third-party proxy / BYOK setup discoverable.
Fixes #
Why
What users will see
Surface area
apps/weborapps/desktop(including Electron menu bar)odsubcommand or flag, newtools-dev/tools-packflag, or newOD_*env var/api/*endpoint, new SSE event, or changed shape inpackages/contractsskills/,design-systems/,design-templates/, orcraft/, or change to the skills protocolTRANSLATIONS.mdfor the locale workflow)package.json(dependenciesordevDependencies); workspace-packagepackage.jsonfiles are out of scope. Include a paragraph on what we get vs. what bytes we ship (seeCONTRIBUTING.md→ Code style)Screenshots
Bug fix verification
Validation