authflow: render the live MEMCODE matrix wordmark on the CLI login callback

Replace the static image with the marketing site's MatrixGlyphWordmark
canvas animation (static lit-glyph base + katakana rain, composited then
clipped to the letterforms), ported to dependency-free vanilla JS so the
self-contained callback page needs no assets. Restores the original
heading/help text with proper vertical rhythm; HTML-escapes the error.

Author: timothyerwin

internal/authflow/authflow.go

@@ -254,12 +254,51 @@ func StripGlobalEnvToken() (bool, error) {
 	return true, nil
 }
 
-// callbackWordmark is the hosted memcode wordmark (the matrix glyph mark from
-// the marketing site). Referenced by absolute URL rather than embedded: the
-// browser rendering this page just completed OAuth against memcode.ai, so it
-// has connectivity, and a 300KB PNG has no business inflating the binary. If
-// the fetch fails the alt text still reads "memcode".
-const callbackWordmark = "https://memcode.ai/logo-wordmark.png"
+// callbackScript is the MEMCODE matrix wordmark, ported verbatim from the
+// marketing site's MatrixGlyphWordmark canvas component to dependency-free JS:
+// a static lit-glyph base plus katakana rain, both composited then clipped to
+// the word with destination-in, animated on requestAnimationFrame.
+const callbackScript = `<script>(function(){
+var G='ハケモサナアウキニツヲヤカコレミネテヒイオリ0123456789=<>+*|/\\'.split('');
+var LIT=['#e0d8ff','#d2c6ff','#c4b6ff','#b9aaff'];
+function pg(){return G[(Math.random()*G.length)|0];}
+function pl(){return LIT[(Math.random()*LIT.length)|0];}
+var canvas=document.getElementById('mark');
+if(!canvas||!canvas.getContext){return;}
+var ctx=canvas.getContext('2d');
+var baseCell=11,baseCells=[],lastW=0,lastH=0,fc=14,columns=[];
+function setup(w,h){
+  lastW=w;lastH=h;baseCells=[];
+  for(var y=baseCell/2;y<h;y+=baseCell){for(var x=baseCell/2;x<w;x+=baseCell){baseCells.push({x:x,y:y,glyph:pg(),color:pl()});}}
+  var cell=w<640?10:fc,cols=Math.ceil(w/cell);columns=[];
+  for(var i=0;i<cols;i++){columns.push({x:i*cell+cell/2,y:Math.random()*h,speed:0.15+Math.random()*0.3,len:4+((Math.random()*8)|0)});}
+}
+function draw(){
+  var cssW=canvas.clientWidth,cssH=canvas.clientHeight;
+  if(cssW===0||cssH===0){return;}
+  if(cssW!==lastW||cssH!==lastH){setup(cssW,cssH);}
+  var dpr=window.devicePixelRatio||1;
+  if(canvas.width!==cssW*dpr||canvas.height!==cssH*dpr){canvas.width=cssW*dpr;canvas.height=cssH*dpr;}
+  var lay=document.createElement('canvas');lay.width=cssW*dpr;lay.height=cssH*dpr;
+  var lx=lay.getContext('2d');lx.setTransform(dpr,0,0,dpr,0,0);lx.clearRect(0,0,cssW,cssH);
+  lx.textAlign='center';lx.textBaseline='middle';
+  lx.font='700 '+(baseCell*1.05)+"px 'SF Mono',Menlo,Monaco,monospace";
+  for(var k=0;k<baseCells.length;k++){var c=baseCells[k];lx.globalAlpha=0.55;lx.fillStyle=c.color;lx.fillText(c.glyph,c.x,c.y);}
+  var cell=cssW<640?10:fc,alpha=cssW<640?0.27:0.19;
+  lx.font='400 '+(cell*0.86)+"px 'SF Mono',Menlo,Monaco,monospace";
+  for(var i=0;i<columns.length;i++){var col=columns[i];
+    for(var j=0;j<col.len;j++){var yy=col.y-j*cell;if(yy<-cell||yy>cssH+cell){continue;}var tail=j/col.len;lx.globalAlpha=(1-tail)*(alpha+Math.random()*0.13);lx.fillStyle='#6a5da6';lx.fillText(pg(),col.x,yy);}
+    col.y+=col.speed;if(col.y-col.len*cell>cssH){col.y=-Math.random()*cssH*0.5;col.speed=0.15+Math.random()*0.3;col.len=4+((Math.random()*8)|0);}
+  }
+  lx.globalAlpha=1;lx.globalCompositeOperation='destination-in';
+  var word='MEMCODE',fs=cssH*0.92;lx.font='900 '+fs+"px 'Arial Black',Arial,sans-serif";
+  while(lx.measureText(word).width>cssW*0.94&&fs>6){fs-=1;lx.font='900 '+fs+"px 'Arial Black',Arial,sans-serif";}
+  lx.fillStyle='#fff';lx.fillText(word,cssW/2,cssH/2);
+  ctx.setTransform(1,0,0,1,0,0);ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(lay,0,0);
+}
+(function loop(){draw();requestAnimationFrame(loop);})();
+if(typeof ResizeObserver!=='undefined'){new ResizeObserver(function(){lastW=0;}).observe(canvas);}
+})();</script>`
 
 func writeCallbackPage(w http.ResponseWriter, ok bool, errMsg string) {
 	w.Header().Set("Content-Type", "text/html; charset=utf-8")
@@ -269,30 +308,37 @@ func writeCallbackPage(w http.ResponseWriter, ok bool, errMsg string) {
 
 	var inner string
 	if ok {
-		inner = `<h1>Authenticated</h1><p class="sub">You can close this tab and return to your terminal.</p>`
+		inner = `<h2>Authenticated</h2><p class="sub">You can close this tab and return to your terminal.</p>`
 	} else {
 		inner = fmt.Sprintf(
-			`<h1>Authentication failed</h1><p class="err">%s</p><p class="sub">Close this tab and try again.</p>`,
+			`<h2>Authentication failed</h2><p class="err">%s</p><p class="sub">Close this tab and try again.</p>`,
 			html.EscapeString(errMsg),
 		)
 	}
 
+	// The MEMCODE wordmark is the SAME live canvas animation the marketing site
+	// runs (a static glyph base with matrix rain sweeping through, both clipped
+	// to the letterforms) — ported to vanilla JS so the self-contained page
+	// needs no assets. Generous vertical rhythm below it: wordmark, heading, and
+	// help line each get their own breathing room.
 	page := `<!doctype html><html lang="en"><head><meta charset="utf-8">` +
 		`<meta name="viewport" content="width=device-width,initial-scale=1"><title>memcode</title><style>` +
 		`html,body{height:100%}` +
 		`body{margin:0;background:#0a0a0a;color:#fafafa;` +
-		`font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;` +
+		`font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;` +
 		`display:flex;align-items:center;justify-content:center}` +
-		`.wrap{text-align:center;padding:24px;animation:fade .5s ease both}` +
-		`.mark{width:200px;max-width:56vw;height:auto;display:block;margin:0 auto 40px;opacity:.95}` +
-		`h1{margin:0 0 10px;font-size:28px;font-weight:600;letter-spacing:-.02em}` +
-		`.sub{margin:0;color:#8a8a8a;font-size:15px}` +
-		`.err{margin:0 0 6px;color:#f87171;font-size:15px}` +
-		`@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}` +
+		`.wrap{text-align:center;padding:40px;animation:fade .6s ease both}` +
+		`.mark{width:560px;max-width:82vw;height:150px;display:block;margin:0 auto 44px}` +
+		`h2{margin:0 0 14px;font-size:24px;font-weight:600;letter-spacing:-.01em}` +
+		`.sub{margin:0;color:#888;font-size:15px;line-height:1.5}` +
+		`.err{margin:0 0 10px;color:#f87171;font-size:15px}` +
+		`@keyframes fade{from{opacity:0}to{opacity:1}}` +
 		`</style></head><body><div class="wrap">` +
-		`<img class="mark" src="` + callbackWordmark + `" alt="memcode">` +
+		`<canvas id="mark" class="mark"></canvas>` +
 		inner +
-		`</div></body></html>`
+		`</div>` +
+		callbackScript +
+		`</body></html>`
 
 	io.WriteString(w, page)
 }