feat(workflows): show email log activity on one collapsible rail

products/workflows/frontend/Transactional/log/TransactionalEmailActivity.tsx

@@ -8,7 +8,17 @@
 import { TransactionalEmailActivityTimeline } from './TransactionalEmailActivityTimeline'
 import { transactionalEmailLogEntryLogic } from './transactionalEmailLogEntryLogic'
 
+function ActivitySkeleton(): JSX.Element {
+    return (
+        <div className="flex flex-col gap-3">
+            {Array.from({ length: 6 }).map((_, index) => (
+                <LemonSkeleton key={index} className="h-5" />
+            ))}
+        </div>
+    )
+}
+
 export function TransactionalEmailActivity({ email }: { email: TransactionalEmailLogDetailApi }): JSX.Element {
     const { person, personLoading, personFailed, activity, activityLoading, activityFailed } = useValues(
         transactionalEmailLogEntryLogic
     )
@@ -39,34 +49,31 @@
                 The person behind this send couldn't load. Check your connection and try again.
             </LemonBanner>
         )
+    } else if (person === undefined || personLoading) {
+        content = <ActivitySkeleton />
     } else if (person === null) {
         content = (
             <p className="text-sm text-secondary m-0">
                 No events from this person yet. Once your app captures events for them, what they did before and after
                 the email shows up here.
             </p>
         )
-    } else if (activityFailed && !activityLoading && person) {
+    } else if (activityFailed && !activityLoading) {
+        const distinctId = email.distinct_id
         content = (
             <LemonBanner
                 type="error"
                 action={{
                     children: 'Try again',
-                    onClick: () => loadActivity({ personId: person.id, sentAt: emailSentAt(email) }),
+                    onClick: () => loadActivity({ distinctId, sentAt: emailSentAt(email) }),
                     'data-attr': 'transactional-email-activity-retry',
                 }}
             >
                 The activity couldn't load. Check your connection and try again.
             </LemonBanner>
         )
-    } else if (!activity || activityLoading || personLoading) {
-        content = (
-            <div className="flex flex-col gap-3">
-                {Array.from({ length: 6 }).map((_, index) => (
-                    <LemonSkeleton key={index} className="h-5" />
-                ))}
-            </div>
-        )
+    } else if (!activity || activityLoading) {
+        content = <ActivitySkeleton />
     } else {
         content = <TransactionalEmailActivityTimeline email={email} activity={activity} />
     }
@@ -76,7 +83,7 @@
             <div className="flex flex-col gap-0.5">
                 <h3 className="text-base font-semibold m-0">{title}</h3>
                 <p className="text-xs text-secondary m-0">
-                    The person's events in your product, with this email's delivery and engagement in between.
+                    The person's events in your product before and after this email.
                 </p>
             </div>
             {content}

products/workflows/frontend/Transactional/log/TransactionalEmailActivityRail.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import type { ActivityEvent } from './emailActivity'
+import { buildActivityTimeline } from './emailActivity'
+import { groupActivityRows } from './emailActivityGroups'
+import { TransactionalEmailActivityRail } from './TransactionalEmailActivityRail'
+
+const meta: Meta<typeof TransactionalEmailActivityRail> = {
+    title: 'Scenes-App/Transactional/Email activity rail',
+    component: TransactionalEmailActivityRail,
+    parameters: { mockDate: '2026-06-15', testOptions: { snapshotBrowsers: [] } },
+}
+export default meta
+
+const SENT_AT = '2026-06-15T09:00:00Z'
+
+function event(uuid: string, timestamp: string, sessionId: string | null, name = '$pageview'): ActivityEvent {
+    return {
+        uuid,
+        event: name,
+        timestamp,
+        url: null,
+        pathname: '/pricing',
+        sessionId,
+        eventType: null,
+        elementsChain: '',
+    }
+}
+
+const timeline = buildActivityTimeline(
+    [
+        event('before', '2026-06-14T08:59:00Z', 'session-1'),
+        event('after', '2026-06-15T09:03:00Z', 'session-2'),
+        event('outcome', '2026-06-15T09:04:00Z', 'session-2', 'upgraded_plan'),
+        event('no-session', '2026-06-15T14:00:00Z', null, 'invoice_paid'),
+    ],
+    [],
+    SENT_AT
+)
+
+export const SessionsAroundTheSend: StoryFn = () => (
+    <TransactionalEmailActivityRail
+        before={groupActivityRows(timeline.before)}
+        after={groupActivityRows(timeline.after)}
+        sentAt={SENT_AT}
+        failed={false}
+        sendLabel="Email sent"
+        sendDetail="Welcome email"
+        comeback="Back in your app 1m after clicking the email"
+        emptyAfter={null}
+        hiddenBefore={2}
+        onShowEarlier={() => {}}
+        hiddenAfter={0}
+        onShowLater={() => {}}
+    />
+)