@terminus-ai/cli 0.0.1

package/bin/login-page.mjs

@@ -0,0 +1,488 @@
+// The page the browser lands on when a `terminus login` round trip comes back
+// to the loopback server. It is the last frame of the auth flow, so it is a
+// flat print of the panel the user just left: `AuthActionShell` — the water
+// background, the large logo lockup, and one `.ink-glass-pane` card holding an
+// `AuthStatusMark` + `AuthActionHeader`. Same relationship the transactional
+// email has to the same panel (`terminus-backend/src/email.rs`), and the same
+// obligation: tokens are copied from `terminus-frontend/app/globals.css`, so
+// re-check this file when they move.
+//
+// Everything is inlined. This is served by a one-shot HTTP server on
+// 127.0.0.1 with no asset routes, and it is on screen for a few seconds, so
+// there is nothing to cache and nothing to split out.
+//
+// Two things are fetched from the network, and both degrade to a page that
+// still looks finished if the machine is offline:
+//   - the two webfonts, from the same Google Fonts source `lib/fonts.ts`
+//     builds them from, with the fallback tails `globals.css` declares;
+//   - the crystal mark, from the web origin the login was started against,
+//     exactly as the email does. It removes itself if it does not load.
+//
+// Deliberately no monospace anywhere, so no shell command is named in the
+// copy: IoskeleyMono is vendored inside the frontend bundle and cannot be
+// served from here, and a code voice that settles on the platform's mono is
+// the one font outcome the type system rules out.
+
+const FONT_TITLE = "'EB Garamond',Georgia,'Times New Roman',serif";
+const FONT_BODY = "Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif";
+const FONT_HREF =
+  "https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600&family=Inter:wght@400;500;600&display=swap";
+
+// Only the fractal-noise pass from `WaterBackground`; every other layer is a
+// gradient, so this is the whole of the component's asset payload.
+const GRAIN_DATA_URI =
+  "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'%20opacity='0.55'/%3E%3C/svg%3E";
+
+const STYLES = `
+:root { color-scheme: light; }
+
+* { box-sizing: border-box; }
+
+body {
+  position: relative;
+  margin: 0;
+  min-height: 100dvh;
+  overflow-x: hidden;
+  background-color: #fbfdff;
+  color: #1c1917;
+  font-family: ${FONT_BODY};
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* The running water the product sits on. Fixed rather than absolute: this
+   page has no scroll of its own, and fixed keeps the basin behind the card
+   when a narrow window forces one. */
+.water {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.water-basin {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #fbfdff 0%, #edf8ff 38%, #e8f4fb 66%, #fbfdff 100%);
+}
+
+/* Tailwind composes this from a translate and a blur on separate elements;
+   one element with negative margins is the same picture without stacking a
+   filter on top of a transform. */
+.water-glow {
+  position: absolute;
+  left: 50%;
+  top: 52%;
+  width: 84rem;
+  height: 46rem;
+  margin-left: -42rem;
+  margin-top: -23rem;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, rgba(147, 210, 248, 0.5), rgba(186, 230, 253, 0.3) 52%, transparent 76%);
+  filter: blur(40px);
+}
+
+.water-current {
+  position: absolute;
+  top: -24%;
+  bottom: -24%;
+  left: -50%;
+  width: 300%;
+  background-repeat: repeat-x;
+  background-size: 25% 100%;
+  filter: blur(42px);
+  -webkit-mask-image: linear-gradient(180deg, transparent 3%, black 24%, black 78%, transparent 97%);
+  mask-image: linear-gradient(180deg, transparent 3%, black 24%, black 78%, transparent 97%);
+  transform-origin: center;
+  will-change: transform;
+}
+
+.water-current-a {
+  background-image:
+    radial-gradient(ellipse 38% 8% at 8% 35%, rgb(224 242 254 / 0.82), transparent 74%),
+    radial-gradient(ellipse 44% 10% at 43% 54%, rgb(125 211 252 / 0.52), transparent 76%),
+    radial-gradient(ellipse 31% 7% at 72% 31%, rgb(255 255 255 / 0.68), transparent 74%),
+    radial-gradient(ellipse 48% 11% at 96% 68%, rgb(96 165 250 / 0.3), transparent 78%);
+  animation: water-current-a 21s linear -14s infinite;
+}
+
+.water-current-b {
+  background-image:
+    radial-gradient(ellipse 42% 9% at 16% 70%, rgb(186 230 253 / 0.7), transparent 76%),
+    radial-gradient(ellipse 29% 7% at 45% 38%, rgb(147 197 253 / 0.42), transparent 74%),
+    radial-gradient(ellipse 46% 9% at 77% 61%, rgb(224 242 254 / 0.84), transparent 78%),
+    radial-gradient(ellipse 33% 8% at 98% 43%, rgb(125 211 252 / 0.34), transparent 75%);
+  animation: water-current-b 31s linear -23s infinite;
+}
+
+.water-ribbon {
+  position: absolute;
+  left: -50%;
+  width: 300%;
+  background-repeat: repeat-x;
+  background-size: 25% 100%;
+  border-radius: 50%;
+  filter: blur(20px);
+  opacity: 0.5;
+  will-change: transform;
+}
+
+.water-ribbon-a {
+  top: 25%;
+  height: 10rem;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(255 255 255 / 0.04) 8%,
+    rgb(255 255 255 / 0.68) 27%,
+    rgb(125 211 252 / 0.12) 49%,
+    rgb(255 255 255 / 0.56) 73%,
+    transparent 100%
+  );
+  animation: water-ribbon-a 27s linear -18s infinite;
+}
+
+.water-ribbon-b {
+  top: 64%;
+  height: 8rem;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgb(125 211 252 / 0.06) 12%,
+    rgb(255 255 255 / 0.58) 35%,
+    rgb(96 165 250 / 0.11) 58%,
+    rgb(255 255 255 / 0.5) 79%,
+    transparent 100%
+  );
+  animation: water-ribbon-b 36s linear -25s infinite;
+}
+
+.water-grain {
+  position: absolute;
+  inset: 0 -200px 0 0;
+  opacity: 0.1;
+  mix-blend-mode: soft-light;
+  background-image: url("${GRAIN_DATA_URI}");
+  will-change: transform;
+  animation: water-grain 34s linear -12s infinite;
+}
+
+@keyframes water-current-a {
+  from { transform: rotate(-2deg) translate3d(0, 1.5%, 0); }
+  to { transform: rotate(-2deg) translate3d(-25%, 1.5%, 0); }
+}
+
+@keyframes water-current-b {
+  from { transform: rotate(2deg) translate3d(0, -1.5%, 0); }
+  to { transform: rotate(2deg) translate3d(-25%, -1.5%, 0); }
+}
+
+@keyframes water-ribbon-a {
+  from { transform: rotate(-4deg) translate3d(0, 1rem, 0); }
+  to { transform: rotate(-4deg) translate3d(-25%, 1rem, 0); }
+}
+
+@keyframes water-ribbon-b {
+  from { transform: rotate(3deg) translate3d(0, -0.75rem, 0); }
+  to { transform: rotate(3deg) translate3d(-25%, -0.75rem, 0); }
+}
+
+@keyframes water-grain {
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(-200px, 0, 0); }
+}
+
+/* The logo lockup at the shell's size="large" step: 40px mark, 20px
+   wordmark, held back from the mark so the mark leads. */
+.masthead {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  height: 5rem;
+  padding: 0 1rem;
+}
+
+.lockup {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.lockup img {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+
+.lockup span {
+  font-family: ${FONT_TITLE};
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  white-space: nowrap;
+}
+
+/* The card sits where the login card sat — dead centre of the viewport, the
+   masthead floating over it — so the last frame lands in the same place the
+   form the user just submitted was standing. */
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  min-height: 100dvh;
+  align-items: center;
+  justify-content: center;
+  padding: 6rem 1rem;
+}
+
+/* .ink-glass-pane at authCardClass's measurements, verbatim. */
+.card {
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  max-height: calc(100dvh - 3rem);
+  overflow-y: auto;
+  border-radius: 24px;
+  padding: 24px;
+  text-align: center;
+  background-color: rgb(255 255 255 / 0.52);
+  background-image: linear-gradient(180deg, rgb(29 78 168 / 0.02) 0%, rgb(29 78 168 / 0.08) 100%);
+  -webkit-backdrop-filter: blur(26px) saturate(185%);
+  backdrop-filter: blur(26px) saturate(185%);
+  box-shadow:
+    inset 0 0 0 0.5px rgb(8 28 74 / 0.13),
+    inset 0 1px 0 rgb(255 255 255 / 0.85),
+    inset 0 0 40px rgb(255 255 255 / 0.35),
+    0 2px 8px -2px rgb(8 28 74 / 0.07),
+    0 26px 60px -28px rgb(8 28 74 / 0.35);
+  animation: card-in 0.18s cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+/* The specular bar. z-index: -1 stays inside the card because the
+   backdrop-filter above already opened a stacking context. */
+.card::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 1px 1px auto;
+  height: 46%;
+  border-radius: 1.5rem 1.5rem 0 0;
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0));
+  pointer-events: none;
+}
+
+/* AuthStatusMark, standing exactly where AuthMark's crystal stood on the
+   login card: same 44px, same mx-auto mb-4. The crystal is already in the
+   masthead, so this slot is free to carry the verdict instead of the brand. */
+.status {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  margin: 0 auto 16px;
+  border-radius: 999px;
+  animation: status-in 0.3s cubic-bezier(0.23, 1, 0.32, 1) 0.06s both;
+}
+
+.status-ok { background: #ecfdf5; color: #047857; }
+.status-danger { background: #fef2f2; color: #b91c1c; }
+
+h1 {
+  margin: 0;
+  font-family: ${FONT_TITLE};
+  font-size: 34px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.02em;
+}
+
+.lead {
+  margin: 6px 0 0;
+  font-size: 14px;
+  line-height: 24px;
+  color: #57534e;
+}
+
+/* Reads as one of the auth form's own fields — same rim, same translucent
+   fill — so the account it names looks like something the flow filled in. */
+/* The address, set as type rather than boxed. It first wore the auth form's
+   own field — same rim, same translucent fill — which put a second card
+   inside the card and read as an input the reader was meant to do something
+   with. Nothing here is editable, so it is just the line under the sentence:
+   centred with the rest, and given the ink and the weight the muted lead
+   above it does not have. */
+.account {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+.account svg { flex: none; color: #78716c; }
+
+.account span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* authTermsClass — the quiet line the login card closes on. */
+.note {
+  margin: 24px 0 0;
+  font-size: 12px;
+  line-height: 20px;
+  color: #78716c;
+}
+
+@keyframes card-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes status-in {
+  from { opacity: 0; transform: scale(0.85); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@media (min-width: 640px) {
+  .masthead { padding: 0 1.5rem; }
+  .stage { padding: 6rem 1.5rem; }
+  .card { padding: 32px; }
+}
+
+@media (min-width: 1024px) {
+  .masthead { padding: 0 2rem; }
+}
+
+/* Continuous blurred layers are needlessly expensive on phone GPUs; the
+   frozen composition keeps the same identity. */
+@media (max-width: 640px) {
+  .water-current,
+  .water-ribbon,
+  .water-grain {
+    animation: none;
+    will-change: auto;
+  }
+
+  .water-current { filter: blur(44px); }
+  .water-current-a { transform: translate3d(-8%, 1.5%, 0) rotate(-2deg); }
+  .water-current-b { transform: translate3d(-16%, -1.5%, 0) rotate(2deg); }
+
+  h1 { font-size: 30px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .water-current,
+  .water-ribbon,
+  .water-grain,
+  .card,
+  .status {
+    animation: none;
+  }
+}
+`;
+
+// AuthActionShell's CheckIcon and AlertIcon, at `size-5`.
+const CHECK_ICON =
+  '<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"'
+  + ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m4.5 12.5 5 5 10-11"/></svg>';
+
+const ALERT_ICON =
+  '<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"'
+  + ' stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8.5v5M12 16.8v.2M10.3 4'
+  + ' 2.9 17a2 2 0 0 0 1.7 3h14.8a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0Z"/></svg>';
+
+const MAIL_ICON =
+  '<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"'
+  + ' stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="19"'
+  + ' height="15" rx="2.5"/><path d="m3.5 6.5 8.5 6 8.5-6"/></svg>';
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function page({ tone, title, lead, note, account, brandOrigin }) {
+  const mark = tone === "ok" ? CHECK_ICON : ALERT_ICON;
+  const accountRow = account
+    ? `<div class="account">${MAIL_ICON}<span>${escapeHtml(account)}</span></div>`
+    : "";
+  const logo = brandOrigin
+    ? `<img alt="" src="${escapeHtml(`${brandOrigin}/terminus-icon.png`)}" onerror="this.remove()">`
+    : "";
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light">
+<title>${escapeHtml(title)} · Terminus</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="${FONT_HREF}">
+<style>${STYLES}</style>
+</head>
+<body>
+<div class="water" aria-hidden="true">
+<div class="water-basin"></div>
+<div class="water-glow"></div>
+<div class="water-current water-current-a"></div>
+<div class="water-current water-current-b"></div>
+<div class="water-ribbon water-ribbon-a"></div>
+<div class="water-ribbon water-ribbon-b"></div>
+<div class="water-grain"></div>
+</div>
+<header class="masthead"><span class="lockup">${logo}<span>Terminus</span></span></header>
+<main class="stage">
+<div class="card">
+<div class="status status-${tone}" aria-hidden="true">${mark}</div>
+<h1>${escapeHtml(title)}</h1>
+<p class="lead">${escapeHtml(lead)}</p>
+${accountRow}
+<p class="note">${escapeHtml(note)}</p>
+</div>
+</main>
+</body>
+</html>
+`;
+}
+
+/** The successful hand-back: the code is in hand and the terminal takes over. */
+export function loginCompletePage({ email, brandOrigin } = {}) {
+  return page({
+    tone: "ok",
+    title: "You're signed in",
+    lead: "Terminus CLI is connected on this device.",
+    note: "You can close this tab and return to your terminal.",
+    account: email,
+    brandOrigin,
+  });
+}
+
+/**
+ * Every way the callback can arrive without a usable code. The reason is
+ * already on stderr in the terminal; the browser's job is to say plainly that
+ * this window is finished, and where the flow continues.
+ */
+export function loginFailedPage({ reason, brandOrigin } = {}) {
+  return page({
+    tone: "danger",
+    title: "Sign-in didn't finish",
+    lead: reason || "The browser didn't hand a valid login back to the CLI.",
+    note: "Close this tab and start the login again from your terminal.",
+    brandOrigin,
+  });
+}