feat(cli-authorize): the CLI sign-in page on the shared auth card

docs/design/artboards/d215/index.html

@@ -705,6 +705,14 @@
 .authcard .alt { text-align: center; font-size: 13.5px; color: var(--se); }
 .authcard a { text-decoration: none; }
 .authcard .alt a { color: var(--c-text); font-weight: 600; }
+.authcard .field.code { font: 600 18px/1 var(--f-mono); letter-spacing: 0.08em; }
+.authcard .facts { margin: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--d); }
+.authcard .facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--d); font-size: 13px; }
+.authcard .facts div:first-child { border-top: 0; }
+.authcard .facts dt { color: var(--se); }
+.authcard .facts dd { margin: 0; font: 500 12.5px/1.4 var(--f-mono); color: var(--ink); text-align: right; overflow-wrap: anywhere; }
+.authcard h1 .host { white-space: nowrap; }
+.authcard .keys2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .authcard .sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--se); }
 .authcard .hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--se); }
 .authcard .hint a, .authcard .legal a { color: var(--c-text); font-weight: 600; }
@@ -1303,6 +1311,12 @@ <h1>Same look. <em>Less said.</em></h1>
 <div class="shead sub2"><h3>Choose a new password</h3><span class="route">/v2/reset-password?token=…</span></div><div class="rowa" style="grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px"><figure><figcaption><b>New password · 1440</b><span></span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="reset-password" data-vp="1440" data-state="default"><div class="app d"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><div class="fl"><div class="lab">New password</div><div class="field"><span class="mu">••••••••••</span></div></div><div class="fl"><div class="lab">Confirm password</div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Update password</button></div></div></div></div></figure><figure><figcaption><b>Updated · 1440</b><span></span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="reset-password" data-vp="1440" data-state="sent"><div class="app d"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><div class="alrt" role="status"><svg class="i" viewBox="0 0 24 24"><use href="#i-check"/></svg><span>Password updated. You can sign in now.</span></div><button class="b b-p" type="button">Go to sign in</button></div></div></div></div></figure></div><div class="rowa" style="grid-template-columns:repeat(4,minmax(0,300px));margin-top:18px"><figure><figcaption><b>New password · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="reset-password" data-vp="390" data-state="default"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><div class="fl"><div class="lab">New password</div><div class="field"><span class="mu">••••••••••</span></div></div><div class="fl"><div class="lab">Confirm password</div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Update password</button></div></div></div></div></figure><figure><figcaption><b>Mismatch · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="reset-password" data-vp="390" data-state="error"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><div class="alrt" role="alert"><svg class="i" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>Passwords do not match.</span></div><div class="fl"><div class="lab">New password</div><div class="field bad"><span class="mu">••••••••••</span></div></div><div class="fl"><div class="lab">Confirm password</div><div class="field bad"><span class="mu">••••••••</span></div></div><button class="b b-p" type="button">Update password</button></div></div></div></div></figure><figure><figcaption><b>Link expired · 390</b><span>request a new one inline</span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="reset-password" data-vp="390" data-state="error"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><div class="alrt" role="alert"><svg class="i" viewBox="0 0 24 24"><use href="#i-alert"/></svg><span>Reset failed — the link may have expired. <a href="#">Request a new link</a></span></div><div class="fl"><div class="lab">New password</div><div class="field"><span class="mu">••••••••••</span></div></div><div class="fl"><div class="lab">Confirm password</div><div class="field"><span class="mu">••••••••••</span></div></div><button class="b b-p" type="button">Update password</button></div></div></div></div></figure><figure><figcaption><b>No token · 390</b><span>page opened without the email link</span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="reset-password" data-vp="390" data-state="error"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Choose a new password</h1><p class="sub">This page needs the reset link from your email. Request a new one below.</p><button class="b b-p" type="button">Send me a reset link</button></div></div></div></div></figure></div><div class="notes" style="margin-top:18px"><ul><li><b>Both fields ring while an error is up,</b> same as sign in. Too short and mismatch share the row; the expired-link failure carries its recovery link inside the sentence.</li><li><b>No token</b> is a page of its own: one line and one key, no form to fill in.</li></ul></div>
 </section>
 
+<section class="surf" id="s-cli-authorize">
+  <div class="shead"><h2>CLI sign-in</h2><span class="route">/cli/authorize?code=…</span></div>
+  <div class="row1"><div class="notes"><ul><li><b>The sign-in card again.</b> <span class="cd">commonly login</span> opens this page from the terminal, so it carries the same brand row, card, field and keys as sign-in. The lettered “C” tile and the all-caps eyebrow are gone; the mark is the product mark.</li><li><b>The code is the field.</b> Mono, 18px, spaced, so it reads against the terminal at a glance. Signed out, it shows read-only above Sign in to continue, and comes back filled.</li><li><b>Approving is the one decision.</b> What is asking (client, instance, when) sits in a bordered list; the caution is the notice row with the info glyph, not a warning colour; Deny and Authorize share the row, Authorize in ink.</li></ul><h3>Each state, one line</h3><table class="ctl"><tr><td>Enter code</td><td><b>Drawn.</b> Signed in, from a link without a code or by hand.</td></tr><tr><td>Signed out</td><td><b>Not drawn.</b> The field is read-only and the key is Sign in to continue.</td></tr><tr><td>Approve</td><td><b>Drawn.</b> After Continue finds a pending request.</td></tr><tr><td>Authorized</td><td><b>Drawn.</b> Title and a status row.</td></tr><tr><td>Denied, expired, used, error</td><td><b>Not drawn.</b> Same as Authorized: the title says which, and one row says what to do in the terminal.</td></tr></table></div><figure><figcaption><b>Enter code · 1440</b><span>signed in</span></figcaption><div class="frame" style="--fw:1440;--fh:900" data-surface="cli-authorize" data-vp="1440" data-state="default"><div class="app d"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Authorize Commonly CLI</h1><p class="sub">Enter the code shown in your terminal.</p><div class="fl"><div class="lab">Device code</div><div class="field code"><span>WDJB-MJHT</span></div></div><button class="b b-p" type="button">Continue</button></div></div></div></div></figure></div>
+  <div class="rowa" style="grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px"><figure><figcaption><b>Enter code · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="cli-authorize" data-vp="390" data-state="default"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Authorize Commonly CLI</h1><p class="sub">Enter the code shown in your terminal.</p><div class="fl"><div class="lab">Device code</div><div class="field code"><span>WDJB-MJHT</span></div></div><button class="b b-p" type="button">Continue</button></div></div></div></div></figure><figure><figcaption><b>Approve · 390</b><span>a pending request</span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="cli-authorize" data-vp="390" data-state="confirm"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Authorize <span class="host">alex-mbp</span> as @alex?</h1><p class="sub">This device is asking to use your Commonly account.</p><dl class="facts"><div><dt>Client</dt><dd>commonly-cli 0.1.84</dd></div><div><dt>Instance</dt><dd>api.commonly.me</dd></div><div><dt>Requested</dt><dd>just now</dd></div></dl><div class="alrt" role="note"><svg class="i" viewBox="0 0 24 24"><use href="#i-info"/></svg><span>Only approve a code you requested from your own terminal.</span></div><div class="keys2"><button class="b b-s" type="button">Deny</button><button class="b b-p" type="button">Authorize</button></div></div></div></div></div></figure><figure><figcaption><b>Authorized · 390</b><span></span></figcaption><div class="frame" style="--fw:390;--fh:844" data-surface="cli-authorize" data-vp="390" data-state="done"><div class="app m"><div class="authpage"><div class="authcard"><div class="brand"><span class="logo"><svg class="i" viewBox="0 0 24 24"><use href="#i-mark"/></svg></span>commonly</div><h1>Device authorized</h1><div class="alrt" role="status"><svg class="i" viewBox="0 0 24 24"><use href="#i-check"/></svg><span>You can return to your terminal.</span></div></div></div></div></div></figure></div>
+</section>
+
 <section class="surf" id="s-dark">
   <div class="shead"><h2>Dark mode</h2><span class="route">one dark value per token</span></div>
   <div class="dm">

frontend/src/index.tsx

@@ -15,11 +15,12 @@ if (process.env.REACT_APP_SENTRY_DSN) {
 // CssBaseline's palette.background.default #0b1220 — injected at render),
 // and a class added in V2App's useEffect wins only AFTER first paint, so
 // every v2 load still flashed dark for a frame (Sam, 2026-08-24). '/' and
-// '/v2*' are the v2 front door; V2App's effect keeps the class in sync for
+// '/v2*' are the v2 front door (and /cli/authorize, a v2 page mounted outside
+// V2App that keeps the class itself); V2App's effect keeps the class in sync for
 // SPA navigation after boot. Legacy deep links that redirect into /v2 may
 // still flash once — the exception, not the entry path.
 const bootPath = window.location.pathname;
-if (bootPath === '/' || bootPath.startsWith('/v2')) {
+if (bootPath === '/' || bootPath.startsWith('/v2') || /^\/cli\/authorize\/?$/.test(bootPath)) {
   document.body.classList.add('v2-canvas');
 }
 if (bootPath === '/guides' || bootPath.startsWith('/guides/')) {