Conversation
chris-stinemetz
commented
Feb 5, 2026
- 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
🤖 Augment PR SummarySummary: Adds a compact “BYOK” pill badge next to the logo in the header to highlight Bring Your Own LLM Key support. 🤖 Was this summary useful? React with 👍 or 👎 |
| color: var(--accent); | ||
| white-space: nowrap; | ||
| animation: byokGlow 2.5s ease-in-out infinite alternate; | ||
| } |
| } | ||
|
|
||
| .byok-pill :global(svg) { | ||
| width: 12px; |
There was a problem hiding this comment.
.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
🤖 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"> |
There was a problem hiding this comment.
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
🤖 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