@kelpie/ui 0.1.0

package/src/api/resources/webhooks.ts

@@ -0,0 +1,157 @@
+import {
+  createWebhookBody,
+  createdWebhookSchema,
+  rotateWebhookSecretBody,
+  webhookBody,
+  webhookDeliverySchema,
+  webhookSchema,
+} from '@kelpie/schemas'
+import type {
+  CreateWebhookInput,
+  CreatedWebhook,
+  RotateWebhookSecretInput,
+  Webhook,
+  WebhookDelivery,
+  WebhookInput,
+} from '@kelpie/schemas'
+import { keepPreviousData, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { QueryParameters } from '../client.ts'
+import { useApiClient } from '../context.ts'
+import { toError } from '../errors.ts'
+import { createResourceHooks } from '../resource.ts'
+import type { MutationResult, RecordListResult, UpdateArguments } from '../resource.ts'
+import { asMutationResult } from './mutation.ts'
+
+/**
+ * `/v1/webhooks`: outbound event delivery.
+ *
+ * Every verb needs the admin role, reads included, so a member's list request
+ * answers `403` and the page renders that rather than an empty table. A webhook
+ * URL routinely carries its own credential in the path, which is what puts
+ * reading them alongside API keys.
+ */
+
+const webhooks = createResourceHooks<Webhook, CreateWebhookInput, WebhookInput>({
+  name: 'webhooks',
+  path: '/webhooks',
+  decode: webhookSchema.parse,
+  createBody: createWebhookBody,
+  updateBody: webhookBody,
+})
+
+export interface WebhookFilters {
+  readonly status?: Webhook['status']
+}
+
+function webhookQuery(filters: WebhookFilters): QueryParameters {
+  return { status: filters.status }
+}
+
+export function useWebhooks(filters: WebhookFilters = {}): RecordListResult<Webhook> {
+  return webhooks.useList(webhookQuery(filters))
+}
+
+export function useUpdateWebhook(): MutationResult<UpdateArguments<WebhookInput>, Webhook> {
+  return webhooks.useUpdate()
+}
+
+export function useDeleteWebhook(): MutationResult<string, void> {
+  return webhooks.useRemove()
+}
+
+export interface WebhookDeliveryFilters {
+  readonly status?: WebhookDelivery['status']
+}
+
+/**
+ * One webhook's deliveries, newest first.
+ *
+ * Written out rather than built from `createResourceHooks`, for the reason
+ * `useFormSubmissions` gives: the path carries the parent id, and generalising
+ * the factory for a nested list would complicate every resource to shorten one.
+ *
+ * The status is part of the cache key. Without it, switching the filter would
+ * read the previous filter's pages out of the cache and append the new filter's
+ * next page to them.
+ */
+export function useWebhookDeliveries(
+  webhookId: string,
+  filters: WebhookDeliveryFilters = {},
+): RecordListResult<WebhookDelivery> {
+  const client = useApiClient()
+  const result = useInfiniteQuery({
+    queryKey: ['webhooks', 'deliveries', webhookId, filters.status ?? 'all'],
+    queryFn: ({ pageParam }) =>
+      client.list(`/webhooks/${webhookId}/deliveries`, webhookDeliverySchema.parse, {
+        status: filters.status,
+        ...(pageParam === null ? {} : { cursor: pageParam }),
+      }),
+    initialPageParam: null as string | null,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    placeholderData: keepPreviousData,
+  })
+
+  return {
+    records: result.data?.pages.flatMap((page) => page.items) ?? [],
+    isLoading: result.isPending,
+    error: toError(result.error),
+    hasMore: result.hasNextPage,
+    isLoadingMore: result.isFetchingNextPage,
+    loadMore: () => {
+      void result.fetchNextPage()
+    },
+  }
+}
+
+/**
+ * Registers a webhook.
+ *
+ * Written out rather than taken from `createResourceHooks`, because the `201`
+ * is the only response that ever carries the signing secret and the shared hook
+ * decodes with the schema that has no such field. The secret has to survive the
+ * decode: it cannot be fetched again, so a page that dropped it would have
+ * created a webhook nobody can verify deliveries from.
+ */
+export function useCreateWebhook(): MutationResult<CreateWebhookInput, CreatedWebhook> {
+  const client = useApiClient()
+  const queryClient = useQueryClient()
+  const mutation = useMutation({
+    mutationFn: (input: CreateWebhookInput) =>
+      client.post('/webhooks', createWebhookBody(input), createdWebhookSchema.parse),
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: ['webhooks', 'list'] })
+    },
+  })
+
+  return asMutationResult(mutation)
+}
+
+export interface RotateSecretArguments extends RotateWebhookSecretInput {
+  readonly id: string
+}
+
+/**
+ * Replaces a webhook's signing secret.
+ *
+ * Written out for the same reason `useCreateWebhook` is: the response carries
+ * the new secret, which no later request can retrieve, so it has to survive a
+ * decode that the shared `Webhook` schema would drop.
+ */
+export function useRotateWebhookSecret(): MutationResult<RotateSecretArguments, CreatedWebhook> {
+  const client = useApiClient()
+  const queryClient = useQueryClient()
+  const mutation = useMutation({
+    mutationFn: ({ id, ...input }: RotateSecretArguments) =>
+      client.post(
+        `/webhooks/${id}/rotate_secret`,
+        rotateWebhookSecretBody(input),
+        createdWebhookSchema.parse,
+      ),
+    onSettled: () => {
+      void queryClient.invalidateQueries({ queryKey: ['webhooks', 'list'] })
+    },
+  })
+
+  return asMutationResult(mutation)
+}

package/src/api/resources/workspace.ts

@@ -0,0 +1,81 @@
+import { updateWorkspaceBody, workspaceSchema } from '@kelpie/schemas'
+import type { UpdateWorkspaceInput, Workspace } from '@kelpie/schemas'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { useApiClient } from '../context.ts'
+import { toError } from '../errors.ts'
+import type { MutationResult } from '../resource.ts'
+import { asMutationResult } from './mutation.ts'
+import { useSession } from './session.ts'
+
+/**
+ * The workspace the session is in.
+ *
+ * Not a CRM resource: there is one of them, its id comes from the session rather
+ * than a route, and there is no list. `createResourceHooks` would have nothing
+ * to configure.
+ */
+
+const WORKSPACE_KEY = 'workspace'
+
+export interface WorkspaceState {
+  readonly workspace: Workspace | undefined
+  readonly isLoading: boolean
+  readonly error: Error | null
+}
+
+export function useWorkspace(): WorkspaceState {
+  const client = useApiClient()
+  const { session } = useSession()
+  const workspaceId = session?.workspaceId ?? undefined
+  const result = useQuery({
+    queryKey: [WORKSPACE_KEY, workspaceId],
+    queryFn: () => client.get(`/workspaces/${workspaceId ?? ''}`, workspaceSchema.parse),
+    enabled: workspaceId !== undefined,
+  })
+
+  return {
+    workspace: result.data,
+    isLoading: result.isPending && workspaceId !== undefined,
+    error: toError(result.error),
+  }
+}
+
+export function useUpdateWorkspace(): MutationResult<UpdateWorkspaceInput, Workspace> {
+  const client = useApiClient()
+  const queryClient = useQueryClient()
+  const { session } = useSession()
+  const workspaceId = session?.workspaceId ?? ''
+  const mutation = useMutation({
+    mutationFn: (input: UpdateWorkspaceInput) =>
+      client.patch(`/workspaces/${workspaceId}`, updateWorkspaceBody(input), workspaceSchema.parse),
+    onSuccess: (workspace) => {
+      queryClient.setQueryData([WORKSPACE_KEY, workspaceId], workspace)
+    },
+  })
+
+  return asMutationResult(mutation)
+}
+
+/**
+ * Deletes the workspace, everything in it, and the caller's way back.
+ *
+ * The slug goes with the request because the API asks the caller to name what it
+ * is destroying. Afterwards the whole cache is dropped: every cached list
+ * belongs to a workspace that no longer exists.
+ */
+export function useDeleteWorkspace(): MutationResult<{ readonly slug: string }, void> {
+  const client = useApiClient()
+  const queryClient = useQueryClient()
+  const { session } = useSession()
+  const workspaceId = session?.workspaceId ?? ''
+  const mutation = useMutation({
+    mutationFn: ({ slug }: { readonly slug: string }) =>
+      client.delete(`/workspaces/${workspaceId}`, { slug }),
+    onSuccess: () => {
+      queryClient.clear()
+    },
+  })
+
+  return asMutationResult(mutation)
+}

package/src/app/KelpieApp.tsx

@@ -0,0 +1,162 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router'
+
+import { ApiProvider } from '../api/ApiProvider.tsx'
+import { Shell } from '../components/Shell.tsx'
+import { CompaniesPage } from '../pages/CompaniesPage.tsx'
+import { CompanyDetail } from '../pages/CompanyDetail.tsx'
+import { DealDetail } from '../pages/DealDetail.tsx'
+import { DealStageSettingsPage } from '../pages/DealStageSettingsPage.tsx'
+import { DealsPage } from '../pages/DealsPage.tsx'
+import { DecisionsPage } from '../pages/DecisionsPage.tsx'
+import { SearchPage } from '../pages/SearchPage.tsx'
+import { FormDetail } from '../pages/FormDetail.tsx'
+import { FormsPage } from '../pages/FormsPage.tsx'
+import { FundraisingPage } from '../pages/FundraisingPage.tsx'
+import { HiringPage } from '../pages/HiringPage.tsx'
+import { NotFoundPage } from '../pages/NotFoundPage.tsx'
+import { OpportunitiesPage } from '../pages/OpportunitiesPage.tsx'
+import { OpportunityDetail } from '../pages/OpportunityDetail.tsx'
+import { OpportunityStageSettingsPage } from '../pages/OpportunityStageSettingsPage.tsx'
+import { PartnershipDetail } from '../pages/PartnershipDetail.tsx'
+import { PartnershipStageSettingsPage } from '../pages/PartnershipStageSettingsPage.tsx'
+import { PartnershipsPage } from '../pages/PartnershipsPage.tsx'
+import { PeoplePage } from '../pages/PeoplePage.tsx'
+import { PersonDetail } from '../pages/PersonDetail.tsx'
+import { PlanningPage } from '../pages/PlanningPage.tsx'
+import { RaiseDetail } from '../pages/RaiseDetail.tsx'
+import { RaiseStageSettingsPage } from '../pages/RaiseStageSettingsPage.tsx'
+import { RoleDetail } from '../pages/RoleDetail.tsx'
+import { AccountLayout } from '../pages/account/AccountLayout.tsx'
+import { PreferencesPage } from '../pages/account/PreferencesPage.tsx'
+import { ProfilePage } from '../pages/account/ProfilePage.tsx'
+import { SecurityPage } from '../pages/account/SecurityPage.tsx'
+import { DataPage } from '../pages/admin/DataPage.tsx'
+import { McpPage } from '../pages/admin/McpPage.tsx'
+import { ModulesPage } from '../pages/admin/ModulesPage.tsx'
+import { TeamPage } from '../pages/admin/TeamPage.tsx'
+import { WebhooksPage } from '../pages/admin/WebhooksPage.tsx'
+import { WorkspaceSettingsPage } from '../pages/admin/WorkspaceSettingsPage.tsx'
+import { ForgotPasswordPage } from '../pages/auth/ForgotPasswordPage.tsx'
+import { JoinPage } from '../pages/auth/JoinPage.tsx'
+import { ResetPasswordPage } from '../pages/auth/ResetPasswordPage.tsx'
+import { SignInPage } from '../pages/auth/SignInPage.tsx'
+import { SignUpPage } from '../pages/auth/SignUpPage.tsx'
+import { DashboardPage } from '../pages/dashboard/DashboardPage.tsx'
+import { HandbookLayout } from '../pages/handbook/HandbookPage.tsx'
+import { HandbookStepPage } from '../pages/onboarding/HandbookStepPage.tsx'
+import { InvitesStepPage } from '../pages/onboarding/InvitesStepPage.tsx'
+import { WorkspaceStepPage } from '../pages/onboarding/WorkspaceStepPage.tsx'
+import { UiExtensionProvider } from '../registry/UiExtensionProvider.tsx'
+import { useModuleRoutes } from '../registry/context.ts'
+import type { UiExtensions } from '../registry/registry.ts'
+import { SessionGate } from './SessionGate.tsx'
+
+/**
+ * The whole application: providers, router, and the route table.
+ *
+ * It lives in `@kelpie/ui` rather than in `apps/kelpie` so the cloud assembly
+ * gets the same application and differs only by the modules it registers. The
+ * assembly's job is to build the registry and render this.
+ *
+ * Routes here are the ported pages. The mockup's other routes arrive with the
+ * features behind them; module routes mount alongside through the registry.
+ */
+
+export interface KelpieAppProps {
+  readonly extensions: UiExtensions
+  /** Origin plus base path for the API. Defaults to same-origin `/v1`. */
+  readonly baseUrl?: string
+}
+
+export function KelpieApp({ extensions, baseUrl }: KelpieAppProps): React.JSX.Element {
+  return (
+    <ApiProvider baseUrl={baseUrl}>
+      <UiExtensionProvider extensions={extensions}>
+        <BrowserRouter>
+          <AppRoutes />
+        </BrowserRouter>
+      </UiExtensionProvider>
+    </ApiProvider>
+  )
+}
+
+function AppRoutes(): React.JSX.Element {
+  const moduleRoutes = useModuleRoutes()
+
+  return (
+    <Routes>
+      {/* Signed out, or on the way to being signed in. Route names are the
+          mockup's. */}
+      <Route path="/login" element={<SignInPage />} />
+      <Route path="/signup" element={<SignUpPage />} />
+      <Route path="/forgot-password" element={<ForgotPasswordPage />} />
+      <Route path="/reset-password" element={<ResetPasswordPage />} />
+      {/* Outside the gate: an invitee may have no workspace yet, and this is how
+          they get one. Same for the first onboarding step, which is what the
+          gate sends an account with no workspace to. */}
+      <Route path="/join" element={<JoinPage />} />
+      <Route path="/onboarding/workspace" element={<WorkspaceStepPage />} />
+
+      <Route element={<SessionGate />}>
+        {/* Inside the gate and outside the Shell: both steps need the workspace
+            that step 1 created, and neither is a place to start navigating the
+            app from. */}
+        <Route path="/onboarding/invites" element={<InvitesStepPage />} />
+        <Route path="/onboarding/handbook" element={<HandbookStepPage />} />
+
+        <Route element={<Shell />}>
+          {/* The mockup's default route, and where the shell's wordmark goes. */}
+          <Route index element={<Navigate to="/dashboard" replace />} />
+          <Route path="dashboard" element={<DashboardPage />} />
+          <Route path="search" element={<SearchPage />} />
+          <Route path="people" element={<PeoplePage />} />
+          <Route path="people/:id" element={<PersonDetail />} />
+          <Route path="hiring" element={<HiringPage />} />
+          <Route path="hiring/:id" element={<RoleDetail />} />
+          <Route path="companies" element={<CompaniesPage />} />
+          <Route path="companies/:id" element={<CompanyDetail />} />
+          <Route path="deals" element={<DealsPage />} />
+          <Route path="deals/settings" element={<DealStageSettingsPage />} />
+          <Route path="deals/:id" element={<DealDetail />} />
+          <Route path="opportunities" element={<OpportunitiesPage />} />
+          <Route path="opportunities/settings" element={<OpportunityStageSettingsPage />} />
+          <Route path="opportunities/:id" element={<OpportunityDetail />} />
+          <Route path="fundraising" element={<FundraisingPage />} />
+          <Route path="fundraising/settings" element={<RaiseStageSettingsPage />} />
+          <Route path="fundraising/:id" element={<RaiseDetail />} />
+          <Route path="partnerships" element={<PartnershipsPage />} />
+          <Route path="partnerships/settings" element={<PartnershipStageSettingsPage />} />
+          <Route path="partnerships/:id" element={<PartnershipDetail />} />
+          <Route path="planning" element={<PlanningPage />} />
+          <Route path="decisions" element={<DecisionsPage />} />
+          <Route path="forms" element={<FormsPage />} />
+          <Route path="forms/:id" element={<FormDetail />} />
+          {/* The optional segment is the mockup's: /handbook opens the first page. */}
+          <Route path="handbook" element={<HandbookLayout />} />
+          <Route path="handbook/:pageId" element={<HandbookLayout />} />
+          <Route path="admin/workspace" element={<WorkspaceSettingsPage />} />
+          <Route path="admin/team" element={<TeamPage />} />
+          <Route path="admin/data" element={<DataPage />} />
+          <Route path="admin/mcp" element={<McpPage />} />
+          <Route path="admin/webhooks" element={<WebhooksPage />} />
+          <Route path="admin/modules" element={<ModulesPage />} />
+          {/* The mockup's own shape: /account opens the first tab. */}
+          <Route path="account" element={<AccountLayout />}>
+            <Route index element={<Navigate to="/account/profile" replace />} />
+            <Route path="profile" element={<ProfilePage />} />
+            <Route path="security" element={<SecurityPage />} />
+            <Route path="preferences" element={<PreferencesPage />} />
+          </Route>
+          {moduleRoutes.map((route) => (
+            <Route key={route.path} path={route.path} element={route.element} />
+          ))}
+          {/* Last so every named route above wins first. Nested here rather than
+              outside the gate, so a signed-out visitor is redirected to /login by
+              `SessionGate` before this ever renders, and a signed-in one keeps the
+              Shell's nav instead of landing on a bare page with no way back in. */}
+          <Route path="*" element={<NotFoundPage />} />
+        </Route>
+      </Route>
+    </Routes>
+  )
+}

package/src/app/SessionGate.tsx

@@ -0,0 +1,42 @@
+import { Navigate, Outlet } from 'react-router'
+
+import { useSession } from '../api/resources/session.ts'
+import { ErrorPanel, LoadingPanel } from '../components/QueryState.tsx'
+
+/**
+ * What stands between a URL and a page that needs a workspace.
+ *
+ * Three answers, and they are not the same thing:
+ *
+ * - `401` means sign in. That is a redirect.
+ * - Signed in with no workspace means create one. Also a redirect, to a
+ *   different place, because sending someone to a sign-in form they have
+ *   already passed is a loop.
+ * - Anything else is the service being unreachable or broken, and redirecting
+ *   on that would hide it behind a sign-in form that will also fail.
+ */
+export function SessionGate(): React.JSX.Element {
+  const { isLoading, isSignedOut, needsWorkspace, error } = useSession()
+
+  if (isSignedOut) {
+    return <Navigate to="/login" replace />
+  }
+
+  if (error !== null) {
+    return (
+      <div className="mx-auto max-w-xl px-6 py-16">
+        <ErrorPanel error={error} />
+      </div>
+    )
+  }
+
+  if (isLoading) {
+    return <LoadingPanel />
+  }
+
+  if (needsWorkspace) {
+    return <Navigate to="/onboarding/workspace" replace />
+  }
+
+  return <Outlet />
+}

package/src/components/ActivitiesPanel.tsx

@@ -0,0 +1,235 @@
+import type { Activity, ActivityKind, RecordTargetType } from '@kelpie/schemas'
+
+import { useActivities } from '../api/resources/activities.ts'
+import { useMembers } from '../api/resources/members.ts'
+import { formatRelativeTime, monthLabel } from '../lib/dates.ts'
+import { ErrorPanel } from './QueryState.tsx'
+import { SectionHeader } from './SectionHeader.tsx'
+
+/**
+ * What happened to one record, newest first, grouped by month.
+ *
+ * Read-only, because the API is. Every row here was written by the service that
+ * made the change.
+ *
+ * The roll-up is the server's: a person's timeline already carries the deals and
+ * partnerships they are on, so nothing here fetches related records to merge in.
+ *
+ * A rolled-up row says which kind of record it came from and stops there. The
+ * mockup also names it and links to it, which needs the Deals, Opportunities and
+ * Partnerships endpoints. Naming a record this page cannot fetch would mean
+ * printing an id or inventing a label, and both are worse than the type alone.
+ */
+
+export interface ActivitiesPanelProps {
+  readonly targetType: RecordTargetType
+  readonly targetId: string
+}
+
+/** Two letters per kind, as the mockup's timeline gutter shows them. */
+const KIND_GLYPHS: Readonly<Record<ActivityKind, string>> = {
+  created: 'Cr',
+  updated: 'Up',
+  stage_changed: 'St',
+  note_added: 'Nt',
+  email: 'Em',
+  call: 'Ca',
+  meeting: 'Mt',
+  linked: 'Ln',
+  unlinked: 'Un',
+}
+
+const TARGET_TYPE_LABELS: Readonly<Record<RecordTargetType, string>> = {
+  person: 'Person',
+  company: 'Company',
+  deal: 'Deal',
+  opportunity: 'Opportunity',
+  partnership: 'Partnership',
+  raise: 'Raise',
+  candidate: 'Candidate',
+}
+
+interface MonthGroup {
+  readonly label: string
+  readonly items: readonly Activity[]
+}
+
+/** Consecutive runs, not a map: the list is already ordered, so a month never recurs. */
+function groupByMonth(activities: readonly Activity[], now: Date): readonly MonthGroup[] {
+  const groups: { label: string; items: Activity[] }[] = []
+
+  for (const activity of activities) {
+    const label = monthLabel(activity.createdAt, now)
+    const last = groups.at(-1)
+
+    if (last?.label === label) {
+      last.items.push(activity)
+    } else {
+      groups.push({ label, items: [activity] })
+    }
+  }
+
+  return groups
+}
+
+export function ActivitiesPanel({
+  targetType,
+  targetId,
+}: ActivitiesPanelProps): React.JSX.Element {
+  const activities = useActivities({ targetType, targetId })
+  const members = useMembers()
+  const groups = groupByMonth(activities.records, new Date())
+
+  return (
+    <section>
+      <SectionHeader title="Activity" />
+
+      {activities.error !== null && <ErrorPanel error={activities.error} />}
+      {activities.isLoading && <p className="text-[13px] text-ink-faint">Loading activity…</p>}
+
+      {!activities.isLoading && activities.records.length === 0 && activities.error === null && (
+        <p className="text-[13px] text-ink-faint">No activity yet.</p>
+      )}
+
+      <div className="space-y-4">
+        {groups.map((group) => (
+          <div key={group.label}>
+            <h3 className="mb-2 text-[12px] font-semibold text-ink">{group.label}</h3>
+            <ol className="overflow-hidden rounded-md border border-border">
+              {group.items.map((activity, index) => (
+                <ActivityEvent
+                  key={activity.id}
+                  activity={activity}
+                  actorName={actorNameFor(activity, members.nameById)}
+                  contextType={targetType}
+                  contextId={targetId}
+                  isLast={index === group.items.length - 1}
+                />
+              ))}
+            </ol>
+          </div>
+        ))}
+      </div>
+
+      {activities.hasMore && (
+        <button
+          type="button"
+          onClick={activities.loadMore}
+          disabled={activities.isLoadingMore}
+          className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink-muted transition hover:border-border-strong hover:text-ink"
+        >
+          {activities.isLoadingMore ? 'Loading…' : 'Load more'}
+        </button>
+      )}
+    </section>
+  )
+}
+
+/**
+ * The single most recent event, for a record's Overview tab.
+ *
+ * Its own request rather than a slice of the panel's: the panel lives on a
+ * different tab, so on Overview there is no list to take the first row of.
+ */
+export function LatestActivity({
+  targetType,
+  targetId,
+}: ActivitiesPanelProps): React.JSX.Element {
+  const activities = useActivities({ targetType, targetId })
+  const members = useMembers()
+  const latest = activities.records[0]
+
+  return (
+    <section>
+      <SectionHeader title="Latest activity" />
+
+      {activities.error !== null && <ErrorPanel error={activities.error} />}
+      {activities.isLoading && <p className="text-[13px] text-ink-faint">Loading activity…</p>}
+
+      {!activities.isLoading && latest === undefined && activities.error === null && (
+        <p className="text-[13px] text-ink-faint">No activity yet.</p>
+      )}
+
+      {latest !== undefined && (
+        <ol className="overflow-hidden rounded-md border border-border">
+          <ActivityEvent
+            activity={latest}
+            actorName={actorNameFor(latest, members.nameById)}
+            contextType={targetType}
+            contextId={targetId}
+            isLast
+          />
+        </ol>
+      )}
+    </section>
+  )
+}
+
+/**
+ * Exactly one of the two actor columns is set. `actorLabel` carries the display
+ * name when nothing on the team did this: "Form", "Gmail", "API key".
+ */
+function actorNameFor(activity: Activity, nameById: ReadonlyMap<string, string>): string {
+  if (activity.actorMemberId === null) {
+    return activity.actorLabel ?? 'System'
+  }
+
+  return nameById.get(activity.actorMemberId) ?? 'Unknown'
+}
+
+function ActivityEvent({
+  activity,
+  actorName,
+  contextType,
+  contextId,
+  isLast,
+}: {
+  readonly activity: Activity
+  readonly actorName: string
+  readonly contextType: RecordTargetType
+  readonly contextId: string
+  readonly isLast: boolean
+}): React.JSX.Element {
+  const isRolledUp = activity.targetType !== contextType || activity.targetId !== contextId
+
+  return (
+    <li className="flex gap-2 border-b border-border px-4 py-3 last:border-0">
+      <div className="relative flex w-5 shrink-0 justify-center">
+        {!isLast && (
+          <span
+            aria-hidden
+            className="absolute top-5 bottom-[-12px] left-1/2 w-px -translate-x-1/2 bg-border"
+          />
+        )}
+        <div
+          className="relative z-10 flex h-5 w-5 items-center justify-center rounded border border-border bg-surface text-[9px] font-semibold tracking-wide text-ink-muted uppercase"
+          title={activity.kind}
+        >
+          {KIND_GLYPHS[activity.kind]}
+        </div>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-baseline justify-between gap-3">
+          <p className="min-w-0 text-[12px] leading-snug text-ink">
+            <span className="font-semibold">{actorName}</span>{' '}
+            <span className="text-ink-muted">{activity.action}</span>
+          </p>
+          <time
+            dateTime={activity.createdAt.toISOString()}
+            className="shrink-0 text-[11px] text-ink-faint"
+          >
+            {formatRelativeTime(activity.createdAt)}
+          </time>
+        </div>
+        {isRolledUp && (
+          <p className="text-[11px] leading-snug text-ink-faint">
+            on <span className="text-ink-muted">{TARGET_TYPE_LABELS[activity.targetType]}</span>
+          </p>
+        )}
+        {activity.detail !== null && (
+          <p className="text-[11px] leading-snug text-ink-faint">{activity.detail}</p>
+        )}
+      </div>
+    </li>
+  )
+}