tapimo 0.7.0 → 0.7.2

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

@@ -1,13 +1,27 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { type ReactNode, useState } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { type ReactNode, useEffect, useId, useState } from 'react'
 import { Button, cx, Fields, Input, Rows, Select, useCopy } from 'regen-ui'
-import { Check, ChevronRight, Copy as CopyIcon, Plus, Trash2, X } from 'lucide-react'
+import {
+  Check,
+  ChevronRight,
+  Copy as CopyIcon,
+  Pencil,
+  Plus,
+  Search,
+  Trash2,
+  TriangleAlert,
+  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'
+import { Card, Notice, Page } from '../components/Page.js'
+import { Checkbox } from '../components/Checkbox.js'
+import { Dialog } from '../components/Dialog.js'
+import * as ApiKeys from '../lib/api-keys.js'
+import * as Config from '../lib/config.js'
+import * as Format from '../lib/format.js'
+import * as Organizations from '../lib/organizations.js'
+import * as Scopes from '../lib/scopes.js'
 
 export const Route = createFileRoute('/api-keys')({
   validateSearch: ApiKeys.search,
@@ -22,10 +36,18 @@ export const Route = createFileRoute('/api-keys')({
 
 function RouteComponent() {
   const filters = Route.useSearch()
+  const navigate = useNavigate({ from: Route.fullPath })
   const [open, setOpen] = useState(false)
-  const [environment, setEnvironment] = useState<'production' | 'sandbox'>('production')
+  const [query, setQuery] = useState(filters.query ?? '')
+  const environment = filters.environment ?? 'production'
+  const config = Config.use()
   const keys = ApiKeys.get.useQuery(filters)
   const provision = ApiKeys.provision.useMutation()
+  const records = (keys.data?.data ?? []).filter(
+    (record) => record.environment === environment && matches(record, filters.query),
+  )
+
+  useEffect(() => setQuery(filters.query ?? ''), [filters.query])
 
   function onSubmit(form: FormData) {
     const field = (key: string) => {
@@ -33,19 +55,29 @@ function RouteComponent() {
       return typeof value === 'string' ? value.trim() : ''
     }
     const name = field('name')
+    if (!name) {
+      alert('Enter a name that identifies what uses this key.')
+      return
+    }
+    const orgId = filters.orgId ?? field('orgId')
     const rateLimit = field('rateLimit')
     const perMinute = rateLimit ? Number(rateLimit) : undefined
     const environment = field('environment') === 'sandbox' ? 'sandbox' : 'production'
-    const zoneChainId = field('zoneChainId')
-    const pendingZoneScope = zoneChainId ? Scopes.fromZoneChainId(zoneChainId) : undefined
-    if (zoneChainId && !pendingZoneScope) {
+    const pendingZoneScopes = (['read', 'write'] as const).map((access) => {
+      const chainId = field(`zoneChainId_${access}`)
+      return {
+        chainId,
+        scope: chainId ? Scopes.fromZoneChainId(chainId, access) : undefined,
+      }
+    })
+    if (pendingZoneScopes.some(({ chainId, scope }) => chainId && !scope)) {
       alert('Enter a positive integer Zone chain ID.')
       return
     }
     const scopes = [
       ...new Set([
         ...form.getAll('scopes').filter((v): v is string => typeof v === 'string'),
-        ...(pendingZoneScope ? [pendingZoneScope] : []),
+        ...pendingZoneScopes.flatMap(({ scope }) => (scope ? [scope] : [])),
       ]),
     ]
     if (scopes.length === 0) {
@@ -55,11 +87,11 @@ function RouteComponent() {
     provision.mutate(
       {
         environment,
-        scopes: scopes as ApiKeys.provision.Input['scopes'],
-        ...(filters.orgId ? { orgId: filters.orgId } : {}),
-        ...(name ? { name } : {}),
-        ...(perMinute === undefined ? {} : { rateLimits: { '*': { perMinute } } }),
+        name,
+        ...(orgId ? { orgId } : {}),
         ...(filters.projectId ? { projectId: filters.projectId } : {}),
+        ...(perMinute === undefined ? {} : { rateLimits: { '*': { perMinute } } }),
+        scopes: scopes as ApiKeys.provision.Input['scopes'],
       },
       { onError: (error) => alert(error.message), onSuccess: () => setOpen(false) },
     )
@@ -84,7 +116,17 @@ function RouteComponent() {
                 { label: 'Production', value: 'production' },
                 { label: 'Sandbox', value: 'sandbox' },
               ]}
-              onChange={(value) => setEnvironment(value as 'production' | 'sandbox')}
+              onChange={(value) =>
+                void navigate({
+                  search: {
+                    ...(value === 'sandbox' ? { environment: 'sandbox' as const } : {}),
+                    ...(filters.orgId ? { orgId: filters.orgId } : {}),
+                    ...(filters.projectId ? { projectId: filters.projectId } : {}),
+                    ...(filters.query ? { query: filters.query } : {}),
+                  },
+                  to: '/api-keys',
+                })
+              }
               value={environment}
             />
             <Dialog.Trigger
@@ -101,13 +143,42 @@ function RouteComponent() {
         {provision.data ? (
           <TokenBanner onDismiss={() => provision.reset()} token={provision.data.token} />
         ) : null}
+        <form
+          className="flex gap-2"
+          onSubmit={(event) => {
+            event.preventDefault()
+            const next = query.trim()
+            void navigate({
+              search: {
+                ...(environment === 'sandbox' ? { environment } : {}),
+                ...(filters.orgId ? { orgId: filters.orgId } : {}),
+                ...(filters.projectId ? { projectId: filters.projectId } : {}),
+                ...(next ? { query: next } : {}),
+              },
+              to: '/api-keys',
+            })
+          }}
+        >
+          <div className="min-w-0 flex-1">
+            <Input
+              aria-label="Search API keys"
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Name, key ID, organization, project, creator, or scope"
+              value={query}
+            />
+          </div>
+          <Button type="submit">
+            <Search className="size-4" />
+            Search
+          </Button>
+        </form>
         <KeyList
+          currentUser={config.data?.auth.identity?.email}
           environment={environment}
           error={keys.error}
-          keys={(keys.data?.data ?? []).filter(
-            (key) => (key.environment ?? 'production') === environment,
-          )}
+          keys={records}
           loading={keys.isPending}
+          query={filters.query}
         />
         <Dialog.Popup className="flex max-h-[calc(100dvh-2rem)] flex-col overflow-hidden">
           <ProvisionForm
@@ -202,10 +273,11 @@ function ProvisionForm(props: {
           </div>
         ) : null}
         <Fields
-          className="min-h-0 flex-1 gap-6 [grid-template-rows:auto_auto_auto_minmax(0,1fr)]"
+          className="min-h-0 flex-1 gap-6 [grid-template-rows:auto_auto_auto_auto_minmax(0,1fr)]"
           variant="default"
         >
-          <Input label="Name" name="name" placeholder="e.g. production-api" />
+          <OrganizationAutocomplete orgId={props.orgId} />
+          <Input label="Name" name="name" placeholder="e.g. Explorer testnet" required />
           <div className="flex flex-col gap-2">
             <span className="label-13 text-foreground-secondary">Environment</span>
             <select
@@ -235,9 +307,14 @@ function ProvisionForm(props: {
             ) : (
               <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain border border-border">
                 <Rows variant="surface">
-                  {(scopes.data?.data ?? []).map((entry) =>
-                    entry.scope === Scopes.zoneTemplate ? (
-                      <ZoneScopeRow description={entry.description} key={entry.scope} />
+                  {(scopes.data?.data ?? []).map((entry) => {
+                    const zoneAccess = Scopes.accessFromTemplate(entry.scope)
+                    return zoneAccess ? (
+                      <ZoneScopeRow
+                        access={zoneAccess}
+                        description={entry.description}
+                        key={entry.scope}
+                      />
                     ) : (
                       <Rows.Row
                         key={entry.scope}
@@ -257,8 +334,8 @@ function ProvisionForm(props: {
                           </span>
                         </span>
                       </Rows.Row>
-                    ),
-                  )}
+                    )
+                  })}
                 </Rows>
               </div>
             )}
@@ -275,10 +352,152 @@ function ProvisionForm(props: {
   )
 }
 
-function ZoneScopeRow(props: { description: string }) {
+function OrganizationAutocomplete(props: { orgId?: string | undefined }) {
+  const inputId = useId()
+  const hintId = useId()
+  const listId = useId()
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const [dismissed, setDismissed] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const [value, setValue] = useState(props.orgId ?? '')
+  const debouncedValue = useDebouncedValue(value, 300)
+  const searchableValue = Organizations.lookupQuery(value)
+  const query = searchableValue ? Organizations.lookupQuery(debouncedValue) : undefined
+  const organizations = useInfiniteQuery({
+    ...Organizations.list.options({ query }),
+    enabled: Boolean(query && !props.orgId),
+  })
+  const records =
+    query && searchableValue === query
+      ? (organizations.data?.pages.flatMap((page) => page.data) ?? [])
+      : []
+  const normalizedValue = value.trim()
+  const open = Boolean(focused && searchableValue && !dismissed)
+  const message = (() => {
+    if (normalizedValue.length < 3) return 'Type at least 3 characters to search.'
+    if (searchableValue !== query || organizations.isFetching) return 'Searching organizations…'
+    if (organizations.error) return organizations.error.message
+    return 'No organizations found.'
+  })()
+
+  useEffect(() => setActiveIndex(records.length ? 0 : -1), [query, records.length])
+
+  if (props.orgId) return <Input label="Organization" name="orgId" readOnly value={props.orgId} />
+
+  return (
+    <div className="flex min-w-0 flex-col gap-2">
+      <div className="relative">
+        <Input
+          aria-activedescendant={open && activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined}
+          aria-autocomplete="list"
+          aria-controls={listId}
+          aria-describedby={hintId}
+          aria-expanded={open}
+          autoComplete="off"
+          id={inputId}
+          label="Organization (optional)"
+          name="orgId"
+          onBlur={() => setFocused(false)}
+          onChange={(event) => {
+            setDismissed(false)
+            setValue(event.target.value)
+          }}
+          onFocus={() => {
+            setDismissed(false)
+            setFocused(true)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Escape' && open) {
+              event.preventDefault()
+              event.stopPropagation()
+              setDismissed(true)
+              return
+            }
+            if (!open || records.length === 0) return
+            if (event.key === 'ArrowDown') {
+              event.preventDefault()
+              setActiveIndex((index) => (index + 1) % records.length)
+              return
+            }
+            if (event.key === 'ArrowUp') {
+              event.preventDefault()
+              setActiveIndex((index) => (index <= 0 ? records.length - 1 : index - 1))
+              return
+            }
+            const organization = records[activeIndex]
+            if (event.key === 'Enter' && organization) {
+              event.preventDefault()
+              setDismissed(true)
+              setValue(organization.id)
+            }
+          }}
+          placeholder="Search name or paste org_…"
+          role="combobox"
+          value={value}
+        />
+        {open ? (
+          <div
+            aria-describedby={hintId}
+            className="absolute top-full z-10 mt-1 max-h-64 w-full overflow-auto border border-border bg-surface py-1 shadow-lg"
+            id={listId}
+            role="listbox"
+          >
+            {records.length ? (
+              records.map((organization, index) => (
+                <div
+                  aria-selected={index === activeIndex}
+                  className={cx(
+                    'flex cursor-pointer flex-col gap-1 px-3 py-2 hover:bg-secondary-hover',
+                    index === activeIndex ? 'bg-secondary-hover' : undefined,
+                  )}
+                  id={`${listId}-${index}`}
+                  key={organization.id}
+                  onClick={() => {
+                    setDismissed(true)
+                    setValue(organization.id)
+                  }}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onMouseMove={() => setActiveIndex(index)}
+                  role="option"
+                >
+                  <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>
+                </div>
+              ))
+            ) : (
+              <div className="px-3 py-2 text-label-13 text-foreground-secondary" role="status">
+                {message}
+              </div>
+            )}
+          </div>
+        ) : null}
+      </div>
+      <p className="text-label-12 text-foreground-secondary" id={hintId}>
+        Search by name, ID, or member email. Leave blank for a one-off key.
+      </p>
+    </div>
+  )
+}
+
+function useDebouncedValue(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedValue(value), delay)
+    return () => clearTimeout(timeout)
+  }, [delay, value])
+
+  return debouncedValue
+}
+
+function ZoneScopeRow(options: ZoneScopeRow.Props) {
   const [chainId, setChainId] = useState('')
   const [selected, setSelected] = useState<readonly string[]>([])
-  const scope = Scopes.fromZoneChainId(chainId)
+  const scope = Scopes.fromZoneChainId(chainId, options.access)
   const duplicate = scope ? selected.includes(scope) : false
   const error =
     chainId && !scope
@@ -296,8 +515,10 @@ function ZoneScopeRow(props: { description: string }) {
   return (
     <Rows.Row className="min-h-[56px] flex-col items-stretch py-3" style={{ height: 'auto' }}>
       <span className="flex min-w-0 flex-col gap-0.5">
-        <span className="text-label-13 text-foreground">{Scopes.zoneTemplate}</span>
-        <span className="text-label-12 text-foreground-secondary">{props.description}</span>
+        <span className="text-label-13 text-foreground">
+          {Scopes.zoneTemplates[options.access]}
+        </span>
+        <span className="text-label-12 text-foreground-secondary">{options.description}</span>
       </span>
       <div className="flex items-start gap-2 max-sm:flex-col">
         <div className="min-w-0 flex-1 max-sm:w-full">
@@ -306,7 +527,7 @@ function ZoneScopeRow(props: { description: string }) {
             autoComplete="off"
             error={error}
             inputMode="numeric"
-            name="zoneChainId"
+            name={`zoneChainId_${options.access}`}
             onChange={(event) => setChainId(event.target.value)}
             onKeyDown={(event) => {
               if (event.key !== 'Enter') return
@@ -316,7 +537,7 @@ function ZoneScopeRow(props: { description: string }) {
             pattern="[0-9]*"
             placeholder="421700001"
             prefix="zone:"
-            suffix=":read"
+            suffix={`:${options.access}`}
             value={chainId}
           />
         </div>
@@ -356,11 +577,20 @@ function ZoneScopeRow(props: { description: string }) {
   )
 }
 
+declare namespace ZoneScopeRow {
+  type Props = {
+    access: Scopes.ZoneAccess
+    description: string
+  }
+}
+
 function KeyList(props: {
+  currentUser?: string | undefined
   environment: 'production' | 'sandbox'
   error: Error | null
   keys: readonly ApiKeys.ApiKey[]
   loading: boolean
+  query?: string | undefined
 }) {
   return (
     <Card>
@@ -369,11 +599,15 @@ function KeyList(props: {
       ) : props.error ? (
         <Notice>{props.error.message}</Notice>
       ) : props.keys.length === 0 ? (
-        <Notice>No {props.environment} keys yet.</Notice>
+        <Notice>
+          {props.query
+            ? `No ${props.environment} keys match “${props.query}”.`
+            : `No ${props.environment} keys yet.`}
+        </Notice>
       ) : (
         <Rows variant="surface">
           {props.keys.map((key) => (
-            <KeyRow key={key.id} record={key} />
+            <KeyRow currentUser={props.currentUser} key={key.id} record={key} />
           ))}
         </Rows>
       )}
@@ -381,17 +615,11 @@ function KeyList(props: {
   )
 }
 
-function KeyRow(props: { record: ApiKeys.ApiKey }) {
-  const { record } = props
+function KeyRow(props: { currentUser?: string | undefined; record: ApiKeys.ApiKey }) {
+  const { currentUser, 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
@@ -399,18 +627,25 @@ function KeyRow(props: { record: ApiKeys.ApiKey }) {
         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 className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span className="flex min-w-0 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>
-          {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
+          {record.organizationName ? (
+            <span className="truncate text-label-12 text-foreground-secondary">
+              {record.organizationName}
             </span>
           ) : null}
         </span>
         <span className="shrink-0 text-label-12 text-foreground-secondary">
-          {formatDate(record.createdAt)}
+          {Format.date(record.createdAt)}
         </span>
         <ChevronRight
           aria-hidden
@@ -427,9 +662,11 @@ function KeyRow(props: { record: ApiKeys.ApiKey }) {
               {perMinute === undefined ? 'Inherited' : `${perMinute} req/min`}
             </Detail>
             <Detail label="Token">···{record.tokenLast4}</Detail>
-            <Detail label="Provisioned by">{record.createdBy ?? '—'}</Detail>
+            <Detail label="Organization">{organization(record)}</Detail>
+            <Detail label="Project">{project(record)}</Detail>
+            <Detail label="Provisioned by">{record.createdByLabel ?? 'Unknown'}</Detail>
             {record.expiresAt ? (
-              <Detail label="Expires">{formatDate(record.expiresAt)}</Detail>
+              <Detail label="Expires">{Format.date(record.expiresAt)}</Detail>
             ) : null}
             <Detail className="w-full" label="Scopes">
               {record.scopes.length === 0 ? (
@@ -445,11 +682,9 @@ function KeyRow(props: { record: ApiKeys.ApiKey }) {
               )}
             </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 className="flex justify-end gap-2 border-t border-border px-5 py-3">
+            <EditDialog record={record} />
+            <RevokeDialog currentUser={currentUser} record={record} />
           </div>
         </Rows.Panel>
       ) : null}
@@ -457,6 +692,163 @@ function KeyRow(props: { record: ApiKeys.ApiKey }) {
   )
 }
 
+function EditDialog(options: EditDialog.Props) {
+  const { record } = options
+  const [open, setOpen] = useState(false)
+  const update = ApiKeys.update.useMutation()
+  return (
+    <Dialog.Root onOpenChange={setOpen} open={open}>
+      <Dialog.Trigger
+        render={
+          <Button size="small">
+            <Pencil className="size-4" />
+            Edit
+          </Button>
+        }
+      />
+      <Dialog.Popup>
+        <Dialog.Title>Edit API key</Dialog.Title>
+        <Dialog.Description>
+          {record.orgId === record.id
+            ? 'Update its name or associate it with an organization. New activity may take about a minute to appear there.'
+            : 'Use a name that identifies the service or integration using this key.'}
+        </Dialog.Description>
+        <form
+          className="mt-6 flex flex-col gap-6"
+          key={open ? 'open' : 'closed'}
+          onSubmit={(event) => {
+            event.preventDefault()
+            const form = new FormData(event.currentTarget)
+            const name = form.get('name')
+            const orgId = form.get('orgId')
+            if (typeof name !== 'string' || !name.trim()) return
+            update.mutate(
+              {
+                id: record.id,
+                input: {
+                  name: name.trim(),
+                  ...(typeof orgId === 'string' && orgId.trim() ? { orgId: orgId.trim() } : {}),
+                },
+              },
+              {
+                onError: (error) => alert(error.message),
+                onSuccess: () => setOpen(false),
+              },
+            )
+          }}
+        >
+          <Input
+            autoFocus
+            defaultValue={record.name ?? ''}
+            label="Name"
+            name="name"
+            placeholder="e.g. Explorer testnet"
+            required
+          />
+          {record.orgId === record.id ? <OrganizationAutocomplete /> : null}
+          <div className="flex justify-end gap-2">
+            <Dialog.Close render={<Button type="button">Cancel</Button>} />
+            <Button loading={update.isPending} type="submit" variant="primary">
+              Save changes
+            </Button>
+          </div>
+        </form>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
+declare namespace EditDialog {
+  type Props = {
+    record: ApiKeys.ApiKey
+  }
+}
+
+function RevokeDialog(props: { currentUser?: string | undefined; record: ApiKeys.ApiKey }) {
+  const { currentUser, record } = props
+  const [confirmation, setConfirmation] = useState('')
+  const [open, setOpen] = useState(false)
+  const revoke = ApiKeys.revoke.useMutation()
+  const expected = record.name ?? record.id
+  const creator = record.createdByLabel
+  const differentCreator =
+    !!creator && !!currentUser && creator.toLowerCase() !== currentUser.toLowerCase()
+
+  return (
+    <Dialog.Root
+      onOpenChange={(value) => {
+        setOpen(value)
+        if (!value) setConfirmation('')
+      }}
+      open={open}
+    >
+      <Dialog.Trigger
+        render={
+          <Button size="small" variant="negative">
+            <Trash2 className="size-4" />
+            Revoke key
+          </Button>
+        }
+      />
+      <Dialog.Popup>
+        <Dialog.Title>Revoke {record.name ?? 'API key'}?</Dialog.Title>
+        <Dialog.Description>
+          Requests using this key will fail immediately. This action cannot be undone.
+        </Dialog.Description>
+        <dl className="mt-5 grid grid-cols-2 gap-4 border border-border bg-secondary p-4">
+          <Detail className="col-span-2" label="Key ID">
+            <code className="break-all">{record.id}</code>
+          </Detail>
+          <Detail label="Environment">{record.environment}</Detail>
+          <Detail label="Organization">{organization(record)}</Detail>
+          <Detail label="Project">{project(record)}</Detail>
+          <Detail label="Provisioned by">{creator ?? 'Unknown'}</Detail>
+          <Detail label="Rate limit">
+            {record.rateLimits?.['*']?.perMinute === undefined
+              ? 'Inherited'
+              : `${record.rateLimits['*']!.perMinute} req/min`}
+          </Detail>
+        </dl>
+        {differentCreator ? (
+          <div className="mt-4 flex gap-3 border border-warning bg-warning-subtle p-3 text-warning">
+            <TriangleAlert className="mt-0.5 size-4 shrink-0" />
+            <p className="text-copy-13">
+              This key was provisioned by {creator}. Confirm it is no longer in use before revoking
+              it.
+            </p>
+          </div>
+        ) : null}
+        <div className="mt-5">
+          <Input
+            autoComplete="off"
+            label={`Type “${expected}” to confirm`}
+            onChange={(event) => setConfirmation(event.target.value)}
+            value={confirmation}
+          />
+        </div>
+        {revoke.error ? (
+          <p className="mt-3 text-copy-13 text-negative">{revoke.error.message}</p>
+        ) : null}
+        <div className="mt-6 flex justify-end gap-2">
+          <Dialog.Close render={<Button type="button">Cancel</Button>} />
+          <Button
+            disabled={confirmation !== expected}
+            loading={revoke.isPending}
+            onClick={() =>
+              revoke.mutate(record.id, {
+                onSuccess: () => setOpen(false),
+              })
+            }
+            variant="negative"
+          >
+            Revoke key
+          </Button>
+        </div>
+      </Dialog.Popup>
+    </Dialog.Root>
+  )
+}
+
 function Detail(props: { children: ReactNode; className?: string; label: ReactNode }) {
   return (
     <div className={cx('flex min-w-0 flex-col gap-1', props.className)}>
@@ -466,10 +858,29 @@ function Detail(props: { children: ReactNode; className?: string; label: ReactNo
   )
 }
 
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString(undefined, {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
+function matches(record: ApiKeys.ApiKey, query?: string) {
+  const normalized = query?.trim().toLowerCase()
+  if (!normalized) return true
+  return [
+    record.createdBy,
+    record.createdByLabel,
+    record.id,
+    record.name,
+    record.organizationName,
+    record.orgId,
+    record.projectId,
+    record.projectName,
+    record.tokenLast4,
+    ...record.scopes,
+  ].some((value) => value?.toLowerCase().includes(normalized))
+}
+
+function organization(record: ApiKeys.ApiKey) {
+  if (!record.organizationName) return '-'
+  return `${record.organizationName} (${record.orgId})`
+}
+
+function project(record: ApiKeys.ApiKey) {
+  if (!record.projectId || !record.projectName) return '-'
+  return `${record.projectName} (${record.projectId})`
 }