@volter/twin-googleoauth 0.1.0

package/dist/client/googleoauth-consent.css

@@ -0,0 +1,207 @@
+/* Google's consent screen, as close as a twin gets without shipping the vendor's assets:
+   the Google Sans-ish system stack, the centred card on a grey field, the blue pill button. */
+:root {
+  --g-blue: #1a73e8;
+  --g-text: #202124;
+  --g-muted: #5f6368;
+  --g-border: #dadce0;
+  --g-bg: #f1f3f4;
+  --g-red: #d93025;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 48px 16px;
+  background: var(--g-bg);
+  color: var(--g-text);
+  font-family: 'Google Sans', Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.card {
+  width: 100%;
+  max-width: 450px;
+  background: #fff;
+  border: 1px solid var(--g-border);
+  border-radius: 8px;
+  padding: 48px 40px 36px;
+}
+.card-error { max-width: 512px; }
+
+.g-mark {
+  font-size: 24px;
+  font-weight: 500;
+  letter-spacing: -0.5px;
+  margin-bottom: 16px;
+}
+.g-b { color: #4285f4; }
+.g-r { color: #ea4335; }
+.g-y { color: #fbbc05; }
+.g-g { color: #34a853; }
+
+.title {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1.3;
+  margin: 0 0 8px;
+}
+.title .app-name { font-weight: 500; }
+
+.subtitle {
+  margin: 0 0 24px;
+  color: var(--g-muted);
+}
+
+.account-list {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--g-border);
+  margin: 8px 0 16px;
+}
+
+.account-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  padding: 12px 8px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--g-border);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+.account-row:hover { background: #f8f9fa; }
+
+.avatar {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--g-blue);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+}
+
+.account-text { display: flex; flex-direction: column; }
+.account-name { font-weight: 500; }
+.account-email { color: var(--g-muted); }
+
+.chosen-account {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--g-border);
+  border-radius: 16px;
+  padding: 4px 12px 4px 4px;
+  margin-bottom: 24px;
+}
+.chosen-account .avatar { width: 24px; height: 24px; font-size: 12px; }
+
+.unverified {
+  background: #fef7e0;
+  border: 1px solid #fdd663;
+  border-radius: 4px;
+  padding: 8px 12px;
+  margin: 0 0 16px;
+  color: #7f5700;
+}
+
+.scope-list {
+  list-style: none;
+  margin: 0 0 24px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.scope-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.scope-check { margin-top: 3px; accent-color: var(--g-blue); }
+.scope-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
+.scope-text { flex: 1 1 auto; }
+
+.scope-tag {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  border-radius: 4px;
+  padding: 1px 6px;
+  background: #e8f0fe;
+  color: #174ea6;
+}
+.scope-tag-unknown { background: #fce8e6; color: #a50e0e; }
+
+.granular-controls {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: -16px 0 8px;
+}
+.granular-controls .btn { padding: 4px 12px; }
+
+.legal { color: var(--g-muted); margin: 0 0 24px; }
+.support { color: var(--g-muted); margin: 24px 0 0; font-size: 12px; }
+
+.actions { display: flex; justify-content: flex-end; gap: 8px; }
+
+.btn {
+  font: inherit;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 9px 24px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.btn-text { background: none; color: var(--g-blue); }
+.btn-text:hover { background: #f1f8ff; }
+.btn-primary { background: var(--g-blue); color: #fff; }
+.btn-primary:hover { background: #1765cc; }
+
+.error-detail { margin: 0 0 24px; color: var(--g-muted); }
+.error-code {
+  margin: 0;
+  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--g-red);
+}
+.error-request {
+  margin: 8px 0 0;
+  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--g-muted);
+  word-break: break-all;
+}
+
+/* Google puts a "Sign in with Google" line beside the wordmark on both screens. */
+.g-header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+.g-signin { color: var(--g-muted); font-size: 13px; }
+
+.support summary,
+.error-details summary {
+  cursor: pointer;
+  color: var(--g-blue);
+  font-weight: 500;
+}
+.support p,
+.error-details p { margin: 8px 0 0; }
+.error-details { margin-top: 16px; }

package/dist/client/googleoauth-consent.d.ts

@@ -0,0 +1,88 @@
+export type ConsentAccount = {
+    sub: string;
+    email: string;
+    name: string;
+    givenName: string;
+    picture: string;
+    hd?: string;
+};
+export type ConsentScopeRow = {
+    scope: string;
+    label: string;
+    group: 'openid' | 'product';
+    sensitivity?: 'sensitive' | 'restricted';
+    known: boolean;
+    declinable: boolean;
+};
+export type ConsentApp = {
+    clientId: string;
+    name: string;
+    supportEmail: string;
+    verified: boolean;
+};
+/**
+ * Google's GRANULAR-CONSENT RULE, from its own documentation: the per-scope checkbox screen appears
+ * only when the request mixes a sign-in scope with a non-sign-in one, OR asks for two or more
+ * non-sign-in scopes. A single scope, or sign-in scopes alone, is all-or-nothing with no checkboxes
+ * at all. Modelling this matters: an integration that asks for exactly one product scope can never
+ * receive a partial grant, and a twin that offered a checkbox there would invent a code path the
+ * app will never see in production.
+ */
+export declare function granularConsentApplies(scopes: Array<{
+    declinable: boolean;
+}>): boolean;
+export type ConsentView = {
+    step: 'choose' | 'consent';
+    requestId: string;
+    /** Where the twin is reachable — the form actions post back here. */
+    origin: string;
+    app: ConsentApp;
+    accounts: ConsentAccount[];
+    scopes: ConsentScopeRow[];
+    /** The chosen account; present on the `consent` step. */
+    account?: ConsentAccount;
+};
+/** STEP 1 — "Choose an account". Each account is a real submit button, so a click IS the choice. */
+export declare function AccountChooser({ view }: {
+    view: ConsentView;
+}): import("react").JSX.Element;
+/**
+ * The per-scope rows. Checkboxes appear only when `granularConsentApplies` says Google would show
+ * them; otherwise every scope is a fixed hidden input and the grant is all-or-nothing.
+ */
+export declare function ScopeList({ scopes, granular }: {
+    scopes: ConsentScopeRow[];
+    granular?: boolean;
+}): import("react").JSX.Element;
+/** STEP 2 — the consent screen proper. */
+export declare function ConsentScreen({ view }: {
+    view: ConsentView;
+}): import("react").JSX.Element;
+/** The whole page body for either step — the single entry the server renders. */
+export declare function ConsentPage({ view }: {
+    view: ConsentView;
+}): import("react").JSX.Element;
+export type ErrorPageProps = {
+    status: number;
+    code: string;
+    summary: string;
+    detail: string;
+    /** The offending parameter Google echoes into its "Request details:" dialog. */
+    requestPath?: string;
+    /** The documentation URL Google links from the error page. */
+    docUrl?: string;
+    /** The app's registered name, when the failing request named a known client. */
+    appName?: string;
+};
+/**
+ * Google's OAuth error PAGE — what a browser sees when the twin cannot trust the redirect_uri and
+ * therefore must not bounce the error back to it. The heading reproduces Google's own
+ * "Error <status>: <code>" line, which is the string every integrator searches for.
+ */
+export declare function ErrorPage({ status, code, summary, detail, requestPath, docUrl, appName }: ErrorPageProps): import("react").JSX.Element;
+/**
+ * The bundled browser entry. Mounts the granular-consent "select all" control into the
+ * server-rendered EMPTY `#granular-consent-controls` slot — an addition, never a re-render of
+ * server markup, so the no-JavaScript path and the enhanced path agree by construction.
+ */
+export declare function hydrateConsentControls(): void;

package/dist/client/googleoauth-consent.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Google's CONSENT SCREEN, as React — the vendor's own product UI, not a dashboard mirror.
+//
+// These components are the ONE renderer for the screen: the twin server-renders them with
+// `renderToStaticMarkup` to answer `GET /o/oauth2/v2/auth`, the capability verifies render the SAME
+// exported components over the SAME projection, and the Playwright journey drives the HTML they
+// emit. There is no second implementation to drift from.
+//
+// PROGRESSIVE ENHANCEMENT, DELIBERATELY. The whole flow is plain `<form>` submits — choosing an
+// account is a GET submit, Continue/Cancel are POST submits with a `decision` value. No JavaScript
+// is required to complete an OAuth round trip against this twin, which matters because the twin is
+// driven by headless browsers, by `curl`, and by library redirect-followers that execute nothing.
+// The bundled client (`hydrateConsentControls` below) only ADDS the granular-consent "select all"
+// affordance into an element that is EMPTY server-side, so there is no hydration mismatch to
+// stumble over.
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+/**
+ * Google's GRANULAR-CONSENT RULE, from its own documentation: the per-scope checkbox screen appears
+ * only when the request mixes a sign-in scope with a non-sign-in one, OR asks for two or more
+ * non-sign-in scopes. A single scope, or sign-in scopes alone, is all-or-nothing with no checkboxes
+ * at all. Modelling this matters: an integration that asks for exactly one product scope can never
+ * receive a partial grant, and a twin that offered a checkbox there would invent a code path the
+ * app will never see in production.
+ */
+export function granularConsentApplies(scopes) {
+    const nonSignIn = scopes.filter((s) => s.declinable).length;
+    const signIn = scopes.length - nonSignIn;
+    return nonSignIn >= 2 || (nonSignIn >= 1 && signIn >= 1);
+}
+/** The Google wordmark, drawn rather than fetched — a twin never reaches out to a vendor CDN. */
+function GoogleMark() {
+    return (_jsxs("div", { className: "g-header", children: [_jsxs("span", { className: "g-mark", "aria-hidden": "true", children: [_jsx("span", { className: "g-b", children: "G" }), _jsx("span", { className: "g-r", children: "o" }), _jsx("span", { className: "g-y", children: "o" }), _jsx("span", { className: "g-b", children: "g" }), _jsx("span", { className: "g-g", children: "l" }), _jsx("span", { className: "g-r", children: "e" })] }), _jsx("span", { className: "g-signin", children: "Sign in with Google" })] }));
+}
+function Avatar({ account }) {
+    // The picture URL is a lh3.googleusercontent.com link the twin does NOT fetch (offline, always);
+    // the initial is the honest local stand-in for it, and the URL travels in the id_token where a
+    // real integration reads it.
+    return (_jsx("span", { className: "avatar", "aria-hidden": "true", children: (account.givenName || account.name || account.email).slice(0, 1).toUpperCase() }));
+}
+/** STEP 1 — "Choose an account". Each account is a real submit button, so a click IS the choice. */
+export function AccountChooser({ view }) {
+    return (_jsxs("div", { className: "card", children: [_jsx(GoogleMark, {}), _jsx("h1", { className: "title", children: "Choose an account" }), _jsxs("p", { className: "subtitle", children: ["to continue to ", _jsx("strong", { className: "app-name", children: view.app.name })] }), _jsxs("form", { method: "GET", action: `${view.origin}/_twin/consent`, className: "account-list", children: [_jsx("input", { type: "hidden", name: "auth_request", value: view.requestId }), view.accounts.map((account) => (_jsxs("button", { className: "account-row", type: "submit", name: "sub", value: account.sub, children: [_jsx(Avatar, { account: account }), _jsxs("span", { className: "account-text", children: [_jsx("span", { className: "account-name", children: account.name }), _jsx("span", { className: "account-email", children: account.email })] })] }, account.sub)))] }), _jsxs("p", { className: "legal", children: ["To continue, Google will share your name, email address, language preference, and profile picture with ", view.app.name, "."] })] }));
+}
+/**
+ * The per-scope rows. Checkboxes appear only when `granularConsentApplies` says Google would show
+ * them; otherwise every scope is a fixed hidden input and the grant is all-or-nothing.
+ */
+export function ScopeList({ scopes, granular }) {
+    const checkboxes = granular ?? granularConsentApplies(scopes);
+    return (_jsx("ul", { className: "scope-list", children: scopes.map((row) => (_jsxs("li", { className: "scope-row", children: [checkboxes && row.declinable ? (_jsx("input", { type: "checkbox", name: "scope", value: row.scope, defaultChecked: true, id: `scope-${row.scope}`, className: "scope-check" })) : (_jsx("input", { type: "hidden", name: "scope", value: row.scope })), _jsxs("label", { htmlFor: checkboxes && row.declinable ? `scope-${row.scope}` : undefined, className: "scope-label", children: [_jsx("span", { className: "scope-text", children: row.label }), row.sensitivity ? _jsx("span", { className: "scope-tag", children: row.sensitivity }) : null, row.known ? null : _jsx("span", { className: "scope-tag scope-tag-unknown", children: "not in the twin's scope catalog" })] })] }, row.scope))) }));
+}
+/** STEP 2 — the consent screen proper. */
+export function ConsentScreen({ view }) {
+    const account = view.account;
+    const granular = granularConsentApplies(view.scopes);
+    return (_jsxs("div", { className: "card", children: [_jsx(GoogleMark, {}), _jsxs("h1", { className: "title", children: [_jsx("strong", { className: "app-name", children: view.app.name }), " wants access to your Google Account"] }), account ? (_jsxs("div", { className: "chosen-account", children: [_jsx(Avatar, { account: account }), _jsx("span", { className: "account-email", children: account.email })] })) : null, view.app.verified ? null : (_jsx("p", { className: "unverified", children: "Google hasn't verified this app" })), _jsx("p", { className: "subtitle", children: granular ? `Select what ${view.app.name} can access` : `This will allow ${view.app.name} to:` }), _jsxs("form", { method: "POST", action: `${view.origin}/_twin/consent`, className: "consent-form", children: [_jsx("input", { type: "hidden", name: "auth_request", value: view.requestId }), _jsx("input", { type: "hidden", name: "sub", value: account?.sub ?? '' }), granular ? _jsx("div", { id: "granular-consent-controls" }) : null, _jsx(ScopeList, { scopes: view.scopes, granular: granular }), _jsxs("p", { className: "legal", children: ["Make sure you trust ", view.app.name, ". You may be sharing sensitive info with this site or app. You can always see or remove access in your Google Account."] }), _jsxs("div", { className: "actions", children: [_jsx("button", { className: "btn btn-text", type: "submit", name: "decision", value: "deny", children: "Cancel" }), _jsx("button", { className: "btn btn-primary", type: "submit", name: "decision", value: "allow", children: "Continue" })] })] }), _jsxs("details", { className: "support", children: [_jsx("summary", { children: "Developer Information" }), _jsxs("p", { children: ["App name: ", view.app.name] }), _jsxs("p", { children: ["Support email: ", view.app.supportEmail] })] })] }));
+}
+/** The whole page body for either step — the single entry the server renders. */
+export function ConsentPage({ view }) {
+    return view.step === 'choose' ? _jsx(AccountChooser, { view: view }) : _jsx(ConsentScreen, { view: view });
+}
+/**
+ * Google's OAuth error PAGE — what a browser sees when the twin cannot trust the redirect_uri and
+ * therefore must not bounce the error back to it. The heading reproduces Google's own
+ * "Error <status>: <code>" line, which is the string every integrator searches for.
+ */
+export function ErrorPage({ status, code, summary, detail, requestPath, docUrl, appName }) {
+    return (_jsxs("div", { className: "card card-error", children: [_jsx(GoogleMark, {}), _jsx("h1", { className: "title", children: summary }), detail.split('\n\n').map((paragraph, i) => (_jsx("p", { className: "error-detail", children: paragraph }, i))), _jsxs("p", { className: "error-code", children: ["Error ", status, ": ", code] }), _jsxs("details", { className: "error-details", children: [_jsxs("summary", { children: ["If you are a developer of ", appName ?? 'this app', ", see error details."] }), requestPath ? _jsxs("p", { className: "error-request", children: ["Request details: ", requestPath] }) : null, _jsx("p", { className: "error-request", children: "flowName=GeneralOAuthFlow" }), docUrl ? _jsxs("p", { className: "error-request", children: ["Related developer documentation: ", docUrl] }) : null] })] }));
+}
+/**
+ * The bundled browser entry. Mounts the granular-consent "select all" control into the
+ * server-rendered EMPTY `#granular-consent-controls` slot — an addition, never a re-render of
+ * server markup, so the no-JavaScript path and the enhanced path agree by construction.
+ */
+export function hydrateConsentControls() {
+    const slot = document.getElementById('granular-consent-controls');
+    if (!slot)
+        return;
+    const boxes = () => Array.from(document.querySelectorAll('input.scope-check'));
+    if (boxes().length === 0)
+        return;
+    // ONLY the pill. The "Select what <App> can access" heading is SERVER-RENDERED by
+    // `ConsentScreen`, so repeating it here would show it twice — which it did, until the journey's
+    // filmstrip made the duplication obvious. Google shows the heading once, with the pill beside it.
+    createRoot(slot).render(_jsx(StrictMode, { children: _jsx("div", { className: "granular-controls", children: _jsx("button", { className: "btn btn-text", type: "button", onClick: () => {
+                    const all = boxes();
+                    const target = all.some((b) => !b.checked);
+                    for (const b of all)
+                        b.checked = target;
+                }, children: "Select all" }) }) }));
+}
+if (typeof document !== 'undefined')
+    hydrateConsentControls();

package/dist/client/googleoauth-consent.tsx

@@ -0,0 +1,286 @@
+// Google's CONSENT SCREEN, as React — the vendor's own product UI, not a dashboard mirror.
+//
+// These components are the ONE renderer for the screen: the twin server-renders them with
+// `renderToStaticMarkup` to answer `GET /o/oauth2/v2/auth`, the capability verifies render the SAME
+// exported components over the SAME projection, and the Playwright journey drives the HTML they
+// emit. There is no second implementation to drift from.
+//
+// PROGRESSIVE ENHANCEMENT, DELIBERATELY. The whole flow is plain `<form>` submits — choosing an
+// account is a GET submit, Continue/Cancel are POST submits with a `decision` value. No JavaScript
+// is required to complete an OAuth round trip against this twin, which matters because the twin is
+// driven by headless browsers, by `curl`, and by library redirect-followers that execute nothing.
+// The bundled client (`hydrateConsentControls` below) only ADDS the granular-consent "select all"
+// affordance into an element that is EMPTY server-side, so there is no hydration mismatch to
+// stumble over.
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+export type ConsentAccount = {
+  sub: string;
+  email: string;
+  name: string;
+  givenName: string;
+  picture: string;
+  hd?: string;
+};
+
+export type ConsentScopeRow = {
+  scope: string;
+  label: string;
+  group: 'openid' | 'product';
+  sensitivity?: 'sensitive' | 'restricted';
+  known: boolean;
+  declinable: boolean;
+};
+
+export type ConsentApp = {
+  clientId: string;
+  name: string;
+  supportEmail: string;
+  verified: boolean;
+};
+
+/**
+ * Google's GRANULAR-CONSENT RULE, from its own documentation: the per-scope checkbox screen appears
+ * only when the request mixes a sign-in scope with a non-sign-in one, OR asks for two or more
+ * non-sign-in scopes. A single scope, or sign-in scopes alone, is all-or-nothing with no checkboxes
+ * at all. Modelling this matters: an integration that asks for exactly one product scope can never
+ * receive a partial grant, and a twin that offered a checkbox there would invent a code path the
+ * app will never see in production.
+ */
+export function granularConsentApplies(scopes: Array<{ declinable: boolean }>): boolean {
+  const nonSignIn = scopes.filter((s) => s.declinable).length;
+  const signIn = scopes.length - nonSignIn;
+  return nonSignIn >= 2 || (nonSignIn >= 1 && signIn >= 1);
+}
+
+export type ConsentView = {
+  step: 'choose' | 'consent';
+  requestId: string;
+  /** Where the twin is reachable — the form actions post back here. */
+  origin: string;
+  app: ConsentApp;
+  accounts: ConsentAccount[];
+  scopes: ConsentScopeRow[];
+  /** The chosen account; present on the `consent` step. */
+  account?: ConsentAccount;
+};
+
+/** The Google wordmark, drawn rather than fetched — a twin never reaches out to a vendor CDN. */
+function GoogleMark() {
+  return (
+    <div className="g-header">
+      <span className="g-mark" aria-hidden="true">
+        <span className="g-b">G</span>
+        <span className="g-r">o</span>
+        <span className="g-y">o</span>
+        <span className="g-b">g</span>
+        <span className="g-g">l</span>
+        <span className="g-r">e</span>
+      </span>
+      <span className="g-signin">Sign in with Google</span>
+    </div>
+  );
+}
+
+function Avatar({ account }: { account: ConsentAccount }) {
+  // The picture URL is a lh3.googleusercontent.com link the twin does NOT fetch (offline, always);
+  // the initial is the honest local stand-in for it, and the URL travels in the id_token where a
+  // real integration reads it.
+  return (
+    <span className="avatar" aria-hidden="true">
+      {(account.givenName || account.name || account.email).slice(0, 1).toUpperCase()}
+    </span>
+  );
+}
+
+/** STEP 1 — "Choose an account". Each account is a real submit button, so a click IS the choice. */
+export function AccountChooser({ view }: { view: ConsentView }) {
+  return (
+    <div className="card">
+      <GoogleMark />
+      <h1 className="title">Choose an account</h1>
+      <p className="subtitle">
+        to continue to <strong className="app-name">{view.app.name}</strong>
+      </p>
+      <form method="GET" action={`${view.origin}/_twin/consent`} className="account-list">
+        <input type="hidden" name="auth_request" value={view.requestId} />
+        {view.accounts.map((account) => (
+          <button key={account.sub} className="account-row" type="submit" name="sub" value={account.sub}>
+            <Avatar account={account} />
+            <span className="account-text">
+              <span className="account-name">{account.name}</span>
+              <span className="account-email">{account.email}</span>
+            </span>
+          </button>
+        ))}
+      </form>
+      <p className="legal">
+        To continue, Google will share your name, email address, language preference, and profile
+        picture with {view.app.name}.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The per-scope rows. Checkboxes appear only when `granularConsentApplies` says Google would show
+ * them; otherwise every scope is a fixed hidden input and the grant is all-or-nothing.
+ */
+export function ScopeList({ scopes, granular }: { scopes: ConsentScopeRow[]; granular?: boolean }) {
+  const checkboxes = granular ?? granularConsentApplies(scopes);
+  return (
+    <ul className="scope-list">
+      {scopes.map((row) => (
+        <li key={row.scope} className="scope-row">
+          {checkboxes && row.declinable ? (
+            <input type="checkbox" name="scope" value={row.scope} defaultChecked id={`scope-${row.scope}`} className="scope-check" />
+          ) : (
+            <input type="hidden" name="scope" value={row.scope} />
+          )}
+          <label htmlFor={checkboxes && row.declinable ? `scope-${row.scope}` : undefined} className="scope-label">
+            <span className="scope-text">{row.label}</span>
+            {row.sensitivity ? <span className="scope-tag">{row.sensitivity}</span> : null}
+            {row.known ? null : <span className="scope-tag scope-tag-unknown">not in the twin&apos;s scope catalog</span>}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** STEP 2 — the consent screen proper. */
+export function ConsentScreen({ view }: { view: ConsentView }) {
+  const account = view.account;
+  const granular = granularConsentApplies(view.scopes);
+  return (
+    <div className="card">
+      <GoogleMark />
+      <h1 className="title">
+        <strong className="app-name">{view.app.name}</strong> wants access to your Google Account
+      </h1>
+      {account ? (
+        <div className="chosen-account">
+          <Avatar account={account} />
+          <span className="account-email">{account.email}</span>
+        </div>
+      ) : null}
+      {view.app.verified ? null : (
+        <p className="unverified">Google hasn&apos;t verified this app</p>
+      )}
+      <p className="subtitle">
+        {granular ? `Select what ${view.app.name} can access` : `This will allow ${view.app.name} to:`}
+      </p>
+      <form method="POST" action={`${view.origin}/_twin/consent`} className="consent-form">
+        <input type="hidden" name="auth_request" value={view.requestId} />
+        <input type="hidden" name="sub" value={account?.sub ?? ''} />
+        {/* Empty server-side on purpose — the bundled client mounts the "Select all" affordance
+            here, so there is no server/client markup to disagree about. */}
+        {granular ? <div id="granular-consent-controls" /> : null}
+        <ScopeList scopes={view.scopes} granular={granular} />
+        <p className="legal">
+          Make sure you trust {view.app.name}. You may be sharing sensitive info with this site or
+          app. You can always see or remove access in your Google Account.
+        </p>
+        <div className="actions">
+          <button className="btn btn-text" type="submit" name="decision" value="deny">
+            Cancel
+          </button>
+          <button className="btn btn-primary" type="submit" name="decision" value="allow">
+            Continue
+          </button>
+        </div>
+      </form>
+      {/* Google hides the developer's details behind the app-name link, in a dialog headed
+          "Developer Information" with "App name:" and "Support email:" rows. A <details> is the
+          no-JavaScript equivalent of that disclosure. */}
+      <details className="support">
+        <summary>Developer Information</summary>
+        <p>App name: {view.app.name}</p>
+        <p>Support email: {view.app.supportEmail}</p>
+      </details>
+    </div>
+  );
+}
+
+/** The whole page body for either step — the single entry the server renders. */
+export function ConsentPage({ view }: { view: ConsentView }) {
+  return view.step === 'choose' ? <AccountChooser view={view} /> : <ConsentScreen view={view} />;
+}
+
+export type ErrorPageProps = {
+  status: number;
+  code: string;
+  summary: string;
+  detail: string;
+  /** The offending parameter Google echoes into its "Request details:" dialog. */
+  requestPath?: string;
+  /** The documentation URL Google links from the error page. */
+  docUrl?: string;
+  /** The app's registered name, when the failing request named a known client. */
+  appName?: string;
+};
+
+/**
+ * Google's OAuth error PAGE — what a browser sees when the twin cannot trust the redirect_uri and
+ * therefore must not bounce the error back to it. The heading reproduces Google's own
+ * "Error <status>: <code>" line, which is the string every integrator searches for.
+ */
+export function ErrorPage({ status, code, summary, detail, requestPath, docUrl, appName }: ErrorPageProps) {
+  return (
+    <div className="card card-error">
+      <GoogleMark />
+      <h1 className="title">{summary}</h1>
+      {detail.split('\n\n').map((paragraph, i) => (
+        <p className="error-detail" key={i}>
+          {paragraph}
+        </p>
+      ))}
+      <p className="error-code">
+        Error {status}: {code}
+      </p>
+      <details className="error-details">
+        <summary>
+          If you are a developer of {appName ?? 'this app'}, see error details.
+        </summary>
+        {requestPath ? <p className="error-request">Request details: {requestPath}</p> : null}
+        <p className="error-request">flowName=GeneralOAuthFlow</p>
+        {docUrl ? <p className="error-request">Related developer documentation: {docUrl}</p> : null}
+      </details>
+    </div>
+  );
+}
+
+/**
+ * The bundled browser entry. Mounts the granular-consent "select all" control into the
+ * server-rendered EMPTY `#granular-consent-controls` slot — an addition, never a re-render of
+ * server markup, so the no-JavaScript path and the enhanced path agree by construction.
+ */
+export function hydrateConsentControls(): void {
+  const slot = document.getElementById('granular-consent-controls');
+  if (!slot) return;
+  const boxes = () => Array.from(document.querySelectorAll<HTMLInputElement>('input.scope-check'));
+  if (boxes().length === 0) return;
+  // ONLY the pill. The "Select what <App> can access" heading is SERVER-RENDERED by
+  // `ConsentScreen`, so repeating it here would show it twice — which it did, until the journey's
+  // filmstrip made the duplication obvious. Google shows the heading once, with the pill beside it.
+  createRoot(slot).render(
+    <StrictMode>
+      <div className="granular-controls">
+        <button
+          className="btn btn-text"
+          type="button"
+          onClick={() => {
+            const all = boxes();
+            const target = all.some((b) => !b.checked);
+            for (const b of all) b.checked = target;
+          }}
+        >
+          Select all
+        </button>
+      </div>
+    </StrictMode>,
+  );
+}
+
+if (typeof document !== 'undefined') hydrateConsentControls();