@tempoxyz/id 0.0.0-stage → 0.0.1

package/src/app/components/DevTools.tsx

@@ -0,0 +1,1071 @@
+/**
+ * The dev toolbar: chain and color scheme switches, the chains' status, and Void's dev inbox in
+ * `vp dev`. @module
+ */
+/* istanbul ignore file -- It renders only in a browser, once the page hydrates. */
+import * as BaseUi from '@base-ui/react/popover'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate, useRouterState, useSearch } from '@tanstack/react-router'
+import { Button, CopyButton, Menu, Tooltip } from '@tempoxyz/ds'
+import {
+  Close,
+  CryptoNetwork,
+  DarkMode,
+  LightMode,
+  Mail,
+  Sliders,
+} from '@tempoxyz/ds/icons'
+import { parseResponse } from 'hono/client'
+import { type ReactElement, useEffect, useRef, useState } from 'react'
+import { keyframes } from 'zyzz/web'
+import type * as Chain from '../../internal/Chain.js'
+import * as ChainList from '../../internal/ChainList.js'
+import * as Client from '../lib/Client.js'
+import * as Inbox from '../lib/Inbox.js'
+import { CodeInput } from './CodeInput.js'
+import { style, variants, vars } from '../zyzz.config.js'
+
+/** Whether the toolbar shows Void's dev inbox, which only `vp dev` serves. */
+const inboxEnabled = import.meta.env.DEV
+
+/** Renders the toolbar. */
+export function DevTools() {
+  const [collapsed, setCollapsed] = useStored('collapsed', false)
+  const [nudging, setNudging] = useState(false)
+  const [open, setOpen] = useState(false)
+  const scheme = useScheme()
+  // The ID of the newest message that the inbox showed. IDs stay unique where capture times can tie.
+  const [seen, setSeen] = useStored<string | undefined>('seen-id', undefined)
+  // Opening the panel focuses the panel itself, not the first slot of its read-only code field.
+  const panel = useRef<HTMLDivElement>(null)
+
+  // Void's dev-trigger token, which the JSON inbox needs, since its messages hold sign-in codes.
+  const tokenQuery = useQuery({
+    queryFn: async () => {
+      const response = await fetch(Inbox.tokenPath)
+      if (!response.ok) {
+        await response.body?.cancel()
+        throw new Error('The dev server has no inbox token yet.')
+      }
+      return ((await response.json()) as { token: string }).token
+    },
+    // A build has no dev inbox, since email goes to real addresses.
+    enabled: inboxEnabled,
+    queryKey: ['devtools', 'inbox', 'token'],
+    retry: true,
+    retryDelay: 1_500,
+    staleTime: Number.POSITIVE_INFINITY,
+  })
+  const token = tokenQuery.data
+
+  const inbox = useQuery({
+    queryFn: async () => {
+      const response = await fetch(Inbox.path, {
+        headers: { [Inbox.header]: token ?? '' },
+      })
+      // Void writes a new token when its plugin restarts.
+      if (response.status === 401) void tokenQuery.refetch()
+      if (!response.ok) {
+        // An unread body keeps the response open.
+        await response.body?.cancel()
+        throw new Error('The inbox did not respond.')
+      }
+      return (await response.json()) as { messages: readonly Summary[] }
+    },
+    enabled: token !== undefined,
+    queryKey: ['devtools', 'inbox', 'list', token],
+    refetchInterval: 1_500,
+  })
+  const messages = inbox.data?.messages ?? []
+  const newest = messages[0]
+  const unread = (() => {
+    if (open) return 0
+    // Messages come newest first, so the ones before the seen message are unread. A seen message
+    // that Void evicted leaves every message unread.
+    const index = messages.findIndex((message) => message.id === seen)
+    return index === -1 ? messages.length : index
+  })()
+
+  // The first response sets the baseline, so only a message that arrives later chimes.
+  const latest = useRef<string | null | undefined>(undefined)
+  const [announcement, setAnnouncement] = useState('')
+  useEffect(() => {
+    if (!inbox.data) return
+    const previous = latest.current
+    latest.current = newest?.id ?? null
+    // A panel that opened before the first response shows that response, so it counts as seen.
+    if (previous === undefined) {
+      if (open && newest) setSeen(newest.id)
+      return
+    }
+    if (!newest || newest.id === previous) return
+
+    if (open) setSeen(newest.id)
+    else {
+      chime()
+      setNudging(true)
+    }
+    const filled = fill({ message: newest })
+    setAnnouncement(
+      `New email: ${newest.subject}.${filled ? ' The code field holds its code.' : ''}`,
+    )
+  }, [inbox.data, newest, open, setSeen])
+
+  const onOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (next && newest) setSeen(newest.id)
+  }
+
+  const inboxButton = (
+    <BaseUi.Popover.Root onOpenChange={onOpenChange} open={open}>
+      <Tip label="Inbox">
+        <BaseUi.Popover.Trigger
+          aria-label={unread ? `Inbox, ${unread} unread` : 'Inbox'}
+          render={
+            <Button
+              {...styles.tool()}
+              shape="icon"
+              size="small"
+              variant="text"
+            />
+          }
+        >
+          <Mail {...styles.icon()} />
+          {unread > 0 && (
+            // A new key restarts the pop on each count.
+            <span aria-hidden key={unread} {...styles.badge()}>
+              {unread > 9 ? '9+' : unread}
+            </span>
+          )}
+        </BaseUi.Popover.Trigger>
+      </Tip>
+      <BaseUi.Popover.Portal>
+        <BaseUi.Popover.Positioner
+          {...styles.positioner()}
+          collisionPadding={16}
+          side="top"
+          sideOffset={12}
+        >
+          {/* The panel draws on the toolbar's surface, in its dark scheme. */}
+          <div {...vars({ colorScheme: 'dark' })}>
+            <BaseUi.Popover.Popup
+              aria-label="Inbox"
+              initialFocus={panel}
+              ref={panel}
+              {...styles.panel()}
+            >
+              <InboxPanel messages={messages} token={token} />
+            </BaseUi.Popover.Popup>
+          </div>
+        </BaseUi.Popover.Positioner>
+      </BaseUi.Popover.Portal>
+    </BaseUi.Popover.Root>
+  )
+
+  return (
+    <aside aria-label="Developer tools" {...styles.root()}>
+      <span aria-live="polite" role="status" {...styles.hidden()}>
+        {announcement}
+      </span>
+      <div
+        {...vars({ colorScheme: 'dark' })}
+        data-nudging={nudging || undefined}
+        // The badge's own pop bubbles here too, and ends before the nudge does.
+        onAnimationEnd={(event) => {
+          if (event.target === event.currentTarget) setNudging(false)
+        }}
+        {...styles.toolbar()}
+      >
+        {collapsed ? (
+          <>
+            {inboxEnabled && (unread > 0 || open) && inboxButton}
+            <Tip label="Show developer tools">
+              <Button
+                {...styles.tool()}
+                aria-label="Show developer tools"
+                onClick={() => setCollapsed(false)}
+                shape="icon"
+                size="small"
+                variant="text"
+              >
+                <Sliders {...styles.icon()} />
+              </Button>
+            </Tip>
+          </>
+        ) : (
+          <>
+            <ChainMenu />
+            <SchemeButton scheme={scheme} />
+            {inboxEnabled && inboxButton}
+            <span aria-hidden {...styles.divider()} />
+            <Tip label="Hide developer tools">
+              <Button
+                {...styles.tool()}
+                aria-label="Hide developer tools"
+                onClick={() => setCollapsed(true)}
+                shape="icon"
+                size="small"
+                variant="text"
+              >
+                <Close {...styles.icon()} />
+              </Button>
+            </Tip>
+          </>
+        )}
+      </div>
+    </aside>
+  )
+}
+
+/** A message in the inbox list, without its parts. */
+type Summary = {
+  /** Milliseconds since the epoch. */
+  capturedAt: number
+  /** The sender. */
+  from: Address
+  /** Void's ID of the message. */
+  id: string
+  /** The subject line. */
+  subject: string
+  /** The recipients. */
+  to: readonly Address[]
+}
+
+/** A message with its parts. */
+type Message = Summary & {
+  /** Absent without an HTML part. */
+  html?: string | undefined
+  /** Absent without a text part. */
+  text?: string | undefined
+}
+
+/** An address on a message. */
+type Address = {
+  /** The email address. */
+  email: string
+  /** Absent without a display name. */
+  name?: string | undefined
+}
+
+/** The search parameters of the chain switch. */
+type ChainSearch = {
+  /** The chain whose balances the page shows. */
+  chain?: Chain.Chain | undefined
+  /** Better Auth's signature of an OAuth request's query, which omits `chain`. */
+  sig?: unknown
+}
+
+/**
+ * Selects the `chain` parameter, with a {@link Status} dot per listed chain. A signed request
+ * disables it, since a changed `chain` fails the signature.
+ */
+function ChainMenu() {
+  const client = Client.use()
+  const navigate = useNavigate()
+  const search: ChainSearch = useSearch({ strict: false })
+  const signed = search.sig !== undefined
+  // The signed query keeps the key authorization, which `useSearch` leaves out of the routes' fields.
+  const keyChainId = useRouterState({
+    select: (state) =>
+      signed
+        ? keyChain(
+            new URLSearchParams(state.location.searchStr).get(
+              'key_authorization',
+            ),
+          )
+        : undefined,
+  })
+
+  const listed = useQuery({
+    queryFn: async () => {
+      const response = await client.i.chains.$get()
+      return (await response.json()).chains
+    },
+    queryKey: ['devtools', 'chains'],
+    // A deployment's list changes only with its configuration.
+    staleTime: Number.POSITIVE_INFINITY,
+  })
+  const chains = listed.data ?? [
+    { chainId: ChainList.ids.mainnet, name: 'mainnet' },
+    { chainId: ChainList.ids.testnet, name: 'testnet' },
+  ]
+
+  // Only the deployment's listed chains have a status, so a deployment without one sends no probe.
+  const status = useQuery({
+    enabled: chains.some((entry) => !(entry.name in ChainList.ids)),
+    queryFn: async () =>
+      (await parseResponse(client.i.chains.status.$get())).chains,
+    queryKey: ['devtools', 'chains', 'status'],
+    refetchInterval: (query) =>
+      query.state.data?.every(ready) ? false : 3_000,
+  })
+  const statusOf = (name: string) =>
+    status.data?.find((entry) => entry.name === name)
+  // A key that names a chain no name lists shows its chain ID.
+  const chain =
+    keyChainId === undefined
+      ? (search.chain ?? 'mainnet')
+      : (chains.find((entry) => entry.chainId === keyChainId)?.name ??
+        String(keyChainId))
+  const selected = statusOf(chain)
+  // The menu opens in a portal, outside the toolbar's dark scheme.
+  const dark = vars({ colorScheme: 'dark' })
+
+  return (
+    <Menu.Root>
+      <Tip
+        label={(() => {
+          if (signed) return 'The signed request fixes the chain'
+          if (selected) return describe(selected)
+          return 'Chain'
+        })()}
+      >
+        <Menu.Trigger
+          aria-label={`Chain: ${chain}${selected ? `, ${ready(selected) ? 'ready' : 'starting'}` : ''}`}
+          disabled={signed}
+          render={<Button {...styles.chain()} size="small" variant="text" />}
+        >
+          <CryptoNetwork {...styles.icon()} />
+          <span {...styles.chainName()}>
+            {label(chain)}
+            {selected && <Status status={selected} />}
+          </span>
+        </Menu.Trigger>
+      </Tip>
+      <Menu.Popup
+        className={dark.className}
+        side="top"
+        sideOffset={12}
+        size="small"
+        style={dark.style}
+      >
+        <Menu.RadioGroup
+          onValueChange={(next: string) =>
+            // The navigation settles once the loaders finish, and the page renders any failure.
+            void navigate({
+              replace: true,
+              // Mainnet is the default, so its pages carry no parameter.
+              search: (previous: Record<string, unknown>) => ({
+                ...previous,
+                chain: next === 'mainnet' ? undefined : next,
+              }),
+              to: '.',
+            })
+          }
+          value={chain}
+        >
+          {chains.map((entry) => (
+            <Menu.RadioItem closeOnClick key={entry.name} value={entry.name}>
+              <span {...styles.chainName()}>
+                {label(entry.name)}
+                {(() => {
+                  const listedStatus = statusOf(entry.name)
+                  return listedStatus && <Status status={listedStatus} />
+                })()}
+              </span>
+              <span {...styles.chainId()}>{entry.chainId}</span>
+            </Menu.RadioItem>
+          ))}
+        </Menu.RadioGroup>
+      </Menu.Popup>
+    </Menu.Root>
+  )
+}
+
+/** Returns the chain ID of a base64url JSON `key_authorization`, or `undefined`. */
+function keyChain(value: string | null) {
+  if (!value) return undefined
+  try {
+    const parsed = JSON.parse(
+      atob(value.replaceAll('-', '+').replaceAll('_', '/')),
+    ) as { chainId?: unknown }
+    if (typeof parsed.chainId === 'number') return parsed.chainId
+    if (typeof parsed.chainId === 'string')
+      return Number(BigInt(parsed.chainId))
+    return undefined
+  } catch {
+    // A request that does not parse fails on the page, which shows its own error.
+    return undefined
+  }
+}
+
+/** A listed chain's status, from `GET /i/chains/status`. */
+type ChainStatus = {
+  /** `none` without a Tempo API. */
+  api: 'down' | 'none' | 'up'
+  /** Whether the chain's node responds. */
+  node: 'down' | 'up'
+}
+
+/** Returns whether the chain's node responds, and its Tempo API if it has one. */
+function ready(status: ChainStatus) {
+  return status.node === 'up' && status.api !== 'down'
+}
+
+/** Returns the tooltip text for a chain's status. */
+function describe(status: ChainStatus) {
+  if (status.node === 'down') return 'The node is not responding yet'
+  if (status.api === 'down')
+    return 'The node is up. The Tempo API is not responding yet'
+  if (status.api === 'none') return 'The node is up'
+  return 'The node and the Tempo API are up'
+}
+
+/** Shows a green dot for a ready chain, or a pulsing amber dot while it starts. */
+function Status(props: Status.Props) {
+  const isReady = ready(props.status)
+  return (
+    <span
+      aria-label={isReady ? 'Ready' : 'Starting'}
+      role="img"
+      {...styles.status({ ready: isReady })}
+    />
+  )
+}
+
+declare namespace Status {
+  type Props = {
+    /** The chain's status. */
+    status: ChainStatus
+  }
+}
+
+/** Returns a chain's label: `Mainnet`, `Testnet`, `Localnet` for `local`, or the name. */
+function label(name: string) {
+  if (name === 'mainnet') return 'Mainnet'
+  if (name === 'testnet') return 'Testnet'
+  if (name === 'local') return 'Localnet'
+  return name
+}
+
+/** Returns the color scheme and its switch, which applies to the root element. */
+function useScheme() {
+  const [scheme, setScheme] = useStored<'dark' | 'light' | undefined>(
+    'scheme',
+    undefined,
+  )
+  const [system, setSystem] = useState<'dark' | 'light'>('light')
+
+  useEffect(() => {
+    const query = matchMedia('(prefers-color-scheme: dark)')
+    const update = () => setSystem(query.matches ? 'dark' : 'light')
+    update()
+    query.addEventListener('change', update)
+    return () => query.removeEventListener('change', update)
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.style.colorScheme = scheme ?? ''
+  }, [scheme])
+
+  const current = scheme ?? system
+  const next = current === 'dark' ? 'light' : 'dark'
+
+  return {
+    current,
+    next,
+    // The system's own scheme clears the choice, so a later system change applies again.
+    toggle: () => setScheme(next === system ? undefined : next),
+  }
+}
+
+/** Switches the page between the light and dark schemes. */
+function SchemeButton(props: SchemeButton.Props) {
+  const { current, next, toggle } = props.scheme
+
+  return (
+    <Tip label={`Switch to ${next} mode`}>
+      <Button
+        {...styles.tool()}
+        aria-label={`Switch to ${next} mode`}
+        onClick={toggle}
+        shape="icon"
+        size="small"
+        variant="text"
+      >
+        {current === 'dark' ? (
+          <LightMode {...styles.icon()} />
+        ) : (
+          <DarkMode {...styles.icon()} />
+        )}
+      </Button>
+    </Tip>
+  )
+}
+
+declare namespace SchemeButton {
+  type Props = {
+    /** The page's color scheme and its switch. */
+    scheme: ReturnType<typeof useScheme>
+  }
+}
+
+/** Shows the newest message, or the selected one of the next three. */
+function InboxPanel(props: InboxPanel.Props) {
+  const [selected, setSelected] = useState<string | undefined>(undefined)
+  const { token } = props
+
+  const newest = props.messages[0]?.id
+  useEffect(() => setSelected(undefined), [newest])
+
+  const current =
+    props.messages.find((message) => message.id === selected) ??
+    props.messages[0]
+  const others = props.messages
+    .filter((message) => message !== current)
+    .slice(0, 3)
+
+  if (token === undefined)
+    return <p {...styles.empty()}>Connecting to the dev server's inbox.</p>
+
+  if (!current)
+    return (
+      <p {...styles.empty()}>
+        No email yet. Request a sign-in code, and its email shows here.
+      </p>
+    )
+
+  return (
+    <>
+      <MessageView summary={current} token={token} />
+      {others.length > 0 && (
+        <div {...styles.more()}>
+          <span {...styles.label()}>More</span>
+          {others.map((message) => (
+            <Button
+              {...styles.entry()}
+              key={message.id}
+              onClick={() => setSelected(message.id)}
+              size="small"
+              variant="text"
+            >
+              <span {...styles.entryTitle()}>
+                {code(message.subject) ?? (message.subject || '(No subject)')}
+              </span>
+              <span {...styles.entryMeta()}>
+                <span {...styles.entryAddress()}>{message.to[0]?.email}</span>
+                <span {...styles.entryTime()}>
+                  · {time(message.capturedAt)}
+                </span>
+              </span>
+            </Button>
+          ))}
+        </div>
+      )}
+    </>
+  )
+}
+
+declare namespace InboxPanel {
+  type Props = {
+    /** The messages, newest first. */
+    messages: readonly Summary[]
+    /** Void's dev-trigger token. Absent until the toolbar reads it. */
+    token: string | undefined
+  }
+}
+
+/** Shows a message's code, addresses, and text part. The code comes from the subject. */
+function MessageView(props: MessageView.Props) {
+  const { summary } = props
+  const value = code(summary.subject)
+
+  const message = useQuery({
+    queryFn: async () => {
+      const response = await fetch(
+        `${Inbox.path}/${encodeURIComponent(summary.id)}`,
+        { headers: { [Inbox.header]: props.token } },
+      )
+      if (!response.ok) {
+        await response.body?.cancel()
+        throw new Error('The inbox has no such message.')
+      }
+      return (await response.json()) as Message
+    },
+    queryKey: ['devtools', 'inbox', 'message', summary.id],
+  })
+
+  return (
+    <div {...styles.message()}>
+      {value ? (
+        <div {...styles.code()}>
+          {/* One cell for the field's hidden label and its slots. */}
+          <div>
+            <CodeInput
+              aria-label="Code"
+              // The page's own code field is the one that `fill` finds by its autofill hint.
+              autoComplete="off"
+              characters="digits"
+              defaultValue={value}
+              // The field is uncontrolled, so another message remounts it with its own code.
+              key={value}
+              length={6}
+              readOnly
+            />
+          </div>
+          <CopyButton aria-label="Copy code" size="small" value={value} />
+        </div>
+      ) : (
+        <h3 {...styles.subject()}>{summary.subject || '(No subject)'}</h3>
+      )}
+      <div {...styles.details()}>
+        <p {...styles.meta()}>
+          To {summary.to.map((address) => address.email).join(', ')} ·{' '}
+          {time(summary.capturedAt)}
+        </p>
+        <pre {...styles.body()}>
+          {(() => {
+            if (message.data) return message.data.text ?? '(No text part)'
+            if (message.isError) return 'This message is gone.'
+            return ''
+          })()}
+        </pre>
+      </div>
+    </div>
+  )
+}
+
+declare namespace MessageView {
+  type Props = {
+    /** The message, without its parts. */
+    summary: Summary
+    /** Void's dev-trigger token. */
+    token: string
+  }
+}
+
+/** Wraps a toolbar control in a tooltip. */
+function Tip(props: Tip.Props) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger delay={300} render={props.children} />
+      <Tooltip.Popup side="top" sideOffset={12}>
+        {props.label}
+      </Tooltip.Popup>
+    </Tooltip.Root>
+  )
+}
+
+declare namespace Tip {
+  type Props = {
+    /** The control, which receives the trigger's props. */
+    children: ReactElement
+    /** The tooltip text. */
+    label: string
+  }
+}
+
+/** Plays a two-note chime. The browser keeps it silent before the first user gesture. */
+function chime() {
+  try {
+    const context = new AudioContext()
+    const start = context.currentTime
+    for (const [offset, frequency] of [
+      [0, 1318.51],
+      [0.09, 1975.53],
+    ] as const) {
+      const gain = context.createGain()
+      gain.connect(context.destination)
+      gain.gain.setValueAtTime(0.0001, start + offset)
+      gain.gain.exponentialRampToValueAtTime(0.12, start + offset + 0.01)
+      gain.gain.exponentialRampToValueAtTime(0.0001, start + offset + 0.6)
+
+      const oscillator = context.createOscillator()
+      oscillator.connect(gain)
+      oscillator.frequency.value = frequency
+      oscillator.type = 'sine'
+      oscillator.start(start + offset)
+      oscillator.stop(start + offset + 0.6)
+    }
+    setTimeout(() => void context.close(), 1_000)
+  } catch {
+    // A browser without Web Audio stays silent.
+  }
+}
+
+/** Returns the code at the start of a sign-in email's subject, or `undefined`. */
+function code(subject: string) {
+  return /^\d{6}\b/.exec(subject)?.[0]
+}
+
+/**
+ * Pastes the code of `message` into the page's empty code field if the page shows a recipient.
+ * Returns whether it did.
+ */
+function fill(options: fill.Options) {
+  const value = code(options.message.subject)
+  const input = document.querySelector<HTMLInputElement>(
+    // The field's hidden input holds the joined value for its form, and takes no paste.
+    'input[autocomplete="one-time-code"]:not([aria-hidden="true"])',
+  )
+  if (!value || !input || input.value || input.readOnly) return false
+
+  const text = (input.closest('main') ?? document.body).textContent ?? ''
+  const named = options.message.to.some((address) =>
+    text.toLowerCase().includes(address.email.toLowerCase()),
+  )
+  if (!named) return false
+
+  const data = new DataTransfer()
+  data.setData('text/plain', value)
+  input.focus()
+  input.dispatchEvent(
+    new ClipboardEvent('paste', {
+      bubbles: true,
+      cancelable: true,
+      clipboardData: data,
+    }),
+  )
+  return true
+}
+
+declare namespace fill {
+  type Options = {
+    /** The message whose code fills the field. */
+    message: Summary
+  }
+}
+
+/** Formats a capture time as the local time of day. */
+function time(at: number) {
+  return new Date(at).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+/** Returns a state stored in `localStorage` under `tempo-id:devtools:<key>`, after hydration. */
+function useStored<value>(key: string, initial: value) {
+  const name = `tempo-id:devtools:${key}`
+  const [state, setState] = useState(initial)
+
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(name)
+      if (stored !== null) setState(JSON.parse(stored) as value)
+    } catch {
+      // Blocked storage keeps the initial value.
+    }
+  }, [name])
+
+  const set = useRef((next: value) => {
+    setState(next)
+    try {
+      if (next === undefined) localStorage.removeItem(name)
+      else localStorage.setItem(name, JSON.stringify(next))
+    } catch {
+      // Blocked storage keeps the state for this page only.
+    }
+  }).current
+
+  return [state, set] as const
+}
+
+/** The fill of the toolbar and its panel, darker than the page in either scheme. */
+const surface = '#161616 !custom'
+
+const nudge = keyframes(
+  {
+    '0%, 100%': { transform: 'translateX(0) rotate(0deg)' },
+    '20%': { transform: 'translateX(-4px) rotate(-1.5deg)' },
+    '40%': { transform: 'translateX(4px) rotate(1.5deg)' },
+    '60%': { transform: 'translateX(-2px) rotate(-0.75deg)' },
+    '80%': { transform: 'translateX(2px) rotate(0.75deg)' },
+  },
+  { id: 'tempo-id/devtools/nudge' },
+)
+
+const pulse = keyframes(
+  {
+    '0%, 100%': { opacity: 1, transform: 'scale(1)' },
+    '50%': { opacity: 0.35, transform: 'scale(0.75)' },
+  },
+  { id: 'tempo-id/devtools/pulse' },
+)
+
+const pop = keyframes(
+  {
+    from: { opacity: 0, transform: 'scale(0.4)' },
+    to: { opacity: 1, transform: 'scale(1)' },
+  },
+  { id: 'tempo-id/devtools/pop' },
+)
+
+namespace styles {
+  export const badge = style({
+    alignItems: 'center',
+    animationDuration: '320ms !custom',
+    animationName: `${pop} !custom`,
+    animationTimingFunction: vars.ease.overshoot,
+    backgroundColor: 'red.800',
+    borderRadius: 'full',
+    boxShadow: '0 0 0 2px #161616 !custom',
+    boxSizing: 'border-box',
+    color: 'white',
+    display: 'flex',
+    height: '16',
+    justifyContent: 'center',
+    minWidth: '16',
+    paddingInline: '4',
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: '-2px !custom',
+    top: '-2px !custom',
+    typography: 'label.12',
+    fontSize: '10px !custom',
+    lineHeight: '16px !custom',
+    '@media (prefers-reduced-motion: reduce)': {
+      animation: 'none !custom',
+    },
+  })
+
+  export const body = style({
+    backgroundColor: 'grayAlpha.100',
+    borderRadius: '12',
+    color: 'gray.900',
+    margin: '0',
+    maxHeight: '160',
+    minHeight: '80',
+    overflow: 'auto',
+    padding: '12',
+    typography: 'copy.13.mono',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  })
+
+  export const chain = style({
+    color: 'gray.1000',
+    paddingInline: '12',
+    borderRadius: 'full',
+  })
+
+  export const chainId = style({
+    color: 'gray.900',
+    marginInlineStart: 'auto !custom',
+    paddingInlineStart: '16',
+    typography: 'copy.13.mono',
+  })
+
+  // The status dot sits beside the name, centered on its line.
+  export const chainName = style({
+    alignItems: 'center',
+    display: 'inline-flex',
+    gap: '6',
+    typography: 'copy.13',
+  })
+
+  export const code = style({
+    alignItems: 'center',
+    display: 'flex',
+    gap: '12',
+  })
+
+  export const details = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8',
+  })
+
+  export const divider = style({
+    alignSelf: 'stretch',
+    backgroundColor: 'grayAlpha.300',
+    marginBlock: '8',
+    marginInline: '4',
+    width: '1px !custom',
+  })
+
+  export const empty = style({
+    color: 'gray.900',
+    margin: '0',
+    padding: '8',
+    typography: 'copy.13',
+  })
+
+  // `Button` wraps its children in one span, which spans the row so the meta ends at the right.
+  export const entry = style({
+    paddingInline: '8',
+    width: '100% !custom',
+    selectors: {
+      // A zero minimum width lets a long address shrink inside the row instead of overflowing it.
+      '& > span': {
+        alignItems: 'baseline !custom',
+        columnGap: '12',
+        flexGrow: '1 !custom',
+        justifyContent: 'space-between',
+        minWidth: '0 !custom',
+      },
+    },
+  })
+
+  // The address shortens before the time does.
+  export const entryAddress = style({
+    minWidth: '0 !custom',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  })
+
+  export const entryMeta = style({
+    color: 'gray.900',
+    columnGap: '4',
+    display: 'flex',
+    minWidth: '0 !custom',
+    typography: 'copy.13',
+  })
+
+  export const entryTime = style({ flexShrink: '0 !custom' })
+
+  export const entryTitle = style({
+    flexShrink: '0 !custom',
+    typography: 'copy.13.mono',
+  })
+
+  export const hidden = style({
+    clipPath: 'inset(50%) !custom',
+    height: '1px !custom',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px !custom',
+  })
+
+  export const icon = style({
+    flexShrink: '0 !custom',
+    height: '18',
+    width: '18',
+  })
+
+  export const label = style({
+    color: 'gray.900',
+    paddingBlock: '4',
+    paddingInline: '8',
+    typography: 'label.12',
+  })
+
+  export const message = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16',
+  })
+
+  export const meta = style({
+    color: 'gray.900',
+    margin: '0',
+    typography: 'copy.13',
+  })
+
+  export const more = style({
+    borderTopColor: 'grayAlpha.200',
+    borderTopStyle: 'solid !custom',
+    borderTopWidth: '1px !custom',
+    display: 'flex',
+    flexDirection: 'column',
+    marginInline: '-4',
+    paddingTop: '8',
+  })
+
+  export const panel = style({
+    backgroundColor: surface,
+    borderRadius: '16',
+    boxShadow: 'popover',
+    boxSizing: 'border-box',
+    color: 'foreground',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '12',
+    maxHeight: 'min(70dvh, 520px) !custom',
+    outline: 'none !custom',
+    overflowY: 'auto',
+    padding: '12',
+    transformOrigin: 'var(--transform-origin) !custom',
+    transitionDuration: '200',
+    transitionProperty: 'opacity, scale',
+    transitionTimingFunction: 'snappy',
+    width: 'min(360px, calc(100vw - 32px)) !custom',
+    selectors: {
+      '&[data-ending-style]': {
+        opacity: '0 !custom',
+        scale: 'enter',
+        transitionDuration: '140',
+      },
+      '&[data-starting-style]': { opacity: '0 !custom', scale: 'enter' },
+    },
+    '@media (prefers-reduced-motion: reduce)': {
+      transitionProperty: 'opacity',
+      selectors: {
+        '&[data-ending-style], &[data-starting-style]': {
+          scale: 'none !custom',
+        },
+      },
+    },
+  })
+
+  export const positioner = style({ zIndex: 'popover' })
+
+  export const root = style({
+    bottom: '16',
+    display: 'flex',
+    justifyContent: 'center',
+    left: '0',
+    pointerEvents: 'none',
+    position: 'fixed',
+    right: '0',
+    zIndex: 'overlay',
+  })
+
+  export const status = variants({
+    base: {
+      borderRadius: 'full',
+      display: 'inline-block',
+      flexShrink: '0 !custom',
+      height: '8',
+      // The name is mostly lowercase, so the line's center sits above the letters' optical center.
+      // `top` keeps the offset apart from the pulse's `transform`.
+      position: 'relative',
+      top: '1px !custom',
+      width: '8',
+    },
+    variants: {
+      ready: {
+        false: {
+          animationDuration: '1200ms !custom',
+          animationIterationCount: 'infinite !custom',
+          animationName: `${pulse} !custom`,
+          animationTimingFunction: 'ease-in-out !custom',
+          backgroundColor: 'amber.700',
+          '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none !custom',
+          },
+        },
+        true: { backgroundColor: 'green.700' },
+      },
+    },
+  })
+
+  export const subject = style({ margin: '0', typography: 'heading.16' })
+
+  export const tool = style({ color: 'gray.1000' })
+
+  export const toolbar = style({
+    alignItems: 'center',
+    backgroundColor: surface,
+    borderRadius: 'full',
+    boxShadow: 'popover',
+    color: 'foreground',
+    display: 'flex',
+    gap: '2',
+    padding: '6',
+    pointerEvents: 'auto',
+    transformOrigin: 'bottom center !custom',
+    selectors: {
+      '&[data-nudging]': {
+        animationDuration: '480ms !custom',
+        animationName: `${nudge} !custom`,
+        animationTimingFunction: vars.ease.snappy,
+      },
+    },
+    '@media (prefers-reduced-motion: reduce)': {
+      selectors: { '&[data-nudging]': { animation: 'none !custom' } },
+    },
+  })
+}