From f37e28a5ada23fdd611f46cdc0472163bedf3830 Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Wed, 8 Apr 2026 08:53:32 -0500
Subject: [PATCH 1/6] Redesign event detail layout with payloads left, info
 right

- Reorder event card columns so input/payloads appear first
- Extract EventPayloads and EventDetailsSection sub-components
- Two-column layout in EventDetailsFull: unified payloads on left,
  per-event details with headers on right
- Sort payloads: input, result, failures, then header/searchAttributes/memo
- Apply same payloads-left pattern to pending activity and nexus cards
- Remove duplicate status/name headers from pending cards
- Disable hover background on expanded event history rows
- Fix scheduleToStartTimeout displaying wrong value in nexus card
- Add collapsible workflow details with persisted preference
---
 src/lib/components/event/event-card.svelte    |  14 +-
 .../event/event-details-full.svelte           | 108 +++++++++++-
 .../event/event-details-section.svelte        | 157 ++++++++++++++++++
 .../components/event/event-payloads.svelte    |  75 +++++++++
 .../components/event/event-summary-row.svelte |   4 +-
 .../pending-activity-card.svelte              |  36 ++--
 .../pending-nexus-operation-card.svelte       |  71 ++++----
 src/lib/i18n/locales/en/workflows.ts          |   2 +
 src/lib/layouts/workflow-header.svelte        |   2 +-
 9 files changed, 397 insertions(+), 72 deletions(-)
 create mode 100644 src/lib/components/event/event-details-section.svelte
 create mode 100644 src/lib/components/event/event-payloads.svelte

diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index d183f3fc4a..4343cdbe49 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -97,6 +97,13 @@
     <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
   </div>
   <div class="flex flex-col gap-1 xl:flex-row">
+    {#if payloadFields.length}
+      <div class="flex w-full flex-col gap-1 xl:w-1/2">
+        {#each payloadFields as [key, value] (key)}
+          {@render payloads(key, value)}
+        {/each}
+      </div>
+    {/if}
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {#if event?.links?.length}
         {@render eventLinks(event.links)}
@@ -111,13 +118,6 @@
         {@render link(key, value)}
       {/each}
     </div>
-    {#if payloadFields.length}
-      <div class="flex w-full flex-col gap-1 xl:w-1/2">
-        {#each payloadFields as [key, value] (key)}
-          {@render payloads(key, value)}
-        {/each}
-      </div>
-    {/if}
   </div>
 </div>
 
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index b638f7ed94..55ec8ddae5 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
+  import { page } from '$app/state';
+
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { WorkflowEvent } from '$lib/types/events';
+  import { formatAttributes } from '$lib/utilities/format-event-attributes';
+  import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
   import PendingActivityCard from '../workflow/pending-activity/pending-activity-card.svelte';
   import PendingNexusOperationCard from '../workflow/pending-nexus-operation/pending-nexus-operation-card.svelte';
 
   import EventCard from './event-card.svelte';
+  import EventDetailsSection from './event-details-section.svelte';
+  import EventPayloads from './event-payloads.svelte';
 
   let {
     group = undefined,
@@ -18,6 +24,68 @@
   const showEventGroup = $derived(
     group && (group.eventList.length > 1 || pendingEvent),
   );
+
+  const processedEvents = $derived.by(() => {
+    if (!group || !showEventGroup) return [];
+    return group.eventList.map((evt) => {
+      const attrs = formatAttributes(evt);
+      if (evt?.principal?.name) attrs.principalName = evt.principal.name;
+      if (evt?.principal?.type) attrs.principalType = evt.principal.type;
+      const fields = Object.entries(attrs);
+      const payloadFields = fields.filter(
+        ([_key, value]) =>
+          typeof value === 'object' && Object.keys(value).length > 0,
+      );
+      const linkFields = fields.filter(
+        ([key, _value]) => displayLinkType(key, attrs) !== 'none',
+      );
+      const hiddenDetailFields = (() => {
+        if (evt.category === 'activity')
+          return ['scheduledEventId', 'startedEventId', 'namespaceId'];
+        if (evt.category === 'child-workflow')
+          return ['initiatedEventId', 'startedEventId', 'namespaceId'];
+        return ['namespaceId'];
+      })();
+      const detailFields = fields.filter(
+        ([key, value]) =>
+          typeof value !== 'object' &&
+          displayLinkType(key, attrs) === 'none' &&
+          !hiddenDetailFields.includes(key) &&
+          (key !== 'namespace' ||
+            (key === 'namespace' && page.params.namespace !== value)),
+      );
+      return {
+        event: evt,
+        attributes: attrs,
+        payloadFields,
+        detailFields,
+        linkFields,
+      };
+    });
+  });
+
+  const payloadKeyOrder = [
+    'input',
+    'result',
+    'lastFailure',
+    'failure',
+    'header',
+    'searchAttributes',
+    'memo',
+  ];
+
+  const allPayloadFields = $derived.by(() => {
+    const all = processedEvents.flatMap((p) => p.payloadFields);
+    return all.toSorted(([a], [b]) => {
+      const aIndex = payloadKeyOrder.indexOf(a);
+      const bIndex = payloadKeyOrder.indexOf(b);
+      const aOrder = aIndex !== -1 ? aIndex : payloadKeyOrder.length - 1;
+      const bOrder = bIndex !== -1 ? bIndex : payloadKeyOrder.length - 1;
+      return aOrder - bOrder;
+    });
+  });
+
+  const hasAnyPayloads = $derived(allPayloadFields.length > 0);
 </script>
 
 {#if showEventGroup}
@@ -27,9 +95,43 @@
     {:else if group?.pendingNexusOperation}
       <PendingNexusOperationCard operation={group.pendingNexusOperation} />
     {/if}
-    {#each group.eventList as groupEvent}
-      <EventCard event={groupEvent} />
-    {/each}
+
+    {#if hasAnyPayloads}
+      <div class="flex flex-col xl:flex-row">
+        <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
+          <EventPayloads payloadFields={allPayloadFields} />
+        </div>
+        <div class="flex w-full flex-col xl:w-1/2 xl:border-l xl:border-subtle">
+          {#each processedEvents as processed (processed.event.id)}
+            <div class="border-b border-subtle p-4">
+              <div class="flex flex-col gap-1">
+                <EventDetailsSection
+                  event={processed.event}
+                  attributes={processed.attributes}
+                  detailFields={processed.detailFields}
+                  linkFields={processed.linkFields}
+                  showHeader={true}
+                />
+              </div>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {:else}
+      {#each processedEvents as processed (processed.event.id)}
+        <div class="border-b border-subtle p-4">
+          <div class="flex flex-col gap-1">
+            <EventDetailsSection
+              event={processed.event}
+              attributes={processed.attributes}
+              detailFields={processed.detailFields}
+              linkFields={processed.linkFields}
+              showHeader={true}
+            />
+          </div>
+        </div>
+      {/each}
+    {/if}
   </div>
 {:else if event}
   <EventCard {event} />
diff --git a/src/lib/components/event/event-details-section.svelte b/src/lib/components/event/event-details-section.svelte
new file mode 100644
index 0000000000..6b404384a6
--- /dev/null
+++ b/src/lib/components/event/event-details-section.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import { page } from '$app/state';
+
+  import Timestamp from '$lib/components/timestamp.svelte';
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import Copyable from '$lib/holocene/copyable/index.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { EventLink as ELink } from '$lib/types';
+  import { type Payload } from '$lib/types';
+  import type { WorkflowEvent } from '$lib/types/events';
+  import { getEventLinkHref } from '$lib/utilities/event-link-href';
+  import {
+    format,
+    spaceBetweenCapitalLetters,
+  } from '$lib/utilities/format-camel-case';
+  import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
+  import {
+    displayLinkType,
+    shouldDisplayAsTime,
+  } from '$lib/utilities/get-single-attribute-for-event';
+  import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
+  import {
+    routeForEventHistoryEvent,
+    routeForNamespace,
+  } from '$lib/utilities/route-for';
+
+  import EventDetailsLink from './event-details-link.svelte';
+  import MetadataDecoder from './metadata-decoder.svelte';
+
+  let {
+    event,
+    attributes,
+    detailFields,
+    linkFields,
+    showHeader = false,
+  }: {
+    event: WorkflowEvent;
+    attributes: CombinedAttributes;
+    detailFields: [string, unknown][];
+    linkFields: [string, unknown][];
+    showHeader?: boolean;
+  } = $props();
+
+  const { namespace, workflow, run } = $derived(page.params);
+
+  const displayName = $derived(
+    isLocalActivityMarkerEvent(event)
+      ? translate('events.category.local-activity')
+      : spaceBetweenCapitalLetters(event.name),
+  );
+</script>
+
+{#if showHeader}
+  <div class="flex flex-wrap items-center justify-between gap-2">
+    <div class="flex items-center gap-2 text-base">
+      <Link
+        href={routeForEventHistoryEvent({
+          eventId: event.id,
+          run,
+          workflow,
+          namespace,
+        })}>{event.id}</Link
+      >
+      <p class="font-medium">
+        {displayName}
+      </p>
+    </div>
+    <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
+  </div>
+{/if}
+
+{#if event?.links?.length}
+  {#each event.links as link}
+    {@const href = getEventLinkHref(link)}
+    {@const value = href.split('workflows/')?.[1] || href}
+    <div class="flex items-start gap-4">
+      <p class="min-w-56 text-sm text-secondary/80">
+        {translate('nexus.link')}
+      </p>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={value}
+      >
+        <Link {href} class="whitespace-pre-line">{value}</Link>
+      </Copyable>
+    </div>
+    {@const nsHref = routeForNamespace({
+      namespace: link.workflowEvent.namespace,
+    })}
+    <div class="flex items-start gap-4">
+      <p class="min-w-56 text-sm text-secondary/80">
+        {translate('nexus.link-namespace')}
+      </p>
+      <Copyable
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+        content={link.workflowEvent.namespace}
+      >
+        <Link href={nsHref} class="whitespace-pre-line"
+          >{link.workflowEvent.namespace}</Link
+        >
+      </Copyable>
+    </div>
+  {/each}
+{/if}
+
+{#if event?.userMetadata?.summary}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm text-secondary/80">Summary</p>
+    <p class="whitespace-pre-line">
+      <MetadataDecoder
+        value={event.userMetadata.summary}
+        let:decodedValue
+        fallback={translate('events.decode-failed')}
+      >
+        {decodedValue}
+      </MetadataDecoder>
+    </p>
+  </div>
+{/if}
+
+{#each detailFields as [key, value] (key)}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm text-secondary/80">
+      {format(key)}
+    </p>
+    <p class="whitespace-pre-line break-all">
+      {#if shouldDisplayAsTime(key)}
+        <Timestamp dateTime={value} />
+      {:else}
+        {value}
+      {/if}
+    </p>
+  </div>
+{/each}
+
+{#each linkFields as [key, value] (key)}
+  <div class="flex items-start gap-4">
+    <p class="min-w-56 text-sm text-secondary/80">
+      {format(key)}
+    </p>
+    <Copyable
+      copyIconTitle={translate('common.copy-icon-title')}
+      copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      content={String(value)}
+    >
+      <EventDetailsLink
+        value={String(value)}
+        {attributes}
+        type={displayLinkType(key, attributes)}
+        class="whitespace-pre-line"
+      />
+    </Copyable>
+  </div>
+{/each}
diff --git a/src/lib/components/event/event-payloads.svelte b/src/lib/components/event/event-payloads.svelte
new file mode 100644
index 0000000000..28ab6dbf9a
--- /dev/null
+++ b/src/lib/components/event/event-payloads.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { format } from '$lib/utilities/format-camel-case';
+  import {
+    getCodeBlockValue,
+    getStackTrace,
+  } from '$lib/utilities/get-single-attribute-for-event';
+
+  import PayloadDecoder from './payload-decoder.svelte';
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let { payloadFields }: { payloadFields: [string, any][] } = $props();
+</script>
+
+{#each payloadFields as [key, value] (key)}
+  {@const codeBlockValue = getCodeBlockValue(value)}
+  {@const stackTrace = getStackTrace(codeBlockValue)}
+  <div>
+    <p class="mb-1 min-w-56 text-sm text-secondary/80">
+      {format(key)}
+    </p>
+    {#if value?.payloads}
+      <PayloadDecoder {value} key="payloads">
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {:else if key === 'searchAttributes'}
+      <PayloadDecoder
+        key="searchAttributes"
+        value={{ searchAttributes: codeBlockValue }}
+      >
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {:else}
+      <PayloadDecoder value={codeBlockValue}>
+        {#snippet children(decodedValue)}
+          <CodeBlock
+            content={decodedValue}
+            maxHeight={384}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        {/snippet}
+      </PayloadDecoder>
+    {/if}
+  </div>
+  {#if stackTrace}
+    <div>
+      <p class="mb-1 min-w-56 text-sm text-secondary/80">
+        {translate('workflows.call-stack-tab')}
+      </p>
+      <CodeBlock
+        content={stackTrace}
+        language="text"
+        maxHeight={384}
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
+      />
+    </div>
+  {/if}
+{/each}
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 9c9417b833..04d3602783 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -201,7 +201,7 @@
 
 <tr
   class={merge(
-    'hover:cursor-pointer',
+    expanded ? 'hover:!bg-transparent' : 'hover:cursor-pointer',
     failure && '!bg-red-400/40 hover:!bg-red-400/60',
     canceled && '!bg-yellow-400/30 hover:!bg-yellow-400/50',
     terminated && '!bg-pink-700/30 hover:!bg-pink-700/50',
@@ -380,7 +380,7 @@
 </tr>
 {#if expanded}
   <tr
-    class="w-full text-sm no-underline"
+    class="w-full text-sm no-underline hover:!bg-transparent"
     data-testid="event-summary-row-expanded"
   >
     <td class="!p-0" colspan={$isCloud ? 5 : 4}>
diff --git a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
index ee1075e49f..42e5bb32e1 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -47,16 +47,24 @@
 <div
   class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
 >
-  <div class="flex flex-1 flex-wrap justify-between gap-2">
-    <div class="flex flex-wrap items-center space-x-3">
-      <WorkflowStatus status={activity.paused ? 'Paused' : activity.state} />
-      <h4>{activity.activityType}</h4>
-    </div>
-    {#if showActivityCommands}
+  {#if showActivityCommands}
+    <div class="flex flex-1 flex-wrap justify-end gap-2">
       <ActivityCommands {activity} class="justify-end" />
-    {/if}
-  </div>
+    </div>
+  {/if}
   <div class="flex flex-1 flex-col gap-4 xl:flex-row">
+    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+      {#if failed}
+        {#if totalPending > 20}
+          {@render failuresAccordion()}
+        {:else}
+          {@render failuresCodeBlock()}
+        {/if}
+      {/if}
+      {#if activity.heartbeatDetails}
+        {@render heartbeat()}
+      {/if}
+    </div>
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {@render detail(translate('workflows.activity-id'), activity.activityId)}
       {#if activity.paused && activity.pauseInfo}
@@ -136,18 +144,6 @@
         {/if}
       {/if}
     </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {#if totalPending > 20}
-          {@render failuresAccordion()}
-        {:else}
-          {@render failuresCodeBlock()}
-        {/if}
-      {/if}
-      {#if activity.heartbeatDetails}
-        {@render heartbeat()}
-      {/if}
-    </div>
   </div>
 </div>
 
diff --git a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
index 40207607bd..65af0c2712 100644
--- a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
+++ b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
@@ -19,14 +19,38 @@
 <div
   class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
 >
-  <div class="flex-1">
-    <div class="flex flex-wrap items-center space-x-3">
-      <Badge>{operation.state}</Badge>
-      <h4>{translate('workflows.pending-nexus-operation')}</h4>
-    </div>
-  </div>
-
   <div class="flex flex-1 flex-col gap-4 xl:flex-row">
+    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+      {#if failed}
+        {@render failures()}
+      {/if}
+      {#if operation.blockedReason}
+        <div class="flex flex-1 flex-col">
+          <p class="text-sm text-secondary/80">
+            {translate('nexus.blocked-reason')}
+          </p>
+          <CodeBlock
+            language="text"
+            content={operation.blockedReason}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        </div>
+      {/if}
+      {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
+        <div class="flex flex-1 flex-col">
+          <p class="text-sm text-secondary/80">
+            {translate('nexus.cancellation-info')}
+          </p>
+          <CodeBlock
+            language="text"
+            content={stringifyWithBigInt(operation.cancellationInfo)}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        </div>
+      {/if}
+    </div>
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {#if operation.endpoint}
         {@render detail(translate('nexus.endpoint'), operation.endpoint)}
@@ -80,7 +104,7 @@
       {#if operation.scheduleToStartTimeout}
         {@render detail(
           translate('workflows.schedule-to-start-timeout'),
-          operation.scheduleToCloseTimeout as string,
+          operation.scheduleToStartTimeout as string,
         )}
       {/if}
       {#if operation.startToCloseTimeout}
@@ -90,37 +114,6 @@
         )}
       {/if}
     </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {@render failures()}
-      {/if}
-      {#if operation.blockedReason}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.blocked-reason')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={operation.blockedReason}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
-      {/if}
-      {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.cancellation-info')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={stringifyWithBigInt(operation.cancellationInfo)}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
-      {/if}
-    </div>
   </div>
 </div>
 
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index d06ea88181..bb8cdfe8f0 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -171,6 +171,8 @@ export const Strings = {
   children_one: '1 Child',
   children_other: '{{count}} Children',
   'show-children': 'View Child Workflows',
+  'show-workflow-details': 'Show Workflow Details',
+  'hide-workflow-details': 'Hide Workflow Details',
   first: '{{count}} First',
   previous: '{{count}} Previous',
   next: '{{count}} Next',
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 0d0e80a1d5..161d19f5e8 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly } from 'svelte/transition';
+  import { fly, slide } from 'svelte/transition';
 
   import { page } from '$app/state';
 

From b69ccb24a47e7980cb7ef52dce7133af1cecb485 Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Wed, 8 Apr 2026 10:32:19 -0500
Subject: [PATCH 2/6] Remove unused imports/translations

---
 src/lib/i18n/locales/en/workflows.ts   | 2 --
 src/lib/layouts/workflow-header.svelte | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index bb8cdfe8f0..d06ea88181 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -171,8 +171,6 @@ export const Strings = {
   children_one: '1 Child',
   children_other: '{{count}} Children',
   'show-children': 'View Child Workflows',
-  'show-workflow-details': 'Show Workflow Details',
-  'hide-workflow-details': 'Hide Workflow Details',
   first: '{{count}} First',
   previous: '{{count}} Previous',
   next: '{{count}} Next',
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 161d19f5e8..0d0e80a1d5 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly, slide } from 'svelte/transition';
+  import { fly } from 'svelte/transition';
 
   import { page } from '$app/state';
 

From e7907e25043a2b5ff081d0dabf7545055d6e559b Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Wed, 8 Apr 2026 12:11:41 -0500
Subject: [PATCH 3/6] Include scheduled event in pending activities tab and
 polish borders

- Pending activities tab now uses EventDetailsFull with event groups
  to show both the pending card and the scheduled event
- Add surface-primary background to event detail sections
- Add bottom border to two-column payload/details container
- Remove double border on last detail section
---
 .../event/event-details-full.svelte           | 14 +++++---
 .../pages/workflow-pending-activities.svelte  | 32 ++++++++++---------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index 55ec8ddae5..6a8fd4000c 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -97,13 +97,19 @@
     {/if}
 
     {#if hasAnyPayloads}
-      <div class="flex flex-col xl:flex-row">
+      <div
+        class="surface-primary flex flex-col border-b border-subtle xl:flex-row"
+      >
         <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
           <EventPayloads payloadFields={allPayloadFields} />
         </div>
         <div class="flex w-full flex-col xl:w-1/2 xl:border-l xl:border-subtle">
-          {#each processedEvents as processed (processed.event.id)}
-            <div class="border-b border-subtle p-4">
+          {#each processedEvents as processed, i (processed.event.id)}
+            <div
+              class="p-4 {i < processedEvents.length - 1
+                ? 'border-b border-subtle'
+                : ''}"
+            >
               <div class="flex flex-col gap-1">
                 <EventDetailsSection
                   event={processed.event}
@@ -119,7 +125,7 @@
       </div>
     {:else}
       {#each processedEvents as processed (processed.event.id)}
-        <div class="border-b border-subtle p-4">
+        <div class="surface-primary border-b border-subtle p-4">
           <div class="flex flex-col gap-1">
             <EventDetailsSection
               event={processed.event}
diff --git a/src/lib/pages/workflow-pending-activities.svelte b/src/lib/pages/workflow-pending-activities.svelte
index 0dc45b3c39..f1c41ccff3 100644
--- a/src/lib/pages/workflow-pending-activities.svelte
+++ b/src/lib/pages/workflow-pending-activities.svelte
@@ -1,27 +1,29 @@
 <script lang="ts">
-  import PendingActivityCard from '$lib/components/workflow/pending-activity/pending-activity-card.svelte';
+  import EventDetailsFull from '$lib/components/event/event-details-full.svelte';
   import EmptyState from '$lib/holocene/empty-state.svelte';
   import { translate } from '$lib/i18n/translate';
+  import { groupEvents } from '$lib/models/event-groups';
+  import { fullEventHistory } from '$lib/stores/events';
   import { workflowRun } from '$lib/stores/workflow-run';
 
-  const pendingActivities = $derived(
-    $workflowRun.workflow?.pendingActivities?.sort((a, b) => {
-      if (isNaN(parseInt(a.activityId)) || isNaN(parseInt(b.activityId))) {
-        return a.activityId.localeCompare(b.activityId);
-      }
-      return parseInt(a.activityId) - parseInt(b.activityId);
-    }) || [],
-  );
+  const { workflow } = $derived($workflowRun);
+  const pendingActivities = $derived(workflow?.pendingActivities ?? []);
+
+  const pendingGroups = $derived.by(() => {
+    const groups = groupEvents(
+      $fullEventHistory,
+      'ascending',
+      pendingActivities,
+    );
+    return groups.filter((g) => g.pendingActivity);
+  });
 </script>
 
 <div class="pb-16">
-  {#if pendingActivities.length}
+  {#if pendingGroups.length}
     <div class="flex flex-col gap-4">
-      {#each pendingActivities as activity (activity.id)}
-        <PendingActivityCard
-          {activity}
-          totalPending={pendingActivities.length}
-        />
+      {#each pendingGroups as group (group.id)}
+        <EventDetailsFull {group} />
       {/each}
     </div>
   {:else}

From 747bf4c8d72e0e564d60f1a5d1290c2e1e7ac826 Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Fri, 10 Apr 2026 09:41:30 -0500
Subject: [PATCH 4/6] Move payload fields to the right instead of the left for
 better consistency with current UI

---
 src/lib/components/event/event-card.svelte    | 14 ++---
 .../event/event-details-full.svelte           |  6 +-
 .../pending-activity-card.svelte              | 34 +++++-----
 .../pending-nexus-operation-card.svelte       | 62 +++++++++----------
 4 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index 4343cdbe49..d183f3fc4a 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -97,13 +97,6 @@
     <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
   </div>
   <div class="flex flex-col gap-1 xl:flex-row">
-    {#if payloadFields.length}
-      <div class="flex w-full flex-col gap-1 xl:w-1/2">
-        {#each payloadFields as [key, value] (key)}
-          {@render payloads(key, value)}
-        {/each}
-      </div>
-    {/if}
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {#if event?.links?.length}
         {@render eventLinks(event.links)}
@@ -118,6 +111,13 @@
         {@render link(key, value)}
       {/each}
     </div>
+    {#if payloadFields.length}
+      <div class="flex w-full flex-col gap-1 xl:w-1/2">
+        {#each payloadFields as [key, value] (key)}
+          {@render payloads(key, value)}
+        {/each}
+      </div>
+    {/if}
   </div>
 </div>
 
diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index 6a8fd4000c..e20bda33af 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -100,9 +100,6 @@
       <div
         class="surface-primary flex flex-col border-b border-subtle xl:flex-row"
       >
-        <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
-          <EventPayloads payloadFields={allPayloadFields} />
-        </div>
         <div class="flex w-full flex-col xl:w-1/2 xl:border-l xl:border-subtle">
           {#each processedEvents as processed, i (processed.event.id)}
             <div
@@ -122,6 +119,9 @@
             </div>
           {/each}
         </div>
+        <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
+          <EventPayloads payloadFields={allPayloadFields} />
+        </div>
       </div>
     {:else}
       {#each processedEvents as processed (processed.event.id)}
diff --git a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
index 42e5bb32e1..03e9acbe28 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -47,24 +47,7 @@
 <div
   class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
 >
-  {#if showActivityCommands}
-    <div class="flex flex-1 flex-wrap justify-end gap-2">
-      <ActivityCommands {activity} class="justify-end" />
-    </div>
-  {/if}
   <div class="flex flex-1 flex-col gap-4 xl:flex-row">
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {#if totalPending > 20}
-          {@render failuresAccordion()}
-        {:else}
-          {@render failuresCodeBlock()}
-        {/if}
-      {/if}
-      {#if activity.heartbeatDetails}
-        {@render heartbeat()}
-      {/if}
-    </div>
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {@render detail(translate('workflows.activity-id'), activity.activityId)}
       {#if activity.paused && activity.pauseInfo}
@@ -143,6 +126,23 @@
           )}
         {/if}
       {/if}
+      {#if showActivityCommands}
+        <div class="py-2">
+          <ActivityCommands {activity} />
+        </div>
+      {/if}
+    </div>
+    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+      {#if failed}
+        {#if totalPending > 20}
+          {@render failuresAccordion()}
+        {:else}
+          {@render failuresCodeBlock()}
+        {/if}
+      {/if}
+      {#if activity.heartbeatDetails}
+        {@render heartbeat()}
+      {/if}
     </div>
   </div>
 </div>
diff --git a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
index 65af0c2712..eb7c7bc75d 100644
--- a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
+++ b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
@@ -20,37 +20,6 @@
   class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
 >
   <div class="flex flex-1 flex-col gap-4 xl:flex-row">
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
-      {#if failed}
-        {@render failures()}
-      {/if}
-      {#if operation.blockedReason}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.blocked-reason')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={operation.blockedReason}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
-      {/if}
-      {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
-        <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
-            {translate('nexus.cancellation-info')}
-          </p>
-          <CodeBlock
-            language="text"
-            content={stringifyWithBigInt(operation.cancellationInfo)}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        </div>
-      {/if}
-    </div>
     <div class="flex w-full flex-col gap-1 xl:w-1/2">
       {#if operation.endpoint}
         {@render detail(translate('nexus.endpoint'), operation.endpoint)}
@@ -114,6 +83,37 @@
         )}
       {/if}
     </div>
+    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+      {#if failed}
+        {@render failures()}
+      {/if}
+      {#if operation.blockedReason}
+        <div class="flex flex-1 flex-col">
+          <p class="text-sm text-secondary/80">
+            {translate('nexus.blocked-reason')}
+          </p>
+          <CodeBlock
+            language="text"
+            content={operation.blockedReason}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        </div>
+      {/if}
+      {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
+        <div class="flex flex-1 flex-col">
+          <p class="text-sm text-secondary/80">
+            {translate('nexus.cancellation-info')}
+          </p>
+          <CodeBlock
+            language="text"
+            content={stringifyWithBigInt(operation.cancellationInfo)}
+            copyIconTitle={translate('common.copy-icon-title')}
+            copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          />
+        </div>
+      {/if}
+    </div>
   </div>
 </div>
 

From 2802e2c20beb274043e82f6c845c195bfc69fb68 Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Mon, 13 Apr 2026 21:19:07 -0500
Subject: [PATCH 5/6] Better styles, add distance between events

---
 .../event/event-details-full.svelte           | 16 ++---
 .../event/event-details-section.svelte        | 68 +++++++++++--------
 .../components/event/event-payloads.svelte    |  4 +-
 .../components/event/event-summary-row.svelte |  2 +-
 .../pending-activity-card.svelte              | 19 +++---
 .../pending-nexus-operation-card.svelte       | 12 ++--
 6 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/src/lib/components/event/event-details-full.svelte b/src/lib/components/event/event-details-full.svelte
index e20bda33af..142539581e 100644
--- a/src/lib/components/event/event-details-full.svelte
+++ b/src/lib/components/event/event-details-full.svelte
@@ -89,7 +89,9 @@
 </script>
 
 {#if showEventGroup}
-  <div class="flex flex-col overflow-hidden">
+  <div
+    class="surface-primary flex flex-col overflow-hidden border-t border-subtle"
+  >
     {#if group?.pendingActivity}
       <PendingActivityCard activity={group.pendingActivity} />
     {:else if group?.pendingNexusOperation}
@@ -97,10 +99,8 @@
     {/if}
 
     {#if hasAnyPayloads}
-      <div
-        class="surface-primary flex flex-col border-b border-subtle xl:flex-row"
-      >
-        <div class="flex w-full flex-col xl:w-1/2 xl:border-l xl:border-subtle">
+      <div class="flex flex-col border-b border-subtle xl:flex-row">
+        <div class="flex w-full flex-col xl:w-1/2">
           {#each processedEvents as processed, i (processed.event.id)}
             <div
               class="p-4 {i < processedEvents.length - 1
@@ -110,10 +110,10 @@
               <div class="flex flex-col gap-1">
                 <EventDetailsSection
                   event={processed.event}
+                  {group}
                   attributes={processed.attributes}
                   detailFields={processed.detailFields}
                   linkFields={processed.linkFields}
-                  showHeader={true}
                 />
               </div>
             </div>
@@ -125,14 +125,14 @@
       </div>
     {:else}
       {#each processedEvents as processed (processed.event.id)}
-        <div class="surface-primary border-b border-subtle p-4">
+        <div class="border-b border-subtle p-4">
           <div class="flex flex-col gap-1">
             <EventDetailsSection
               event={processed.event}
+              {group}
               attributes={processed.attributes}
               detailFields={processed.detailFields}
               linkFields={processed.linkFields}
-              showHeader={true}
             />
           </div>
         </div>
diff --git a/src/lib/components/event/event-details-section.svelte b/src/lib/components/event/event-details-section.svelte
index 6b404384a6..73d30d39df 100644
--- a/src/lib/components/event/event-details-section.svelte
+++ b/src/lib/components/event/event-details-section.svelte
@@ -2,12 +2,10 @@
   import { page } from '$app/state';
 
   import Timestamp from '$lib/components/timestamp.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { EventLink as ELink } from '$lib/types';
-  import { type Payload } from '$lib/types';
+  import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import type { WorkflowEvent } from '$lib/types/events';
   import { getEventLinkHref } from '$lib/utilities/event-link-href';
   import {
@@ -15,6 +13,7 @@
     spaceBetweenCapitalLetters,
   } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import {
     displayLinkType,
     shouldDisplayAsTime,
@@ -30,16 +29,16 @@
 
   let {
     event,
+    group,
     attributes,
     detailFields,
     linkFields,
-    showHeader = false,
   }: {
     event: WorkflowEvent;
+    group?: EventGroup;
     attributes: CombinedAttributes;
     detailFields: [string, unknown][];
     linkFields: [string, unknown][];
-    showHeader?: boolean;
   } = $props();
 
   const { namespace, workflow, run } = $derived(page.params);
@@ -49,33 +48,48 @@
       ? translate('events.category.local-activity')
       : spaceBetweenCapitalLetters(event.name),
   );
+
+  const durationSinceLastEvent = $derived.by(() => {
+    if (!group) return '';
+    const eventIndex = group.eventList.findIndex((evt) => evt.id === event.id);
+    if (eventIndex === -1 || eventIndex === 0) return '';
+    const previousEvent = group.eventList[eventIndex - 1];
+    return formatDistanceAbbreviated({
+      start: event.eventTime,
+      end: previousEvent.eventTime,
+      includeMilliseconds: true,
+    });
+  });
 </script>
 
-{#if showHeader}
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <div class="flex items-center gap-2 text-base">
-      <Link
-        href={routeForEventHistoryEvent({
-          eventId: event.id,
-          run,
-          workflow,
-          namespace,
-        })}>{event.id}</Link
-      >
-      <p class="font-medium">
-        {displayName}
-      </p>
-    </div>
-    <Timestamp as="p" class="text-sm" dateTime={event.eventTime} />
+<div class="mb-2 flex w-full flex-wrap items-center justify-between gap-2">
+  <div class="flex items-center gap-2 text-base">
+    <Link
+      href={routeForEventHistoryEvent({
+        eventId: event.id,
+        run,
+        workflow,
+        namespace,
+      })}>{event.id}</Link
+    >
+    <p class="font-medium">
+      {displayName}
+    </p>
   </div>
-{/if}
+  <div class="flex flex-col items-end gap-0 font-mono text-sm leading-4">
+    <Timestamp as="p" dateTime={event.eventTime} />
+    {#if durationSinceLastEvent}
+      <p class="font-medium text-secondary">+{durationSinceLastEvent}</p>
+    {/if}
+  </div>
+</div>
 
 {#if event?.links?.length}
   {#each event.links as link}
     {@const href = getEventLinkHref(link)}
     {@const value = href.split('workflows/')?.[1] || href}
     <div class="flex items-start gap-4">
-      <p class="min-w-56 text-sm text-secondary/80">
+      <p class="min-w-56 text-sm font-medium text-secondary">
         {translate('nexus.link')}
       </p>
       <Copyable
@@ -90,7 +104,7 @@
       namespace: link.workflowEvent.namespace,
     })}
     <div class="flex items-start gap-4">
-      <p class="min-w-56 text-sm text-secondary/80">
+      <p class="min-w-56 text-sm font-medium text-secondary">
         {translate('nexus.link-namespace')}
       </p>
       <Copyable
@@ -108,7 +122,7 @@
 
 {#if event?.userMetadata?.summary}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">Summary</p>
+    <p class="min-w-56 text-sm font-medium text-secondary">Summary</p>
     <p class="whitespace-pre-line">
       <MetadataDecoder
         value={event.userMetadata.summary}
@@ -123,7 +137,7 @@
 
 {#each detailFields as [key, value] (key)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     <p class="whitespace-pre-line break-all">
@@ -138,7 +152,7 @@
 
 {#each linkFields as [key, value] (key)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     <Copyable
diff --git a/src/lib/components/event/event-payloads.svelte b/src/lib/components/event/event-payloads.svelte
index 28ab6dbf9a..c217c93a7d 100644
--- a/src/lib/components/event/event-payloads.svelte
+++ b/src/lib/components/event/event-payloads.svelte
@@ -17,7 +17,7 @@
   {@const codeBlockValue = getCodeBlockValue(value)}
   {@const stackTrace = getStackTrace(codeBlockValue)}
   <div>
-    <p class="mb-1 min-w-56 text-sm text-secondary/80">
+    <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     {#if value?.payloads}
@@ -60,7 +60,7 @@
   </div>
   {#if stackTrace}
     <div>
-      <p class="mb-1 min-w-56 text-sm text-secondary/80">
+      <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
         {translate('workflows.call-stack-tab')}
       </p>
       <CodeBlock
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 04d3602783..fa3763dd4e 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -201,7 +201,7 @@
 
 <tr
   class={merge(
-    expanded ? 'hover:!bg-transparent' : 'hover:cursor-pointer',
+    'hover:cursor-pointer',
     failure && '!bg-red-400/40 hover:!bg-red-400/60',
     canceled && '!bg-yellow-400/30 hover:!bg-yellow-400/50',
     terminated && '!bg-pink-700/30 hover:!bg-pink-700/50',
diff --git a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
index 03e9acbe28..a0728c4d4b 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -6,7 +6,6 @@
   import ActivityCommands from '$lib/components/activity/activity-commands.svelte';
   import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
-  import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
@@ -45,10 +44,10 @@
 </script>
 
 <div
-  class="surface-primary flex flex-1 cursor-default flex-col gap-2 border-b border-subtle p-4"
+  class="surface-primary flex cursor-default flex-col gap-2 border-b border-subtle"
 >
-  <div class="flex flex-1 flex-col gap-4 xl:flex-row">
-    <div class="flex w-full flex-col gap-1 xl:w-1/2">
+  <div class="flex flex-1 flex-col xl:flex-row">
+    <div class="flex w-full flex-col gap-1 p-4 xl:w-1/2">
       {@render detail(translate('workflows.activity-id'), activity.activityId)}
       {#if activity.paused && activity.pauseInfo}
         {@render detail(
@@ -132,7 +131,7 @@
         </div>
       {/if}
     </div>
-    <div class="flex w-full flex-col gap-4 md:flex-1 xl:w-1/2">
+    <div class="flex w-full flex-col gap-1 p-4 md:flex-1 xl:w-1/2">
       {#if failed}
         {#if totalPending > 20}
           {@render failuresAccordion()}
@@ -149,7 +148,7 @@
 
 {#snippet detail(label: string, value: string | number | Snippet)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -164,7 +163,7 @@
 
 {#snippet heartbeat()}
   <div>
-    <p class="text-sm text-secondary/80">
+    <p class="text-sm font-medium text-secondary">
       {translate('workflows.heartbeat-details')}
     </p>
     {#key activity.attempt}
@@ -186,7 +185,7 @@
   <div class="flex flex-col gap-2">
     <div class="flex flex-1 flex-col">
       {#if activity.lastFailure}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('workflows.last-failure')}
         </p>
         {#key activity.attempt}
@@ -207,7 +206,7 @@
     </div>
     {#if activity.lastFailure?.stackTrace}
       <div>
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock
@@ -237,7 +236,7 @@
 
 {#snippet nextRetry(timeDifference)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
diff --git a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
index eb7c7bc75d..99fc83596f 100644
--- a/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
+++ b/src/lib/components/workflow/pending-nexus-operation/pending-nexus-operation-card.svelte
@@ -89,7 +89,7 @@
       {/if}
       {#if operation.blockedReason}
         <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
+          <p class="text-sm font-medium text-secondary">
             {translate('nexus.blocked-reason')}
           </p>
           <CodeBlock
@@ -102,7 +102,7 @@
       {/if}
       {#if Object.keys(operation.cancellationInfo ?? {}).length > 0}
         <div class="flex flex-1 flex-col">
-          <p class="text-sm text-secondary/80">
+          <p class="text-sm font-medium text-secondary">
             {translate('nexus.cancellation-info')}
           </p>
           <CodeBlock
@@ -119,7 +119,7 @@
 
 {#snippet nextRetry(timeDifference)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('workflows.next-retry')}
     </p>
     <p class="flex w-full items-center gap-1 whitespace-pre-line">
@@ -131,7 +131,7 @@
 
 {#snippet detail(label: string, value: string | number | Snippet)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {label}
     </p>
     <p class="w-full whitespace-pre-line">
@@ -155,7 +155,7 @@
   <div class="flex flex-col gap-2">
     <div class="flex flex-1 flex-col">
       {#if operation.lastAttemptFailure}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('workflows.last-failure')}
         </p>
         <CodeBlock
@@ -170,7 +170,7 @@
     </div>
     <div class="flex flex-1 flex-col">
       {#if operation.lastAttemptFailure?.stackTrace}
-        <p class="text-sm text-secondary/80">
+        <p class="text-sm font-medium text-secondary">
           {translate('common.stack-trace')}
         </p>
         <CodeBlock

From b60eced48d3c2c42c03e563bf05c0a474bf4e9db Mon Sep 17 00:00:00 2001
From: Your Name <alex.tideman@gmail.com>
Date: Mon, 13 Apr 2026 22:23:32 -0500
Subject: [PATCH 6/6] Fix event card label text styles to match

---
 src/lib/components/event/event-card.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index d183f3fc4a..75d5961018 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -125,7 +125,7 @@
   {@const href = getEventLinkHref(link)}
   {@const value = href.split('workflows/')?.[1] || href}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('nexus.link')}
     </p>
     <Copyable
@@ -141,7 +141,7 @@
 {#snippet eventNamespaceLink(link: ELink)}
   {@const href = routeForNamespace({ namespace: link.workflowEvent.namespace })}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {translate('nexus.link-namespace')}
     </p>
     <Copyable
@@ -165,7 +165,7 @@
 
 {#snippet eventSummary(value: Payload)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">Summary</p>
+    <p class="min-w-56 text-sm font-medium text-secondary">Summary</p>
     <p class="whitespace-pre-line">
       <MetadataDecoder
         {value}
@@ -182,7 +182,7 @@
   {@const codeBlockValue = getCodeBlockValue(value)}
   {@const stackTrace = getStackTrace(codeBlockValue)}
   <div>
-    <p class="mb-1 min-w-56 text-sm text-secondary/80">
+    <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     {#if value?.payloads}
@@ -225,7 +225,7 @@
   </div>
   {#if stackTrace}
     <div>
-      <p class="mb-1 min-w-56 text-sm text-secondary/80">
+      <p class="mb-1 min-w-56 text-sm font-medium text-secondary">
         {translate('workflows.call-stack-tab')}
       </p>
       <CodeBlock
@@ -241,7 +241,7 @@
 
 {#snippet link(key, value)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     <Copyable
@@ -261,7 +261,7 @@
 
 {#snippet details(key, value)}
   <div class="flex items-start gap-4">
-    <p class="min-w-56 text-sm text-secondary/80">
+    <p class="min-w-56 text-sm font-medium text-secondary">
       {format(key)}
     </p>
     <p class="whitespace-pre-line break-all">