tapimo 0.4.1 → 0.4.3

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

@@ -10,14 +10,21 @@
 
 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 ApiKeysRouteImport } from './routes/api-keys'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as OrganizationsOrgIdRouteImport } from './routes/organizations_.$orgId'
 
 const VerifiedTokensRoute = VerifiedTokensRouteImport.update({
   id: '/verified-tokens',
   path: '/verified-tokens',
   getParentRoute: () => rootRouteImport,
 } as any)
+const OrganizationsRoute = OrganizationsRouteImport.update({
+  id: '/organizations',
+  path: '/organizations',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiKeysRoute = ApiKeysRouteImport.update({
   id: '/api-keys',
   path: '/api-keys',
@@ -28,35 +35,54 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const OrganizationsOrgIdRoute = OrganizationsOrgIdRouteImport.update({
+  id: '/organizations_/$orgId',
+  path: '/organizations/$orgId',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
+  '/organizations/$orgId': typeof OrganizationsOrgIdRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
+  '/organizations/$orgId': typeof OrganizationsOrgIdRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/api-keys': typeof ApiKeysRoute
+  '/organizations': typeof OrganizationsRoute
   '/verified-tokens': typeof VerifiedTokensRoute
+  '/organizations_/$orgId': typeof OrganizationsOrgIdRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/api-keys' | '/verified-tokens'
+  fullPaths: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/api-keys' | '/verified-tokens'
-  id: '__root__' | '/' | '/api-keys' | '/verified-tokens'
+  to: '/' | '/api-keys' | '/organizations' | '/verified-tokens' | '/organizations/$orgId'
+  id:
+    | '__root__'
+    | '/'
+    | '/api-keys'
+    | '/organizations'
+    | '/verified-tokens'
+    | '/organizations_/$orgId'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ApiKeysRoute: typeof ApiKeysRoute
+  OrganizationsRoute: typeof OrganizationsRoute
   VerifiedTokensRoute: typeof VerifiedTokensRoute
+  OrganizationsOrgIdRoute: typeof OrganizationsOrgIdRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -68,6 +94,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof VerifiedTokensRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/organizations': {
+      id: '/organizations'
+      path: '/organizations'
+      fullPath: '/organizations'
+      preLoaderRoute: typeof OrganizationsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api-keys': {
       id: '/api-keys'
       path: '/api-keys'
@@ -82,23 +115,33 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/organizations_/$orgId': {
+      id: '/organizations_/$orgId'
+      path: '/organizations/$orgId'
+      fullPath: '/organizations/$orgId'
+      preLoaderRoute: typeof OrganizationsOrgIdRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   ApiKeysRoute: ApiKeysRoute,
+  OrganizationsRoute: OrganizationsRoute,
   VerifiedTokensRoute: VerifiedTokensRoute,
+  OrganizationsOrgIdRoute: OrganizationsOrgIdRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
 import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
+import type { startInstance } from './start.ts'
 declare module '@tanstack/react-start' {
   interface Register {
     ssr: true
     router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
   }
 }

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

@@ -10,14 +10,16 @@ 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, KeyRound, LogOut } from 'lucide-react'
+import { BadgeCheck, Building2, KeyRound, LogOut } from 'lucide-react'
 import { WagmiProvider } from 'wagmi'
 
 import appCss from '../styles.css?url'
 import { TempoLogo, TempoMark } from '../components/TempoLogo'
 import { identiconAddress } from '../components/MobileProfile'
+import { ThemeToggle } from '../components/ThemeToggle'
 import * as Config from '../lib/config'
 import { persistOptions, queryClient } from '../lib/query-client'
+import * as Theme from '../lib/theme'
 import { config as wagmiConfig } from '../lib/wagmi'
 
 export type RouterContext = { queryClient: QueryClient }
@@ -37,6 +39,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
       { content: 'width=device-width, initial-scale=1', name: 'viewport' },
       { title: 'Tempo API Admin' },
     ],
+    scripts: [{ children: Theme.bootstrap }],
   }),
   shellComponent: RootDocument,
   component: AdminShell,
@@ -45,8 +48,14 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 
 function RootDocument({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" data-theme="dark" data-regen-radius="none">
+    <html lang="en" data-regen-radius="none" suppressHydrationWarning>
       <head>
+        <base data-tempo-base="true" href="/" suppressHydrationWarning />
+        <script
+          data-tempo-config="true"
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: 'window.__TEMPO_API_CONFIG__=undefined' }}
+        />
         <HeadContent />
       </head>
       <body>
@@ -103,6 +112,7 @@ function Admin() {
 }
 
 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' },
 ] as const
@@ -129,7 +139,12 @@ function Sidebar(props: { email: string; logoutUrl?: string }) {
           />
         ))}
       </nav>
-      <ProfileCard email={props.email} logoutUrl={props.logoutUrl} />
+      <div className="flex w-full flex-col gap-1">
+        <div className="flex justify-start px-2.5 max-lg:justify-center max-lg:px-2">
+          <ThemeToggle />
+        </div>
+        <ProfileCard email={props.email} logoutUrl={props.logoutUrl} />
+      </div>
     </aside>
   )
 }

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

@@ -10,18 +10,21 @@ import * as ApiKeys from '../lib/api-keys'
 import * as Scopes from '../lib/scopes'
 
 export const Route = createFileRoute('/api-keys')({
-  loader: ({ context }) =>
+  validateSearch: ApiKeys.search,
+  loaderDeps: ({ search }) => search,
+  loader: ({ context, deps }) =>
     Promise.all([
-      context.queryClient.prefetchQuery(ApiKeys.get.options()),
+      context.queryClient.prefetchQuery(ApiKeys.get.options(deps)),
       context.queryClient.prefetchQuery(Scopes.get.options()),
     ]),
   component: RouteComponent,
 })
 
 function RouteComponent() {
+  const filters = Route.useSearch()
   const [open, setOpen] = useState(false)
   const [environment, setEnvironment] = useState<'production' | 'sandbox'>('production')
-  const keys = ApiKeys.get.useQuery()
+  const keys = ApiKeys.get.useQuery(filters)
   const provision = ApiKeys.provision.useMutation()
 
   function onSubmit(form: FormData) {
@@ -42,8 +45,10 @@ function RouteComponent() {
       {
         environment,
         scopes: scopes as ApiKeys.provision.Input['scopes'],
+        ...(filters.orgId ? { orgId: filters.orgId } : {}),
         ...(name ? { name } : {}),
         ...(perMinute === undefined ? {} : { rateLimits: { '*': { perMinute } } }),
+        ...(filters.projectId ? { projectId: filters.projectId } : {}),
       },
       { onError: (error) => alert(error.message), onSuccess: () => setOpen(false) },
     )
@@ -53,7 +58,13 @@ function RouteComponent() {
     <Dialog.Root onOpenChange={setOpen} open={open}>
       <Page
         title="API Keys"
-        description="Manage keys that authenticate requests to the API"
+        description={
+          filters.projectId
+            ? `Keys for project ${filters.projectId}`
+            : filters.orgId
+              ? `Keys for organization ${filters.orgId}`
+              : 'Manage keys that authenticate requests to the API'
+        }
         action={
           <>
             <Select
@@ -88,7 +99,12 @@ function RouteComponent() {
           loading={keys.isPending}
         />
         <Dialog.Popup>
-          <ProvisionForm onSubmit={onSubmit} pending={provision.isPending} />
+          <ProvisionForm
+            onSubmit={onSubmit}
+            orgId={filters.orgId}
+            pending={provision.isPending}
+            projectId={filters.projectId}
+          />
         </Dialog.Popup>
       </Page>
     </Dialog.Root>
@@ -132,12 +148,26 @@ function TokenBanner(props: { onDismiss: () => void; token: string }) {
   )
 }
 
-function ProvisionForm(props: { onSubmit: (form: FormData) => void; pending: boolean }) {
+function ProvisionForm(props: {
+  onSubmit: (form: FormData) => void
+  orgId?: string | undefined
+  pending: boolean
+  projectId?: string | undefined
+}) {
   const scopes = Scopes.get.useQuery()
+  const destination = props.projectId
+    ? { label: 'Project', value: props.projectId }
+    : props.orgId
+      ? { label: 'Organization', value: props.orgId }
+      : undefined
   return (
     <>
       <Dialog.Title>Provision a Key</Dialog.Title>
-      <Dialog.Description>Create a key that authenticates requests to the API</Dialog.Description>
+      <Dialog.Description>
+        {destination
+          ? `Create an API key owned by this ${destination.label.toLowerCase()}.`
+          : 'Create a key that authenticates requests to the API.'}
+      </Dialog.Description>
       <form
         className="mt-6 flex flex-col gap-8"
         onSubmit={(event) => {
@@ -145,6 +175,21 @@ function ProvisionForm(props: { onSubmit: (form: FormData) => void; pending: boo
           props.onSubmit(new FormData(event.currentTarget))
         }}
       >
+        {destination ? (
+          <div className="border border-border bg-secondary p-3">
+            <p className="text-label-12 text-foreground-secondary">
+              Destination {destination.label}
+            </p>
+            <p className="mt-1 truncate font-mono text-label-13 text-foreground">
+              {destination.value}
+            </p>
+            {props.projectId && props.orgId ? (
+              <p className="mt-1 truncate font-mono text-label-12 text-foreground-secondary">
+                Organization {props.orgId}
+              </p>
+            ) : null}
+          </div>
+        ) : null}
         <Fields className="gap-6" variant="default">
           <Input label="Name" name="name" placeholder="e.g. production-api" />
           <div className="flex flex-col gap-2">

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

@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/')({
   beforeLoad: () => {
-    throw redirect({ to: '/api-keys' })
+    throw redirect({ to: '/organizations' })
   },
 })

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

@@ -0,0 +1,158 @@
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
+import {
+  createFileRoute,
+  type ErrorComponentProps,
+  Link,
+  useNavigate,
+  useRouter,
+} from '@tanstack/react-router'
+import { useEffect, useState } from 'react'
+import { Button, Input, Rows } from 'regen-ui'
+import { ChevronRight, Search } from 'lucide-react'
+
+import { Card, Notice, Page } from '../components/Page'
+import * as Organizations from '../lib/organizations'
+
+export const Route = createFileRoute('/organizations')({
+  validateSearch: Organizations.schema.Search,
+  loaderDeps: ({ search }) => ({ query: search.query || undefined }),
+  loader: ({ context, deps }) =>
+    context.queryClient.ensureInfiniteQueryData(Organizations.list.options(deps)),
+  component: PageComponent,
+  errorComponent: LookupError,
+})
+
+function PageComponent() {
+  const { query } = Route.useLoaderDeps()
+  const navigate = useNavigate({ from: Route.fullPath })
+  const [value, setValue] = useState(query ?? '')
+  const organizations = useSuspenseInfiniteQuery(Organizations.list.options({ query }))
+  const records = organizations.data.pages.flatMap((page) => page.data)
+  const invalid = value.trim().length > 0 && value.trim().length < 3
+
+  useEffect(() => setValue(query ?? ''), [query])
+
+  return (
+    <Page title="Organizations" description="Look up organizations by id, name, or member email">
+      <form
+        className="flex gap-2"
+        onSubmit={(event) => {
+          event.preventDefault()
+          const next = value.trim()
+          if (invalid) return
+          void navigate({
+            search: Organizations.searchParameters({ query: next }),
+            to: '/organizations',
+          })
+        }}
+      >
+        <div className="min-w-0 flex-1">
+          <Input
+            aria-label="Search organizations"
+            error={invalid ? 'Enter at least 3 characters.' : false}
+            onChange={(event) => setValue(event.target.value)}
+            placeholder="Organization id, user id, name, or member email"
+            value={value}
+          />
+        </div>
+        <Button disabled={invalid} type="submit">
+          <Search className="size-4" />
+          Search
+        </Button>
+      </form>
+
+      <Card>
+        {records.length === 0 ? (
+          <Notice>{query ? `No organizations match “${query}”.` : 'No organizations yet.'}</Notice>
+        ) : (
+          <Rows variant="surface">
+            {records.map((organization) => (
+              <Rows.Row
+                className="min-h-[64px] py-3"
+                key={organization.id}
+                render={
+                  <Link
+                    params={{ orgId: organization.id }}
+                    search={Organizations.searchParameters({ query })}
+                    to="/organizations/$orgId"
+                  />
+                }
+                style={{ height: 'auto' }}
+              >
+                <span className="flex min-w-0 flex-1 flex-col gap-1">
+                  <span className="truncate text-label-14 text-foreground">
+                    {organization.name}
+                  </span>
+                  <span className="truncate font-mono text-label-12 text-foreground-secondary">
+                    {organization.id}
+                  </span>
+                </span>
+                <span className="hidden shrink-0 text-right sm:block">
+                  <span className="block text-label-13 text-foreground">
+                    {formatCount(organization.memberCount, 'member')}
+                  </span>
+                  <span className="block text-label-12 text-foreground-secondary">
+                    {formatCount(organization.projectCount, 'project')}
+                  </span>
+                </span>
+                <span className="hidden w-28 shrink-0 text-right text-label-12 text-foreground-secondary md:block">
+                  {formatDate(organization.createdAt)}
+                </span>
+                <ChevronRight className="size-4 shrink-0 text-foreground-secondary" />
+              </Rows.Row>
+            ))}
+          </Rows>
+        )}
+      </Card>
+
+      {organizations.isFetchNextPageError ? (
+        <div
+          className="flex items-center justify-center gap-3 text-copy-14 text-negative"
+          role="alert"
+        >
+          <span>{organizations.error?.message ?? 'Failed to load more organizations.'}</span>
+          <Button onClick={() => organizations.fetchNextPage()}>Retry</Button>
+        </div>
+      ) : organizations.hasNextPage ? (
+        <Button
+          className="self-center"
+          loading={organizations.isFetchingNextPage}
+          onClick={() => organizations.fetchNextPage()}
+        >
+          Load more
+        </Button>
+      ) : null}
+    </Page>
+  )
+}
+
+function LookupError(options: LookupError.Props) {
+  const router = useRouter()
+  return (
+    <Page title="Organizations" description="Look up organizations by id, name, or member email">
+      <Card className="flex flex-col items-center gap-4 px-6 py-12 text-center">
+        <p className="text-copy-14 text-negative">{options.error.message}</p>
+        <Button
+          onClick={() => {
+            options.reset()
+            void router.invalidate()
+          }}
+        >
+          Try again
+        </Button>
+      </Card>
+    </Page>
+  )
+}
+
+declare namespace LookupError {
+  type Props = ErrorComponentProps
+}
+
+function formatCount(value: number, label: string) {
+  return `${value} ${label}${value === 1 ? '' : 's'}`
+}
+
+function formatDate(value: string) {
+  return new Intl.DateTimeFormat('en', { dateStyle: 'medium' }).format(new Date(value))
+}