@12-apps/notifications 4.8.0 → 4.10.0

package/src/live.ts

@@ -0,0 +1,179 @@
+/**
+ * LIVE ACTIVITIES — the notification centre's second kind of entry.
+ *
+ * An inbox notification is an EVENT: it happened, it is stamped, it is read or
+ * unread, and it is still there tomorrow saying the same thing. A live activity
+ * is ONGOING STATE: it is pinned above the list, it has no read/unread, nobody
+ * deletes it, it updates itself, and it is GONE the moment the thing it tracks
+ * finishes.
+ *
+ * The distinction is not cosmetic. A row that says "your order is on its way",
+ * read an hour later, is a claim about the past presented as news — and the
+ * more reliable the inbox is, the more of those a person accumulates. Somewhere
+ * in that list is the one question they actually have, which is *where is it
+ * now*. A live activity answers that question and then removes itself, which is
+ * the property no amount of better event copy can buy.
+ *
+ * ## This file is domain-free, and that is the whole design
+ *
+ * Nothing here knows what is being tracked. A host publishes activities through
+ * `LiveActivitiesConfig.useActivities` (see `./react/live-config`) and this
+ * package owns the contract, the placement, the rendering and the OS-level
+ * collapse. The package that raises an alert has never been this package's
+ * business — see the `generators` seam — and the thing an alert is ABOUT is not
+ * either.
+ *
+ * ## The lane
+ *
+ * `steps` + `activeStepId` describe a progress lane, because "how far along is
+ * this" is the shape almost every ongoing subject has. Both are optional in
+ * effect: an activity with no lane (`steps: []`, `activeStepId: null`) is a
+ * perfectly good live entry — a heading, a sentence and a timestamp that keeps
+ * moving.
+ */
+
+/** One stop on a live activity's lane. */
+export interface LiveActivityStep {
+  /** Stable across updates — the id is what `activeStepId` names. */
+  id: string;
+  /** What the reader sees under the dot. The HOST's word, in the reader's language. */
+  label: string;
+}
+
+/** One thing that is happening right now, as the notification centre shows it. */
+export interface LiveActivity {
+  /**
+   * Stable for the whole life of the subject.
+   *
+   * The SAME id on every update, because it is the identity of the thing being
+   * tracked and not of the message: the panel keys on it so a stage change
+   * re-renders one card rather than swapping two, and it is what
+   * {@link livePushTag} collapses an OS notification onto.
+   *
+   * **Unique among the activities live at one moment**, for the same reason:
+   * it is the React key and the card's test id. Two activities sharing one
+   * gives a duplicate-key warning and a card that silently shows the wrong
+   * subject.
+   */
+  id: string;
+  /**
+   * Which host concern this belongs to, e.g. `order`, `delivery`, `import`.
+   *
+   * Free-form and never rendered — it exists so a host publishing from two
+   * sources can tell its own activities apart in a test or a log without
+   * parsing `id`.
+   */
+  kind: string;
+  /** The heading — what is happening. */
+  title: string;
+  /** The line under it: the detail that makes the heading actionable, or none. */
+  body: string | null;
+  /** Where tapping the card goes, as a same-origin path. `null` renders no link. */
+  link: string | null;
+  /** The lane, in the order it is walked. Empty when this subject has no lane. */
+  steps: readonly LiveActivityStep[];
+  /**
+   * The stop the subject is AT — one of `steps`, or `null` for a laneless entry.
+   *
+   * An id that names no step is neither, and it is handled rather than trusted:
+   * see {@link liveActivityLane}.
+   */
+  activeStepId: string | null;
+  /**
+   * ISO-8601 — when the subject last MOVED, not when it was last polled.
+   *
+   * A timestamp that advances on every read would render "just now" forever,
+   * which is the one thing a live entry must not say when nothing is happening.
+   */
+  updatedAt: string;
+}
+
+/** A live activity's lane, resolved for rendering. */
+export interface LiveActivityLane {
+  steps: readonly LiveActivityStep[];
+  activeStepId: string;
+  /** Every stop BEFORE the active one — never the active one itself. */
+  completed: ReadonlySet<string>;
+}
+
+/**
+ * The lane to draw, or `null` when this activity has none to draw.
+ *
+ * Three cases collapse to `null`, and the third is the one worth writing down:
+ * no steps, no active step, and **an active step the lane does not contain**.
+ * That last one is not a theoretical defect — it is what a host produces the
+ * first time a subject reaches a stage the lane was filtered to exclude, and
+ * the symptom is a row of dots with NONE of them lit, which reads as a process
+ * that has stopped. A card with no lane still says what is happening and when
+ * it last moved; a dead lane says the tracking is broken.
+ *
+ * `completed` deliberately stops short of the active stop: a completed step
+ * draws a tick, and ticking the stop the subject is sitting in claims it has
+ * already left.
+ */
+export function liveActivityLane(activity: LiveActivity): LiveActivityLane | null {
+  const activeStepId = activity.activeStepId;
+  if (activeStepId === null || activity.steps.length === 0) return null;
+  const reached = activity.steps.findIndex((step) => step.id === activeStepId);
+  if (reached < 0) return null;
+  return {
+    steps: activity.steps,
+    activeStepId,
+    completed: new Set(activity.steps.slice(0, reached).map((step) => step.id)),
+  };
+}
+
+/**
+ * The reserved `data` key that ties a NOTIFICATION to a live subject.
+ *
+ * A notification and a live activity are different objects with different
+ * lifetimes, and this is the only thing that joins them: a generator whose
+ * event is about something also tracked live puts the activity's id here, and
+ * every channel that can collapse gets to.
+ *
+ *     data: { [LIVE_SUBJECT_KEY]: `order:${orderId}` }
+ *
+ * A plain string on purpose. An object here would grow a second wire contract
+ * inside a column this package stores verbatim.
+ */
+export const LIVE_SUBJECT_KEY = 'liveSubject';
+
+/**
+ * Namespaces the tray tag, so a live tag does not collide with the ones a host
+ * already uses.
+ *
+ * A convention rather than an enforcement — nothing stops a host emitting its
+ * own `live:`-prefixed tags — but it means the two id spaces have to be made to
+ * meet rather than meeting by accident.
+ */
+export const LIVE_PUSH_TAG_PREFIX = 'live:';
+
+/**
+ * The OS notification tag for a push about a live subject, or `null` for an
+ * ordinary event.
+ *
+ * ## What the tag buys, and why it is the PWA half of this feature
+ *
+ * A `tag` makes a new notification REPLACE the one already in the tray instead
+ * of stacking under it, and — unless the sender asks otherwise — replace it
+ * *silently*. So a subject that moves through four stages costs one tray entry
+ * and one buzz, and the entry that remains is the CURRENT one. Without it a
+ * phone accumulates one alert per stage, all of them still asserting a stage
+ * the subject has since left; the freshest is at the top and the reader has to
+ * work out that the three below it are history.
+ *
+ * That is as close as the web platform gets to an ongoing/live notification,
+ * and it is the half that reaches a person who does not have the app open —
+ * which is most of the time a live activity is live.
+ *
+ * The id is passed through unchanged: it is the host's, it is already unique
+ * per subject, and a hash would make the tray impossible to reason about from a
+ * log line.
+ */
+export function livePushTag(
+  data: Readonly<Record<string, unknown>> | null | undefined,
+): string | null {
+  const subject = data?.[LIVE_SUBJECT_KEY];
+  if (typeof subject !== 'string' || subject === '') return null;
+  return `${LIVE_PUSH_TAG_PREFIX}${subject}`;
+}

package/src/manifest/index.ts

@@ -61,3 +61,40 @@ export const notificationsManifest = {
   server: ['http', 'jobs'],
   web: ['surface'],
 } as const satisfies PackageManifest;
+
+/**
+ * The e-mail PREVIEW console — a second manifest, from the same package.
+ *
+ * ## Why a second manifest and not two more keys on the first
+ *
+ * `notificationsManifest` has already spent both slots this surface needs:
+ * `http` is the account inbox at `/api/account`, `surface` is the bell and the
+ * preference matrix. A capability is singular by the contract's shape, so a
+ * package with two genuinely different surfaces declares two manifests — which
+ * is exactly what `@12-apps/auth` does with `@12-apps/auth-platform`, and for
+ * the same reason it gives: those two switches turn a sign-in method off for
+ * EVERYBODY, so they do not belong behind the same gate as "reset my password".
+ *
+ * The split here is the same one. The inbox ships to every signed-in user; this
+ * console publishes the product's whole transactional-mail inventory and the
+ * exact wording and link shape of its verification and reset mails, which is
+ * the reference someone writing a convincing phishing mail would want. Two
+ * manifests keep that expressible: a host mounts the inbox and DECLINES the
+ * console, in writing, rather than silently getting both behind one gate.
+ *
+ * ## What it deliberately does not declare
+ *
+ * No `db` — a catalogue is DERIVED from what a host already sends, so an
+ * adopter mounts it without touching its schema. No `notifications`, because
+ * this surface authors no alert. And no `email`: that capability is a DELIVERY
+ * port, and this manifest renders and never sends. The delivery port is the
+ * OTHER half of this package, and it stays where it is.
+ */
+export const notificationEmailPreviewsManifest = {
+  name: '@12-apps/notifications-email-previews',
+  contract: 1,
+  /** A refusal to render a preview files under its own namespace, not nowhere. */
+  observability: { namespace: 'email-previews' },
+  server: ['http'],
+  web: ['surface'],
+} as const satisfies PackageManifest;

package/src/manifest/server.ts

@@ -25,6 +25,8 @@
 
 import type { AnyServerManifest, WireRequest } from '@12-apps/wiring';
 
+import { emailPreviewRoutes } from '../email/previews/routes';
+import type { EmailPreviewsConfig } from '../email/previews/catalog';
 import {
   createApiNotifications,
   NOTIFICATIONS_JOBS,
@@ -84,3 +86,24 @@ export const notificationsServerManifest = {
    */
   jobs: NOTIFICATIONS_JOBS,
 } as const satisfies AnyServerManifest;
+
+/**
+ * The preview console's server half — the two endpoints over the catalogue.
+ *
+ * A CONSTANT, not a factory. `http.create(config)` receives whatever the host
+ * bound at adoption, and "which messages exist" is precisely a host's binding:
+ * a package cannot know that a product sends a "your quota is exhausted"
+ * notice, let alone what data it renders from. Writing `EmailPreviewsConfig`
+ * as a factory argument instead would move that decision out of
+ * `bindings.http`, where `assemble()` can report on it, into a call the report
+ * never sees.
+ *
+ * The routes carry `kind: 'authenticated'` — see `../email/previews/routes`
+ * for why the descriptor states a posture it cannot itself enforce.
+ */
+export const notificationEmailPreviewsServerManifest = {
+  name: '@12-apps/notifications-email-previews',
+  http: {
+    create: (config: EmailPreviewsConfig) => ({ routes: emailPreviewRoutes(config) }),
+  },
+} as const satisfies AnyServerManifest;

package/src/manifest/web.ts

@@ -38,9 +38,22 @@
 
 import type { AnyWebManifest } from '@12-apps/wiring';
 
+import { createEmailPreviewScreen } from '../email/previews/react/preview-screen';
 import { createWebNotifications } from '../react/create-web-notifications';
 
 export const notificationsWebManifest = {
   name: '@12-apps/notifications',
   surface: { create: createWebNotifications },
 } as const satisfies AnyWebManifest;
+
+/**
+ * The preview console's web half.
+ *
+ * One screen, named `page`, because a screen's NAME is what an area row
+ * resolves against — a surface that was itself the component is the shape that
+ * made an area row resolve to `undefined` in `@12-apps/auth` for a release.
+ */
+export const notificationEmailPreviewsWebManifest = {
+  name: '@12-apps/notifications-email-previews',
+  surface: { create: createEmailPreviewScreen },
+} as const satisfies AnyWebManifest;

package/src/react/create-web-notifications.tsx

@@ -10,6 +10,7 @@ import {
   type NotificationsSubscribe,
 } from './hooks';
 import { createInboxStore, type InboxStore } from './inbox-state';
+import type { LiveActivitiesConfig } from './live-config';
 import { lazyNotificationsPanel } from './panel-lazy';
 import type { NotificationsPanelProps } from './panel';
 import { lazyPreferencesPage } from './page-lazy';
@@ -55,6 +56,15 @@ export interface NotificationsWebConfig {
   useSignal?: NotificationsSignalHook;
   /** The browser push enable step's host seams (SW path, platform hint). */
   webPush?: WebPushSetupConfig;
+  /**
+   * LIVE ACTIVITIES — the ongoing-state entries pinned above the inbox list.
+   *
+   * Opt-in, and absent means absent: a host that passes nothing gets the panel
+   * it had, with no section, no heading and no reserved space. See
+   * `./live-config` for the two things a host has to supply (where they come
+   * from, and what the section says) and `../live` for what one IS.
+   */
+  liveActivities?: LiveActivitiesConfig;
 }
 
 export interface WebNotifications {
@@ -110,7 +120,11 @@ export function createWebNotifications(config: NotificationsWebConfig): WebNotif
   const Bell: ComponentType<BellButtonProps> = (props) => (
     <BellButton {...props} store={store} messages={messages} {...subscribeOption} />
   );
-  const Panel = lazyNotificationsPanel({ store, messages });
+  const Panel = lazyNotificationsPanel({
+    store,
+    messages,
+    ...(config.liveActivities ? { live: config.liveActivities } : {}),
+  });
 
   function useBoundUnreadCount(options: { enabled?: boolean } = {}): number {
     return useUnreadCount(store, { ...options, ...subscribeOption });

package/src/react/index.ts

@@ -44,6 +44,35 @@ export {
   type NotificationsSubscribe,
 } from './hooks';
 
+// `LiveActivityCard` is deliberately NOT exported. It takes the clock as a
+// prop, and the minute tick that produces one lives in `LiveSection` — so an
+// external composer would either reimplement the tick or pass `Date.now()` once
+// and get the frozen timestamp `relative-time.ts` was changed to prevent.
+// `LiveSection` is the composable unit and carries its own clock.
+export {
+  type LiveActivitiesConfig,
+  type LiveActivitiesHook,
+  type LiveActivityMessages,
+} from './live-config';
+
+/**
+ * The contract itself, re-exported from the entry a host WIRES through.
+ *
+ * It lives in the root, because both halves need it and neither owns it — but a
+ * host writing `useActivities` imports the seam from `./react` and then has to
+ * reach into a second entry for the one type that seam returns. Measured on the
+ * first adopter: a `LiveActivity` imported from here failed to compile with
+ * "declares 'LiveActivity' locally, but it is not exported", which is a
+ * confusing way to say "you wanted the other subpath".
+ */
+export {
+  liveActivityLane,
+  type LiveActivity,
+  type LiveActivityLane,
+  type LiveActivityStep,
+} from '../live';
+export { LiveSection, type LiveSectionProps } from './live-section';
+
 export { relativeTime } from './relative-time';
 
 export {

package/src/react/live-card.tsx

@@ -0,0 +1,279 @@
+/**
+ * ONE pinned live entry: a mark, what is happening, its lane, and when it last
+ * moved.
+ *
+ * Visually a WASH rather than a fill — a tinted card with a brand-tinted border
+ * — for the reason the inbox's unread row uses the same treatment: this sits at
+ * the top of a list of other people's news, and a saturated block there
+ * out-shouts everything it is supposed to be introducing.
+ *
+ * ## The card is a DIV, and the button is inside it
+ *
+ * The obvious shape — one `<button>` wrapping the whole card — is not
+ * available, because `Stepper` draws every stop as a real `<button>`
+ * (`@12-apps/ui`'s `StepButton` is `styled(Button)`), and `clickable={false}`
+ * only sets `pointer-events: none`. A button inside a button is invalid HTML:
+ * the parser auto-closes the outer one at the first nested one, so any host
+ * that server-renders the panel open hydrates against a tree the browser
+ * rewrote, and every adopter's dev console carries a React error besides.
+ *
+ * `aria-hidden` and `inert` on the lane fix the tab stops and the accessible
+ * name — they do NOT fix the nesting, and an earlier draft of this file claimed
+ * they did. So the tap target is the TEXT block, and the lane and the timestamp
+ * are its siblings: valid markup, and a target that still covers everything a
+ * reader would aim at.
+ */
+import { useId, type JSX, type ReactNode } from 'react';
+
+import { Stepper } from '@12-apps/ui/data-display/Stepper';
+import { Box } from '@12-apps/ui/mui/Box';
+import { alpha, type Theme } from '@12-apps/ui/mui/styles';
+import { Text } from '@12-apps/ui/typography/Text';
+
+import { liveActivityLane, type LiveActivity } from '../live';
+import type { NotificationMessages } from '../messages';
+
+import type { LiveActivitiesConfig, LiveActivityMessages } from './live-config';
+import { relativeTime } from './relative-time';
+
+const cardSx = {
+  // `relative`, so the button below can stretch a hit area over the whole card
+  // — see `targetSx`.
+  position: 'relative',
+  border: '1px solid',
+  borderColor: (t: Theme) => alpha(t.palette.primary.main, 0.35),
+  bgcolor: (t: Theme) => alpha(t.palette.primary.main, 0.06),
+  borderRadius: 1.5,
+  p: 1.25,
+  mb: 1,
+} as const;
+
+/** The text block: the mark, the heading and the sentence under it. */
+const targetSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 1,
+  width: '100%',
+  textAlign: 'left',
+  font: 'inherit',
+  color: 'inherit',
+  border: 'none',
+  background: 'none',
+  p: 0,
+} as const;
+
+/**
+ * The button, stretched over the WHOLE card.
+ *
+ * Taking the lane out of the link fixed the markup and left the card looking
+ * like one target while only its top half was one — the lane is the most
+ * visually distinctive part of it, and aiming at the obvious thing did nothing.
+ *
+ * A stretched pseudo-element is the remedy that keeps the structure: the
+ * `<button>` stays a sibling of the lane in the tree, so nothing nests, and its
+ * `::after` covers the card. All three declarations are load-bearing — a
+ * pseudo-element with no `content` generates no box at all, and an absolutely
+ * positioned box with auto offsets is 0×0.
+ *
+ * ## What actually lets a click on the LANE reach it
+ *
+ * Not paint order. `@12-apps/ui` gives each `StepItem` `position: relative`, and
+ * this overlay is positioned too — so the two sit in the SAME painting layer
+ * (positioned, `z-index: auto`), where tree order decides, and the lane comes
+ * after the button. Every stop, and its label, therefore sits over this
+ * overlay. `clickable={false}` does not save it either: the package puts
+ * `pointer-events: none` on the step CIRCLE and not on the label beside it.
+ *
+ * It is `inert` on {@link ActivityLane} that does it: an inert subtree is
+ * skipped by hit-testing, so a click on a stop falls through to the overlay
+ * underneath. That makes the attribute load-bearing for the TARGET as well as
+ * for the tab order it was added for — remove it and the lane silently swallows
+ * clicks again, which is why the two are pinned by one test.
+ */
+const stretchedSx = {
+  ...targetSx,
+  cursor: 'pointer',
+  '&::after': { content: '""', position: 'absolute', inset: 0 },
+} as const;
+
+/**
+ * Make a four-stop lane fit the panel.
+ *
+ * The drawer is 400px on a desktop and the full viewport on a phone, so the
+ * narrow case is ~320px of card minus its padding. `Stepper` renders its labels
+ * at `body2` for every size but `sm` and reserves 24px of connector plus 8px of
+ * margin on each side, which is more row than four short words have — measured
+ * on a 320px viewport, the last stop hung off the edge and the DRAWER scrolled
+ * sideways.
+ *
+ * Three overrides, each buying back a specific number of pixels: 11px labels, a
+ * step column allowed to shrink below the package's 44px floor (so the row's
+ * min-content width is the longest WORD rather than the longest phrase), and
+ * thinner connectors. `overflow: hidden` is the backstop and not the mechanism
+ * — a locale with longer words than any of this anticipates clips its own card
+ * instead of making the panel scroll.
+ */
+const laneSx = {
+  pt: 1.25,
+  px: 0.5,
+  overflow: 'hidden',
+  '& .MuiTypography-root': { fontSize: 11, lineHeight: 1.25 },
+  '& [data-testid^="stepper-step-content-"]': { minWidth: 0 },
+  '& [data-testid^="stepper-connector-"]': { minWidth: 6, mx: 0.75 },
+} as const;
+
+/**
+ * The lane, or nothing.
+ *
+ * `aria-hidden` AND `inert`, and each earns its place twice over. The stops are
+ * real buttons, so leaving four focusable, named controls per entry in front of
+ * an inbox would cost a keyboard user the list they opened the panel for —
+ * that is what the pair was added for. `inert` then turns out to be what makes
+ * the card's own hit area work as well, because an inert subtree is skipped by
+ * hit-testing: see {@link stretchedSx}.
+ *
+ * Nothing is lost by hiding it — the stop the subject is at is already the
+ * card's heading, and the row of dots restates it visually.
+ */
+function ActivityLane({ activity }: { activity: LiveActivity }): JSX.Element | null {
+  const lane = liveActivityLane(activity);
+  if (lane === null) return null;
+  return (
+    <Box sx={laneSx} aria-hidden inert>
+      <Stepper
+        steps={lane.steps.map((step) => ({ id: step.id, label: step.label }))}
+        activeId={lane.activeStepId}
+        completed={new Set(lane.completed)}
+        orientation="horizontal"
+        size="xs"
+        clickable={false}
+        data-testid={`live-activity-steps-${activity.id}`}
+      />
+    </Box>
+  );
+}
+
+/** The card's props. Not part of the package's surface — see `./index`. */
+interface LiveActivityCardProps {
+  activity: LiveActivity;
+  messages: NotificationMessages;
+  live: LiveActivityMessages;
+  renderIcon?: LiveActivitiesConfig['renderIcon'];
+  /** The clock this render reads, so the "last moved" line can be ticked. */
+  now: number;
+  /**
+   * Follow the card's link.
+   *
+   * Absent — as it is for a host with no router — renders the text as text. A
+   * named, focusable control that does nothing is worse than no control.
+   */
+  onOpen?: (activity: LiveActivity) => void;
+}
+
+/**
+ * The mark on the left, when the host draws one.
+ *
+ * PRESENTATIONAL ONLY. It is rendered inside the card's `<button>` and inside
+ * an `aria-hidden` wrapper, so a host returning anything focusable — an
+ * icon-button, a link — puts a button inside a button (invalid HTML, and the
+ * defect this card was restructured to remove) and hides a focusable node from
+ * the accessibility tree. An icon, an emoji, an `<svg>`: yes. A control: no.
+ */
+function ActivityIcon({ icon }: { icon: ReactNode }): JSX.Element | null {
+  if (icon === undefined || icon === null) return null;
+  return (
+    <Box aria-hidden sx={{ display: 'flex', flex: '0 0 auto', color: 'primary.main' }}>
+      {icon}
+    </Box>
+  );
+}
+
+/** The mark, the heading and the line under it. */
+function ActivityTarget({
+  activity,
+  renderIcon,
+  bodyId,
+}: Pick<LiveActivityCardProps, 'activity' | 'renderIcon'> & {
+  /** Ties the sentence to the button, so a label does not swallow it. */
+  bodyId: string;
+}): JSX.Element {
+  return (
+    <>
+      <ActivityIcon icon={renderIcon?.(activity)} />
+      {/* A COLUMN, not a bare block: `Text` sets no `display`, so two adjacent
+          spans in an ordinary div run together on one line with not even a
+          space between them — which is how the heading and the sentence under
+          it ended up as one word in an earlier draft. `row.tsx` gets this right
+          the same way. */}
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.25, minWidth: 0 }}>
+        {/*
+          The live region is THIS LINE and nothing else. The card also carries a
+          relative timestamp that moves every minute for as long as the subject
+          lasts, and announcing that is a polite interruption per minute for
+          news the reader did not ask to be read. What is worth interrupting for
+          is the subject MOVING, which is what the heading says.
+        */}
+        <Text
+          variant="body"
+          size="sm"
+          weight="semibold"
+          as="span"
+          aria-live="polite"
+          data-testid={`live-activity-title-${activity.id}`}
+        >
+          {activity.title}
+        </Text>
+        {activity.body === null ? null : (
+          <Text id={bodyId} variant="caption" size="xs" color="secondary" as="span">
+            {activity.body}
+          </Text>
+        )}
+      </Box>
+    </>
+  );
+}
+
+export function LiveActivityCard({
+  activity,
+  messages,
+  live,
+  renderIcon,
+  now,
+  onOpen,
+}: LiveActivityCardProps): JSX.Element {
+  const followable = activity.link !== null && onOpen !== undefined;
+  const bodyId = useId();
+  const target = (
+    <ActivityTarget
+      activity={activity}
+      bodyId={bodyId}
+      {...(renderIcon ? { renderIcon } : {})}
+    />
+  );
+  return (
+    <Box data-testid={`live-activity-${activity.id}`} sx={cardSx}>
+      {followable ? (
+        <Box
+          component="button"
+          type="button"
+          onClick={() => onOpen(activity)}
+          // `aria-label` REPLACES the contents, so the sentence under the
+          // heading — the detail that makes the heading actionable — would be
+          // announced to nobody. `aria-describedby` puts it back.
+          aria-label={live.openActivity(activity.title)}
+          {...(activity.body === null ? {} : { 'aria-describedby': bodyId })}
+          data-testid={`live-activity-open-${activity.id}`}
+          sx={stretchedSx}
+        >
+          {target}
+        </Box>
+      ) : (
+        <Box sx={targetSx}>{target}</Box>
+      )}
+      <ActivityLane activity={activity} />
+      <Text variant="caption" size="xs" color="secondary" as="span" italic>
+        {live.updated(relativeTime(activity.updatedAt, messages, now))}
+      </Text>
+    </Box>
+  );
+}