tapimo 0.4.0 → 0.4.3

package/src/admin/apps/scopes.test.ts

@@ -24,6 +24,16 @@ describe('GET /scopes', () => {
             "scope": "indexer:query",
             "selfServe": true,
           },
+          {
+            "description": "Read organization resources across projects and environments.",
+            "scope": "management:read",
+            "selfServe": true,
+          },
+          {
+            "description": "Create, update, and delete organization resources across projects and environments.",
+            "scope": "management:write",
+            "selfServe": true,
+          },
           {
             "description": "Fill and submit transactions through the relay.",
             "scope": "rpc-relay:read",

package/src/admin/ui/plugin.ts

@@ -23,7 +23,7 @@ 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 = 400_000
+const maxGzipBytes = 405_000
 
 const contentTypes: Record<string, string> = {
   '.css': 'text/css; charset=utf-8',

package/src/admin/ui/src/components/MobileProfile.tsx

@@ -3,6 +3,7 @@ import { Identicon } from 'regen-ui'
 import { LogOut } from 'lucide-react'
 
 import * as Config from '../lib/config'
+import { ThemeToggle } from './ThemeToggle'
 
 /** Mobile-only header profile: identicon + sign-out, shown when the sidebar is hidden. */
 export function MobileProfile() {
@@ -12,6 +13,7 @@ export function MobileProfile() {
   return (
     <div className="flex items-center gap-2">
       <Identicon address={identiconAddress(identity.email)} className="size-9 shrink-0" size={36} />
+      <ThemeToggle />
       {config.auth.logoutUrl ? (
         <a
           aria-label="Sign out"

package/src/admin/ui/src/components/ThemeToggle.tsx

@@ -0,0 +1,20 @@
+import { Moon, Sun } from 'lucide-react'
+
+import * as Theme from '../lib/theme'
+
+/** Button that switches between the light and dark color themes. */
+export function ThemeToggle() {
+  const theme = Theme.use()
+  const label = theme === 'dark' ? 'Light mode' : 'Dark mode'
+  return (
+    <button
+      aria-label={label}
+      className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-button text-foreground-secondary hover:bg-surface-hover hover:text-foreground"
+      onClick={() => Theme.set(theme === 'dark' ? 'light' : 'dark')}
+      title={label}
+      type="button"
+    >
+      {theme === 'dark' ? <Sun className="size-[18px]" /> : <Moon className="size-[18px]" />}
+    </button>
+  )
+}

package/src/admin/ui/src/lib/api-keys.ts

@@ -1,22 +1,49 @@
 import * as ReactQuery from '@tanstack/react-query'
 import type { InferRequestType, InferResponseType } from 'hono/client'
+import * as z from 'zod/mini'
 
 import { client } from './client'
 
 /** A single API key record from the list endpoint. */
 export type ApiKey = InferResponseType<(typeof client)['api-keys']['$get'], 200>['data'][number]
 
+/** URL-backed API key filters. */
+export const search = z.object({
+  orgId: z.catch(z.optional(z.string()), undefined),
+  projectId: z.catch(z.optional(z.string()), undefined),
+})
+
+/** API key list filters. */
+export type Filters = z.output<typeof search>
+
 /** List API keys. */
 export namespace get {
-  export const key = ['api-keys'] as const
-  export function fn() {
-    return client['api-keys'].$get().then((r) => r.json())
+  export const baseKey = ['api-keys'] as const
+  export function key(filters: Filters = {}) {
+    return [...baseKey, filters.orgId ?? '', filters.projectId ?? ''] as const
   }
-  export function options() {
-    return ReactQuery.queryOptions({ queryFn: fn, queryKey: key, staleTime: 30_000 })
+  export function fn(filters: Filters = {}) {
+    return client['api-keys']
+      .$get({ query: filters.orgId ? { orgId: filters.orgId } : {} })
+      .then(async (response) => {
+        if (!response.ok) throw new Error('Failed to load API keys.')
+        const body = await response.json()
+        return {
+          data: filters.projectId
+            ? body.data.filter((record) => record.projectId === filters.projectId)
+            : body.data,
+        }
+      })
+  }
+  export function options(filters: Filters = {}) {
+    return ReactQuery.queryOptions({
+      queryFn: () => fn(filters),
+      queryKey: key(filters),
+      staleTime: 30_000,
+    })
   }
-  export function useQuery() {
-    return ReactQuery.useQuery(options())
+  export function useQuery(filters: Filters = {}) {
+    return ReactQuery.useQuery(options(filters))
   }
 }
 
@@ -33,12 +60,7 @@ export namespace provision {
     const queryClient = ReactQuery.useQueryClient()
     return ReactQuery.useMutation({
       mutationFn: fn,
-      onSuccess: ({ token: _token, ...record }) =>
-        queryClient.setQueryData(
-          get.key,
-          (previous: { data: ApiKey[] } | undefined) =>
-            previous && { data: [record, ...previous.data] },
-        ),
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: get.baseKey }),
     })
   }
 }
@@ -52,12 +74,7 @@ export namespace revoke {
     const queryClient = ReactQuery.useQueryClient()
     return ReactQuery.useMutation({
       mutationFn: fn,
-      onSuccess: (_response, id) =>
-        queryClient.setQueryData(
-          get.key,
-          (previous: { data: ApiKey[] } | undefined) =>
-            previous && { data: previous.data.filter((key) => key.id !== id) },
-        ),
+      onSuccess: () => queryClient.invalidateQueries({ queryKey: get.baseKey }),
     })
   }
 }

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

@@ -39,14 +39,13 @@ export async function getConfig(): Promise<Config> {
 }
 
 /**
- * Bootstrap config query. Seeded from the inlined value and never stale, so an
- * authenticated load reads identity synchronously with no round trip.
+ * Bootstrap config query. The query function reads the inlined value without a
+ * network round trip after the empty prerendered shell hydrates.
  */
 export function options() {
   return queryOptions({
     queryKey: key,
     queryFn: getConfig,
-    initialData: inlineConfig,
     staleTime: Infinity,
   })
 }

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

@@ -0,0 +1,89 @@
+import { QueryClient } from '@tanstack/react-query'
+import { createMemoryHistory, createRouter } from '@tanstack/react-router'
+import { describe, expect, it, vi } from 'vite-plus/test'
+
+import { routeTree } from '../routeTree.gen'
+import { Route as DetailRoute } from '../routes/organizations_.$orgId'
+import { Route as ListRoute } from '../routes/organizations'
+import * as Organizations from './organizations'
+
+describe('schema.Search', () => {
+  it('normalizes valid lookup state', () => {
+    expect(Organizations.schema.Search.parse({ period: '24h', query: '  acme  ' }))
+      .toMatchInlineSnapshot(`
+      {
+        "period": "24h",
+        "query": "acme",
+      }
+    `)
+  })
+
+  it('drops lookup state below the API minimum', () => {
+    expect(Organizations.schema.Search.parse({ query: 'ab' })).toMatchInlineSnapshot(`
+      {
+        "query": undefined,
+      }
+    `)
+  })
+
+  it('drops an invalid usage period', () => {
+    expect(Organizations.schema.Search.parse({ period: 'forever' })).toMatchInlineSnapshot(`
+      {
+        "period": undefined,
+      }
+    `)
+  })
+})
+
+describe('searchParameters', () => {
+  it('preserves a lookup across list and detail navigation', () => {
+    expect(Organizations.searchParameters({ query: 'acme' })).toMatchInlineSnapshot(`
+      {
+        "query": "acme",
+      }
+    `)
+  })
+
+  it('omits empty lookup state', () => {
+    expect(Organizations.searchParameters({})).toMatchInlineSnapshot(`{}`)
+  })
+})
+
+describe('organization routes', () => {
+  it('matches a direct detail URL without the list route as a parent', () => {
+    const router = createRouter({
+      context: { queryClient: new QueryClient() },
+      history: createMemoryHistory({
+        initialEntries: ['/organizations/org_example?query=acme'],
+      }),
+      routeTree,
+    })
+
+    expect(router.matchRoutes('/organizations/org_example').map((match) => match.routeId))
+      .toMatchInlineSnapshot(`
+        [
+          "__root__",
+          "/organizations_/$orgId",
+        ]
+      `)
+  })
+
+  it('blocks only on the primary organization query', async () => {
+    const ensureQueryData = vi.fn().mockResolvedValue({})
+    const ensureInfiniteQueryData = vi.fn()
+
+    const loader = DetailRoute.options.loader as unknown as (options: unknown) => Promise<unknown>
+    await loader({
+      context: { queryClient: { ensureInfiniteQueryData, ensureQueryData } },
+      params: { orgId: 'org_example' },
+    })
+
+    expect(ensureQueryData).toHaveBeenCalledOnce()
+    expect(ensureInfiniteQueryData).not.toHaveBeenCalled()
+  })
+
+  it('provides recoverable list and detail error surfaces', () => {
+    expect(ListRoute.options.errorComponent).toBeTypeOf('function')
+    expect(DetailRoute.options.errorComponent).toBeTypeOf('function')
+  })
+})

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

@@ -0,0 +1,262 @@
+import * as ReactQuery from '@tanstack/react-query'
+import type { InferResponseType } from 'hono/client'
+import * as z from 'zod/mini'
+
+import { client } from './client'
+
+type ListResponse = InferResponseType<(typeof client)['organizations']['$get'], 200>
+type DetailResponse = InferResponseType<(typeof client)['organizations'][':orgId']['$get'], 200>
+type MembersResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['members']['$get'],
+  200
+>
+type ProjectsResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['projects']['$get'],
+  200
+>
+type ApiKeysResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['api-keys']['$get'],
+  200
+>
+type SponsorshipResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['sponsorship']['$get'],
+  200
+>
+type UsageResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['usage']['$get'],
+  200
+>
+type WebhooksResponse = InferResponseType<
+  (typeof client)['organizations'][':orgId']['webhooks']['$get'],
+  200
+>
+
+/** An organization returned by the admin lookup API. */
+export type Organization = ListResponse['data'][number]
+
+/** Detailed organization information, including billing state. */
+export type Detail = DetailResponse
+
+/** An organization member with resolved identity. */
+export type Member = MembersResponse['data'][number]
+
+/** A project owned by an organization. */
+export type Project = ProjectsResponse['data'][number]
+
+/** Operational API key state for an organization. */
+export type ApiKey = ApiKeysResponse['data'][number]
+
+/** Recent organization sponsorship activity. */
+export type Sponsorship = SponsorshipResponse
+
+/** Recent organization API usage. */
+export type Usage = UsageResponse
+
+/** Organization webhook subscriptions and failures. */
+export type Webhooks = WebhooksResponse
+
+/** Schemas shared by organization lookup routes. */
+export namespace schema {
+  /** Search parameters accepted by organization list and detail routes. */
+  export const Search = z.object({
+    period: z.catch(z.optional(z.enum(['24h', '7d', '30d'])), undefined),
+    query: z.catch(
+      z.optional(
+        z
+          .pipe(
+            z.string(),
+            z.transform((value) => value.trim()),
+          )
+          .check(z.minLength(3), z.maxLength(200)),
+      ),
+      undefined,
+    ),
+  })
+}
+
+/** Builds canonical organization lookup search parameters. */
+export function searchParameters(options: searchParameters.Options) {
+  return options.query ? { query: options.query } : {}
+}
+
+export declare namespace searchParameters {
+  /** Organization lookup navigation state. */
+  type Options = { query?: string | undefined }
+}
+
+/** List organizations, optionally filtered by id, name, or member email. */
+export namespace list {
+  /** Organization lookup filters. */
+  export type Input = { query?: string | undefined }
+
+  export function key(options: Input) {
+    return ['organizations', 'list', options.query ?? ''] as const
+  }
+
+  export async function fn(options: Input & { cursor?: string | undefined }) {
+    const response = await client.organizations.$get({
+      query: {
+        ...(options.cursor ? { cursor: options.cursor } : {}),
+        limit: '25',
+        ...(options.query ? { query: options.query } : {}),
+      },
+    })
+    if (!response.ok) throw new Error('Failed to load organizations.')
+    return (await response.json()) as ListResponse
+  }
+
+  export function options(options: Input) {
+    return ReactQuery.infiniteQueryOptions({
+      getNextPageParam: (page: ListResponse) => page.nextCursor,
+      initialPageParam: null as string | null,
+      queryFn: ({ pageParam }) => fn({ ...options, cursor: pageParam ?? undefined }),
+      queryKey: key(options),
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** Get one organization by id. */
+export namespace get {
+  export function key(orgId: string) {
+    return ['organizations', 'detail', orgId] as const
+  }
+
+  export async function fn(orgId: string) {
+    const response = await client.organizations[':orgId'].$get({ param: { orgId } })
+    if (response.status === 404) throw new Error('Organization not found.')
+    if (!response.ok) throw new Error('Failed to load organization.')
+    return (await response.json()) as DetailResponse
+  }
+
+  export function options(orgId: string) {
+    return ReactQuery.queryOptions({
+      queryFn: () => fn(orgId),
+      queryKey: key(orgId),
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** List members for one organization. */
+export namespace members {
+  export function key(orgId: string) {
+    return ['organizations', orgId, 'members'] as const
+  }
+
+  export async function fn(options: { cursor?: string | undefined; orgId: string }) {
+    const response = await client.organizations[':orgId'].members.$get({
+      param: { orgId: options.orgId },
+      query: { ...(options.cursor ? { cursor: options.cursor } : {}), limit: '25' },
+    })
+    if (!response.ok) throw new Error('Failed to load organization members.')
+    return (await response.json()) as MembersResponse
+  }
+
+  export function options(orgId: string) {
+    return ReactQuery.infiniteQueryOptions({
+      getNextPageParam: (page: MembersResponse) => page.nextCursor,
+      initialPageParam: null as string | null,
+      queryFn: ({ pageParam }) => fn({ cursor: pageParam ?? undefined, orgId }),
+      queryKey: key(orgId),
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** List projects for one organization. */
+export namespace projects {
+  export function key(orgId: string) {
+    return ['organizations', orgId, 'projects'] as const
+  }
+
+  export async function fn(options: { cursor?: string | undefined; orgId: string }) {
+    const response = await client.organizations[':orgId'].projects.$get({
+      param: { orgId: options.orgId },
+      query: { ...(options.cursor ? { cursor: options.cursor } : {}), limit: '25' },
+    })
+    if (!response.ok) throw new Error('Failed to load organization projects.')
+    return (await response.json()) as ProjectsResponse
+  }
+
+  export function options(orgId: string) {
+    return ReactQuery.infiniteQueryOptions({
+      getNextPageParam: (page: ProjectsResponse) => page.nextCursor,
+      initialPageParam: null as string | null,
+      queryFn: ({ pageParam }) => fn({ cursor: pageParam ?? undefined, orgId }),
+      queryKey: key(orgId),
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** List operational API key state for one organization. */
+export namespace apiKeys {
+  export function options(orgId: string) {
+    return ReactQuery.queryOptions({
+      queryFn: async () => {
+        const response = await client.organizations[':orgId']['api-keys'].$get({
+          param: { orgId },
+        })
+        if (!response.ok) throw new Error('Failed to load organization API keys.')
+        return (await response.json()) as ApiKeysResponse
+      },
+      queryKey: ['organizations', orgId, 'api-keys'],
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** Get recent sponsorship activity for one organization. */
+export namespace sponsorship {
+  export function options(orgId: string) {
+    return ReactQuery.queryOptions({
+      queryFn: async () => {
+        const response = await client.organizations[':orgId'].sponsorship.$get({
+          param: { orgId },
+        })
+        if (!response.ok) throw new Error('Failed to load sponsorship activity.')
+        return (await response.json()) as SponsorshipResponse
+      },
+      queryKey: ['organizations', orgId, 'sponsorship'],
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** Get recent API usage for one organization. */
+export namespace usage {
+  export type Period = '24h' | '30d' | '7d'
+
+  export function options(orgId: string, period: Period) {
+    return ReactQuery.queryOptions({
+      queryFn: async () => {
+        const response = await client.organizations[':orgId'].usage.$get({
+          param: { orgId },
+          query: { period },
+        })
+        if (!response.ok) throw new Error('Failed to load API usage.')
+        return (await response.json()) as UsageResponse
+      },
+      queryKey: ['organizations', orgId, 'usage', period],
+      staleTime: 30_000,
+    })
+  }
+}
+
+/** Get webhook health for one organization. */
+export namespace webhooks {
+  export function options(orgId: string) {
+    return ReactQuery.queryOptions({
+      queryFn: async () => {
+        const response = await client.organizations[':orgId'].webhooks.$get({
+          param: { orgId },
+        })
+        if (!response.ok) throw new Error('Failed to load webhook health.')
+        return (await response.json()) as WebhooksResponse
+      },
+      queryKey: ['organizations', orgId, 'webhooks'],
+      staleTime: 30_000,
+    })
+  }
+}

package/src/admin/ui/src/lib/query-client.ts

@@ -21,6 +21,8 @@ export const persistOptions: Omit<PersistQueryClientOptions, 'queryClient'> = {
   persister,
   dehydrateOptions: {
     shouldDehydrateQuery: (query) =>
-      query.queryKey[0] !== 'config' && defaultShouldDehydrateQuery(query),
+      query.queryKey[0] !== 'config' &&
+      query.queryKey[0] !== 'organizations' &&
+      defaultShouldDehydrateQuery(query),
   },
 }

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

@@ -0,0 +1,57 @@
+import { useSyncExternalStore } from 'react'
+
+/** Admin UI color theme. */
+export type Theme = 'dark' | 'light'
+
+const storageKey = 'tempo-api-admin.theme'
+
+/** Background colors matching Regen's background token in each theme. */
+export const backgrounds = { dark: '#0c0c0c', light: '#fafafa' } as const
+
+/** Applies the saved theme and browser chrome color before the first paint. */
+export const bootstrap = `try {
+  const backgrounds = { dark: '${backgrounds.dark}', light: '${backgrounds.light}' }
+  const stored = localStorage.getItem('${storageKey}')
+  const pinned = stored === 'dark' || stored === 'light' ? stored : null
+  if (pinned) document.documentElement.dataset.theme = pinned
+  for (const scheme of ['light', 'dark']) {
+    const meta = document.createElement('meta')
+    meta.name = 'theme-color'
+    meta.media = '(prefers-color-scheme: ' + scheme + ')'
+    meta.content = backgrounds[pinned ?? scheme]
+    document.head.append(meta)
+  }
+} catch {}`
+
+/** Returns the saved theme, falling back to the operating system preference. */
+export function get(): Theme {
+  const stored = localStorage.getItem(storageKey)
+  if (stored === 'dark' || stored === 'light') return stored
+  return matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+/** Saves and applies the selected theme. */
+export function set(theme: Theme) {
+  localStorage.setItem(storageKey, theme)
+  document.documentElement.dataset.theme = theme
+  for (const meta of document.querySelectorAll('meta[name="theme-color"]'))
+    meta.setAttribute('content', backgrounds[theme])
+  for (const listener of listeners) listener()
+}
+
+/** Reactively returns the effective theme. */
+export function use(): Theme {
+  return useSyncExternalStore(subscribe, get, () => 'dark')
+}
+
+const listeners = new Set<() => void>()
+
+function subscribe(listener: () => void) {
+  const media = matchMedia('(prefers-color-scheme: dark)')
+  listeners.add(listener)
+  media.addEventListener('change', listener)
+  return () => {
+    listeners.delete(listener)
+    media.removeEventListener('change', listener)
+  }
+}