Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
m1rl0k merged 2 commits into from
Feb 5, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2516e67
feat(ui): add BYOK pill badge to header
chris-stinemetz Feb 5, 2026
18a1526
feat(ui): show icon-only BYOK pill on mobile
chris-stinemetz Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions src/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,101 @@ body::before {
font-weight: 500;
}

/* BYOK Pill (next to logo) */
.byok-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(0, 184, 148, 0.12);
border: 1px solid rgba(0, 184, 148, 0.3);
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--accent);
white-space: nowrap;
animation: byokGlow 2.5s ease-in-out infinite alternate;
}
Copy link

@augmentcode augmentcode bot Feb 5, 2026

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

@augmentcode augmentcode bot Feb 5, 2026

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.

height: 12px;
}

@keyframes byokGlow {
0% {
box-shadow: 0 0 8px rgba(0, 184, 148, 0.15);
border-color: rgba(0, 184, 148, 0.25);
}
100% {
box-shadow: 0 0 14px rgba(0, 184, 148, 0.35);
border-color: rgba(0, 184, 148, 0.5);
}
}

[data-theme="light"] .byok-pill {
background: rgba(0, 184, 148, 0.08);
box-shadow: 0 0 10px rgba(0, 184, 148, 0.12);
}

/* BYOK Tooltip */
.byok-pill[data-tooltip] {
position: relative;
cursor: default;
}

.byok-pill[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
box-shadow: var(--shadow-md);
z-index: 200;
}

.byok-pill[data-tooltip]::before {
content: '';
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: var(--border);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 201;
}

.byok-pill[data-tooltip]:hover::after,
.byok-pill[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
}

@media (max-width: 768px) {
.byok-pill {
padding: 4px 6px;
gap: 0;
}
.byok-pill span:not(:first-child) {
display: none;
}
}

.hero-title {
font-size: 56px;
font-weight: 700;
Expand Down
6 changes: 5 additions & 1 deletion src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { base } from '$app/paths';
import { Sun, Moon, Mail, Github, Layers, Menu, X } from 'lucide-svelte';
import { Sun, Moon, Mail, Github, Layers, Menu, X, Key } from 'lucide-svelte';

let { children } = $props();

Expand Down Expand Up @@ -65,6 +65,10 @@
</span>
Context Engine
</a>
<span class="byok-pill" data-tooltip="Bring Your Own LLM Key">
Copy link

@augmentcode augmentcode bot Feb 5, 2026

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.

<Key size={12} />
<span>BYOK</span>
</span>
<nav class="nav">
<a
href="https://www.npmjs.com/package/@context-engine-bridge/context-engine-mcp-bridge"
Expand Down