Skip to content

OAuth Broswer Pages Cleanup #101

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
patvice merged 1 commit into from
Nov 25, 2025
Merged

OAuth Broswer Pages Cleanup #101

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
130 changes: 100 additions & 30 deletions lib/ruby_llm/mcp/auth/browser/pages.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,37 @@ def default_success_page
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Card */
/* Logo card in top right */
.logo-card {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--card-bg);
border-radius: 0.75rem;
padding: 0.625rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0;
transform: translateY(-20px);
animation: slide-in 500ms ease-out 200ms forwards;
}
.logo {
width: 32px;
height: 32px;
border-radius: 0.375rem;
border: 1.5px solid var(--logo-border);
flex-shrink: 0;
}
.logo-text {
font-weight: 600;
font-size: 0.875rem;
color: var(--text-900);
white-space: nowrap;
}

/* Main Card */
.card {
width: 100%;
max-width: 32rem;
Expand All @@ -101,17 +131,6 @@ def default_success_page
animation: pop-in 500ms ease-out forwards;
}

/* MCP logo + border */
.logo {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 1.5rem;
border-radius: 1rem;
border: 2px solid var(--logo-border);
background: transparent;
}

/* SVG check animation */
.checkwrap {
display: flex;
Expand Down Expand Up @@ -189,6 +208,7 @@ def default_success_page

/* Animations */
@keyframes pop-in { to { opacity: 1; transform: scale(1); } }
@keyframes slide-in { to { opacity: 1; transform: translateY(0); } }
@keyframes draw-circle {
0% { opacity: 0; stroke-dashoffset: 339.292; }
20% { opacity: 1; }
Expand All @@ -203,11 +223,23 @@ def default_success_page

/* Motion-reduction respect */
@media (prefers-reduced-motion: reduce) {
.card, .circle, .tick, .content { animation: none !important; }
.card { opacity: 1; transform: none; }
.card, .logo-card, .circle, .tick, .content { animation: none !important; }
.card, .logo-card { opacity: 1; transform: none; }
.content { opacity: 1; transform: none; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
.logo-card {
top: 0.75rem;
right: 0.75rem;
padding: 0.5rem;
gap: 0.375rem;
}
.logo { width: 28px; height: 28px; }
.logo-text { font-size: 0.75rem; }
}

/* =========================
Dark Mode (automatic)
========================= */
Expand Down Expand Up @@ -247,15 +279,18 @@ def default_success_page
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#151417" />
</head>
<body>
<main class="card" role="dialog" aria-labelledby="title" aria-describedby="desc">
<div class="logo-card">
<img
class="logo"
src="https://www.rubyllm-mcp.com/assets/images/rubyllm-mcp-logo.svg"
alt="RubyLLM MCP Logo"
decoding="async"
fetchpriority="high"
/>
<span class="logo-text">RubyLLM::MCP</span>
</div>

<main class="card" role="dialog" aria-labelledby="title" aria-describedby="desc">
<div class="checkwrap">
<svg class="checkmark" viewBox="0 0 120 120" aria-hidden="true">
<circle class="circle" cx="60" cy="60" r="54"></circle>
Expand Down Expand Up @@ -322,7 +357,37 @@ def default_error_page(error_message)
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Card */
/* Logo card in top right */
.logo-card {
position: fixed;
top: 1rem;
right: 1rem;
background: var(--card-bg);
border-radius: 0.75rem;
padding: 0.625rem;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0;
transform: translateY(-20px);
animation: slide-in 500ms ease-out 200ms forwards;
}
.logo {
width: 32px;
height: 32px;
border-radius: 0.375rem;
border: 1.5px solid var(--logo-border);
flex-shrink: 0;
}
.logo-text {
font-weight: 600;
font-size: 0.875rem;
color: var(--text-900);
white-space: nowrap;
}

/* Main Card */
.card {
width: 100%;
max-width: 32rem;
Expand All @@ -337,16 +402,6 @@ def default_error_page(error_message)
animation: pop-in 500ms ease-out forwards;
}

/* MCP logo */
.logo {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 1.5rem;
border-radius: 1rem;
border: 2px solid var(--logo-border);
}

/* Animated error icon (circle + X) */
.iconwrap {
display: flex;
Expand Down Expand Up @@ -443,6 +498,7 @@ def default_error_page(error_message)

/* Animations */
@keyframes pop-in { to { opacity: 1; transform: scale(1); } }
@keyframes slide-in { to { opacity: 1; transform: translateY(0); } }
@keyframes draw-circle {
0% { opacity: 0; stroke-dashoffset: 339.292; }
20% { opacity: 1; }
Expand All @@ -456,11 +512,23 @@ def default_error_page(error_message)
@keyframes rise-in { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
.card, .circle, .x1, .x2, .content { animation: none !important; }
.card { opacity: 1; transform: none; }
.card, .logo-card, .circle, .x1, .x2, .content { animation: none !important; }
.card, .logo-card { opacity: 1; transform: none; }
.content { opacity: 1; transform: none; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
.logo-card {
top: 0.75rem;
right: 0.75rem;
padding: 0.5rem;
gap: 0.375rem;
}
.logo { width: 28px; height: 28px; }
.logo-text { font-size: 0.75rem; }
}

/* =========================
Dark Mode (automatic)
========================= */
Expand Down Expand Up @@ -499,16 +567,18 @@ def default_error_page(error_message)
</style>
</head>
<body>
<main class="card" role="dialog" aria-labelledby="title" aria-describedby="desc">
<!-- MCP Logo -->
<div class="logo-card">
<img
class="logo"
src="https://www.rubyllm-mcp.com/assets/images/rubyllm-mcp-logo.svg"
alt="RubyLLM MCP Logo"
decoding="async"
fetchpriority="high"
/>
<span class="logo-text">RubyLLM::MCP</span>
</div>

<main class="card" role="dialog" aria-labelledby="title" aria-describedby="desc">
<!-- Animated Error Icon -->
<div class="iconwrap" aria-hidden="true">
<svg class="erroricon" viewBox="0 0 120 120">
Expand Down