@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/products/tempo-console.md

@@ -0,0 +1,671 @@
+# Tempo Console
+
+Tempo Console is the web app for Tempo API projects, keys, usage, and billing.
+
+> [!NOTE]
+> The reference layouts on this page are compositions of library components and `style`, not shipped components. `@tempoxyz/ds` exports no `ApiKeysPage` or `CreateKeyForm`. Copy a layout into your app and adapt it.
+
+## Overview
+
+Tempo Console runs at [console.tempo.xyz](https://console.tempo.xyz) and is invite-only. You log in with an email address, a Google account, or a passkey, then choose an organization.
+
+* **Organization:** Holds the team, projects, billing, and aggregate usage.
+* **Project:** Holds one app or integration and its API keys.
+* **Environment:** Separates production and sandbox keys, usage, and billing.
+* **API Key:** A project-scoped credential for calling Tempo APIs.
+
+Roles:
+
+* **Developers:** Create keys, test in sandbox, and see project usage.
+* **Owners:** Manage billing, change roles, and remove members.
+* **Admins:** Invite members and review pending invitations.
+
+## Surfaces
+
+The console is a web app built with `@tempoxyz/ds`. No mobile app is documented.
+
+The Tempo API exposes the same organization resources through management endpoints. Keys with the `management:read` and `management:write` scopes can call them.
+
+## Key Screens
+
+### API Keys
+
+```tsx
+import { AlertDialog, AppShell, Banner, Button, ButtonGroup, Empty, Identicon, Menu, Select, SidebarMenu, style, Surface, Table } from '@tempoxyz/ds'
+import {
+  Analytics,
+  CreditCard,
+  Folder,
+  Key,
+  LogOut,
+  MoreHorizontal,
+  Plus,
+  Sort,
+  Users,
+} from '@tempoxyz/ds/icons'
+import { useState } from 'react'
+
+export const fill = true
+type Environment = 'production' | 'sandbox'
+
+const prefixes = { production: 'tempo:sk:', sandbox: 'tempo_sandbox:sk:' }
+
+const projects = {
+  all: 'All projects',
+  'checkout-service': 'checkout-service',
+  'payouts-worker': 'payouts-worker',
+}
+
+const keys = [
+  {
+    created: 'Oct 14, 2026',
+    environment: 'production',
+    id: 'key_01',
+    last4: 'a91c',
+    lastUsed: '2 minutes ago',
+    name: 'checkout-service production',
+    project: 'checkout-service',
+  },
+  {
+    created: 'Sep 30, 2026',
+    environment: 'production',
+    id: 'key_02',
+    last4: '07e1',
+    lastUsed: 'Yesterday',
+    name: 'payouts-worker production',
+    project: 'payouts-worker',
+  },
+  {
+    created: 'Oct 18, 2026',
+    environment: 'sandbox',
+    id: 'key_03',
+    last4: '5a22',
+    lastUsed: '1 hour ago',
+    name: 'checkout-service CI',
+    project: 'checkout-service',
+  },
+  {
+    created: 'Oct 19, 2026',
+    environment: 'sandbox',
+    id: 'key_04',
+    last4: 'c0d9',
+    lastUsed: 'Never',
+    name: 'jake local development',
+    project: 'payouts-worker',
+  },
+]
+
+export function Demo() {
+  const [environment, setEnvironment] = useState<Environment>('sandbox')
+  const [project, setProject] = useState<string | null>('all')
+  const [revoked, setRevoked] = useState<readonly string[]>([])
+  const [target, setTarget] = useState<(typeof keys)[number]>()
+
+  const visible = keys.filter(
+    (key) =>
+      key.environment === environment &&
+      !revoked.includes(key.id) &&
+      (project === 'all' || key.project === project),
+  )
+
+  return (
+    <div {...styles.frame()}>
+      <AppShell.Root style={{ height: '100%', minHeight: 0, overflowY: 'auto' }}>
+        <AppShell.Sidebar aria-label="Console" style={{ height: '100%' }}>
+          <AppShell.SidebarHeader>
+            <Menu.Root>
+              <Menu.Trigger
+                aria-label="Organization and environment"
+                render={<SidebarMenu.Item render={<button type="button" />} />}
+              >
+                <Identicon
+                  address="0x71C7656EC7ab88b098defB751B7401B5f6d8976F"
+                  aria-hidden
+                  size="32"
+                />
+                <span {...styles.stack()}>
+                  <span {...styles.name()}>Acme Payments</span>
+                  <span {...styles.caption()}>
+                    {environment === 'sandbox' ? 'Sandbox' : 'Production'}
+                  </span>
+                </span>
+                <Sort />
+              </Menu.Trigger>
+              <Menu.Popup align="start">
+                <Menu.Group>
+                  <Menu.GroupLabel>Environment</Menu.GroupLabel>
+                  <Menu.RadioGroup
+                    onValueChange={(value) => setEnvironment(value as Environment)}
+                    value={environment}
+                  >
+                    <Menu.RadioItem value="production">Production</Menu.RadioItem>
+                    <Menu.RadioItem value="sandbox">Sandbox</Menu.RadioItem>
+                  </Menu.RadioGroup>
+                </Menu.Group>
+              </Menu.Popup>
+            </Menu.Root>
+          </AppShell.SidebarHeader>
+          <AppShell.SidebarBody>
+            <SidebarMenu.Root>
+              <SidebarMenu.Group aria-label="Organization">
+                <SidebarMenu.Item href="#projects">
+                  <Folder />
+                  Projects
+                </SidebarMenu.Item>
+                <SidebarMenu.Item active href="#api-keys">
+                  <Key />
+                  API Keys
+                </SidebarMenu.Item>
+                <SidebarMenu.Item href="#usage">
+                  <Analytics />
+                  Usage
+                </SidebarMenu.Item>
+                <SidebarMenu.Item href="#billing">
+                  <CreditCard />
+                  Billing
+                </SidebarMenu.Item>
+                <SidebarMenu.Item href="#team">
+                  <Users />
+                  Team
+                </SidebarMenu.Item>
+              </SidebarMenu.Group>
+            </SidebarMenu.Root>
+          </AppShell.SidebarBody>
+          <AppShell.SidebarFooter>
+            <Menu.Root>
+              <Menu.Trigger
+                aria-label="Account menu"
+                render={<SidebarMenu.Item render={<button type="button" />} />}
+              >
+                <Identicon
+                  address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
+                  aria-hidden
+                  size="24"
+                />
+                <span {...styles.grow()}>jake@acme.dev</span>
+              </Menu.Trigger>
+              <Menu.Popup side="top">
+                <Menu.Item>
+                  <LogOut />
+                  Log out
+                </Menu.Item>
+              </Menu.Popup>
+            </Menu.Root>
+          </AppShell.SidebarFooter>
+        </AppShell.Sidebar>
+
+        <AppShell.Main>
+          <AppShell.Header>
+            <AppShell.Title>API Keys</AppShell.Title>
+            <div {...styles.actions()}>
+              <Select.Root items={projects} onValueChange={setProject} value={project}>
+                <Select.Trigger aria-label="Project">
+                  <Select.Value />
+                  <Select.Icon />
+                </Select.Trigger>
+                <Select.Popup size="small">
+                  {Object.entries(projects).map(([value, label]) => (
+                    <Select.Item key={value} label={label} value={value}>
+                      <Select.ItemText>{label}</Select.ItemText>
+                    </Select.Item>
+                  ))}
+                </Select.Popup>
+              </Select.Root>
+              <Button size="small">
+                <Plus />
+                New key
+              </Button>
+              <AppShell.Trigger />
+            </div>
+          </AppShell.Header>
+
+          {environment === 'sandbox' && (
+            <Banner intent="warning" {...styles.banner()}>
+              <Banner.Content>
+                Sandbox. Keys here reach only non-mainnet chains, such as testnet.
+              </Banner.Content>
+            </Banner>
+          )}
+
+          <Surface>
+            {visible.length === 0 ? (
+              <Empty.Root>
+                <Empty.Icon>
+                  <Key />
+                </Empty.Icon>
+                <Empty.Title>No API keys</Empty.Title>
+                <Empty.Description>
+                  Create a key to call Tempo APIs from this project.
+                </Empty.Description>
+                <Empty.Actions>
+                  <Button size="small">New key</Button>
+                </Empty.Actions>
+              </Empty.Root>
+            ) : (
+              <div {...styles.scroll()}>
+                <Table.Root>
+                  <Table.Caption>
+                    {environment === 'sandbox' ? 'Sandbox' : 'Production'} keys,{' '}
+                    {project === 'all' ? 'all projects' : project}
+                  </Table.Caption>
+                  <Table.Head>
+                    <Table.Row>
+                      <Table.HeaderCell>Name</Table.HeaderCell>
+                      <Table.HeaderCell>Project</Table.HeaderCell>
+                      <Table.HeaderCell>Key</Table.HeaderCell>
+                      <Table.HeaderCell>Created</Table.HeaderCell>
+                      <Table.HeaderCell>Last used</Table.HeaderCell>
+                      <Table.HeaderCell justify="end">
+                        <span {...styles.hidden()}>Actions</span>
+                      </Table.HeaderCell>
+                    </Table.Row>
+                  </Table.Head>
+                  <Table.Body>
+                    {visible.map((key) => (
+                      <Table.Row key={key.id}>
+                        <Table.Cell>{key.name}</Table.Cell>
+                        <Table.Cell>{key.project}</Table.Cell>
+                        <Table.Cell mono>
+                          {prefixes[environment]}…{key.last4}
+                        </Table.Cell>
+                        <Table.Cell>{key.created}</Table.Cell>
+                        <Table.Cell>{key.lastUsed}</Table.Cell>
+                        <Table.Cell justify="end">
+                          <Menu.Root>
+                            <Menu.Trigger
+                              aria-label={`Actions for ${key.name}`}
+                              render={<Button shape="icon" size="small" variant="tertiary" />}
+                            >
+                              <MoreHorizontal />
+                            </Menu.Trigger>
+                            <Menu.Popup align="end">
+                              <Menu.Item intent="negative" onClick={() => setTarget(key)}>
+                                Revoke key
+                              </Menu.Item>
+                            </Menu.Popup>
+                          </Menu.Root>
+                        </Table.Cell>
+                      </Table.Row>
+                    ))}
+                  </Table.Body>
+                </Table.Root>
+              </div>
+            )}
+          </Surface>
+        </AppShell.Main>
+      </AppShell.Root>
+
+      <AlertDialog.Root
+        onOpenChange={(open) => {
+          if (!open) setTarget(undefined)
+        }}
+        open={target !== undefined}
+      >
+        <AlertDialog.Popup>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Revoke {target?.name}?</AlertDialog.Title>
+            <AlertDialog.Description>
+              Requests that use this key stop authenticating. You can't undo this.
+            </AlertDialog.Description>
+          </AlertDialog.Header>
+          <ButtonGroup>
+            <AlertDialog.Close render={<Button size="large" variant="secondary" />}>
+              Keep key
+            </AlertDialog.Close>
+            <AlertDialog.Close
+              onClick={() => {
+                if (target) setRevoked([...revoked, target.id])
+              }}
+              render={<Button size="large" />}
+            >
+              Revoke key
+            </AlertDialog.Close>
+          </ButtonGroup>
+        </AlertDialog.Popup>
+      </AlertDialog.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({ alignItems: 'center', columnGap: '8', display: 'flex' })
+
+  export const banner = style({ marginBlockEnd: '16' })
+
+  export const caption = style({ color: 'content.secondary', margin: '0', typography: 'body.b3' })
+
+  // The transform makes the frame the containing block for the mobile drawer.
+  export const frame = style({
+    borderRadius: 'sm',
+    height: '36rem !custom',
+    overflow: 'hidden',
+    transform: 'translateZ(0) !custom',
+    selectors: {
+      // The maximized gallery preview shows the shell at full window height.
+      ':root[data-maximized] &': { borderRadius: '0px !custom', height: '100vh !custom' },
+    },
+  })
+
+  export const grow = style({ flex: '1 !custom', minWidth: '0 !custom' })
+
+  // Visually hidden text still names the column for screen readers.
+  export const hidden = style({
+    clipPath: 'inset(50%) !custom',
+    height: '1px !custom',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px !custom',
+  })
+
+  export const name = style({ margin: '0', typography: 'body.b2' })
+
+  // Cells keep one line and the table scrolls sideways, so key prefixes never break mid-token.
+  export const scroll = style({
+    overflowX: 'auto',
+    selectors: { '& :is(td, th)': { whiteSpace: 'nowrap' } },
+  })
+
+  export const stack = style({ display: 'flex', flex: '1 !custom', flexDirection: 'column' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Products/ConsoleKeys.tsx)
+
+API Keys lists the keys of the selected environment, for the whole organization by default. To show the sandbox banner and keys, switch to sandbox in the organization menu.
+
+* **Navigation (SidebarMenu):** The app shell holds Projects, API Keys, Usage, Billing, and Team.
+* **Environment (Menu.RadioGroup):** The organization menu switches the environment. In sandbox, a warning banner stays below the header.
+* **Project Filter (Select):** Filters keys by project, beside the New key button in the header.
+* **Key Table (mono):** Lists the name, project, prefix and last four characters, creation date, and last use.
+* **Revoke From the Row (negative):** The row menu holds Revoke key, which opens an alert dialog.
+* **No Matching Keys (Empty):** Replaces the table with an empty state when no key matches the filters.
+
+Patterns:
+
+* [Tables and Lists](../patterns/tables-and-lists.md) for the key table, its filter, and row actions.
+* [Destructive Actions](../patterns/destructive-actions.md) for the revoke confirmation.
+* [Empty States](../patterns/empty-states.md) for a project or environment with no keys.
+
+### Create Key
+
+```tsx
+import { Accordion, Alert, Badge, Button, Checkbox, CheckboxGroup, Field, ListGroup, SecretValue, Select, style, Surface, TextInput } from '@tempoxyz/ds'
+import { useState } from 'react'
+
+export const fill = true
+const projects = { 'checkout-service': 'checkout-service', 'payouts-worker': 'payouts-worker' }
+
+// The self-serve scopes and descriptions from the Tempo API scope catalog (`GET /v1/scopes`).
+const scopes = [
+  ['data:read', 'Read public chain data: tokens, transactions, transfers, blocks, and receipts.'],
+  ['indexer:query', 'Run ad-hoc queries against the raw indexer passthrough.'],
+  ['management:read', 'Read organization resources across projects and environments.'],
+  [
+    'management:write',
+    'Create, update, and delete organization resources across projects and environments.',
+  ],
+  ['mpp:write', 'Validate and broadcast MPP credentials through Tempo.'],
+  ['routes:read', 'Read organization route transfers, deposit addresses, and deposits.'],
+  ['rpc-relay:read', 'Fill and submit transactions through the relay.'],
+  ['rpc-relay:sponsor', 'Sponsor transaction fees through the relay as the managed fee payer.'],
+] as const
+
+export function Demo() {
+  const [created, setCreated] = useState(false)
+  const [keyName, setKeyName] = useState('')
+  const [project, setProject] = useState<string | null>('checkout-service')
+  const [selected, setSelected] = useState<string[]>(['data:read', 'rpc-relay:read'])
+  const [submitted, setSubmitted] = useState(false)
+
+  const missing = submitted && keyName.trim() === ''
+
+  const reset = () => {
+    setCreated(false)
+    setKeyName('')
+    setSubmitted(false)
+  }
+
+  return (
+    <div {...styles.page()}>
+      <Surface {...styles.panel()}>
+        <Surface.Header>
+          <Surface.Title>{created ? 'Key created' : 'New key'}</Surface.Title>
+          <Badge size="small">Sandbox</Badge>
+        </Surface.Header>
+
+        {created ? (
+          <div {...styles.form()}>
+            <Alert intent="warning">
+              <Alert.Icon />
+              <Alert.Content>
+                Copy this key now and store it in a secret manager. You can't view it again.
+              </Alert.Content>
+            </Alert>
+            <SecretValue label="API key" value="tempo_sandbox:sk:demo_8QnV2kXbT4mL9wRz7cYp3fHs" />
+            <ListGroup.Root>
+              <ListGroup.Row>
+                <ListGroup.Label>Name</ListGroup.Label>
+                {keyName}
+              </ListGroup.Row>
+              <ListGroup.Row>
+                <ListGroup.Label>Project</ListGroup.Label>
+                {project}
+              </ListGroup.Row>
+              <ListGroup.Row>
+                <ListGroup.Label>Scopes</ListGroup.Label>
+                <span {...styles.scope()}>{selected.join(', ') || 'None'}</span>
+              </ListGroup.Row>
+            </ListGroup.Root>
+            <div {...styles.actions()}>
+              <Button onClick={reset}>Done</Button>
+            </div>
+          </div>
+        ) : (
+          <form
+            noValidate
+            onSubmit={(event) => {
+              event.preventDefault()
+              setSubmitted(true)
+              if (keyName.trim() !== '') setCreated(true)
+            }}
+            {...styles.form()}
+          >
+            <Field.Root>
+              <Field.Label>Project</Field.Label>
+              <Select.Root items={projects} onValueChange={setProject} value={project}>
+                <Select.Trigger>
+                  <Select.Value placeholder="Select a project" />
+                  <Select.Icon />
+                </Select.Trigger>
+                <Select.Popup>
+                  {Object.entries(projects).map(([value, label]) => (
+                    <Select.Item key={value} label={label} value={value}>
+                      <Select.ItemText>{label}</Select.ItemText>
+                    </Select.Item>
+                  ))}
+                </Select.Popup>
+              </Select.Root>
+            </Field.Root>
+
+            <Field.Root invalid={missing}>
+              <Field.Label>Name</Field.Label>
+              <TextInput.Group>
+                <TextInput.Control
+                  autoComplete="off"
+                  onChange={(event) => setKeyName(event.target.value)}
+                  placeholder="checkout-service CI"
+                  value={keyName}
+                />
+              </TextInput.Group>
+              <Field.Description>
+                Name the deployment or owner, so you can find the key when you rotate it.
+              </Field.Description>
+              <Field.Error match={missing}>Enter a name for the key.</Field.Error>
+            </Field.Root>
+
+            <Accordion.Root>
+              <Accordion.Item value="scopes">
+                <Accordion.Trigger>
+                  View scopes ({selected.length} of {scopes.length} selected)
+                </Accordion.Trigger>
+                <Accordion.Panel>
+                  <CheckboxGroup aria-label="Scopes" onValueChange={setSelected} value={selected}>
+                    {scopes.map(([scope, description]) => (
+                      <Field.Root key={scope}>
+                        <Field.Item>
+                          <Checkbox value={scope} />
+                          <Field.Label>
+                            <span {...styles.scope()}>{scope}</span>
+                          </Field.Label>
+                        </Field.Item>
+                        <Field.Description {...styles.hint()}>{description}</Field.Description>
+                      </Field.Root>
+                    ))}
+                  </CheckboxGroup>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion.Root>
+
+            {selected.length === 0 && (
+              <Alert intent="warning">
+                <Alert.Icon />
+                <Alert.Content>A key with no scopes can't access scoped APIs.</Alert.Content>
+              </Alert>
+            )}
+
+            <div {...styles.actions()}>
+              <Button type="button" variant="secondary">
+                Cancel
+              </Button>
+              <Button type="submit">Create key</Button>
+            </div>
+          </form>
+        )}
+      </Surface>
+    </div>
+  )
+}
+
+namespace styles {
+  export const actions = style({
+    columnGap: '8',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    '@media (max-width: 40rem)': {
+      flexDirection: 'column-reverse',
+      rowGap: '8',
+    },
+  })
+
+  export const form = style({ display: 'flex', flexDirection: 'column', rowGap: '24' })
+
+  // Aligns each scope's description with its label, past the 20px checkbox and the 16px gap.
+  export const hint = style({ paddingInlineStart: '36' })
+
+  export const page = style({
+    backgroundColor: 'background.primary',
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '16',
+  })
+
+  export const panel = style({ maxWidth: '32rem !custom', width: '100% !custom' })
+
+  export const scope = style({ typography: 'mono.m1' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Products/ConsoleCreateKey.tsx)
+
+New key asks for a project, a name, and scopes. The console shows the token only once, after creation, so the layout switches to a reveal state with the key masked.
+
+* **Project and Name (Field):** A select picks the project. An input names the key and shows an error when it is empty.
+* **Scopes (CheckboxGroup):** View scopes opens each scope, its identifier, and its description from the Tempo API catalog.
+* **Warnings (warning):** With no scopes, an alert warns that the key can't reach scoped APIs. A badge names the environment.
+* **Reveal Once (SecretValue):** After Create key, holds the masked token. Copy works without a reveal.
+
+Patterns:
+
+* [Forms](../patterns/forms.md) for labels, descriptions, and the submit action.
+* [Errors and Validation](../patterns/errors-and-validation.md) for the missing name and the empty scope set.
+
+### Webhooks
+
+Webhook subscriptions deliver signed onchain events to an HTTPS URL, a Slack incoming webhook, or a Better Stack source. The Tempo docs describe only the API (`/v1/webhooks`), so this page has no webhook layout yet.
+
+To build one, reuse these parts:
+
+* **Subscriptions (Table):** Lists subscriptions with their event type, destination, and status.
+* **Signing Secret (SecretValue):** Holds the `whsec_` signing secret, shown once at creation.
+* **Deliveries (numeric):** Lists deliveries with attempt, response status, and response time.
+
+## Content
+
+### Show the Key's Identity, Never the Secret
+
+After creation, identify a key by its prefix and last four characters, such as `tempo:sk:…a91c`. Show the full token once, masked in [SecretValue](../components/secret-value.md), and tell people to copy it into a secret manager now.
+
+**Do:** Say what happens when the reveal state closes: You can't view this key again.
+
+**Don't:** Offer to show an existing key again. The console can't reveal it, so a lost key needs a
+replacement.
+
+### Name the Environment Wherever It Changes Meaning
+
+Sandbox and production keys differ in prefix and in the chains they reach. Show the environment on every screen that creates, lists, or bills for keys.
+
+* **Production (tempo:sk:):** Reach any chain, including mainnet.
+* **Sandbox (tempo_sandbox:sk:):** Reach non-mainnet chains only.
+
+### Name Keys After a Deployment or Owner
+
+Suggest names such as checkout-service production or checkout-service CI in the placeholder and description. A descriptive name identifies the integration that a revoke stops.
+
+### Write Scopes as Identifiers
+
+Show each scope as its identifier in monospace, such as `data:read` or `rpc-relay:sponsor`, with its catalog description. Scopes can't change on an existing key, so state this where people pick them.
+
+### State Side Effects, Including Missing Ones
+
+A revoke stops the requests that use the key. The removal of a team member does not revoke the member's keys. State both in the confirmation, so an owner checks API Keys next.
+
+### Quote Error Codes Exactly
+
+If a request fails, show the code in monospace and the fix beside it. For example, a sandbox key that targets mainnet returns `403 api_key_forbidden`. The fix is `chainId=testnet` or a production key.
+
+## Open Gaps
+
+The library has no part for these needs yet. Before you add one, propose it as an issue in the Design System project.
+
+* **Charts:** Usage shows request volume, sponsorship, and traffic by route and key. No chart shows volume over time.
+* **Table Tools:** Tables have no sorting, column filters, or selection. Build filters from selects.
+* **Multi-Line Code:** Snippets hold one line. A test request with headers needs a multi-line code block.
+* **Relative Time:** Nothing formats `lastUsedAt` as 2 minutes ago. Use `Intl.RelativeTimeFormat` in your app.
+* **Brand Marks:** The icon set has no Google mark for the Continue with Google button.
+
+## Related
+
+[Tables and Lists](../patterns/tables-and-lists.md)
+
+Covers key and member tables.
+
+[Destructive Actions](../patterns/destructive-actions.md)
+
+Covers revoking keys and removing members.
+
+[AppShell](../components/app-shell.md)
+
+Use for the console frame.
+
+[SecretValue](../components/secret-value.md)
+
+Use for one-time key reveal.
+
+[Table](../components/table.md)
+
+Use for key lists.
+
+[Banner](../components/banner.md)
+
+Use for the sandbox notice.