@tempoxyz/id 0.0.0-pr-187.sha-eed04d3

package/src/app/routes/[_].flows.tsx

@@ -0,0 +1,3001 @@
+/**
+ * Lays out every Tempo ID flow as a canvas of artboards: where each flow enters, the screens it
+ * shows, the request on each arrow, and where it exits. Each artboard renders its page's screen
+ * from `src/app/screens/` with sample props, so the canvas changes with the pages. An app's own
+ * screens, in the headless flows, render with the third-party tokens, so they read apart from
+ * Tempo ID's.
+ * @module
+ */
+import { createFileRoute } from '@tanstack/react-router'
+import type { FormEvent, ReactNode } from 'react'
+import ChevronRight from '~icons/lucide/chevron-right'
+import { CodeInput } from '../components/CodeInput.js'
+import { Account } from '../screens/Account.js'
+import { Approval, InvalidRequest } from '../screens/Approval.js'
+import { ChooseAccount } from '../screens/ChooseAccount.js'
+import { Deposit } from '../screens/Deposit.js'
+import { DeviceApproval } from '../screens/DeviceApproval.js'
+import { SignIn } from '../screens/SignIn.js'
+import { style, variants, vars } from '../zyzz.config.js'
+
+/** One box in a flow: an entry point, a Tempo ID screen, or an external step such as a provider. */
+type Node = {
+  /** A secondary line, such as the request that enters the flow. */
+  detail?: string | undefined
+  /** The request or event on the arrow that leads into this node. Absent on the first node. */
+  edge?: string | undefined
+  /** The screen's or the step's name. */
+  name: string
+  /** Who renders the screen: Tempo ID when absent, or `app` for an app's own interface. */
+  owner?: 'app' | undefined
+  /** The screen, for an artboard. An external step has none. */
+  screen?: ReactNode | undefined
+}
+
+/** One path through Tempo ID, from its entry point to its exit. */
+type Flow = {
+  /** What the flow does, and when it applies, with code spans between backticks. */
+  description: string
+  /** The entry point, each screen or external step, and the exit, in order. */
+  nodes: readonly Node[]
+  /** The flow's name. */
+  title: string
+}
+
+/** A titled group of related flows. */
+type Section = {
+  /** The flows, in reading order. */
+  flows: readonly Flow[]
+  /** The group's name. */
+  title: string
+}
+
+export const Route = createFileRoute('/_/flows')({
+  // The route splitter drops the style namespace, so the component stays in this chunk.
+  codeSplitGroupings: [],
+  component: Page,
+  // The canvas renders in the browser alone, since its sample balances format in the browser's
+  // locale and its sample expiries read the clock.
+  ssr: false,
+})
+
+/** Renders the canvas. */
+function Page(): ReactNode {
+  return (
+    <main {...styles.canvas()}>
+      <header {...styles.intro()}>
+        <h1 {...styles.title()}>Flows</h1>
+        <p {...styles.lede()}>
+          Every path through Tempo ID, from the entry point on the left to the
+          exit on the right. Each arrow names the request or event that leads to
+          the next step. Scroll to pan.
+        </p>
+      </header>
+      {sections().map((section) => (
+        <section {...styles.section()} key={section.title}>
+          <h2 {...styles.sectionTitle()}>{section.title}</h2>
+          {section.flows.map((flow) => (
+            <article {...styles.flow()} key={flow.title}>
+              <header {...styles.flowHeader()}>
+                <h3 {...styles.flowTitle()}>{flow.title}</h3>
+                <p {...styles.flowDescription()}>
+                  <Description text={flow.description} />
+                </p>
+              </header>
+              <ol {...styles.row()}>
+                {flow.nodes.map((node, index) => (
+                  <li {...styles.step()} key={`${index}:${node.name}`}>
+                    {index > 0 ? <Arrow label={node.edge} /> : null}
+                    {node.screen ? (
+                      <figure {...styles.artboard()}>
+                        <figcaption {...styles.frameLabel()}>
+                          {node.owner === 'app'
+                            ? `App · ${node.name}`
+                            : node.name}
+                        </figcaption>
+                        {node.owner === 'app' ? (
+                          <div {...vars({ set: 'thirdParty' })}>
+                            <div {...styles.frame()}>{node.screen}</div>
+                          </div>
+                        ) : (
+                          <div {...styles.frame()}>{node.screen}</div>
+                        )}
+                      </figure>
+                    ) : (
+                      <External
+                        detail={node.detail}
+                        kind={(() => {
+                          if (index === 0) return 'Entry'
+                          if (index === flow.nodes.length - 1) return 'Exit'
+                          return 'External'
+                        })()}
+                        name={node.name}
+                      />
+                    )}
+                  </li>
+                ))}
+              </ol>
+            </article>
+          ))}
+        </section>
+      ))}
+    </main>
+  )
+}
+
+/** Renders `text`, with each span between backticks as code. */
+function Description(props: Description.Props): ReactNode {
+  // Splitting on the backticks puts each code span at an odd index.
+  return props.text.split('`').map((part, index) =>
+    index % 2 ? (
+      <code {...styles.code()} key={index}>
+        {part}
+      </code>
+    ) : (
+      part
+    ),
+  )
+}
+
+declare namespace Description {
+  type Props = {
+    /** The flow's description, with code spans between backticks. */
+    text: string
+  }
+}
+
+/** A labeled arrow between two nodes. */
+function Arrow(props: Arrow.Props): ReactNode {
+  return (
+    <span {...styles.arrow()} aria-label={props.label ?? 'Then'} role="img">
+      <span {...styles.edge()}>{props.label}</span>
+      <span {...styles.shaft()}>
+        <span {...styles.line()} />
+        <ChevronRight {...styles.head()} aria-hidden />
+      </span>
+    </span>
+  )
+}
+
+declare namespace Arrow {
+  type Props = {
+    /** The request or event that the arrow stands for. */
+    label?: string | undefined
+  }
+}
+
+/** A step outside Tempo ID's pages, such as the app that starts a flow or a provider's page. */
+function External(props: External.Props): ReactNode {
+  return (
+    <div {...styles.external({ kind: props.kind })}>
+      <span {...styles.kind()}>{props.kind}</span>
+      <span {...styles.externalName()}>{props.name}</span>
+      {props.detail ? <code {...styles.detail()}>{props.detail}</code> : null}
+    </div>
+  )
+}
+
+declare namespace External {
+  type Props = {
+    /** A secondary line, such as the request that enters the flow. */
+    detail?: string | undefined
+    /** Where the step sits in its flow. */
+    kind: 'Entry' | 'Exit' | 'External'
+    /** The step's name. */
+    name: string
+  }
+}
+
+/**
+ * A sample app's own screen, which a headless app builds on Tempo ID's API. It draws its own
+ * controls, styled after a food-delivery app, so it reads apart from Tempo ID's pages.
+ */
+function AppScreen(props: AppScreen.Props): ReactNode {
+  return (
+    <div {...styles.app()}>
+      <header {...styles.appHeader()}>
+        <h4 {...styles.appTitle()}>{props.title}</h4>
+        {props.description ? (
+          <p {...styles.appDescription()}>{props.description}</p>
+        ) : null}
+      </header>
+      {props.children}
+    </div>
+  )
+}
+
+declare namespace AppScreen {
+  type Props = {
+    /** The screen's controls. */
+    children?: ReactNode | undefined
+    /** The line below the title. */
+    description?: string | undefined
+    /** The screen's heading. */
+    title: string
+  }
+}
+
+/** A pill button in the sample app's style. */
+function AppButton(props: AppButton.Props): ReactNode {
+  return (
+    <button {...styles.appButton({ tone: props.tone })} type="button">
+      {props.children}
+    </button>
+  )
+}
+
+declare namespace AppButton {
+  type Props = {
+    /** The button's label. */
+    children: ReactNode
+    /** The button's colors: the brand red, Google's blue, or a quiet gray. */
+    tone: 'brand' | 'google' | 'quiet'
+  }
+}
+
+/** The sample app's labeled email field. */
+function AppEmailField(): ReactNode {
+  return (
+    <label {...styles.appField()}>
+      <span {...styles.appLabel()}>Email</span>
+      <input {...styles.appInput()} placeholder="Required" readOnly />
+    </label>
+  )
+}
+
+/** The sample app's sign-in, which offers Google, a passkey, and an email. */
+function AppSignIn(): ReactNode {
+  return (
+    <AppScreen title="Sign in or sign up">
+      <AppButton tone="google">Continue with Google</AppButton>
+      <AppButton tone="quiet">Continue with passkey</AppButton>
+      <p {...styles.appDivider()}>or continue with email</p>
+      <AppEmailField />
+      <AppButton tone="brand">Continue</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app's email step, which an unlinked passkey needs before its code. */
+function AppEmail(): ReactNode {
+  return (
+    <AppScreen
+      description="Sign in with your email to link this passkey."
+      title="Add your email"
+    >
+      <AppEmailField />
+      <AppButton tone="brand">Continue</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app's code step. */
+function AppCode(): ReactNode {
+  return (
+    <AppScreen
+      description={`Enter the 6-digit code sent to ${email}.`}
+      title="Check your email"
+    >
+      <CodeInput aria-label="Code" length={6} readOnly />
+      <AppButton tone="brand">Verify</AppButton>
+    </AppScreen>
+  )
+}
+
+/** The sample app once it holds the authorization. */
+function AppSignedIn(): ReactNode {
+  return (
+    <AppScreen description={email} title="You're signed in">
+      <p {...styles.appAddress()}>{accounts[0].address}</p>
+      <AppButton tone="quiet">Sign out</AppButton>
+    </AppScreen>
+  )
+}
+
+/** A handler that the canvas's screens call, which does nothing. */
+function noop() {}
+
+/** A form handler that the canvas's screens call, which keeps the form from submitting. */
+function prevent(event: FormEvent<HTMLFormElement>) {
+  event.preventDefault()
+}
+
+/** The sample user's Tempo Accounts: one owned by a Privy wallet, and one by a passkey. */
+const accounts = [
+  {
+    address: '0x1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9f3c',
+    balance: { amount: '1250.5', currency: 'USD' },
+    owner: 'privy',
+    realm: null,
+  },
+  {
+    address: '0x7c4d2e9a1b3f5c7d9e0a2b4c6d8e0f1a3b5c21ab',
+    balance: { amount: '42', currency: 'USD' },
+    owner: 'webAuthn',
+    realm: null,
+  },
+] as const satisfies readonly ChooseAccount.Account[]
+
+/** The sample address that the code steps name. */
+const email = 'user@example.com'
+
+/** The sample refusal of an upstream service, which the failure flows show. */
+const unavailable = 'An upstream service is unavailable. Retry later.'
+
+/** The key that the samples request: 100 USD a day for a week, in pathUSD. */
+function key(): Approval.Key {
+  return {
+    expiry: Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60,
+    limits: [
+      {
+        amount: '100',
+        currency: 'USD',
+        period: 24 * 60 * 60,
+        tokens: [{ amount: '100', symbol: 'pathUSD' }],
+      },
+    ],
+  }
+}
+
+/** The props that `Approval` takes for a key, before a decision. */
+function approval(): Approval.Props {
+  return {
+    app: 'Tempo Wallet',
+    approving: false,
+    denying: false,
+    destination: 'wallet.tempo.xyz',
+    email,
+    heading: 'h4',
+    keyAuthorization: key(),
+    onApprove: noop,
+    onDeny: noop,
+  }
+}
+
+/** The request that the sign-in page shows and grants: the app and its key. */
+function signInRequest(): NonNullable<SignIn.Props['request']> {
+  return { app: 'Tempo Wallet', key: key() }
+}
+
+/** The entry of an app's redirect with a key, which a signed-out user signs in for. */
+const keyedEntry = {
+  detail: 'GET /authorize?…&key_authorization',
+  name: 'Web app',
+} as const satisfies Node
+
+/** The props that `Account` takes once the user is signed in. */
+function account(): Account.Props {
+  return {
+    accounts: [accounts[0]],
+    email,
+    heading: 'h4',
+    onSignOut: noop,
+    signingOut: false,
+  }
+}
+
+/** The props that `ChooseAccount` takes with nothing chosen. */
+function chooseAccount(): ChooseAccount.Props {
+  return { accounts, app: 'Tempo Wallet', heading: 'h4', onChoose: noop }
+}
+
+/** The props that `DeviceApproval` takes before anything is submitted. */
+function deviceApproval(): DeviceApproval.Props {
+  return {
+    approving: false,
+    code: '',
+    denying: false,
+    fetching: false,
+    heading: 'h4',
+    invalid: false,
+    onApprove: noop,
+    onDeny: noop,
+    onSubmitCode: prevent,
+  }
+}
+
+/** A sample request of `tempo-id login`, with its key, as `GET /v1/device/requests/:code` returns it. */
+function deviceRequest(): DeviceApproval.Request {
+  return {
+    app: { name: 'Tempo CLI' },
+    created_at: Math.floor(Date.now() / 1000),
+    device: 'ada-macbook',
+    ip: '203.0.113.7',
+    key_authorization: key(),
+    location: 'San Francisco, US',
+    user_code: 'BDWP-HQPK',
+  }
+}
+
+/** The entry of `tempo-id login`, which requests a code with a new access key. */
+const loginEntry = {
+  detail: 'POST /v1/device/authorize with key_authorization',
+  name: 'tempo-id login',
+} as const satisfies Node
+
+/** The exit of `tempo-id login`: the poll that receives the tokens and the signed key. */
+const loginExit = {
+  detail:
+    'Tokens and key_authorization, stored in ~/.tempo/id/credentials.json. A replaced session’s refresh token goes to POST /oauth2/revoke.',
+  edge: 'POST /v1/device/token: authorization_pending, then tokens',
+  name: 'tempo-id login',
+} as const satisfies Node
+
+/** The props that `SignIn` takes before anything is submitted, with every sign-in method. */
+function signIn(): SignIn.Props {
+  return {
+    heading: 'h4',
+    invalid: false,
+    onChangeEmail: noop,
+    onGoogle: noop,
+    onPasskey: noop,
+    onResend: noop,
+    onStartOver: noop,
+    onSubmitCode: prevent,
+    onSubmitEmail: prevent,
+    resend: 'idle',
+    sending: false,
+    verifying: false,
+  }
+}
+
+/** The entry of an app's redirect: the browser opens `/authorize`, which `/oauth2/authorize` signs. */
+const redirectEntry = {
+  detail: 'GET /authorize?client_id&redirect_uri&code_challenge&state',
+  name: 'Web app',
+} as const satisfies Node
+
+/** The requests of a headless app's page load that select its own sign-in: no session, and the providers. */
+const appSignInEdge = 'GET /v1/auth/session: no user, GET /v1/auth/providers'
+
+/** The exit of an app's redirect: the app redeems the code at the token endpoint. */
+const tokenExit = {
+  detail: 'Access, ID, and refresh tokens',
+  edge: 'POST /oauth2/token with code_verifier',
+  name: 'Web app',
+} as const satisfies Node
+
+/**
+ * Every flow, grouped by how it starts. Update it in the same change as any flow it shows. The page
+ * calls it on each render, so sample dates and expiries read the clock then.
+ */
+function sections(): readonly Section[] {
+  return [
+    {
+      flows: [
+        {
+          description:
+            'A visitor opens Tempo ID without a session and signs in with an emailed code. An accepted code shows green for 500 ms before the sign-in continues.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: '302 /login',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Email code',
+        },
+        {
+          description:
+            'A passkey of the realm signs the user in with one prompt, from the button or from the email field’s autofill.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            { name: 'Sign in', screen: <SignIn {...signIn()} /> },
+            {
+              detail: 'POST /v1/auth/passkey/options',
+              edge: 'Sign in with a passkey, or autofill',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Passkey',
+        },
+        {
+          description:
+            'A wallet.tempo passkey without an email verifies one with a code. The passkey signs again with the code, which links it to the user.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            { name: 'Sign in', screen: <SignIn {...signIn()} /> },
+            {
+              detail: 'POST /v1/auth/passkey/options',
+              edge: 'Sign in with a passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify: step email',
+              name: 'Sign in (link passkey)',
+              screen: <SignIn {...signIn()} linking />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email (link passkey)',
+              screen: <SignIn {...signIn()} email={email} linking />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with link',
+              edge: 'Code complete',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with link and assertion: 200',
+              name: 'Check your email (link accepted)',
+              screen: <SignIn {...signIn()} email={email} linking verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Passkey without an email',
+        },
+        {
+          description:
+            'Start over on the email step drops the passkey’s link and a pending code request, so the passkey stays unlinked.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Sign in with a passkey, POST /v1/auth/passkey/verify: step email',
+              name: 'Sign in (link passkey)',
+              screen: <SignIn {...signIn()} linking />,
+            },
+            {
+              edge: 'Start over',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+          ],
+          title: 'Passkey link, started over',
+        },
+        {
+          description:
+            'Google signs the user in, and its callback returns to the sign-in page, which sends a signed-in user on.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            { name: 'Sign in', screen: <SignIn {...signIn()} /> },
+            {
+              edge: 'GET /v1/auth/oauth/google?return_to=/login',
+              name: 'Google',
+            },
+            {
+              edge: 'GET /callback/google, 302 /login, 302 /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Google',
+        },
+        {
+          description:
+            'A Google sign-in that fails returns to the sign-in page with `error=access_denied`, whatever the cause.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            { name: 'Sign in', screen: <SignIn {...signIn()} /> },
+            {
+              edge: 'GET /v1/auth/oauth/google?return_to=/login',
+              name: 'Google',
+            },
+            {
+              edge: 'GET /callback/google, 302 /v1/auth/oauth/google/failed, 302 /login?error=access_denied',
+              name: 'Sign in (Google failed)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  error="Sign-in with Google failed. Try again, or continue with email."
+                />
+              ),
+            },
+          ],
+          title: 'Google, failed',
+        },
+        {
+          description:
+            'A deployment without Google, and realms without a passkey relying party at Tempo ID’s origin, leave only the email field.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: '200, google: false, passkeys: false',
+              name: 'Sign in (email only)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  onGoogle={undefined}
+                  onPasskey={undefined}
+                />
+              ),
+            },
+          ],
+          title: 'Email only',
+        },
+        {
+          description:
+            'Each sign-in request holds its controls, shows a spinner, and announces its progress until it settles. One sign-in runs at a time.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Continue, POST /v1/auth/code',
+              name: 'Sign in (sending)',
+              screen: <SignIn {...signIn()} sending />,
+            },
+            {
+              edge: 'Or: Sign in with a passkey',
+              name: 'Sign in (passkey pending)',
+              screen: <SignIn {...signIn()} passkeyPending />,
+            },
+            {
+              edge: 'Code complete, POST /v1/auth/code/verify',
+              name: 'Check your email (verifying)',
+              screen: <SignIn {...signIn()} email={email} verifying />,
+            },
+            {
+              edge: 'Or: Resend code, POST /v1/auth/code',
+              name: 'Check your email (resending)',
+              screen: <SignIn {...signIn()} email={email} resend="pending" />,
+            },
+          ],
+          title: 'Sign-in in progress',
+        },
+      ],
+      title: 'Sign-in',
+    },
+    {
+      flows: [
+        {
+          description:
+            'The account page lists the user’s Tempo Accounts in the `default` realm, oldest first, each with its balance and a deposit link. A lone wallet shows its balance large, without a list.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: '200, one wallet',
+              name: 'Your account (one wallet)',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Or: several wallets',
+              name: 'Your account (several wallets)',
+              screen: <Account {...account()} accounts={accounts} />,
+            },
+            {
+              edge: 'Or: a balance read fails',
+              name: 'Your account (balance unavailable)',
+              screen: (
+                <Account
+                  {...account()}
+                  accounts={[accounts[0], { ...accounts[1], balance: null }]}
+                />
+              ),
+            },
+            {
+              edge: 'Or: no wallets',
+              name: 'Your account (no wallets)',
+              screen: <Account {...account()} accounts={[]} />,
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Your account (unavailable)',
+              screen: (
+                <Account
+                  {...account()}
+                  accountError="Your wallets failed to load. Reload the page to try again."
+                  accounts={null}
+                />
+              ),
+            },
+          ],
+          title: 'Account page',
+        },
+        {
+          description:
+            'The account page and the deposit page send a visitor without a session to sign-in, which then opens the account page. The deposit page leaves the address out of the sign-in query.',
+          nodes: [
+            { detail: 'GET / or GET /deposit?address', name: 'Browser' },
+            {
+              edge: '302 /login, no session',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect: null, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Account page, signed out',
+        },
+        {
+          description:
+            'Deposit lists the networks and cash methods for one of the user’s wallets. Only Tempo is available, and it shows the wallet’s address as a QR code and as text. Back on Receive funds returns to the deposit methods.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: '200, one wallet',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Deposit, GET /deposit?address',
+              name: 'Deposit',
+              screen: <Deposit address={accounts[0].address} heading="h4" />,
+            },
+            {
+              edge: 'Tempo, GET /deposit?address&method=tempo',
+              name: 'Receive funds',
+              screen: (
+                <Deposit
+                  address={accounts[0].address}
+                  heading="h4"
+                  method="tempo"
+                />
+              ),
+            },
+            {
+              edge: 'Back, GET /deposit?address',
+              name: 'Deposit',
+              screen: <Deposit address={accounts[0].address} heading="h4" />,
+            },
+            {
+              edge: 'Back, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Deposit',
+        },
+        {
+          description: 'Done on Receive funds opens the account page at once.',
+          nodes: [
+            { detail: 'GET /deposit?address&method=tempo', name: 'Browser' },
+            {
+              edge: '200 deposit page',
+              name: 'Receive funds',
+              screen: (
+                <Deposit
+                  address={accounts[0].address}
+                  heading="h4"
+                  method="tempo"
+                />
+              ),
+            },
+            {
+              edge: 'Done, GET /',
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+          ],
+          title: 'Deposit, Done',
+        },
+        {
+          description:
+            'An address that is not one of the user’s wallets in the `default` realm shows no address. A spent rate limit or a failed account read shows its own reason in the same place.',
+          nodes: [
+            {
+              detail: 'GET /deposit?address (not the user’s)',
+              name: 'Browser',
+            },
+            {
+              edge: '200, address: null',
+              name: 'Deposit (wallet not found)',
+              screen: (
+                <Deposit
+                  error="This wallet was not found. Go back to your account, then choose Deposit."
+                  heading="h4"
+                />
+              ),
+            },
+            {
+              edge: 'Or: the account rate limit is spent',
+              name: 'Deposit (rate limited)',
+              screen: (
+                <Deposit
+                  error="Too many requests. Retry after 60 seconds."
+                  heading="h4"
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Deposit (unavailable)',
+              screen: (
+                <Deposit
+                  error="Your wallets failed to load. Reload the page to try again."
+                  heading="h4"
+                />
+              ),
+            },
+          ],
+          title: 'Wallet not found',
+        },
+      ],
+      title: 'Account and deposit',
+    },
+    {
+      flows: [
+        {
+          description:
+            'A web app redirects a signed-out user. Better Auth signs the request, and the sign-in continues it.',
+          nodes: [
+            redirectEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Redirect, signed out',
+        },
+        {
+          description:
+            'A signed-out user’s request with a key shows the app and the key on the sign-in page. The first sign-in of the request grants the key, so the browser returns to the app without the approval page.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig, GET /login: request',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in that grants a key',
+        },
+        {
+          description:
+            'On the sign-in page, the passkey’s challenge is the digest of the request’s key. One tap signs the user in and signs the key, for an account that this passkey owns, or that Privy or secp256k1 owns.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              detail:
+                'POST /v1/auth/passkey/options with oauth_query: the key’s digest',
+              edge: 'Sign in with a passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/auth/passkey/verify with oauth_query, grants the key',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in that grants a key, passkey one-tap',
+        },
+        {
+          description:
+            'The sign-in page starts Google with `sec-fetch-site: same-origin`, so the start sets the `__Host-tempo-id-grant` cookie for the request. The callback grants the key only when the cookie matches the request, and clears it.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'GET /v1/auth/oauth/google?oauth_query&return_to, same-origin: sets __Host-tempo-id-grant',
+              name: 'Google',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'GET /callback/google, the cookie matches: grants the key, 302',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in that grants a key, Google',
+        },
+        {
+          description:
+            'Any site can send a browser to the Google start. Without `sec-fetch-site: same-origin`, the start clears the grant cookie. The callback then keeps the redirect to the approval page, which shows the key.',
+          nodes: [
+            {
+              detail: 'GET /v1/auth/oauth/google?oauth_query&return_to',
+              name: 'Another site',
+            },
+            {
+              edge: 'cross-site: clears __Host-tempo-id-grant, 302',
+              name: 'Google',
+            },
+            {
+              edge: 'GET /callback/google, no grant cookie, 302 /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Google start from another site',
+        },
+        {
+          description:
+            'The account step does not run when the account reads are spent. The sign-in page shows no account, so a user with several accounts gets no grant, and the approval page opens. That page holds Approve until a reload after a minute.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: ACCOUNT_LIMIT spent, no account step, several accounts: no grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (unavailable)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'unavailable' }}
+                />
+              ),
+            },
+            {
+              edge: 'Reload after a minute',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Several accounts, none chosen',
+        },
+        {
+          description:
+            'A held grant covers only the request that the sign-in spent. A request with another `scope`, or with a `challenge`, takes no held grant on the account step, so the approval page opens.',
+          nodes: [
+            {
+              detail: 'GET /choose-account?…&sig, another scope or a challenge',
+              name: 'Browser',
+            },
+            {
+              edge: '200 account step',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account: another scope, no held grant, redirect /authorize?…&sig',
+              name: 'Authorize this app (another scope)',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Or: a challenge, which takes no grant, redirect /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step for another request',
+        },
+        {
+          description:
+            'A user with more than one account in the app’s realms chooses one. The sign-in holds its grant for the session for 10 minutes, and the choice takes it.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, holds the grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'takes the held grant, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in that grants a key, account step',
+        },
+        {
+          description:
+            'A sign-in that cannot grant the key keeps the redirect to the approval page, which shows the request again. Another passkey may own the account, or the request may be a replay. Approval may refuse the key, or the rate limit may be spent, which also refuses Approve until it resets. An upstream service may also fail.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'Sign-in with oauth_query: the grant fails, redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'redirect, or the passkey step first',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in that keeps the approval page',
+        },
+        {
+          description:
+            'The account step’s signed query expires 10 minutes after the sign-in, just before its held grant. A later choice is refused with `authorization_expired`, so the user starts again in the app.',
+          nodes: [
+            keyedEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, holds the grant',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'After 10 minutes, Choose, POST /v1/authorize/account: authorization_expired',
+              name: 'Choose a wallet (request expired)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  error="Expired authorization request: the request from the app is no longer valid. Return to the app, and start again."
+                />
+              ),
+            },
+            {
+              detail: 'GET /authorize?…&key_authorization, a new request',
+              edge: 'Return to the app, and start again',
+              name: 'Web app',
+            },
+          ],
+          title: 'Account step after the request expires',
+        },
+        {
+          description:
+            'A request with a `challenge` signs a message that only the approval page shows. So the sign-in page shows no key, and the sign-in grants nothing.',
+          nodes: [
+            {
+              ...keyedEntry,
+              detail: 'GET /authorize?…&key_authorization&challenge',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&sig, GET /login: request: null',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Sign-in with a challenge',
+        },
+        {
+          description:
+            'A signed-in user returns to an app that skips consent at once. Tempo ID shows no screen.',
+          nodes: [
+            redirectEntry,
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: '302 /oauth2/authorize, 302, no screen',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Redirect, signed in',
+        },
+        {
+          description:
+            'A request with `prompt=login` asks a signed-in user to sign in again. The sign-in page shows the request, and its key, despite the session.',
+          nodes: [
+            {
+              ...keyedEntry,
+              detail: 'GET /authorize?…&key_authorization&prompt=login',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /login?…&prompt=login consent&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Redirect with prompt=login',
+        },
+        {
+          description:
+            'A signed-in user approves an app that does not skip consent, once for the scopes it requests. The request carries no key, so the page shows none.',
+          nodes: [
+            redirectEntry,
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig',
+              name: 'Authorize this app (no key)',
+              screen: <Approval {...approval()} keyAuthorization={undefined} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            tokenExit,
+          ],
+          title: 'Approval without a key',
+        },
+        {
+          description:
+            'A signed-in user’s request with a key opens the approval page. A Privy or secp256k1 owner signs the key on the server when the user approves.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval of a key',
+        },
+        {
+          description:
+            'A passkey owns the account, so the approval returns the passkey step. The passkey signs the key’s digest, and the page approves again.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Authorize this app (approving)',
+              screen: <Approval {...approval()} approving />,
+            },
+            {
+              detail: 'Signs the key authorization, over the approving page',
+              edge: 'step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent with passkey.assertion',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval of a key for a passkey account',
+        },
+        {
+          description:
+            'An app with the `tempo-id:sign` scope sends a challenge, and the approval page shows the message that the key signs.',
+          nodes: [
+            {
+              detail: 'GET /authorize?…&key_authorization&challenge',
+              name: 'Native app',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig',
+              name: 'Authorize this app (challenge)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  app="Tempo Mobile"
+                  destination="tempo"
+                  keyAuthorization={{
+                    ...key(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'tempo:/callback?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Native app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+              name: 'Native app',
+            },
+          ],
+          title: 'Approval with a challenge',
+        },
+        {
+          description:
+            'A user with more than one Tempo Account in the app’s realms chooses one. Each row shows the account’s balance on the chain of the request’s key, or Unavailable when the read fails. The choice continues the authorization to the approval page.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /choose-account?…&sig',
+              name: 'Choose a wallet',
+              screen: <ChooseAccount {...chooseAccount()} />,
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              edge: 'redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step',
+        },
+        {
+          description:
+            'An app in several realms, such as web-shared, lists accounts from each. Each row then names its realm, apart from the `default` realm.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+              name: 'Web app in two realms',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /choose-account?…&sig',
+              name: 'Choose a wallet (two realms)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  accounts={[
+                    { ...accounts[0], realm: 'Tempo Cash' },
+                    accounts[1],
+                  ]}
+                />
+              ),
+            },
+            {
+              edge: 'Choose, POST /v1/authorize/account',
+              name: 'Choose a wallet (two realms, selecting)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  accounts={[
+                    { ...accounts[0], realm: 'Tempo Cash' },
+                    accounts[1],
+                  ]}
+                  selecting={accounts[0].address}
+                />
+              ),
+            },
+            {
+              edge: 'redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'POST /v1/authorize/consent, accept',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Account step across realms',
+        },
+        {
+          description:
+            'Denying returns the browser to the app with `error=access_denied`. The app receives no code.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Deny',
+              name: 'Authorize this app (denying)',
+              screen: <Approval {...approval()} denying />,
+            },
+            {
+              detail: 'GET redirect_uri?error=access_denied&state',
+              edge: 'POST /v1/authorize/consent, accept: false',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Denied approval',
+        },
+        {
+          description:
+            'Approval cannot sign some keys, so the page holds Approve and states why. Deny still returns to the app.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              edge: '302 /oauth2/authorize, 302 /authorize?…&sig: no account, and no Privy app to create one',
+              name: 'Authorize this app (no account)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'no_account' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: a passkey whose relying party is not Tempo ID’s, or POST /v1/authorize/consent: webauthn_required',
+              name: 'Authorize this app (passkey)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'passkey' }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Authorize this app (unavailable)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  keyAuthorization={{ ...key(), refusal: 'unavailable' }}
+                />
+              ),
+            },
+            {
+              detail: 'GET redirect_uri?error=access_denied&state',
+              edge: 'Deny, POST /v1/authorize/consent, accept: false',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Key that approval cannot sign',
+        },
+        {
+          description:
+            'A key that breaks a rule returns to the app with the refusal, as `/oauth2/authorize` returns one before sign-in. The `error` names the rule, such as `invalid_authorization_details` for an expired key, or `unauthorized_client` for a challenge without the `tempo-id:sign` scope.',
+          nodes: [
+            {
+              ...redirectEntry,
+              detail: 'GET /authorize?…&key_authorization',
+            },
+            {
+              detail: 'GET redirect_uri?error&error_description',
+              edge: '302 /oauth2/authorize, key refused',
+              name: 'Web app callback',
+            },
+          ],
+          title: 'Refused key',
+        },
+        {
+          description:
+            'A changed or expired query, or a request without a known app, shows an invalid request, on the approval page and on the account step.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig (changed)', name: 'Browser' },
+            {
+              edge: '200, request: null',
+              name: 'This sign-in request is invalid',
+              screen: <InvalidRequest heading="h4" />,
+            },
+            {
+              edge: 'Or: GET /choose-account?…&sig (changed), 200, request: null',
+              name: 'This sign-in request is invalid (account step)',
+              screen: <InvalidRequest heading="h4" />,
+            },
+          ],
+          title: 'Invalid request',
+        },
+        {
+          description:
+            'A backend runs the redirect flow and redeems the code with its client secret, so tokens never reach the browser. By default the request carries a key. The seeded backend uses only the `default` realm. Without a Privy app or secp256k1 owners there, as in the test harness, no account can sign the key. So the approval page holds Approve, and Deny signs the user in again without a key.',
+          nodes: [
+            {
+              detail: 'GET /auth/start on the backend, with a key',
+              name: 'Backend playground',
+            },
+            {
+              edge: '302 /authorize with state and code_challenge, 302 /oauth2/authorize, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  request={{ ...signInRequest(), app: 'Backend playground' }}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, no account to sign',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app (no account)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  app="Backend playground"
+                  destination="backend.example.com"
+                  keyAuthorization={{ ...key(), refusal: 'no_account' }}
+                />
+              ),
+            },
+            {
+              detail: 'GET /auth/callback?error=access_denied&state',
+              edge: 'Deny, POST /v1/authorize/consent, accept: false',
+              name: 'Backend callback',
+            },
+            {
+              detail: 'GET /auth/callback?code&state',
+              edge: '302 /auth/start?key=false, 302 /authorize, 302 /oauth2/authorize, 302, no screen',
+              name: 'Backend callback',
+            },
+            {
+              detail: 'Tokens stay on the server, without a key',
+              edge: 'POST /oauth2/token with client_secret',
+              name: 'Backend session',
+            },
+          ],
+          title: 'Backend app',
+        },
+      ],
+      title: 'App authorization',
+    },
+    {
+      flows: [
+        {
+          description:
+            "The app's own pages send the code, verify it, and request the authorization. Tempo ID shows no screen.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              owner: 'app',
+              screen: <AppCode />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify, POST /v1/account, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless email code',
+        },
+        {
+          description:
+            'A signed-in user skips the code. The app requests the authorization at once.',
+          nodes: [
+            { detail: 'Session cookie set', name: "App's page" },
+            {
+              edge: 'GET /v1/auth/session, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless, signed in',
+        },
+        {
+          description:
+            "The app's page runs the passkey ceremony with its client ID, which selects the app's realms.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with client_id',
+              edge: 'Continue with passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify, POST /v1/account, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless passkey',
+        },
+        {
+          description:
+            "A wallet.tempo passkey without an email verifies one through the app's own code step. The passkey signs again with the code, which links it. If that passkey owns the account, the app continues through the headless passkey fallback below.",
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with client_id',
+              edge: 'Continue with passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/passkey/verify: step email',
+              name: 'Add your email',
+              owner: 'app',
+              screen: <AppEmail />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              owner: 'app',
+              screen: <AppCode />,
+            },
+            {
+              detail: 'POST /v1/auth/passkey/options with link',
+              edge: 'Code complete',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with link and assertion, POST /v1/account, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless passkey without an email',
+        },
+        {
+          description:
+            'Google returns the browser to the app with a session. The app then requests the authorization. A user without a Tempo Account is refused with `rejected`, so the app reads the accounts, creates the first one if none exists, and requests the authorization again.',
+          nodes: [
+            { detail: 'Web playground', name: "App's sign-in" },
+            {
+              edge: appSignInEdge,
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+            {
+              edge: 'GET /v1/auth/oauth/google?client_id&return_to',
+              name: 'Google',
+            },
+            {
+              edge: 'GET /callback/google, 302 return_to, GET /v1/auth/session, POST /v1/authorize: rejected, GET /v1/account, POST /v1/account, GET /v1/auth/session, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless Google',
+        },
+        {
+          description:
+            'Approval does not sign a key of a passkey that owns the account, so `POST /v1/authorize` refuses it with `webauthn_required`. The app signs in through a redirect without a key, which skips the approval page, since the playgrounds skip consent.',
+          nodes: [
+            {
+              detail: 'POST /v1/authorize: webauthn_required',
+              name: "App's sign-in",
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'GET /authorize without key_authorization, 302 /oauth2/authorize, 302, no screen',
+              name: 'Web app callback',
+            },
+            {
+              edge: 'POST /oauth2/token with code_verifier',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+          ],
+          title: 'Headless passkey fallback',
+        },
+      ],
+      title: 'Headless apps',
+    },
+    {
+      flows: [
+        {
+          description:
+            "`tempo-id login` requests a code with a new access key, and prints `verification_uri_complete`. Sign-in returns to the device page with the code filled in. The CLI's next poll receives the tokens and the signed key, and stores them.",
+          nodes: [
+            loginEntry,
+            {
+              detail: 'GET /device?code',
+              edge: 'Shows verification_uri_complete',
+              name: 'Browser',
+            },
+            {
+              edge: '302 /login?return_to=/device?code',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/approve',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code, signed out',
+        },
+        {
+          description:
+            'A user who opens the bare `verification_uri` types the code that the terminal shows.',
+          nodes: [
+            loginEntry,
+            {
+              detail: 'GET /device',
+              edge: 'Shows user_code and verification_uri',
+              name: 'Browser',
+            },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device (enter a code)',
+              screen: <DeviceApproval {...deviceApproval()} />,
+            },
+            {
+              edge: 'Continue, GET /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/approve',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device code, typed',
+        },
+        {
+          description:
+            'A device client that reads discovery uses the standard endpoints of RFC 8628. The browser takes the same steps as for `POST /v1/device/authorize`.',
+          nodes: [
+            { detail: 'POST /device/code', name: 'Device client' },
+            {
+              detail: 'GET /device?user_code',
+              edge: 'Shows verification_uri_complete',
+              name: 'Browser',
+            },
+            {
+              edge: '302 /login?return_to=/device?user_code',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    device: undefined,
+                    key_authorization: undefined,
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    device: undefined,
+                    key_authorization: undefined,
+                  }}
+                  status="approved"
+                />
+              ),
+            },
+            {
+              detail:
+                'POST /oauth2/token with grant_type=urn:ietf:params:oauth:grant-type:device_code',
+              edge: 'Next poll: tokens',
+              name: 'Device client',
+            },
+          ],
+          title: 'Device code, standard endpoints',
+        },
+        {
+          description:
+            "Denying ends the request. The CLI's next poll is refused.",
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'POST /v1/device/deny',
+              name: 'Denied',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="denied"
+                />
+              ),
+            },
+            {
+              detail: 'Exits with not_signed_in',
+              edge: 'POST /v1/device/token: request_denied',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'Device code, denied',
+        },
+        {
+          description:
+            'A passkey owns the account, so the approval returns the passkey step. The passkey signs the key’s digest in this browser, and the page approves again.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve',
+              name: 'Authorize a device (approving)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  approving
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              detail: 'Signs the key authorization, over the approving page',
+              edge: 'step passkey',
+              name: 'Authenticator prompt',
+            },
+            {
+              edge: 'POST /v1/device/approve with passkey.assertion',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            loginExit,
+          ],
+          title: 'Device approval for a passkey account',
+        },
+        {
+          description:
+            'Approval cannot sign some keys, so the page holds Approve and states why. Deny still ends the request.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'The key names an account that the user does not hold',
+              name: 'Authorize a device (foreign account)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'foreign_account' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: no account, and no Privy app to create one',
+              name: 'Authorize a device (no account)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'no_account' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: a passkey whose relying party is not Tempo ID’s, or POST /v1/device/approve: webauthn_required',
+              name: 'Authorize a device (passkey)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'passkey' },
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Or: the accounts cannot be read',
+              name: 'Authorize a device (unavailable)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    key_authorization: { ...key(), refusal: 'unavailable' },
+                  }}
+                />
+              ),
+            },
+            {
+              detail: 'POST /v1/device/token: request_denied',
+              edge: 'Deny, POST /v1/device/deny',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'Device key that approval cannot sign',
+        },
+        {
+          description:
+            'A CLI with the `tempo-id:sign` scope sends a challenge, and the device page shows the message that the key signs.',
+          nodes: [
+            {
+              detail:
+                'POST /v1/device/authorize with key_authorization and challenge',
+              name: 'CLI',
+            },
+            {
+              edge: 'GET /device?code, 200 device page',
+              name: 'Authorize a device (challenge)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{
+                    ...deviceRequest(),
+                    challenge: 'Sign in to api.example.com\nNonce: 8f2a91',
+                  }}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve, or the passkey step first',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+            {
+              detail:
+                'Tokens, and key_authorization bound to the challenge’s hash',
+              edge: 'POST /v1/device/token: authorization_pending, then tokens',
+              name: 'CLI',
+            },
+          ],
+          title: 'Device code with a challenge',
+        },
+        {
+          description:
+            'A code that is already approved or denied shows its outcome again, without the decision buttons.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200, status: approved',
+              name: 'Authorization successful',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                  status="approved"
+                />
+              ),
+            },
+          ],
+          title: 'Decided device code',
+        },
+        {
+          description:
+            'A code that no one approves before `expires_in` ends the login. The CLI stores nothing, and the user runs `tempo-id login` again.',
+          nodes: [
+            loginEntry,
+            {
+              detail: 'Exits with not_signed_in',
+              edge: 'POST /v1/device/token: authorization_pending, then device_code_expired',
+              name: 'tempo-id login',
+            },
+          ],
+          title: 'tempo-id login, expired',
+        },
+        {
+          description:
+            'The CLI reads the stored session, refreshes its access token when it expires within 30 seconds, and reads the user.',
+          nodes: [
+            { detail: '~/.tempo/id/credentials.json', name: 'tempo-id whoami' },
+            {
+              detail: 'Email and Tempo Account',
+              edge: 'POST /oauth2/token with refresh_token within 30 s of expiry, GET /oauth2/userinfo',
+              name: 'tempo-id whoami',
+            },
+          ],
+          title: 'tempo-id whoami',
+        },
+        {
+          description:
+            'Each device request holds the code field or the decision buttons, and shows a spinner, until it settles.',
+          nodes: [
+            { detail: 'GET /device', name: 'Browser' },
+            {
+              edge: 'Continue, GET /device?code',
+              name: 'Authorize a device (fetching)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPK"
+                  fetching
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve',
+              name: 'Authorize a device (approving)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  approving
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Or: Deny, POST /v1/device/deny',
+              name: 'Authorize a device (denying)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  denying
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device code in progress',
+        },
+        {
+          description:
+            'A device app without a display name could be anyone’s, so the request omits `app`, and the page flags an unverified app.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page, request without app',
+              name: 'Authorize a device (unverified app)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={{ ...deviceRequest(), app: undefined }}
+                />
+              ),
+            },
+          ],
+          title: 'Unverified device app',
+        },
+        {
+          description:
+            'A code that matches no pending request, or one that another user holds, keeps the code form.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'unknown_code',
+              name: 'Authorize a device (unknown code)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPX"
+                  error="Invalid or expired code. Check the code in the terminal."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Unknown device code',
+        },
+        {
+          description:
+            'Each user’s code lookups share one rate limit, so the page refuses a lookup over it and keeps the code form.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'Lookup over the rate limit',
+              name: 'Authorize a device (rate limited)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  code="BDWP-HQPK"
+                  error="Too many requests. Retry after 60 seconds."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Device code lookup rate limited',
+        },
+      ],
+      title: 'Device grant',
+    },
+    {
+      flows: [
+        {
+          description:
+            'Sign-out ends the session and revokes its refresh tokens, then opens the sign-in page.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              name: 'Your account',
+              screen: <Account {...account()} />,
+            },
+            {
+              edge: 'Sign out, POST /v1/auth/logout',
+              name: 'Your account (signing out)',
+              screen: <Account {...account()} signingOut />,
+            },
+            {
+              edge: '200, then /login',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+          ],
+          title: 'Sign-out',
+        },
+        {
+          description:
+            'An app signs the user out with its ID token. Tempo ID ends the session that the hint names, if this browser holds it, and redirects to the app.',
+          nodes: [
+            {
+              detail:
+                'GET /oauth2/end-session?id_token_hint&post_logout_redirect_uri&state',
+              name: 'Web app',
+            },
+            {
+              detail: 'GET post_logout_redirect_uri?state',
+              edge: '302, no screen',
+              name: 'Web app',
+            },
+          ],
+          title: 'RP-initiated logout',
+        },
+        {
+          description:
+            'A cross-site form POST carries no `SameSite=Lax` session cookie, so Tempo ID seals the parameters and continues as a GET, which carries the cookie.',
+          nodes: [
+            {
+              detail:
+                'POST /oauth2/end-session with id_token_hint, post_logout_redirect_uri, and state',
+              name: 'Web app',
+            },
+            {
+              detail: 'GET /oauth2/end-session?continuation',
+              edge: '303, no session cookie',
+              name: 'Browser',
+            },
+            {
+              detail: 'GET post_logout_redirect_uri?state',
+              edge: '302, no screen',
+              name: 'Web app',
+            },
+          ],
+          title: 'RP-initiated logout, form POST',
+        },
+        {
+          description:
+            "An app's own Sign out ends the Tempo ID session. The app forgets the sign-in even if the request fails, and shows the error.",
+          nodes: [
+            { detail: 'Web playground', name: "App's page" },
+            {
+              edge: 'GET /v1/auth/session, POST /v1/authorize',
+              name: 'Signed in',
+              owner: 'app',
+              screen: <AppSignedIn />,
+            },
+            {
+              edge: 'Sign out, POST /v1/auth/logout',
+              name: 'Sign in',
+              owner: 'app',
+              screen: <AppSignIn />,
+            },
+          ],
+          title: 'Headless sign-out',
+        },
+        {
+          description:
+            'The CLI revokes the stored refresh token at the deployment that issued it, and deletes the session even if the revocation fails.',
+          nodes: [
+            { detail: '~/.tempo/id/credentials.json', name: 'tempo-id logout' },
+            {
+              detail: 'Session deleted',
+              edge: 'POST /oauth2/revoke with the refresh token',
+              name: 'tempo-id logout',
+            },
+          ],
+          title: 'tempo-id logout',
+        },
+      ],
+      title: 'Sign-out',
+    },
+    {
+      flows: [
+        {
+          description:
+            'A refused send keeps the first step, with the refusal below the email field, which it marks invalid. The user can try again or pick another method.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'POST /v1/auth/code: 503',
+              name: 'Sign in (send failed)',
+              screen: <SignIn {...signIn()} error={unavailable} invalid />,
+            },
+          ],
+          title: 'Send failed',
+        },
+        {
+          description:
+            'A canceled prompt or a refused passkey keeps the first step, with the error below the email field. The email field is not marked invalid, since no address was sent.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Canceled prompt, or POST /v1/auth/passkey/verify refused',
+              name: 'Sign in (passkey failed)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  error="Passkey sign-in was canceled. Try again, or continue with email."
+                />
+              ),
+            },
+          ],
+          title: 'Passkey failed',
+        },
+        {
+          description:
+            'A refused code clears the field and marks it invalid, so the next code can be typed at once.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'POST /v1/auth/code/verify: 401',
+              name: 'Check your email (wrong code)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Invalid or expired code. Request a new one."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Wrong code',
+        },
+        {
+          description:
+            'A passkey that does not sign again, or whose assertion is refused, drops the link. The code field clears and takes focus, so the next code signs in with email only.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Canceled prompt, or POST /v1/auth/code/verify with link: webauthn_rejected',
+              name: 'Check your email (link failed)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Your passkey did not confirm the sign-in. Enter the code again to sign in with email only."
+                  invalid
+                />
+              ),
+            },
+          ],
+          title: 'Passkey link failed',
+        },
+        {
+          description:
+            'A resent code shows Code sent on the button, and a hidden status announces the send. The code field keeps its value.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Resend code, POST /v1/auth/code',
+              name: 'Check your email (resent)',
+              screen: <SignIn {...signIn()} email={email} resend="sent" />,
+            },
+          ],
+          title: 'Resent code',
+        },
+        {
+          description:
+            'A refused resend keeps the code step and its code, with the refusal below the code field. The code stays valid, so the field is not marked invalid.',
+          nodes: [
+            { detail: 'GET /login', name: 'Browser opens sign-in' },
+            {
+              edge: 'Resend code, POST /v1/auth/code: 429',
+              name: 'Check your email (resend refused)',
+              screen: (
+                <SignIn
+                  {...signIn()}
+                  email={email}
+                  error="Too many requests. Retry after 60 seconds."
+                />
+              ),
+            },
+          ],
+          title: 'Resend refused',
+        },
+        {
+          description:
+            'A failed selection keeps the account step, so the user can choose again. The page does not reload, so an ended session or an expired request shows its refusal in the same place.',
+          nodes: [
+            { detail: 'GET /choose-account?…&sig', name: 'Browser' },
+            {
+              edge: 'POST /v1/authorize/account: 503',
+              name: 'Choose a wallet (failed)',
+              screen: (
+                <ChooseAccount {...chooseAccount()} error={unavailable} />
+              ),
+            },
+            {
+              edge: 'Or: POST /v1/authorize/account: session_required',
+              name: 'Choose a wallet (session ended)',
+              screen: (
+                <ChooseAccount {...chooseAccount()} error="Sign in first." />
+              ),
+            },
+            {
+              edge: 'Or: POST /v1/authorize/account: authorization_expired',
+              name: 'Choose a wallet (request expired)',
+              screen: (
+                <ChooseAccount
+                  {...chooseAccount()}
+                  error="Expired authorization request: the request from the app is no longer valid. Return to the app, and start again."
+                />
+              ),
+            },
+          ],
+          title: 'Account selection failed',
+        },
+        {
+          description:
+            'A failed decision keeps the approval page, with the refusal below the buttons.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'POST /v1/authorize/consent: 503',
+              name: 'Authorize this app (failed)',
+              screen: <Approval {...approval()} error={unavailable} />,
+            },
+          ],
+          title: 'Approval failed',
+        },
+        {
+          description:
+            'A spent authorization rate limit refuses Approve, as it refuses the grant at sign-in. The approval page stays until the limit resets.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: 429 rate_limited',
+              name: 'Authorize this app (rate limited)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  error="Too many requests. Retry after 60 seconds."
+                />
+              ),
+            },
+          ],
+          title: 'Approval rate limited',
+        },
+        {
+          description:
+            'A canceled prompt or a refused assertion keeps the approval page, and Approve starts a new passkey step.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: 'Canceled prompt, or POST /v1/authorize/consent with passkey.assertion: webauthn_rejected',
+              name: 'Authorize this app (passkey failed)',
+              screen: (
+                <Approval
+                  {...approval()}
+                  error="The passkey request was canceled. Approve again, or deny the request."
+                />
+              ),
+            },
+          ],
+          title: 'Passkey approval failed',
+        },
+        {
+          description:
+            'A session that ends before the decision reloads the page, and the loader sends the browser to sign-in with the signed query. A sign-in already spent this request, so the next sign-in opens the approval page again.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: '200 approval page',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: session_required, reload, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              edge: 'after 500 ms, redirect /authorize?…&sig',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'Approve, POST /v1/authorize/consent',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval, session expired',
+        },
+        {
+          description:
+            'A user who was signed in when the request arrived reached the approval page without a sign-in, so the request is unspent. The sign-in after the reload grants the key and returns to the app at once.',
+          nodes: [
+            { detail: 'GET /authorize?…&sig', name: 'Browser' },
+            {
+              edge: '200 approval page',
+              name: 'Authorize this app',
+              screen: <Approval {...approval()} />,
+            },
+            {
+              edge: 'Approve, POST /v1/authorize/consent: session_required, reload, 302 /login?…&sig',
+              name: 'Sign in (key)',
+              screen: <SignIn {...signIn()} request={signInRequest()} />,
+            },
+            {
+              edge: 'POST /v1/auth/code',
+              name: 'Check your email',
+              screen: <SignIn {...signIn()} email={email} />,
+            },
+            {
+              edge: 'POST /v1/auth/code/verify with oauth_query: 200, grants the key',
+              name: 'Check your email (accepted)',
+              screen: <SignIn {...signIn()} email={email} verified />,
+            },
+            {
+              detail: 'GET redirect_uri?code&state',
+              edge: 'after 500 ms, redirect',
+              name: 'Web app callback',
+            },
+            {
+              ...tokenExit,
+              detail: 'Tokens, account, and key_authorization',
+            },
+          ],
+          title: 'Approval, session expired, unspent request',
+        },
+        {
+          description:
+            'A failed decision keeps the device page with the request, and the refusal below the buttons.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'POST /v1/device/approve: 503',
+              name: 'Authorize a device (failed)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  error={unavailable}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device decision failed',
+        },
+        {
+          description:
+            'A session that ends before the decision reloads the page, and sign-in returns to the same code. The request is bound to its user, so another user’s sign-in shows the unknown code.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: '200 device page',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+            {
+              edge: 'Approve, POST /v1/device/approve: session_required, reload, 302 /login?return_to=/device?code',
+              name: 'Sign in',
+              screen: <SignIn {...signIn()} />,
+            },
+            {
+              edge: 'Sign-in, /device?code',
+              name: 'Authorize a device',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device decision, session expired',
+        },
+        {
+          description:
+            'A canceled prompt or a refused assertion keeps the device page, and Approve starts a new passkey step.',
+          nodes: [
+            { detail: 'GET /device?code', name: 'Browser' },
+            {
+              edge: 'Canceled prompt, or POST /v1/device/approve with passkey.assertion: webauthn_rejected',
+              name: 'Authorize a device (passkey failed)',
+              screen: (
+                <DeviceApproval
+                  {...deviceApproval()}
+                  error="The passkey request was canceled. Approve again, or deny the request."
+                  request={deviceRequest()}
+                />
+              ),
+            },
+          ],
+          title: 'Device passkey approval failed',
+        },
+        {
+          description:
+            'A failed sign-out keeps the account page, with the refusal above the button.',
+          nodes: [
+            { detail: 'GET /', name: 'Browser opens Tempo ID' },
+            {
+              edge: 'POST /v1/auth/logout: 503',
+              name: 'Your account (sign-out failed)',
+              screen: <Account {...account()} error={unavailable} />,
+            },
+          ],
+          title: 'Sign-out failed',
+        },
+      ],
+      title: 'Request failures',
+    },
+  ]
+}
+
+namespace styles {
+  export const app = style({ display: 'grid', gap: 3 })
+
+  export const appAddress = style({
+    color: 'gray.900',
+    margin: 0,
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+  })
+
+  export const appButton = variants({
+    base: {
+      alignItems: 'center',
+      border: 'none',
+      borderRadius: 'full',
+      cursor: 'pointer',
+      display: 'flex',
+      gap: 3,
+      height: 12,
+      justifyContent: 'center',
+      paddingInline: 6,
+      typography: 'button.16',
+      width: 'full',
+    },
+    variants: {
+      tone: {
+        brand: { backgroundColor: 'red.700', color: 'white' },
+        google: { backgroundColor: 'blue.700', color: 'white' },
+        quiet: { backgroundColor: 'gray.100', color: 'foreground' },
+      },
+    },
+  })
+
+  export const appDescription = style({
+    color: 'gray.900',
+    typography: 'copy.16',
+  })
+
+  // A rule on each side of the label, as the sample app's divider draws it.
+  export const appDivider = style({
+    alignItems: 'center',
+    color: 'gray.900',
+    display: 'flex',
+    gap: 4,
+    margin: 0,
+    typography: 'copy.14',
+    whiteSpace: 'nowrap',
+    '&::before, &::after': {
+      backgroundColor: 'gray.400',
+      content: '""',
+      flexGrow: 1,
+      height: 'px',
+    },
+  })
+
+  export const appField = style({ display: 'grid', gap: 2 })
+
+  export const appHeader = style({ display: 'grid', gap: 2, marginBottom: 2 })
+
+  export const appInput = style({
+    backgroundColor: 'gray.100',
+    border: 'none',
+    borderRadius: 'md',
+    color: 'foreground',
+    height: 12,
+    paddingInline: 4,
+    typography: 'copy.16',
+    width: 'full',
+  })
+
+  export const appLabel = style({ typography: 'label.16' })
+
+  export const appTitle = style({ typography: 'heading.32' })
+
+  export const arrow = style({
+    alignItems: 'center',
+    display: 'grid',
+    flexShrink: 0,
+    gap: 2,
+    justifyItems: 'center',
+    paddingInline: 3,
+    width: 48,
+  })
+
+  export const artboard = style({ display: 'grid', gap: 2, margin: 0 })
+
+  export const canvas = style({
+    backgroundColor: 'gray.100',
+    display: 'grid',
+    gap: 16,
+    minHeight: 'screen',
+    // The canvas grows to its widest flow, so the page scrolls to pan.
+    minWidth: 'full',
+    padding: 4,
+    width: 'max',
+    '@media (min-width: 48rem)': { padding: 12 },
+  })
+
+  export const code = style({ typography: 'copy.13.mono' })
+
+  export const detail = style({
+    color: 'gray.900',
+    overflowWrap: 'anywhere',
+    typography: 'copy.13.mono',
+  })
+
+  export const edge = style({
+    color: 'gray.900',
+    overflowWrap: 'anywhere',
+    textAlign: 'center',
+    typography: 'copy.13.mono',
+  })
+
+  export const external = variants({
+    base: {
+      backgroundColor: 'background.surface',
+      border: '1px dashed',
+      borderColor: 'gray.500',
+      borderRadius: 'lg',
+      display: 'grid',
+      flexShrink: 0,
+      gap: 1,
+      padding: 4,
+      width: 56,
+    },
+    variants: {
+      kind: {
+        Entry: { borderColor: 'blue.700', borderStyle: 'solid' },
+        Exit: { borderColor: 'green.700', borderStyle: 'solid' },
+        External: {},
+      },
+    },
+  })
+
+  export const externalName = style({ typography: 'label.14' })
+
+  export const flow = style({ display: 'grid', gap: 4 })
+
+  export const flowDescription = style({
+    color: 'gray.900',
+    typography: 'copy.14',
+  })
+
+  // The flow's text stays at the canvas's left edge while the row scrolls.
+  export const flowHeader = style({
+    display: 'grid',
+    gap: 1,
+    left: 4,
+    maxWidth: 'readable',
+    position: 'sticky',
+    '@media (min-width: 48rem)': { left: 12 },
+  })
+
+  export const flowTitle = style({ typography: 'heading.16' })
+
+  export const frame = style({
+    backgroundColor: 'background.primary',
+    border: '1px solid',
+    borderColor: 'grayAlpha.400',
+    borderRadius: 'lg',
+    boxShadow: 'md',
+    paddingBlock: 10,
+    paddingInline: 6,
+    width: 96,
+  })
+
+  export const frameLabel = style({ color: 'gray.900', typography: 'label.12' })
+
+  export const head = style({
+    color: 'gray.600',
+    flexShrink: 0,
+    height: 4,
+    width: 4,
+  })
+
+  export const intro = style({
+    display: 'grid',
+    gap: 2,
+    left: 4,
+    maxWidth: 'readable',
+    position: 'sticky',
+    '@media (min-width: 48rem)': { left: 12 },
+  })
+
+  export const kind = style({
+    color: 'gray.900',
+    textTransform: 'uppercase',
+    typography: 'label.12',
+  })
+
+  export const lede = style({ color: 'gray.900', typography: 'copy.16' })
+
+  export const line = style({
+    backgroundColor: 'gray.600',
+    flexGrow: 1,
+    height: 'px',
+  })
+
+  export const row = style({
+    alignItems: 'center',
+    display: 'flex',
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+  })
+
+  export const section = style({ display: 'grid', gap: 10 })
+
+  export const sectionTitle = style({
+    borderBottom: '1px solid',
+    borderBottomColor: 'grayAlpha.400',
+    paddingBottom: 2,
+    typography: 'heading.20',
+  })
+
+  export const shaft = style({
+    alignItems: 'center',
+    display: 'flex',
+    width: 'full',
+  })
+
+  export const step = style({ alignItems: 'center', display: 'flex' })
+
+  export const title = style({ typography: 'heading.32' })
+}