Skip to content

feat(ui): add BYOK pill badge to header#218

Merged
m1rl0k merged 2 commits intotestfrom
feature/new-landing-page
Feb 5, 2026
Merged

feat(ui): add BYOK pill badge to header#218
m1rl0k merged 2 commits intotestfrom
feature/new-landing-page

Conversation

@chris-stinemetz
Copy link
Collaborator

  • Add compact pill next to logo with Key icon and 'BYOK' text
  • Include CSS tooltip on hover showing 'Bring Your Own LLM Key'
  • Subtle glow animation to draw attention
  • Hide on mobile (< 768px) for clean header
  • Support for light/dark themes

- Add compact pill next to logo with Key icon and 'BYOK' text
- Include CSS tooltip on hover showing 'Bring Your Own LLM Key'
- Subtle glow animation to draw attention
- Hide on mobile (< 768px) for clean header
- Support for light/dark themes
@augmentcode
Copy link

augmentcode bot commented Feb 5, 2026

🤖 Augment PR Summary

Summary: Adds a compact “BYOK” pill badge next to the logo in the header to highlight Bring Your Own LLM Key support.

UI: Includes a lucide Key icon, “BYOK” label, and a hover tooltip (“Bring Your Own LLM Key”).

Styling: Introduces new global SCSS for pill layout, a subtle glow animation, and theme-aware colors.

Responsive: Hides the badge on viewports under 768px to keep the header uncluttered.

Implementation: Tooltip content is provided via a data-tooltip attribute and CSS pseudo-elements.

🤖 Was this summary useful? React with 👍 or 👎

Copy link

@augmentcode augmentcode bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. 3 suggestions posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

color: var(--accent);
white-space: nowrap;
animation: byokGlow 2.5s ease-in-out infinite alternate;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The animation: byokGlow ... infinite will run continuously; consider respecting prefers-reduced-motion to avoid motion issues for users who disable animations.

Severity: low

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

}

.byok-pill :global(svg) {
width: 12px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.byok-pill :global(svg) may not behave as intended in a global SCSS file since :global(...) is a Svelte-scoped CSS construct; if it isn’t processed here, the rule can be dropped and the icon sizing won’t apply.

Severity: low

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

</span>
Context Engine
</a>
<span class="byok-pill" data-tooltip="Bring Your Own LLM Key">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The BYOK tooltip is hover-only and the element is a non-focusable span, so keyboard and assistive-tech users may not be able to discover the expanded text; consider adding focus/ARIA support so the hint is accessible beyond mouse hover.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

- Display just Key icon on screens < 768px
- Keeps header compact while preserving BYOK visibility
- Tooltip still accessible on tap
@m1rl0k m1rl0k merged commit 1d1a4a7 into test Feb 5, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants