mcp-grant.html
Rama main · réplica de lectura del repositorio original.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex, nofollow" />
<title>Authorize MCP — WorldMonitor</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',monospace;background:#0a0a0a;color:#e8e8e8;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}
.wm-logo{display:flex;align-items:center;gap:.5rem;margin-bottom:2rem;text-decoration:none}
.wm-logo svg{color:#2d8a6e}
.wm-logo-text{font-size:.75rem;color:#555;letter-spacing:.1em;text-transform:uppercase}
.card{width:100%;max-width:440px;background:#111;border:1px solid #1e1e1e;padding:2rem}
.client-hd{margin-bottom:1.25rem}
.client-name{font-size:1rem;color:#fff;font-weight:600;margin-bottom:.25rem}
.client-host{font-size:.75rem;color:#444}
.client-warn{font-size:.72rem;color:#d97706;line-height:1.5;margin-top:.6rem}
hr{border:none;border-top:1px solid #1e1e1e;margin:1.25rem 0}
.scope-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#444;margin-bottom:.6rem}
.scope-list{list-style:none}
.scope-list li{font-size:.8rem;color:#666;padding:.2rem 0;display:flex;align-items:flex-start;gap:.5rem}
.scope-list li::before{content:'→';color:#2d8a6e;flex-shrink:0;margin-top:.05em}
button{width:100%;margin-top:1.25rem;padding:.75rem;background:#2d8a6e;color:#fff;border:none;font-family:inherit;font-size:.9rem;cursor:pointer;font-weight:500;letter-spacing:.02em;border-radius:0}
button:hover{background:#246d57}
button:disabled{opacity:.5;cursor:default}
.error{color:#ef4444;font-size:.8rem;margin:.5rem 0 0;line-height:1.5}
.footer{font-size:.7rem;color:#2a2a2a;text-align:center;margin-top:1.25rem}
.footer a{color:#333;text-decoration:none}
.footer a:hover{color:#555}
.placeholder{color:#333}
.spinner{display:inline-block;width:.8em;height:.8em;border:2px solid #2a2a2a;border-top-color:#2d8a6e;border-radius:50%;animation:spin .9s linear infinite;vertical-align:-.05em;margin-right:.5em}
@keyframes spin{to{transform:rotate(360deg)}}
.about-you{margin-top:1.25rem;border-top:1px solid #1e1e1e;padding-top:1rem}
.about-you summary{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.75rem;color:#888;cursor:pointer;list-style:none}
.about-you summary::-webkit-details-marker{display:none}
.about-you summary::after{content:'+';color:#555;font-size:.9rem;line-height:1}
.about-you[open] summary::after{content:'\2212'}
.about-you summary:hover{color:#e8e8e8}
.about-you summary:focus-visible{outline:2px solid #2d8a6e;outline-offset:4px}
.about-you-label{font-size:.75rem;color:#e8e8e8;margin:16px 0 8px}
.about-you-options{display:flex;flex-wrap:wrap;gap:8px}
.about-you-options[data-layout=grid]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.about-you-options[data-layout=grid] .about-you-option{padding-block:6px;text-align:left;line-height:1.35}
.about-you .about-you-option,.about-you .about-you-not-now{display:inline-flex;align-items:center;gap:8px;width:auto;margin:0;padding:0 12px;min-height:32px;font-size:.72rem;font-weight:400;letter-spacing:0;background:#151515;color:#999;border:1px solid #242424;transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease}
.about-you .about-you-option:hover{background:#1b1b1b;border-color:#333;color:#e8e8e8}
.about-you .about-you-option[aria-pressed=true]{border-color:#2d8a6e;color:#e8e8e8;background:#13201c}
.about-you .about-you-option[aria-pressed=true]::before{content:'';width:8px;height:4px;margin-top:-2px;border-left:1.5px solid #3fb894;border-bottom:1.5px solid #3fb894;transform:rotate(-45deg)}
.about-you .about-you-option:focus-visible,.about-you .about-you-not-now:focus-visible{outline:2px solid #2d8a6e;outline-offset:2px}
.about-you .about-you-not-now{margin-top:16px;padding:0;min-height:24px;border-color:transparent;background:transparent;color:#666}
.about-you .about-you-not-now:hover{background:transparent;color:#e8e8e8}
@media (pointer:coarse){.about-you .about-you-option{min-height:44px}}
</style>
<!-- No inline scripts — global CSP at vercel.json:92 is hash-based and we
don't allowlist this page's hashes individually. The bundled module
at src/mcp-grant-main.ts handles theme application on DOMContentLoaded;
a brief default-theme flash on light-preference users is acceptable
for a transient consent UI (reviewer round-2 P3). -->
</head>
<body>
<a href="https://www.worldmonitor.app" class="wm-logo" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
<span class="wm-logo-text">WorldMonitor MCP</span>
</a>
<main class="card" id="card">
<div id="loading"><span class="spinner" aria-hidden="true"></span><span class="placeholder" id="loadingBody">Loading authorization request…</span></div>
<div id="consent" hidden>
<div class="client-hd">
<h1 class="client-name"><span id="clientName"></span> wants access</h1>
<div class="client-host">via <span id="clientHost"></span></div>
<div class="client-host" id="clientIdHostLine" hidden>client ID from <span id="clientIdHost"></span></div>
<p class="client-warn" id="localhostWarn" hidden>This client sends the authorization only to this computer (localhost). Approve it only if you started this connection from an app on this device.</p>
</div>
<hr>
<p class="scope-label">Read-only access to</p>
<ul class="scope-list">
<li>Intelligence data from 846 attributed providers</li>
<li>Real-time news & events</li>
<li>Live flight tracking & AIS vessel positions</li>
<li>Weather alerts, earthquakes & natural disasters</li>
<li>Geopolitical risk indicators & conflict data</li>
<li>Markets: stocks, commodities, crypto & FX</li>
</ul>
<hr>
<p style="font-size:.72rem;color:#444;line-height:1.5">Signed in as <span id="userEmail" style="color:#666"></span>. <a href="/settings" style="color:#2d8a6e;text-decoration:none">Manage connected MCP clients →</a></p>
<div id="aboutYouMount"></div>
<button type="button" id="authorizeBtn">Authorize</button>
<p class="error" id="mintError" role="alert" hidden></p>
</div>
<div id="signInView" hidden>
<h1 class="client-name">Sign in to continue</h1>
<p style="font-size:.8rem;color:#666;line-height:1.5">Sign in with your World Monitor account. A free account works; Pro unlocks the full toolset and allowance.</p>
<p class="client-warn" id="signInMessage" role="status" hidden></p>
<button type="button" id="signInBtn">Sign in</button>
</div>
<div id="errorView" hidden>
<h1 class="client-name" id="errorTitle" style="color:#ef4444;font-size:.95rem;font-weight:600;margin-bottom:.5rem">Authorization request expired</h1>
<p style="font-size:.8rem;color:#666;line-height:1.5" id="errorBody">This authorization request expired or is invalid. Start over from your MCP client (e.g. Claude Desktop).</p>
<button type="button" id="retryContextBtn" hidden>Try again</button>
</div>
</main>
<p class="footer"><a href="https://www.worldmonitor.app" target="_blank" rel="noopener">worldmonitor.app</a> · <a href="https://www.worldmonitor.app/pro" target="_blank" rel="noopener">Pro plan →</a></p>
<script type="module" src="/src/mcp-grant-main.ts" nonce="wm-static-bootstrap"></script>
</body>
</html>