@gramatr/client 0.6.5 → 0.6.7

package/bin/gmtr-login.ts

@@ -48,76 +48,125 @@ const DASHBOARD_BASE = process.env.GMTR_DASHBOARD_URL || (() => {
 
 // ── HTML Templates ──
 
+// Brand tokens lifted directly from staging.gramatr.com BaseLayout.css.
+// DO NOT introduce gradients, glassmorphism, or cyan accents — the real
+// brand is flat near-black surfaces, #3B82F6 blue, Inter + Outfit.
 const BRAND_CSS = `
+  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600&family=Inter:wght@400;500;600;700&display=swap');
   * { margin: 0; padding: 0; box-sizing: border-box; }
+  :root {
+    --gmtr-bg: #0E0E0E;
+    --gmtr-surface: #1A1A1A;
+    --gmtr-border: #333333;
+    --gmtr-text: #ECECEC;
+    --gmtr-text-secondary: #A0A0A0;
+    --gmtr-text-muted: #707070;
+    --gmtr-text-faint: #4A4A4A;
+    --gmtr-primary: #3B82F6;
+    --gmtr-accent: #60A5FA;
+    --gmtr-success: #4ADE80;
+    --gmtr-error: #F87171;
+    --font-wordmark: 'Outfit', -apple-system, sans-serif;
+    --font-heading: 'Inter', -apple-system, sans-serif;
+    --font-body: 'Inter', -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  }
+  html, body { height: 100%; }
   body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: #0a0e17;
-    color: #e0e6ed;
+    background: var(--gmtr-bg);
+    color: var(--gmtr-text);
+    font-family: var(--font-body);
+    font-weight: 400;
+    line-height: 1.7;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 24px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
   .card {
-    background: #141b2d;
-    border: 1px solid #1e2940;
-    border-radius: 16px;
-    padding: 48px;
-    max-width: 440px;
-    width: 90%;
+    background: var(--gmtr-surface);
+    border: 1px solid var(--gmtr-border);
+    border-radius: 12px;
+    padding: 2.5rem;
+    max-width: 480px;
+    width: 100%;
     text-align: center;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
   }
-  .logo {
-    font-size: 28px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    margin-bottom: 8px;
+  .wordmark {
+    font-family: var(--font-wordmark);
+    font-weight: 600;
+    font-size: 1.5rem;
+    color: var(--gmtr-text);
+    letter-spacing: -0.02em;
+    margin-bottom: 0.25rem;
   }
-  .logo .accent { color: #00b4d8; }
-  .logo .dim { color: #5a6a8a; }
-  .subtitle {
-    color: #5a6a8a;
-    font-size: 13px;
-    margin-bottom: 32px;
+  .tagline {
+    color: var(--gmtr-text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 2rem;
   }
-  .status {
-    font-size: 48px;
-    margin-bottom: 16px;
+  .status-icon {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
+  .status-icon svg { width: 56px; height: 56px; }
   h2 {
-    font-size: 20px;
-    font-weight: 600;
-    margin-bottom: 12px;
+    font-family: var(--font-heading);
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+    color: var(--gmtr-text);
+    margin: 0 0 0.5rem;
   }
-  h2.success { color: #00b4d8; }
-  h2.error { color: #e74c3c; }
   p {
-    color: #7a8aaa;
-    font-size: 14px;
+    color: var(--gmtr-text-secondary);
+    font-size: 0.9375rem;
     line-height: 1.6;
+    margin: 0;
   }
   .hint {
-    margin-top: 24px;
-    padding-top: 24px;
-    border-top: 1px solid #1e2940;
-    font-size: 12px;
-    color: #4a5a7a;
+    margin-top: 1.75rem;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--gmtr-border);
+    font-size: 0.8125rem;
+    color: var(--gmtr-text-muted);
+  }
+  .hint code {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    background: var(--gmtr-bg);
+    border: 1px solid var(--gmtr-border);
+    color: var(--gmtr-accent);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
   }
 `;
 
+// Flat, no pulse, no glow — matches the rest of gramatr.com.
+const CHECK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="#4ADE80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="16 10 11 15 8 12"></polyline></svg>`;
+const X_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="#F87171" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>`;
+
 function htmlPage(title: string, body: string): string {
   return `<!DOCTYPE html>
 <html lang="en"><head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${title} — gramatr</title>
+  <title>${title} — grāmatr</title>
   <style>${BRAND_CSS}</style>
 </head><body>
   <div class="card">
-    <div class="logo"><span class="accent">gr</span>āma<span class="accent">tr</span></div>
-    <div class="subtitle">your cross-agent AI brain</div>
+    <div class="wordmark">grāmatr</div>
+    <div class="tagline">Your AI gets smarter</div>
     ${body}
   </div>
 </body></html>`;
@@ -125,19 +174,19 @@ function htmlPage(title: string, body: string): string {
 
 function successPage(): string {
   return htmlPage('Authenticated', `
-    <div class="status">✓</div>
-    <h2 class="success">Authenticated</h2>
-    <p>Token saved. You can close this tab and return to your terminal.</p>
-    <div class="hint">gramatr intelligence is now active across all your AI tools.</div>
+    <div class="status-icon">${CHECK_SVG}</div>
+    <h2>You're signed in</h2>
+    <p>Your token is saved on this machine. You can close this tab and return to your terminal.</p>
+    <div class="hint">grāmatr intelligence is now active across every AI tool you use.</div>
   `);
 }
 
 function errorPage(title: string, detail: string): string {
   return htmlPage('Error', `
-    <div class="status">✗</div>
-    <h2 class="error">${title}</h2>
+    <div class="status-icon">${X_SVG}</div>
+    <h2>${title}</h2>
     <p>${detail}</p>
-    <div class="hint">Return to your terminal and try again, or use <code>gmtr-login --token</code> to paste a token directly.</div>
+    <div class="hint">Return to your terminal and try again, or run <code>gmtr-login --token</code> to paste a token directly.</div>
   `);
 }
 
@@ -148,10 +197,11 @@ function isHeadless(forceFlag: boolean = false): boolean {
   if (forceFlag) return true;
   if (process.env.GRAMATR_LOGIN_HEADLESS === '1') return true;
 
-  // SSH session without display forwarding
-  if (process.env.SSH_CONNECTION || process.env.SSH_TTY) {
-    if (!process.env.DISPLAY && process.platform !== 'darwin') return true;
-  }
+  // SSH session — always go headless. Even on macOS (which has a local
+  // display), `open` would launch Safari on the Mac's *physical* screen,
+  // not on the remote terminal where the user actually is. Device flow
+  // lets them paste the code on whichever machine they're sitting at.
+  if (process.env.SSH_CONNECTION || process.env.SSH_TTY) return true;
   // Docker / CI / no TTY
   if (process.env.CI || process.env.DOCKER) return true;
   // Linux without display
@@ -493,23 +543,35 @@ async function loginBrowser(opts: { forceHeadless?: boolean } = {}): Promise<voi
       const code = url.searchParams.get('code');
       const returnedState = url.searchParams.get('state');
       const error = url.searchParams.get('error');
+      // v0.6.6: `server.close()` alone does not terminate keep-alive
+      // sockets — the browser holds the connection open and the Node
+      // event loop never exits, so the CLI prints "Authenticated" and
+      // then hangs until Ctrl+C. Send `Connection: close` on the
+      // response and call `closeAllConnections()` to forcibly drop
+      // lingering sockets after we respond.
+      const shutdown = () => {
+        callbackServer.close();
+        if (typeof (callbackServer as any).closeAllConnections === 'function') {
+          (callbackServer as any).closeAllConnections();
+        }
+      };
       if (error) {
-        res.writeHead(200, { 'Content-Type': 'text/html' });
+        res.writeHead(200, { 'Content-Type': 'text/html', Connection: 'close' });
         res.end(errorPage('Authentication Failed', error));
-        callbackServer.close();
+        shutdown();
         reject(new Error(`OAuth error: ${error}`));
         return;
       }
       if (!code || returnedState !== state) {
-        res.writeHead(400, { 'Content-Type': 'text/html' });
+        res.writeHead(400, { 'Content-Type': 'text/html', Connection: 'close' });
         res.end(errorPage('Invalid Callback', 'Missing code or state mismatch. Please try again.'));
-        callbackServer.close();
+        shutdown();
         reject(new Error('Invalid callback'));
         return;
       }
-      res.writeHead(200, { 'Content-Type': 'text/html' });
+      res.writeHead(200, { 'Content-Type': 'text/html', Connection: 'close' });
       res.end(successPage());
-      callbackServer.close();
+      shutdown();
       resolve(code);
     });
     codeTimeoutHandle = setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramatr/client",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "publishConfig": {
     "access": "public"
   },