tapimo 0.0.0 → 0.0.2

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

@@ -0,0 +1,104 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as VerifiedTokensRouteImport } from './routes/verified-tokens'
+import { Route as ApiKeysRouteImport } from './routes/api-keys'
+import { Route as IndexRouteImport } from './routes/index'
+
+const VerifiedTokensRoute = VerifiedTokensRouteImport.update({
+  id: '/verified-tokens',
+  path: '/verified-tokens',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiKeysRoute = ApiKeysRouteImport.update({
+  id: '/api-keys',
+  path: '/api-keys',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/api-keys': typeof ApiKeysRoute
+  '/verified-tokens': typeof VerifiedTokensRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/api-keys': typeof ApiKeysRoute
+  '/verified-tokens': typeof VerifiedTokensRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/api-keys': typeof ApiKeysRoute
+  '/verified-tokens': typeof VerifiedTokensRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/api-keys' | '/verified-tokens'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/api-keys' | '/verified-tokens'
+  id: '__root__' | '/' | '/api-keys' | '/verified-tokens'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  ApiKeysRoute: typeof ApiKeysRoute
+  VerifiedTokensRoute: typeof VerifiedTokensRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/verified-tokens': {
+      id: '/verified-tokens'
+      path: '/verified-tokens'
+      fullPath: '/verified-tokens'
+      preLoaderRoute: typeof VerifiedTokensRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api-keys': {
+      id: '/api-keys'
+      path: '/api-keys'
+      fullPath: '/api-keys'
+      preLoaderRoute: typeof ApiKeysRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  ApiKeysRoute: ApiKeysRoute,
+  VerifiedTokensRoute: VerifiedTokensRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

package/src/admin/ui/src/router.tsx

@@ -0,0 +1,25 @@
+import { createRouter } from '@tanstack/react-router'
+
+import { queryClient } from './lib/query-client'
+import { routeTree } from './routeTree.gen'
+
+// The shell carries a `<base href="<mount>/">`, so derive the router `basepath`
+// from it to keep routing/links under the mount. The Vite dev shell has none,
+// so fall back to the root (`document.baseURI` would be the current URL there).
+function getBasepath() {
+  if (typeof document === 'undefined') return '/'
+  const base = document.querySelector('base')
+  if (!base) return '/'
+  return new URL(base.href).pathname.replace(/\/$/, '') || '/'
+}
+
+export function getRouter() {
+  return createRouter({
+    basepath: getBasepath(),
+    context: { queryClient },
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+    routeTree,
+    scrollRestoration: true,
+  })
+}

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

@@ -0,0 +1,219 @@
+import {
+  createRootRouteWithContext,
+  HeadContent,
+  Link,
+  Outlet,
+  Scripts,
+  useMatchRoute,
+} from '@tanstack/react-router'
+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 { WagmiProvider } from 'wagmi'
+
+import appCss from '../styles.css?url'
+import { TempoLogo, TempoMark } from '../components/TempoLogo'
+import { identiconAddress } from '../components/MobileProfile'
+import * as Config from '../lib/config'
+import { persistOptions, queryClient } from '../lib/query-client'
+import { config as wagmiConfig } from '../lib/wagmi'
+
+export type RouterContext = { queryClient: QueryClient }
+
+const favicon = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 269 269"><rect width="269" height="269" fill="#000"/><path d="M123.273 190.794H93.445L121.09 105.318H85.7334L93.445 80.2642H191.95L184.238 105.318H150.773L123.273 190.794Z" fill="#fff"/></svg>',
+)}`
+
+export const Route = createRootRouteWithContext<RouterContext>()({
+  head: () => ({
+    links: [
+      { rel: 'stylesheet', href: appCss },
+      { rel: 'icon', type: 'image/svg+xml', href: favicon },
+    ],
+    meta: [
+      { charSet: 'utf-8' },
+      { content: 'width=device-width, initial-scale=1', name: 'viewport' },
+      { title: 'Tempo API Admin' },
+    ],
+  }),
+  shellComponent: RootDocument,
+  component: AdminShell,
+  pendingComponent: () => <Loading />,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" data-theme="dark" data-regen-radius="none">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+function Loading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center text-foreground-secondary">
+      Loading…
+    </div>
+  )
+}
+
+function AdminShell() {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
+        <Admin />
+      </PersistQueryClientProvider>
+    </WagmiProvider>
+  )
+}
+
+function Admin() {
+  const { data: config, error, isPending } = Config.use()
+
+  if (isPending) return null
+  if (error)
+    return (
+      <div className="flex min-h-screen items-center justify-center text-foreground">
+        {error.message}
+      </div>
+    )
+  if (!config.auth.identity) return <SignInRequired loginUrl={config.auth.loginUrl} />
+
+  const { email } = config.auth.identity
+  const { logoutUrl } = config.auth
+  return (
+    <div className="relative flex min-h-dvh min-w-[360px] bg-background max-md:h-dvh max-md:flex-col max-md:overflow-hidden">
+      <div className="flex-1 bg-background max-md:hidden" />
+      <Sidebar email={email} logoutUrl={logoutUrl} />
+      <main className="flex w-full max-w-[1024px] flex-col px-4 pt-5 pb-10 max-md:min-h-0 max-md:flex-1 max-md:overflow-y-auto sm:px-8">
+        <Outlet />
+      </main>
+      <div className="flex-1 max-md:hidden" />
+      <MobileNav />
+    </div>
+  )
+}
+
+const nav = [
+  { exact: false, href: '/api-keys', icon: KeyRound, label: 'API Keys' },
+  { exact: false, href: '/verified-tokens', icon: BadgeCheck, label: 'Verified Tokens' },
+] as const
+
+function Sidebar(props: { email: string; logoutUrl?: string }) {
+  return (
+    <aside className="sticky top-0 flex h-dvh w-[260px] shrink-0 flex-col gap-6 border-r border-border bg-background px-2.5 pb-5 max-lg:w-[68px] max-lg:items-center max-lg:px-1.5 max-md:hidden">
+      <Link
+        aria-label="Tempo API Admin"
+        className="-mb-1 inline-flex rounded-button px-3 pt-5 pb-3"
+        to="/"
+      >
+        <TempoLogo className="mt-2 h-4 w-auto text-foreground max-lg:hidden" />
+        <TempoMark className="mt-2 h-4 w-auto text-foreground lg:hidden" />
+      </Link>
+      <nav aria-label="Main" className="flex flex-1 flex-col gap-1">
+        {nav.map((item) => (
+          <NavItem
+            exact={item.exact}
+            href={item.href}
+            icon={item.icon}
+            key={item.href}
+            label={item.label}
+          />
+        ))}
+      </nav>
+      <ProfileCard email={props.email} logoutUrl={props.logoutUrl} />
+    </aside>
+  )
+}
+
+function NavItem(props: {
+  exact: boolean
+  href: string
+  icon: ComponentType<{ className?: string }>
+  label: string
+}) {
+  const { exact, href, icon: Icon, label } = props
+  const matchRoute = useMatchRoute()
+  const active = !!matchRoute({ to: href, fuzzy: !exact })
+
+  return (
+    <Link
+      aria-current={active ? 'page' : undefined}
+      aria-label={label}
+      className="flex items-center gap-3 rounded-button px-3 py-3 text-label-16 text-foreground-secondary hover:bg-surface-hover data-active:font-semibold data-active:text-foreground max-lg:justify-center max-lg:gap-0 max-lg:p-2.5"
+      data-active={active || undefined}
+      to={href}
+    >
+      <Icon className="size-5" />
+      <span className="max-lg:hidden">{label}</span>
+    </Link>
+  )
+}
+
+function ProfileCard(props: { email: string; logoutUrl?: string }) {
+  return (
+    <div className="flex items-center gap-3 p-2.5 max-lg:justify-center max-lg:p-2">
+      <Identicon address={identiconAddress(props.email)} className="size-9 shrink-0" size={36} />
+      <p className="flex-1 truncate text-label-14 text-foreground max-lg:hidden">{props.email}</p>
+      {props.logoutUrl ? (
+        <a
+          aria-label="Sign out"
+          className="shrink-0 text-foreground-secondary hover:text-foreground max-lg:hidden"
+          href={props.logoutUrl}
+        >
+          <LogOut className="size-[18px]" />
+        </a>
+      ) : null}
+    </div>
+  )
+}
+
+/** Bottom navigation shown below the md breakpoint, in place of the sidebar. */
+function MobileNav() {
+  const matchRoute = useMatchRoute()
+  return (
+    <nav
+      aria-label="Main"
+      className="z-10 flex w-full shrink-0 items-center justify-around border-t border-border bg-background pb-[env(safe-area-inset-bottom)] md:hidden"
+    >
+      {nav.map((item) => {
+        const active = !!matchRoute({ to: item.href, fuzzy: !item.exact })
+        const Icon = item.icon
+        return (
+          <Link
+            aria-current={active ? 'page' : undefined}
+            aria-label={item.label}
+            className="flex flex-1 flex-col items-center gap-1 py-3 text-foreground-secondary data-active:text-foreground"
+            data-active={active || undefined}
+            key={item.href}
+            to={item.href}
+          >
+            <Icon className="size-5" />
+            <span className="text-label-12">{item.label}</span>
+          </Link>
+        )
+      })}
+    </nav>
+  )
+}
+
+function SignInRequired({ loginUrl }: { loginUrl?: string }) {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-background text-foreground">
+      <p className="font-medium">Sign in required</p>
+      {loginUrl ? (
+        <Button render={<a href={loginUrl} />}>Sign in</Button>
+      ) : (
+        <p className="text-sm text-foreground-secondary">Your session has expired.</p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,329 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { type ReactNode, useState } from 'react'
+import { Button, Fields, Input, Rows, Select, useCopy } from 'regen-ui'
+import { Check, ChevronRight, Copy as CopyIcon, Plus, Trash2, X } from 'lucide-react'
+
+import { Card, Notice, Page } from '../components/Page'
+import { Checkbox } from '../components/Checkbox'
+import { Dialog } from '../components/Dialog'
+import * as ApiKeys from '../lib/api-keys'
+import * as Scopes from '../lib/scopes'
+
+export const Route = createFileRoute('/api-keys')({
+  loader: ({ context }) =>
+    Promise.all([
+      context.queryClient.prefetchQuery(ApiKeys.get.options()),
+      context.queryClient.prefetchQuery(Scopes.get.options()),
+    ]),
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const [open, setOpen] = useState(false)
+  const [environment, setEnvironment] = useState<'production' | 'sandbox'>('production')
+  const keys = ApiKeys.get.useQuery()
+  const provision = ApiKeys.provision.useMutation()
+
+  function onSubmit(form: FormData) {
+    const field = (key: string) => {
+      const value = form.get(key)
+      return typeof value === 'string' ? value.trim() : ''
+    }
+    const name = field('name')
+    const rateLimit = field('rateLimit')
+    const perMinute = rateLimit ? Number(rateLimit) : undefined
+    const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
+    const scopes = form.getAll('scopes').filter((v): v is string => typeof v === 'string')
+    if (scopes.length === 0) {
+      alert('Select at least one scope.')
+      return
+    }
+    provision.mutate(
+      {
+        environment,
+        scopes: scopes as ApiKeys.provision.Input['scopes'],
+        ...(name ? { name } : {}),
+        ...(perMinute === undefined ? {} : { rateLimits: { '*': { perMinute } } }),
+      },
+      { onError: (error) => alert(error.message), onSuccess: () => setOpen(false) },
+    )
+  }
+
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Page
+        title="API Keys"
+        description="Manage keys that authenticate requests to the API"
+        action={
+          <>
+            <Select
+              aria-label="Filter keys by environment"
+              items={[
+                { label: 'Production', value: 'production' },
+                { label: 'Sandbox', value: 'sandbox' },
+              ]}
+              onChange={(value) => setEnvironment(value as 'production' | 'sandbox')}
+              value={environment}
+            />
+            <Dialog.Trigger
+              render={
+                <Button variant="primary">
+                  <Plus className="size-4" />
+                  Provision a key
+                </Button>
+              }
+            />
+          </>
+        }
+      >
+        {provision.data ? (
+          <TokenBanner onDismiss={() => provision.reset()} token={provision.data.token} />
+        ) : null}
+        <KeyList
+          environment={environment}
+          error={keys.error}
+          keys={(keys.data?.data ?? []).filter(
+            (key) => (key.environment ?? 'production') === environment,
+          )}
+          loading={keys.isPending}
+        />
+        <Dialog.Popup>
+          <ProvisionForm onSubmit={onSubmit} pending={provision.isPending} />
+        </Dialog.Popup>
+      </Page>
+    </Dialog.Root>
+  )
+}
+
+function TokenBanner(props: { onDismiss: () => void; token: string }) {
+  const { copy, notifying } = useCopy()
+  return (
+    <Card className="flex flex-col gap-3 p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex flex-col gap-1">
+          <span className="text-label-14 text-foreground">Key provisioned</span>
+          <span className="text-label-12 text-foreground-secondary">
+            Copy this token now, it won't be shown again.
+          </span>
+        </div>
+        <Button.Icon
+          className="-mt-2 -mr-2"
+          onClick={props.onDismiss}
+          size="lg"
+          title="Dismiss"
+          variant="plain"
+        >
+          <X />
+        </Button.Icon>
+      </div>
+
+      <button
+        aria-label={`Copy ${props.token}`}
+        className="group flex w-full cursor-pointer items-center gap-3 border border-border bg-secondary px-3 py-2.5 text-left transition-colors hover:bg-secondary-hover"
+        onClick={() => copy(props.token)}
+        type="button"
+      >
+        <code className="min-w-0 flex-1 truncate text-copy-14 text-foreground">{props.token}</code>
+        <span className="text-foreground-secondary group-hover:text-foreground">
+          {notifying ? <Check className="size-4" /> : <CopyIcon className="size-4" />}
+        </span>
+      </button>
+    </Card>
+  )
+}
+
+function ProvisionForm(props: { onSubmit: (form: FormData) => void; pending: boolean }) {
+  const scopes = Scopes.get.useQuery()
+  return (
+    <>
+      <Dialog.Title>Provision a Key</Dialog.Title>
+      <Dialog.Description>Create a key that authenticates requests to the API</Dialog.Description>
+      <form
+        className="mt-6 flex flex-col gap-8"
+        onSubmit={(event) => {
+          event.preventDefault()
+          props.onSubmit(new FormData(event.currentTarget))
+        }}
+      >
+        <Fields className="gap-6" variant="default">
+          <Input label="Name" name="name" placeholder="e.g. production-api" />
+          <div className="flex flex-col gap-2">
+            <span className="label-13 text-foreground-secondary">Environment</span>
+            <select
+              className="flex h-[40px] w-full items-center gap-[10px] rounded-body border-[2px] border-transparent bg-secondary px-[12px] copy-14 text-foreground outline-none hover:bg-secondary-hover active:bg-secondary-active focus-visible:border-focus focus-visible:bg-secondary-hover"
+              defaultValue="production"
+              name="environment"
+            >
+              <option value="production">Production</option>
+              <option value="sandbox">Sandbox</option>
+            </select>
+          </div>
+          <Input
+            defaultValue="100"
+            label="Rate limit"
+            min={0}
+            name="rateLimit"
+            placeholder="Requests per minute"
+            suffix="req/min"
+            type="number"
+          />
+          <div className="flex flex-col gap-2">
+            <span className="label-13 text-foreground-secondary">Scopes</span>
+            {scopes.isPending ? (
+              <span className="text-label-13 text-foreground-secondary">Loading scopes…</span>
+            ) : scopes.error ? (
+              <span className="text-label-13 text-negative">{scopes.error.message}</span>
+            ) : (
+              <Rows className="border border-border" variant="surface">
+                {(scopes.data?.data ?? []).map((entry) => (
+                  <Rows.Row
+                    key={entry.scope}
+                    className="min-h-[56px] py-3"
+                    render={<label className="cursor-pointer" />}
+                    style={{ height: 'auto' }}
+                  >
+                    <Checkbox
+                      defaultChecked={entry.scope === 'data:read'}
+                      name="scopes"
+                      value={entry.scope}
+                    />
+                    <span className="flex min-w-0 flex-col gap-0.5">
+                      <span className="text-label-13 text-foreground">{entry.scope}</span>
+                      <span className="text-label-12 text-foreground-secondary">
+                        {entry.description}
+                      </span>
+                    </span>
+                  </Rows.Row>
+                ))}
+              </Rows>
+            )}
+          </div>
+        </Fields>
+        <div className="flex justify-end gap-2">
+          <Dialog.Close render={<Button type="button">Cancel</Button>} />
+          <Button loading={props.pending} type="submit" variant="primary">
+            Provision key
+          </Button>
+        </div>
+      </form>
+    </>
+  )
+}
+
+function KeyList(props: {
+  environment: 'production' | 'sandbox'
+  error: Error | null
+  keys: readonly ApiKeys.ApiKey[]
+  loading: boolean
+}) {
+  return (
+    <Card>
+      {props.loading ? (
+        <Notice>Loading keys…</Notice>
+      ) : props.error ? (
+        <Notice>{props.error.message}</Notice>
+      ) : props.keys.length === 0 ? (
+        <Notice>No {props.environment} keys yet.</Notice>
+      ) : (
+        <Rows variant="surface">
+          {props.keys.map((key) => (
+            <KeyRow key={key.id} record={key} />
+          ))}
+        </Rows>
+      )}
+    </Card>
+  )
+}
+
+function KeyRow(props: { record: ApiKeys.ApiKey }) {
+  const { record } = props
+  const [expanded, setExpanded] = useState(false)
+  const revoke = ApiKeys.revoke.useMutation()
+  const perMinute = record.rateLimits?.['*']?.perMinute
+
+  function onRevoke() {
+    if (!confirm(`Revoke key ${record.name ?? record.id}? This can't be undone.`)) return
+    revoke.mutate(record.id, { onError: (error) => alert(error.message) })
+  }
+
+  return (
+    <>
+      <Rows.Row
+        className="min-h-[44px] py-2"
+        onClick={() => setExpanded((value) => !value)}
+        style={{ height: 'auto' }}
+      >
+        <span className="flex min-w-0 flex-1 items-baseline gap-2">
+          <span className="truncate text-label-14 text-foreground">
+            {record.name ?? 'Unnamed key'}
+          </span>
+          {record.environment === 'sandbox' ? (
+            <span className="shrink-0 rounded-none bg-warning-subtle px-2 py-0.5 text-label-12 font-normal text-warning">
+              sandbox
+            </span>
+          ) : null}
+        </span>
+        <span className="shrink-0 text-label-12 text-foreground-secondary">
+          {formatDate(record.createdAt)}
+        </span>
+        <ChevronRight
+          aria-hidden
+          className="size-4 shrink-0 text-foreground-secondary opacity-70 transition-transform data-[open]:rotate-90"
+          data-open={expanded ? '' : undefined}
+        />
+      </Rows.Row>
+      {expanded ? (
+        <Rows.Panel>
+          <dl className="flex flex-wrap gap-x-10 gap-y-4 px-5 py-4">
+            <Detail label="Key ID">{record.id}</Detail>
+            <Detail label="Environment">{record.environment ?? 'production'}</Detail>
+            <Detail label="Rate limit">
+              {perMinute === undefined ? 'Inherited' : `${perMinute} req/min`}
+            </Detail>
+            <Detail label="Token">···{record.tokenLast4}</Detail>
+            <Detail label="Provisioned by">{record.createdBy ?? '—'}</Detail>
+            {record.expiresAt ? (
+              <Detail label="Expires">{formatDate(record.expiresAt)}</Detail>
+            ) : null}
+            <Detail className="w-full" label="Scopes">
+              {record.scopes.length === 0 ? (
+                '—'
+              ) : (
+                <span className="flex flex-wrap gap-x-3 gap-y-1">
+                  {record.scopes.map((scope) => (
+                    <span key={scope} className="text-label-13 text-foreground">
+                      {scope}
+                    </span>
+                  ))}
+                </span>
+              )}
+            </Detail>
+          </dl>
+          <div className="flex justify-end border-t border-border px-5 py-3">
+            <Button loading={revoke.isPending} onClick={onRevoke} size="small" variant="negative">
+              <Trash2 className="size-4" />
+              Revoke key
+            </Button>
+          </div>
+        </Rows.Panel>
+      ) : null}
+    </>
+  )
+}
+
+function Detail(props: { children: ReactNode; className?: string; label: ReactNode }) {
+  return (
+    <div className={`flex min-w-0 flex-col gap-1 ${props.className ?? ''}`}>
+      <dt className="text-label-12 text-foreground-secondary">{props.label}</dt>
+      <dd className="min-w-0 text-label-13 text-foreground">{props.children}</dd>
+    </div>
+  )
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}

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

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