tapimo 0.5.3 → 0.7.0

package/src/admin/ui/plugin.ts

@@ -23,7 +23,8 @@ const outFile = path.join(here, '..', 'ui.generated.ts')
 // Total gzipped budget for the whole UI; the React + TanStack + Regen baseline
 // is heavier than a hand-rolled SPA, so fail loudly before it bloats the
 // package. Raise deliberately (and revisit code-splitting) if it trips.
-const maxGzipBytes = 405_000
+// Raised from 405 KB for the early-access page.
+const maxGzipBytes = 415_000
 
 const contentTypes: Record<string, string> = {
   '.css': 'text/css; charset=utf-8',

package/src/admin/ui/src/lib/early-access.ts

@@ -0,0 +1,63 @@
+import * as ReactQuery from '@tanstack/react-query'
+import type { InferResponseType } from 'hono/client'
+
+import { client } from './client'
+
+/** A stored allowlist entry (domain or exact email) from the list endpoint. */
+export type Entry = InferResponseType<(typeof client)['early-access']['$get'], 200>['data'][number]
+
+/** List early-access allowlist entries. */
+export namespace list {
+  export const key = ['early-access'] as const
+  export async function fn() {
+    const response = await client['early-access'].$get()
+    if (!response.ok) throw new Error('Failed to load entries.')
+    return response.json()
+  }
+  export function options() {
+    return ReactQuery.queryOptions({ queryFn: fn, queryKey: key, staleTime: 30_000 })
+  }
+  export function useQuery() {
+    return ReactQuery.useQuery(options())
+  }
+}
+
+/** Add an allowlist entry: a bare domain or a full email. */
+export namespace add {
+  export type Input = { entry: string }
+  export async function fn(input: Input) {
+    const response = await client['early-access'].$post({ json: input })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to add entry.'))
+    return response.json()
+  }
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key }),
+    })
+  }
+}
+
+/** Remove an allowlist entry. */
+export namespace remove {
+  export type Input = { entry: string }
+  export async function fn({ entry }: Input) {
+    const response = await client['early-access'].$delete({ json: { entry } })
+    if (!response.ok) throw new Error(await errorMessage(response, 'Failed to remove entry.'))
+    return response.json()
+  }
+  export function useMutation() {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: fn,
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key }),
+    })
+  }
+}
+
+/** Server error-envelope message, with a fallback for non-JSON bodies. */
+async function errorMessage(response: { json(): Promise<unknown> }, fallback: string) {
+  const body = (await response.json().catch(() => null)) as { error?: { message?: string } } | null
+  return body?.error?.message ?? fallback
+}

package/src/admin/ui/src/lib/organizations.test.ts

@@ -1,9 +1,11 @@
 import { QueryClient } from '@tanstack/react-query'
 import { createMemoryHistory, createRouter } from '@tanstack/react-router'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it, vi } from 'vite-plus/test'
 
 import { routeTree } from '../routeTree.gen'
-import { Route as DetailRoute } from '../routes/organizations_.$orgId'
+import { BillingSourcesCard, Route as DetailRoute } from '../routes/organizations_.$orgId'
 import { Route as ListRoute } from '../routes/organizations'
 import * as Organizations from './organizations'
 
@@ -49,6 +51,84 @@ describe('searchParameters', () => {
   })
 })
 
+describe('withEnabledSources', () => {
+  it('replaces only organization-wide billing availability', () => {
+    const detail = {
+      billing: {
+        enabledSources: [],
+        production: { settings: null, source: null },
+        sandbox: { settings: null, source: null },
+      },
+      createdAt: '2026-01-01T00:00:00.000Z',
+      createdBy: null,
+      id: 'org_example',
+      memberCount: 0,
+      name: 'Example',
+      projectCount: 0,
+      updatedAt: '2026-01-01T00:00:00.000Z',
+      userId: null,
+    } satisfies Organizations.Detail
+
+    const updated = Organizations.withEnabledSources({
+      detail,
+      enabledSources: ['stripe', 'tempo'],
+    })
+
+    expect({
+      original: detail.billing.enabledSources,
+      productionPreserved: updated.billing.production === detail.billing.production,
+      updated: updated.billing.enabledSources,
+    }).toMatchInlineSnapshot(`
+      {
+        "original": [],
+        "productionPreserved": true,
+        "updated": [
+          "stripe",
+          "tempo",
+        ],
+      }
+    `)
+  })
+})
+
+describe('BillingSourcesCard', () => {
+  it('renders source state and the setup-only warning', () => {
+    const markup = renderToStaticMarkup(
+      createElement(BillingSourcesCard, {
+        enabledSources: ['stripe'],
+        error: null,
+        onChange() {},
+        pending: false,
+      }),
+    )
+
+    function isChecked(label: string) {
+      const marker = `aria-label="${label} billing source"`
+      const markerIndex = markup.indexOf(marker)
+      if (markerIndex === -1) return undefined
+      const tag = markup.slice(
+        markup.lastIndexOf('<', markerIndex),
+        markup.indexOf('>', markerIndex),
+      )
+      return tag.includes('aria-checked="true"')
+    }
+
+    expect({
+      stripe: isChecked('Stripe'),
+      tempo: isChecked('Tempo'),
+      warning: markup.includes(
+        'Disabling a source only blocks new setup. Existing billing connections continue to work.',
+      ),
+    }).toMatchInlineSnapshot(`
+      {
+        "stripe": true,
+        "tempo": false,
+        "warning": true,
+      }
+    `)
+  })
+})
+
 describe('organization routes', () => {
   it('matches a direct detail URL without the list route as a parent', () => {
     const router = createRouter({

package/src/admin/ui/src/lib/organizations.ts

@@ -6,6 +6,10 @@ import { client } from './client'
 
 type ListResponse = InferResponseType<(typeof client)['organizations']['$get'], 200>
 type DetailResponse = InferResponseType<(typeof client)['organizations'][':orgId']['$get'], 200>
+type BillingSourcesResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['billing-sources'][':source']['$put'],
+  200
+>
 type MembersResponse = InferResponseType<
   (typeof client)['organizations'][':orgId']['members']['$get'],
   200
@@ -37,6 +41,9 @@ export type Organization = ListResponse['data'][number]
 /** Detailed organization information, including billing state. */
 export type Detail = DetailResponse
 
+/** An organization-wide billing source. */
+export type BillingSource = Detail['billing']['enabledSources'][number]
+
 /** An organization member with resolved identity. */
 export type Member = MembersResponse['data'][number]
 
@@ -138,6 +145,91 @@ export namespace get {
   }
 }
 
+/** Returns organization detail with its enabled billing sources replaced. */
+export function withEnabledSources(options: withEnabledSources.Options): Detail {
+  return {
+    ...options.detail,
+    billing: {
+      ...options.detail.billing,
+      enabledSources: options.enabledSources,
+    },
+  }
+}
+
+export declare namespace withEnabledSources {
+  /** Inputs for replacing enabled billing sources in cached organization detail. */
+  type Options = {
+    /** Organization detail to update. */
+    detail: Detail
+    /** Current enabled billing sources. */
+    enabledSources: Detail['billing']['enabledSources']
+  }
+}
+
+/** Enable an organization-wide billing source. */
+export namespace enableBillingSource {
+  /** Billing source to enable for an organization. */
+  export type Input = {
+    /** Organization id. */
+    orgId: string
+    /** Billing source to enable. */
+    source: BillingSource
+  }
+
+  /** Enables a billing source and returns the current enabled sources. */
+  export async function fn(options: Input) {
+    const response = await client.organizations[':orgId']['billing-sources'][':source'].$put({
+      param: options,
+    })
+    if (!response.ok) throw new Error('Failed to enable billing source.')
+    return (await response.json()) as BillingSourcesResponse
+  }
+
+  /** Creates a mutation that enables a billing source. */
+  export function useMutation(orgId: string) {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: (source: BillingSource) => fn({ orgId, source }),
+      onSuccess: (response) =>
+        queryClient.setQueryData(get.key(orgId), (detail: Detail | undefined) =>
+          detail ? withEnabledSources({ detail, enabledSources: response.data }) : detail,
+        ),
+    })
+  }
+}
+
+/** Disable an organization-wide billing source. */
+export namespace disableBillingSource {
+  /** Billing source to disable for an organization. */
+  export type Input = {
+    /** Organization id. */
+    orgId: string
+    /** Billing source to disable. */
+    source: BillingSource
+  }
+
+  /** Disables a billing source and returns the current enabled sources. */
+  export async function fn(options: Input) {
+    const response = await client.organizations[':orgId']['billing-sources'][':source'].$delete({
+      param: options,
+    })
+    if (!response.ok) throw new Error('Failed to disable billing source.')
+    return (await response.json()) as BillingSourcesResponse
+  }
+
+  /** Creates a mutation that disables a billing source. */
+  export function useMutation(orgId: string) {
+    const queryClient = ReactQuery.useQueryClient()
+    return ReactQuery.useMutation({
+      mutationFn: (source: BillingSource) => fn({ orgId, source }),
+      onSuccess: (response) =>
+        queryClient.setQueryData(get.key(orgId), (detail: Detail | undefined) =>
+          detail ? withEnabledSources({ detail, enabledSources: response.data }) : detail,
+        ),
+    })
+  }
+}
+
 /** List members for one organization. */
 export namespace members {
   export function key(orgId: string) {

package/src/admin/ui/src/lib/verified-tokens.ts

@@ -1,8 +1,14 @@
 import * as ReactQuery from '@tanstack/react-query'
 import type { InferRequestType, InferResponseType } from 'hono/client'
+import * as z from 'zod/mini'
 
 import { client } from './client'
 
+/** Route search: the active page tab. */
+export const search = z.object({
+  tab: z.catch(z.optional(z.enum(['pending', 'verified'])), undefined),
+})
+
 /** The verified-token list endpoint's success body. */
 type ListResponse = InferResponseType<(typeof client)['verified-tokens']['$get'], 200>
 
@@ -67,6 +73,79 @@ export namespace create {
   }
 }
 
+/** Review queue over organization verification requests. */
+export namespace requests {
+  /** A verification request record from the queue endpoint. */
+  export type VerifiedTokenRequest = InferResponseType<
+    (typeof client)['verified-tokens']['requests']['$get'],
+    200
+  >['data'][number]
+
+  export namespace list {
+    export function key() {
+      return ['verified-token-requests'] as const
+    }
+    export async function fn() {
+      const response = await client['verified-tokens'].requests.$get({ query: {} })
+      if (!response.ok) throw new Error('Failed to load requests.')
+      return response.json()
+    }
+    export function options() {
+      return ReactQuery.queryOptions({ queryFn: fn, queryKey: key(), staleTime: 30_000 })
+    }
+    export function useQuery() {
+      return ReactQuery.useQuery(options())
+    }
+  }
+
+  export namespace approve {
+    export type Input = { chainId: number; requestId: string }
+    export async function fn({ requestId }: Input) {
+      const response = await client['verified-tokens'].requests[':requestId'].approve.$post({
+        param: { requestId },
+      })
+      if (!response.ok) throw new Error(await errorMessage(response, 'Failed to approve request.'))
+      return response.json()
+    }
+    export function useMutation() {
+      const queryClient = ReactQuery.useQueryClient()
+      return ReactQuery.useMutation({
+        mutationFn: fn,
+        onSuccess: (_data, input) => {
+          void queryClient.invalidateQueries({ queryKey: list.key() })
+          // Approval publishes the token onto the chain's verified list.
+          void queryClient.invalidateQueries({ queryKey: get.key({ chainId: input.chainId }) })
+        },
+      })
+    }
+  }
+
+  export namespace deny {
+    export type Input = { requestId: string; reviewNote?: string }
+    export async function fn({ requestId, reviewNote }: Input) {
+      const response = await client['verified-tokens'].requests[':requestId'].deny.$post({
+        json: reviewNote ? { reviewNote } : {},
+        param: { requestId },
+      })
+      if (!response.ok) throw new Error(await errorMessage(response, 'Failed to deny request.'))
+      return response.json()
+    }
+    export function useMutation() {
+      const queryClient = ReactQuery.useQueryClient()
+      return ReactQuery.useMutation({
+        mutationFn: fn,
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: list.key() }),
+      })
+    }
+  }
+}
+
+/** Server error-envelope message, with a fallback for non-JSON bodies. */
+async function errorMessage(response: { json(): Promise<unknown> }, fallback: string) {
+  const body = (await response.json().catch(() => null)) as { error?: { message?: string } } | null
+  return body?.error?.message ?? fallback
+}
+
 /** Remove a verified token from a chain. */
 export namespace remove {
   export type Input = { address: `0x${string}`; chainId: number }

package/src/admin/ui/src/routeTree.gen.ts

@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VerifiedTokensRouteImport } from './routes/verified-tokens'
 import { Route as OrganizationsRouteImport } from './routes/organizations'
+import { Route as EarlyAccessRouteImport } from './routes/early-access'
 import { Route as ApiKeysRouteImport } from './routes/api-keys'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as OrganizationsOrgIdRouteImport } from './routes/organizations_.$orgId'
@@ -25,6 +26,11 @@ const OrganizationsRoute = OrganizationsRouteImport.update({
   path: '/organizations',
   getParentRoute: () => rootRouteImport,
 } as any)
+const EarlyAccessRoute = EarlyAccessRouteImport.update({
+  id: '/early-access',
+  path: '/early-access',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiKeysRoute = ApiKeysRouteImport.update({
   id: '/api-keys',
   path: '/api-keys',
@@ -44,6 +50,7 @@ const OrganizationsOrgIdRoute = OrganizationsOrgIdRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations/$orgId': typeof OrganizationsOrgIdRoute
@@ -51,6 +58,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations/$orgId': typeof OrganizationsOrgIdRoute
@@ -59,19 +67,33 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/early-access': typeof EarlyAccessRoute
   '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
   '/organizations_/$orgId': typeof OrganizationsOrgIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
+  fullPaths:
+    | '/'
+    | '/api-keys'
+    | '/early-access'
+    | '/organizations'
+    | '/verified-tokens'
+    | '/organizations/$orgId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
+  to:
+    | '/'
+    | '/api-keys'
+    | '/early-access'
+    | '/organizations'
+    | '/verified-tokens'
+    | '/organizations/$orgId'
   id:
     | '__root__'
     | '/'
     | '/api-keys'
+    | '/early-access'
     | '/organizations'
     | '/verified-tokens'
     | '/organizations_/$orgId'
@@ -80,6 +102,7 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ApiKeysRoute: typeof ApiKeysRoute
+  EarlyAccessRoute: typeof EarlyAccessRoute
   OrganizationsRoute: typeof OrganizationsRoute
   VerifiedTokensRoute: typeof VerifiedTokensRoute
   OrganizationsOrgIdRoute: typeof OrganizationsOrgIdRoute
@@ -101,6 +124,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof OrganizationsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/early-access': {
+      id: '/early-access'
+      path: '/early-access'
+      fullPath: '/early-access'
+      preLoaderRoute: typeof EarlyAccessRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api-keys': {
       id: '/api-keys'
       path: '/api-keys'
@@ -128,6 +158,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ApiKeysRoute: ApiKeysRoute,
+  EarlyAccessRoute: EarlyAccessRoute,
   OrganizationsRoute: OrganizationsRoute,
   VerifiedTokensRoute: VerifiedTokensRoute,
   OrganizationsOrgIdRoute: OrganizationsOrgIdRoute,

package/src/admin/ui/src/routes/__root.tsx

@@ -10,7 +10,7 @@ import type { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import { type ComponentType } from 'react'
 import { Button, Identicon } from 'regen-ui'
-import { BadgeCheck, Building2, KeyRound, LogOut } from 'lucide-react'
+import { BadgeCheck, Building2, KeyRound, LogOut, Ticket } from 'lucide-react'
 import { WagmiProvider } from 'wagmi'
 
 import appCss from '../styles.css?url'
@@ -115,6 +115,7 @@ const nav = [
   { exact: false, href: '/organizations', icon: Building2, label: 'Organizations' },
   { exact: false, href: '/api-keys', icon: KeyRound, label: 'API Keys' },
   { exact: false, href: '/verified-tokens', icon: BadgeCheck, label: 'Verified Tokens' },
+  { exact: false, href: '/early-access', icon: Ticket, label: 'Early Access' },
 ] as const
 
 function Sidebar(props: { email: string; logoutUrl?: string }) {

package/src/admin/ui/src/routes/api-keys.tsx

@@ -218,7 +218,7 @@ function ProvisionForm(props: {
             </select>
           </div>
           <Input
-            defaultValue="100"
+            defaultValue="10000"
             label="Rate limit"
             min={0}
             name="rateLimit"

package/src/admin/ui/src/routes/early-access.tsx

@@ -0,0 +1,162 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useState } from 'react'
+import { Button, Fields, Input } from 'regen-ui'
+import { Plus, Trash2 } from 'lucide-react'
+
+import { Card, Notice, Page } from '../components/Page'
+import { Dialog } from '../components/Dialog'
+import * as EarlyAccess from '../lib/early-access'
+
+export const Route = createFileRoute('/early-access')({
+  loader: ({ context }) => context.queryClient.prefetchQuery(EarlyAccess.list.options()),
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [open, setOpen] = useState(false)
+  const entries = EarlyAccess.list.useQuery()
+  const add = EarlyAccess.add.useMutation()
+
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Page
+        title="Early Access"
+        description="Accounts whose new organizations receive early access features by default."
+        action={
+          <Dialog.Trigger
+            render={
+              <Button variant="primary">
+                <Plus className="size-4" />
+                Add entry
+              </Button>
+            }
+          />
+        }
+      >
+        <EntryList
+          entries={entries.data?.data ?? []}
+          error={entries.error}
+          loading={entries.isPending}
+        />
+        <Dialog.Popup>
+          <AddEntryForm
+            onSubmit={(input) =>
+              add.mutate(input, {
+                onError: (error) => alert(error.message),
+                onSuccess: () => setOpen(false),
+              })
+            }
+            pending={add.isPending}
+          />
+        </Dialog.Popup>
+      </Page>
+    </Dialog.Root>
+  )
+}
+
+function AddEntryForm(props: {
+  onSubmit: (input: EarlyAccess.add.Input) => void
+  pending: boolean
+}) {
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    const entry = new FormData(event.currentTarget).get('entry')
+    if (typeof entry !== 'string' || !entry.trim()) return
+    props.onSubmit({ entry: entry.trim() })
+  }
+
+  return (
+    <>
+      <Dialog.Title>Add Entry</Dialog.Title>
+      <Dialog.Description>
+        Grant early access features to new organizations created by a whole domain or a single email
+      </Dialog.Description>
+      <form className="mt-6 flex flex-col gap-8" onSubmit={onSubmit}>
+        <Fields className="gap-6" variant="default">
+          <Input
+            autoComplete="off"
+            label="Domain or email"
+            name="entry"
+            placeholder="example.org or user@example.org"
+            required
+            spellCheck={false}
+          />
+        </Fields>
+        <div className="flex justify-end gap-2">
+          <Dialog.Close render={<Button type="button">Cancel</Button>} />
+          <Button loading={props.pending} type="submit" variant="primary">
+            Add entry
+          </Button>
+        </div>
+      </form>
+    </>
+  )
+}
+
+function EntryList(props: {
+  entries: readonly EarlyAccess.Entry[]
+  error: Error | null
+  loading: boolean
+}) {
+  return (
+    <Card>
+      {props.loading ? (
+        <Notice>Loading entries…</Notice>
+      ) : props.error ? (
+        <Notice>{props.error.message}</Notice>
+      ) : props.entries.length === 0 ? (
+        <Notice>No entries yet.</Notice>
+      ) : (
+        <ul className="divide-y divide-border">
+          {props.entries.map((entry) => (
+            <EntryRow entry={entry} key={entry.entry} />
+          ))}
+        </ul>
+      )}
+    </Card>
+  )
+}
+
+function EntryRow(props: { entry: EarlyAccess.Entry }) {
+  const { entry } = props
+  const remove = EarlyAccess.remove.useMutation()
+
+  function onRemove() {
+    if (
+      !confirm(
+        `Remove ${entry.entry}? Future organizations created by matching users start without early access features. Existing organizations keep their enabled billing sources.`,
+      )
+    )
+      return
+    remove.mutate({ entry: entry.entry }, { onError: (error) => alert(error.message) })
+  }
+
+  return (
+    <li className="flex items-center justify-between gap-4 px-5 py-2.5">
+      <div className="flex min-w-0 flex-col gap-1">
+        <span className="truncate text-label-14 text-foreground">{entry.entry}</span>
+        <span className="text-label-12 text-foreground-secondary">
+          Added by {entry.createdBy} · {formatDate(entry.createdAt)}
+        </span>
+      </div>
+      <Button.Icon
+        className="text-foreground-secondary hover:text-negative"
+        disabled={remove.isPending}
+        onClick={onRemove}
+        size="lg"
+        title="Remove entry"
+        variant="plain"
+      >
+        <Trash2 />
+      </Button.Icon>
+    </li>
+  )
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}