diff --git a/src/lib/components/event/event-card.svelte b/src/lib/components/event/event-card.svelte
index e586821808..e5046b27c5 100644
--- a/src/lib/components/event/event-card.svelte
+++ b/src/lib/components/event/event-card.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
   import { page } from '$app/state';
 
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
+  import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
   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 Payload as RawPayload } from '$lib/types';
   import type { WorkflowEvent } from '$lib/types/events';
   import { getEventLinkHref } from '$lib/utilities/event-link-href';
   import {
@@ -28,8 +30,6 @@
   } from '$lib/utilities/route-for';
 
   import EventDetailsLink from './event-details-link.svelte';
-  import MetadataDecoder from './metadata-decoder.svelte';
-  import PayloadDecoder from './payload-decoder.svelte';
 
   let { event }: { event: WorkflowEvent } = $props();
   const { namespace, workflow, run } = $derived(page.params);
@@ -157,22 +157,20 @@
 {/snippet}
 
 {#snippet eventLinks(links: ELink[])}
-  {#each links as link}
+  {#each links as link (link)}
     {@render eventLink(link)}
     {@render eventNamespaceLink(link)}
   {/each}
 {/snippet}
 
-{#snippet eventSummary(value: Payload)}
+{#snippet eventSummary(value: RawPayload)}
   <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} fallback={translate('events.decode-failed')}>
-        {#snippet children(decodedValue)}
-          {decodedValue}
-        {/snippet}
-      </MetadataDecoder>
-    </p>
+    <PayloadSummary
+      class="whitespace-pre-line"
+      {value}
+      fallback={translate('events.decode-failed')}
+    />
   </div>
 {/snippet}
 
@@ -184,41 +182,9 @@
       {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>
+      <PayloadCodeBlock {value} maxHeight={384} />
     {: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>
+      <PayloadCodeBlock value={codeBlockValue} maxHeight={384} />
     {/if}
   </div>
   {#if stackTrace}
@@ -227,11 +193,11 @@
         {translate('workflows.call-stack-tab')}
       </p>
       <CodeBlock
+        copyIconTitle={translate('common.copy-icon-title')}
+        copySuccessIconTitle={translate('common.copy-success-icon-title')}
         content={stackTrace}
         language="text"
         maxHeight={384}
-        copyIconTitle={translate('common.copy-icon-title')}
-        copySuccessIconTitle={translate('common.copy-success-icon-title')}
       />
     </div>
   {/if}
diff --git a/src/lib/components/event/event-details-row.svelte b/src/lib/components/event/event-details-row.svelte
index 465ae6a7f8..fcaafa6428 100644
--- a/src/lib/components/event/event-details-row.svelte
+++ b/src/lib/components/event/event-details-row.svelte
@@ -1,19 +1,20 @@
 <script lang="ts">
   import { twMerge as merge } from 'tailwind-merge';
 
+  import PayloadInline from '$lib/components/payload/payload-inline.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
   import { translate } from '$lib/i18n/translate';
-  import type { Payloads } from '$lib/types';
+  import type { Payload, Payloads } from '$lib/types';
+  import { isRawPayload, isRawPayloads } from '$lib/utilities/decode-payload';
   import { format } from '$lib/utilities/format-camel-case';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import { displayLinkType } from '$lib/utilities/get-single-attribute-for-event';
 
   import EventDetailsLink from './event-details-link.svelte';
-  import PayloadDecoder from './payload-decoder.svelte';
 
   export let key: string;
-  export let value: string | Record<string, unknown> | Payloads;
+  export let value: string | Payload | Payloads;
   export let attributes: CombinedAttributes;
   export let showKey = true;
 
@@ -29,21 +30,13 @@
         {format(key)}
       </p>
     {/if}
-    {#if typeof value === 'object'}
+    {#if isRawPayload(value) || isRawPayloads(value)}
       <div
         class="flex max-w-sm items-center justify-between gap-2 overflow-hidden pr-1 xl:flex-nowrap"
       >
-        <PayloadDecoder {value} key="payloads">
-          {#snippet children(decodedValue)}
-            <div class={merge('payload', $$props.class)}>
-              <code>
-                <pre class="truncate">{decodedValue.slice(0, 60)}</pre>
-              </code>
-            </div>
-          {/snippet}
-        </PayloadDecoder>
+        <PayloadInline {value} class={merge($$props.class)} />
       </div>
-    {:else if linkType !== 'none'}
+    {:else if typeof value === 'string' && linkType !== 'none'}
       <Copyable
         copyIconTitle={translate('common.copy-icon-title')}
         copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -64,17 +57,3 @@
     {/if}
   </div>
 {/if}
-
-<style lang="postcss">
-  .payload {
-    @apply overflow-hidden border border-subtle bg-code-block px-1 py-0.5 font-mono text-xs;
-  }
-
-  .payload code {
-    @apply text-primary;
-  }
-
-  .payload pre {
-    @apply text-primary;
-  }
-</style>
diff --git a/src/lib/components/event/event-metadata-expanded.svelte b/src/lib/components/event/event-metadata-expanded.svelte
deleted file mode 100644
index a4e8ebac0f..0000000000
--- a/src/lib/components/event/event-metadata-expanded.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import Badge from '$lib/holocene/badge.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import type { Payload } from '$lib/types';
-
-  import MetadataDecoder from './metadata-decoder.svelte';
-
-  let { value }: { value: Payload } = $props();
-</script>
-
-<div class="block w-full select-all px-2 py-1 text-left">
-  <p class="text-sm">Summary</p>
-  <MetadataDecoder {value} fallback={translate('events.decode-failed')}>
-    {#snippet children(decodedValue)}
-      <Badge type="secondary" class="inline-block whitespace-pre-wrap">
-        {decodedValue}
-      </Badge>
-    {/snippet}
-  </MetadataDecoder>
-</div>
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index fa94ff1f3a..79d7bd3044 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -4,6 +4,7 @@
 
   import { page } from '$app/state';
 
+  import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
@@ -43,7 +44,6 @@
   import EventDetailsFull from './event-details-full.svelte';
   import EventDetailsRow from './event-details-row.svelte';
   import EventLink from './event-link.svelte';
-  import MetadataDecoder from './metadata-decoder.svelte';
 
   interface Props {
     event: IterableEvent;
@@ -327,20 +327,12 @@
         <EventDetailsRow {...primaryLocalAttribute} {attributes} />
       {/if}
       {#if currentEvent?.userMetadata?.summary}
-        <MetadataDecoder value={currentEvent.userMetadata.summary}>
-          {#snippet children(decodedValue)}
-            {#if decodedValue}
-              <div
-                class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
-              >
-                <p class="whitespace-nowrap text-right text-xs">Summary</p>
-                <Badge type="secondary" class="block select-none truncate">
-                  {decodedValue}
-                </Badge>
-              </div>
-            {/if}
-          {/snippet}
-        </MetadataDecoder>
+        <div
+          class="flex max-w-xl items-center gap-2 first:pt-0 last:border-b-0 md:w-auto"
+        >
+          <p class="whitespace-nowrap text-right text-xs">Summary</p>
+          <PayloadSummary value={currentEvent.userMetadata.summary} />
+        </div>
       {/if}
       {#if currentEvent?.links?.length}
         <EventLink
diff --git a/src/lib/components/event/metadata-decoder.svelte b/src/lib/components/event/metadata-decoder.svelte
deleted file mode 100644
index 196cd4323d..0000000000
--- a/src/lib/components/event/metadata-decoder.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  import type { Payload } from '$lib/types';
-  import { decodeUserMetadata } from '$lib/utilities/decode-payload';
-
-  let {
-    value,
-    fallback = '',
-    prefix = '',
-    onDecode,
-    children,
-  }: {
-    value?: Payload;
-    fallback?: string;
-    prefix?: string;
-    onDecode?: (decodedValue: string) => void;
-    children?: Snippet<[string]>;
-  } = $props();
-
-  const maxLength = 120;
-
-  let decodedValue = '';
-
-  const setPrefix = (metadata: string) => {
-    if (prefix) {
-      metadata = `${prefix} • ${metadata}`;
-      if (metadata.length < maxLength) return metadata;
-      return metadata.slice(0, maxLength) + '...';
-    }
-    return metadata;
-  };
-
-  const decodePayload = $derived(async (_value: Payload | undefined) => {
-    if (!_value) return fallback;
-    if (decodedValue) return decodedValue;
-
-    const metadata = await decodeUserMetadata(_value);
-
-    if (typeof metadata === 'string') {
-      decodedValue = setPrefix(metadata);
-      onDecode?.(decodedValue);
-      return decodedValue;
-    }
-
-    decodedValue = fallback;
-    return fallback;
-  });
-</script>
-
-{#await decodePayload(value) then metadata}
-  {@render children?.(metadata)}
-{:catch}
-  {@render children?.(fallback)}
-{/await}
diff --git a/src/lib/components/event/payload-decoder.svelte b/src/lib/components/event/payload-decoder.svelte
deleted file mode 100644
index c0560f053b..0000000000
--- a/src/lib/components/event/payload-decoder.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-  import { onMount, type Snippet } from 'svelte';
-
-  import type { Memo } from '$lib/types';
-  import type { EventAttribute, WorkflowEvent } from '$lib/types/events';
-  import {
-    decodeEventAttributes,
-    parsePayloadAttributes,
-    type PotentiallyDecodable,
-  } from '$lib/utilities/decode-payload';
-  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
-
-  interface Props {
-    value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo;
-    key?: string;
-    onDecode?: (decodedValue: string) => void;
-    children: Snippet<[decodedValue: string]>;
-  }
-
-  let { children, value, key = '', onDecode }: Props = $props();
-
-  let keyedValue = key && value?.[key] ? value[key] : value;
-  let decodedValue = $state(stringifyWithBigInt(keyedValue));
-
-  onMount(() => {
-    decodePayloads(value);
-  });
-
-  const decodePayloads = async (
-    _value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo,
-  ) => {
-    try {
-      const convertedAttributes = await decodeEventAttributes(_value);
-      const decodedAttributes = parsePayloadAttributes(
-        convertedAttributes,
-      ) as object;
-      const keyExists = key && decodedAttributes?.[key];
-      let finalValue = keyExists ? decodedAttributes[key] : decodedAttributes;
-      if (Array.isArray(finalValue) && finalValue.length === 1) {
-        finalValue = finalValue[0];
-      }
-      decodedValue = stringifyWithBigInt(finalValue);
-      if (onDecode) {
-        onDecode(decodedValue);
-      }
-    } catch {
-      console.error('Could not decode payloads');
-    }
-  };
-</script>
-
-{@render children(decodedValue)}
diff --git a/src/lib/components/lines-and-dots/svg/group-details-text.svelte b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
deleted file mode 100644
index 9ccd66e3eb..0000000000
--- a/src/lib/components/lines-and-dots/svg/group-details-text.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<script lang="ts">
-  import EventDetailsLink from '$lib/components/event/event-details-link.svelte';
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
-  import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
-  import {
-    displayLinkType,
-    getCodeBlockValue,
-  } from '$lib/utilities/get-single-attribute-for-event';
-
-  import { DetailsConfig, staticCodeBlockHeight } from '../constants';
-
-  interface Props {
-    key: string;
-    value: string | Record<string, unknown>;
-    attributes: CombinedAttributes;
-    onDecode?: (decodedValue: string) => void | undefined;
-  }
-
-  let { key, value, attributes, onDecode = undefined }: Props = $props();
-
-  const { fontSizeRatio } = DetailsConfig;
-
-  const codeBlockValue = $derived(getCodeBlockValue(value));
-  const linkType = $derived(displayLinkType(key, attributes));
-</script>
-
-{#if typeof value === 'object'}
-  {#if value?.payloads}
-    <PayloadDecoder {value} key="payloads" {onDecode}>
-      {#snippet children(decodedValue)}
-        {#key decodedValue}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={staticCodeBlockHeight - fontSizeRatio}
-          />
-        {/key}
-      {/snippet}
-    </PayloadDecoder>
-  {:else if key === 'searchAttributes'}
-    <PayloadDecoder
-      key="searchAttributes"
-      value={{ searchAttributes: codeBlockValue }}
-      {onDecode}
-    >
-      {#snippet children(decodedValue)}
-        {#key decodedValue}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={staticCodeBlockHeight - fontSizeRatio}
-          />
-        {/key}
-      {/snippet}
-    </PayloadDecoder>
-  {:else}
-    <PayloadDecoder value={codeBlockValue} {onDecode}>
-      {#snippet children(decodedValue)}
-        {#key decodedValue}
-          <CodeBlock
-            content={decodedValue}
-            maxHeight={staticCodeBlockHeight - fontSizeRatio}
-          />
-        {/key}
-      {/snippet}
-    </PayloadDecoder>
-  {/if}
-{:else if linkType !== 'none'}
-  <EventDetailsLink {value} {attributes} type={linkType} />
-{:else}
-  {value}
-{/if}
diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
index b1355c5ddc..625b3c9ce6 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
@@ -5,7 +5,7 @@
 
   import { page } from '$app/state';
 
-  import MetadataDecoder from '$lib/components/event/metadata-decoder.svelte';
+  import PayloadSummary from '$lib/components/payload/payload-summary.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { setActiveGroup } from '$lib/stores/active-events';
@@ -256,7 +256,7 @@
       />
     {/if}
     {#if showText}
-      <MetadataDecoder
+      <PayloadSummary
         value={group?.userMetadata?.summary}
         prefix={isActivityTaskScheduledEvent(group.initialEvent)
           ? group?.displayName
@@ -291,7 +291,7 @@
             {/if}
           </Text>
         {/snippet}
-      </MetadataDecoder>
+      </PayloadSummary>
     {/if}
     <Dot
       point={[x, y]}
diff --git a/src/lib/components/payload/payload-code-block.svelte b/src/lib/components/payload/payload-code-block.svelte
new file mode 100644
index 0000000000..410a46f7d3
--- /dev/null
+++ b/src/lib/components/payload/payload-code-block.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type {
+    PayloadContainingObject,
+    PotentiallyDecodable,
+  } from '$lib/utilities/decode-payload';
+
+  import PayloadDecoder from './payload-decoder.svelte';
+
+  interface Props {
+    value: PotentiallyDecodable | PayloadContainingObject;
+    maxHeight?: number;
+    testId?: string;
+    language?: 'text' | 'json';
+  }
+
+  let { value, maxHeight, testId, language = 'json' }: Props = $props();
+</script>
+
+<PayloadDecoder {value}>
+  {#snippet children(decodedValue)}
+    <div class="space-y-2">
+      {#each decodedValue as data, index (index)}
+        <CodeBlock
+          content={data}
+          {maxHeight}
+          copyIconTitle={translate('common.copy-icon-title')}
+          copySuccessIconTitle={translate('common.copy-success-icon-title')}
+          {testId}
+          {language}
+        />
+      {/each}
+    </div>
+  {/snippet}
+</PayloadDecoder>
diff --git a/src/lib/components/payload/payload-decoder.svelte b/src/lib/components/payload/payload-decoder.svelte
new file mode 100644
index 0000000000..fcb3051ef5
--- /dev/null
+++ b/src/lib/components/payload/payload-decoder.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+
+  import {
+    decodeEventAttributes,
+    decodePayloadAndParseDataToJSON,
+    decodePayloadsAndParseDataToJSON,
+    isRawPayload,
+    isRawPayloads,
+    type PayloadContainingObject,
+    type PotentiallyDecodable,
+  } from '$lib/utilities/decode-payload';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
+
+  const decodePayloadValue = async (
+    value: PotentiallyDecodable | PayloadContainingObject,
+  ): Promise<string[]> => {
+    if (isRawPayload(value)) {
+      const decodedPayloadData = await decodePayloadAndParseDataToJSON(value);
+      const stringified = stringifyWithBigInt(decodedPayloadData);
+      onDecode?.([stringified]);
+      return [stringified];
+    } else if (isRawPayloads(value)) {
+      const parsedPayloadsData = await decodePayloadsAndParseDataToJSON(value);
+      const stringified = parsedPayloadsData.map((data) =>
+        stringifyWithBigInt(data),
+      );
+      onDecode?.(stringified);
+      return stringified;
+    } else {
+      const decoded = await decodeEventAttributes(value);
+      const stringified = stringifyWithBigInt(decoded);
+      onDecode?.([stringified]);
+      return [stringified];
+    }
+  };
+
+  interface Props {
+    value: PotentiallyDecodable | PayloadContainingObject;
+    onDecode?: (decodedPayloads: string[]) => void;
+    children: Snippet<[decodedPayloads: string[]]>;
+    loading?: Snippet;
+  }
+
+  let { value, onDecode, children, loading }: Props = $props();
+</script>
+
+{#await decodePayloadValue(value)}
+  {@render loading?.()}
+{:then decodedValue}
+  {@render children(decodedValue)}
+{/await}
diff --git a/src/lib/components/payload/payload-inline.svelte b/src/lib/components/payload/payload-inline.svelte
new file mode 100644
index 0000000000..19a220f6b0
--- /dev/null
+++ b/src/lib/components/payload/payload-inline.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { PotentiallyDecodable } from '$lib/utilities/decode-payload';
+
+  import PayloadDecoder from './payload-decoder.svelte';
+
+  interface Props {
+    value: PotentiallyDecodable;
+    truncateAt?: number;
+    class?: string;
+  }
+
+  let { value, truncateAt = 60, class: className = '' }: Props = $props();
+</script>
+
+<PayloadDecoder {value}>
+  {#snippet children(decodedValue)}
+    <div
+      class="overflow-hidden border border-subtle bg-code-block px-1 py-0.5 font-mono text-xs text-primary {className}"
+    >
+      <code>
+        <pre class="truncate">{(decodedValue[0] ?? '').slice(
+            0,
+            truncateAt,
+          )}</pre>
+      </code>
+    </div>
+  {/snippet}
+</PayloadDecoder>
diff --git a/src/lib/components/payload/payload-summary.svelte b/src/lib/components/payload/payload-summary.svelte
new file mode 100644
index 0000000000..ed3255ef5f
--- /dev/null
+++ b/src/lib/components/payload/payload-summary.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+
+  import Badge from '$lib/holocene/badge.svelte';
+  import type { Payload } from '$lib/types';
+  import { decodePayloadAndParseDataToJSON } from '$lib/utilities/decode-payload';
+
+  interface Props {
+    value: Payload | null | undefined;
+    fallback?: string;
+    prefix?: string;
+    maxSummaryLength?: number;
+    class?: string;
+    children?: Snippet<[decodedValue: string]>;
+  }
+
+  let {
+    value,
+    fallback = '',
+    prefix = '',
+    maxSummaryLength = 120,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  let decodedValue = $state(fallback);
+
+  const decodePromise = $derived(
+    (() => {
+      const _value = value;
+      const _fallback = fallback;
+      const _prefix = prefix;
+      const _max = maxSummaryLength;
+
+      if (!_value) return Promise.resolve(_fallback);
+
+      return decodePayloadAndParseDataToJSON(_value).then((result) => {
+        if (typeof result !== 'string' || !result) return _fallback;
+        if (!_prefix) return result;
+        const prefixed = `${_prefix} • ${result}`;
+        return prefixed.length <= _max
+          ? prefixed
+          : prefixed.slice(0, _max) + '...';
+      });
+    })(),
+  );
+
+  $effect(() => {
+    let cancelled = false;
+    decodePromise
+      .then((result) => {
+        if (!cancelled) decodedValue = result;
+      })
+      .catch(() => {
+        if (!cancelled) decodedValue = fallback;
+      });
+    return () => {
+      cancelled = true;
+    };
+  });
+</script>
+
+{#if children}
+  {@render children(decodedValue)}
+{:else if className}
+  <span class={className}>{decodedValue || fallback}</span>
+{:else}
+  <Badge type="secondary">{decodedValue || fallback}</Badge>
+{/if}
diff --git a/src/lib/components/schedule/schedule-form/schedule-input-payload.svelte b/src/lib/components/schedule/schedule-form/schedule-input-payload.svelte
index 0ba8dab179..cbda4c872c 100644
--- a/src/lib/components/schedule/schedule-form/schedule-input-payload.svelte
+++ b/src/lib/components/schedule/schedule-form/schedule-input-payload.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from 'svelte/store';
 
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
+  import PayloadDecoder from '$lib/components/payload/payload-decoder.svelte';
   import PayloadInputWithEncoding from '$lib/components/payload-input-with-encoding.svelte';
   import Button from '$lib/holocene/button.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -10,14 +10,14 @@
     type PayloadInputEncoding,
   } from '$lib/models/payload-encoding';
   import type { Payloads } from '$lib/types';
-  import { atob } from '$lib/utilities/atob';
+  import { base64ParsePayloadMetadata } from '$lib/utilities/decode-payload';
 
   interface Props {
     input: string;
     editInput: boolean;
     encoding: Writable<PayloadInputEncoding>;
     messageType: string;
-    payloads: Payloads;
+    payloads: Payloads | undefined;
     showEditActions?: boolean;
   }
 
@@ -35,15 +35,19 @@
   let initialMessageType = $state('');
   let loading = $state(true);
 
-  const setInitialInput = (decodedValue: string): void => {
-    initialInput = decodedValue;
+  const setInitialInput = (decodedValue: string[]): void => {
+    initialInput = decodedValue[0];
     input = initialInput;
-    const currentEncoding = atob(
-      String(payloads?.payloads[0]?.metadata?.encoding ?? 'json/plain'),
-    );
-    const currentMessageType = payloads?.payloads[0]?.metadata?.messageType
-      ? atob(String(payloads?.payloads[0]?.metadata?.messageType))
-      : '';
+    let currentEncoding: PayloadInputEncoding = 'json/plain';
+    let currentMessageType = '';
+
+    if (payloads) {
+      const parsedMetadata = base64ParsePayloadMetadata(payloads);
+
+      currentEncoding =
+        (parsedMetadata[0]?.encoding as PayloadInputEncoding) ?? 'json/plain';
+      currentMessageType = parsedMetadata[0]?.messageType ?? '';
+    }
 
     if (isPayloadInputEncodingType(currentEncoding)) {
       $encoding = currentEncoding;
@@ -69,20 +73,22 @@
 </script>
 
 <div class="flex flex-col gap-1">
-  <PayloadDecoder value={payloads} key="payloads" onDecode={setInitialInput}>
-    <PayloadInputWithEncoding
-      bind:input
-      {encoding}
-      bind:messageType
-      bind:loading
-      editing={editInput}
-      id="schedule-payload-input"
-    >
-      <div slot="action" class:hidden={!showEditActions}>
-        <Button variant="secondary" on:click={handleEdit}>
-          {editInput ? translate('common.cancel') : translate('common.edit')}
-        </Button>
-      </div>
-    </PayloadInputWithEncoding>
+  <PayloadDecoder value={payloads} onDecode={setInitialInput}>
+    {#snippet children(_decodedValue)}
+      <PayloadInputWithEncoding
+        bind:input
+        {encoding}
+        bind:messageType
+        bind:loading
+        editing={editInput}
+        id="schedule-payload-input"
+      >
+        <div slot="action" class:hidden={!showEditActions}>
+          <Button variant="secondary" on:click={handleEdit}>
+            {editInput ? translate('common.cancel') : translate('common.edit')}
+          </Button>
+        </div>
+      </PayloadInputWithEncoding>
+    {/snippet}
   </PayloadDecoder>
 </div>
diff --git a/src/lib/components/schedule/schedule-input.svelte b/src/lib/components/schedule/schedule-input.svelte
index 2639e505c4..6ce8bd6038 100644
--- a/src/lib/components/schedule/schedule-input.svelte
+++ b/src/lib/components/schedule/schedule-input.svelte
@@ -3,7 +3,6 @@
   import InputAndResultsPayload from '$lib/components/workflow/input-and-results-payload.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { Payloads } from '$lib/types';
-  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
   let { input }: { input: Payloads } = $props();
 </script>
@@ -11,7 +10,7 @@
 <Panel>
   <InputAndResultsPayload
     title={translate('schedules.schedule-input')}
-    content={stringifyWithBigInt(input)}
+    content={input}
   >
     {#snippet titleSnippet()}
       <h2>
diff --git a/src/lib/components/standalone-activities/activity-input-and-outcome.svelte b/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
index 8c6ffc8ed6..748729bba9 100644
--- a/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
+++ b/src/lib/components/standalone-activities/activity-input-and-outcome.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import type { Payloads } from '$lib/types';
   import type { ActivityExecutionOutcome } from '$lib/types/activity-execution';
   import { has } from '$lib/utilities/has';
 
-  import PayloadDecoder from '../event/payload-decoder.svelte';
-
   interface Props {
     input?: Payloads;
     outcome?: ActivityExecutionOutcome;
@@ -17,22 +16,14 @@
 <div class="grid w-full grid-cols-2 gap-4 max-md:grid-cols-1">
   <div class="flex flex-col gap-2">
     <h5>Input</h5>
-    <PayloadDecoder value={input} key="payloads">
-      {#snippet children(decodedValue)}
-        <CodeBlock content={decodedValue} />
-      {/snippet}
-    </PayloadDecoder>
+    <PayloadCodeBlock value={input} />
   </div>
   <div class="flex flex-col gap-2">
     <h5>Result</h5>
     {#if has(outcome, 'failure')}
       <CodeBlock content={JSON.stringify(outcome.failure, null, 2)} />
     {:else if has(outcome, 'result')}
-      <PayloadDecoder value={outcome.result} key="payloads">
-        {#snippet children(decodedValue)}
-          <CodeBlock content={decodedValue} />
-        {/snippet}
-      </PayloadDecoder>
+      <PayloadCodeBlock value={outcome.result} />
     {:else}
       <CodeBlock content={JSON.stringify({}, null, 2)} />
     {/if}
diff --git a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
index ef4a92aa95..645a435ca7 100644
--- a/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
+++ b/src/lib/components/workflow/client-actions/update-confirmation-modal.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { writable, type Writable } from 'svelte/store';
 
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
 
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import PayloadInput from '$lib/components/payload-input.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
@@ -17,28 +17,37 @@
   import { updateWorkflow } from '$lib/services/workflow-service';
   import { toaster } from '$lib/stores/toaster';
   import { workflowRun } from '$lib/stores/workflow-run';
+  import type { UpdateWorkflowResponse } from '$lib/types';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { isNetworkError } from '$lib/utilities/is-network-error';
 
-  $: ({ run: runId } = $page.params);
-  $: ({ metadata } = $workflowRun);
-  $: updateDefinitions = metadata?.definition?.updateDefinitions;
+  interface Props {
+    open: boolean;
+    workflow: WorkflowExecution;
+    namespace: string;
+  }
 
-  export let open: boolean;
-  export let workflow: WorkflowExecution;
-  export let namespace: string;
+  let { open = $bindable(), workflow, namespace }: Props = $props();
+
+  const runId = $derived(page.params.run);
+  const metadata = $derived($workflowRun.metadata);
+  const updateDefinitions = $derived(metadata?.definition?.updateDefinitions);
 
   const defaultEncoding: PayloadInputEncoding = 'json/plain';
 
-  let error = '';
-  let loading = false;
-  let failure;
-  let success;
+  let error = $state('');
+  let loading = $state(false);
+  let failure = $state<
+    UpdateWorkflowResponse['outcome']['failure'] | undefined
+  >(undefined);
+  let success = $state<
+    UpdateWorkflowResponse['outcome']['success'] | boolean | undefined
+  >(undefined);
 
-  let name = '';
-  let updateId = crypto.randomUUID();
-  let input = '';
-  let customUpdate = false;
+  let name = $state('');
+  let updateId = $state(crypto.randomUUID());
+  let input = $state('');
+  let customUpdate = $state(false);
   let encoding: Writable<PayloadInputEncoding> = writable(defaultEncoding);
 
   const hideModal = () => {
@@ -118,7 +127,7 @@
         placeholder="Select an Update"
         required
       >
-        {#each updateDefinitions as { name: value, description = '' }}
+        {#each updateDefinitions as { name: value, description = '' } (value)}
           <Option {value} {description}>{value}</Option>
         {/each}
         <Option onclick={handleCustom} value="custom">Custom</Option>
@@ -167,14 +176,10 @@
         {/if}
       </Alert>
     {/if}
-    {#if success}
+    {#if success && typeof success === 'object'}
       <Alert intent="success" title="Success">
         {#if success?.payloads?.[0] && success.payloads[0].data}
-          <PayloadDecoder value={success.payloads[0]}>
-            {#snippet children(decodedValue)}
-              <CodeBlock class="mt-4" content={decodedValue} language="text" />
-            {/snippet}
-          </PayloadDecoder>
+          <PayloadCodeBlock value={success} />
         {/if}
       </Alert>
     {/if}
diff --git a/src/lib/components/workflow/input-and-results-payload.svelte b/src/lib/components/workflow/input-and-results-payload.svelte
index 5e6c67472f..9e341f24c4 100644
--- a/src/lib/components/workflow/input-and-results-payload.svelte
+++ b/src/lib/components/workflow/input-and-results-payload.svelte
@@ -1,61 +1,25 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
-  import { translate } from '$lib/i18n/translate';
-  import type { Payload } from '$lib/types';
-  import type { PotentiallyDecodable } from '$lib/utilities/decode-payload';
-  import {
-    parseWithBigInt,
-    stringifyWithBigInt,
-  } from '$lib/utilities/parse-with-big-int';
-
-  import PayloadDecoder from '../event/payload-decoder.svelte';
+  import type { Payloads } from '$lib/types';
+  import type { CompletionEventAttributes } from '$lib/utilities/get-started-completed-and-task-failed-events';
 
   type Props = {
     title: string;
     titleSnippet?: Snippet;
-    content?: string;
+    content: Payloads | CompletionEventAttributes;
     isPending?: boolean;
   };
   let {
     title,
     titleSnippet = defaultTitleSnippet,
-    content = '',
+    content,
     isPending = false,
   }: Props = $props();
 
   const MAX_HEIGHT = 300;
-
-  const parseContent = (c: string): PotentiallyDecodable | undefined => {
-    try {
-      return parseWithBigInt(c);
-    } catch {
-      return undefined;
-    }
-  };
-
-  const parsePayloads = (c: string): unknown[] => {
-    try {
-      const data = parseWithBigInt(c);
-      return Array.isArray(data) ? data : [data];
-    } catch {
-      return [];
-    }
-  };
-
-  const getPayloads = (value: PotentiallyDecodable | undefined): Payload[] => {
-    try {
-      const payloads = value?.payloads;
-      return Array.isArray(payloads) ? payloads : [];
-    } catch {
-      return [];
-    }
-  };
-
-  const parsedContent = $derived(parseContent(content));
-  const payloads = $derived(getPayloads(parsedContent));
-  const payloadsSize = $derived(payloads.length);
 </script>
 
 {#snippet defaultTitleSnippet()}
@@ -67,42 +31,7 @@
 <div class="flex w-full grow flex-col gap-2">
   {@render titleSnippet()}
   {#if content}
-    {#if payloadsSize > 0}
-      <PayloadDecoder value={parsedContent} key="payloads">
-        {#snippet children(decodedValue)}
-          {#if payloadsSize > 1}
-            {#each parsePayloads(decodedValue) as decodedContent}
-              <CodeBlock
-                content={stringifyWithBigInt(decodedContent)}
-                copyIconTitle={translate('common.copy-icon-title')}
-                copySuccessIconTitle={translate(
-                  'common.copy-success-icon-title',
-                )}
-                maxHeight={MAX_HEIGHT}
-              />
-            {/each}
-          {:else}
-            <CodeBlock
-              content={decodedValue}
-              copyIconTitle={translate('common.copy-icon-title')}
-              copySuccessIconTitle={translate('common.copy-success-icon-title')}
-              maxHeight={MAX_HEIGHT}
-            />
-          {/if}
-        {/snippet}
-      </PayloadDecoder>
-    {:else}
-      <PayloadDecoder value={parseWithBigInt(content)}>
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-            maxHeight={MAX_HEIGHT}
-          />
-        {/snippet}
-      </PayloadDecoder>
-    {/if}
+    <PayloadCodeBlock maxHeight={MAX_HEIGHT} value={content} />
   {:else}
     <CodeBlock
       content={isPending ? 'Results will appear upon completion.' : 'null'}
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..86aae0e415 100644
--- a/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
+++ b/src/lib/components/workflow/pending-activity/pending-activity-card.svelte
@@ -4,7 +4,7 @@
   import { page } from '$app/state';
 
   import ActivityCommands from '$lib/components/activity/activity-commands.svelte';
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import { timestamp } from '$lib/components/timestamp.svelte';
   import WorkflowStatus from '$lib/components/workflow-status.svelte';
   import Accordion from '$lib/holocene/accordion/accordion.svelte';
@@ -172,16 +172,7 @@
       {translate('workflows.heartbeat-details')}
     </p>
     {#key activity.attempt}
-      <PayloadDecoder value={activity.heartbeatDetails} 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>
+      <PayloadCodeBlock value={activity.heartbeatDetails} maxHeight={384} />
     {/key}
   </div>
 {/snippet}
@@ -194,18 +185,10 @@
           {translate('workflows.last-failure')}
         </p>
         {#key activity.attempt}
-          <PayloadDecoder value={omit(activity.lastFailure, 'stackTrace')}>
-            {#snippet children(decodedValue)}
-              <CodeBlock
-                content={decodedValue}
-                maxHeight={384}
-                copyIconTitle={translate('common.copy-icon-title')}
-                copySuccessIconTitle={translate(
-                  'common.copy-success-icon-title',
-                )}
-              />
-            {/snippet}
-          </PayloadDecoder>
+          <PayloadCodeBlock
+            value={omit(activity.lastFailure, 'stackTrace')}
+            maxHeight={384}
+          />
         {/key}
       {/if}
     </div>
diff --git a/src/lib/components/workflow/workflow-json-navigator.svelte b/src/lib/components/workflow/workflow-json-navigator.svelte
index dada5ddf8e..89812b016e 100644
--- a/src/lib/components/workflow/workflow-json-navigator.svelte
+++ b/src/lib/components/workflow/workflow-json-navigator.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import RangeInput from '$lib/holocene/input/range-input.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -9,8 +10,6 @@
   import type { WorkflowEvents } from '$lib/types/events';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
-  import PayloadDecoder from '../event/payload-decoder.svelte';
-
   interface Props {
     events?: WorkflowEvents;
     decode?: Snippet;
@@ -93,18 +92,7 @@
 </div>
 <div class="min-h-screen py-4">
   {#if $decodeEventHistory && events.length > 0}
-    {#key [index, $decodeEventHistory]}
-      <PayloadDecoder value={rawEvent}>
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            testId="event-history-json"
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
-    {/key}
+    <PayloadCodeBlock value={rawEvent} testId="event-history-json" />
   {:else}
     {#key index}
       <CodeBlock
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index c30175bdf2..19037e4bc3 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -33,7 +33,7 @@
   import type { NetworkError } from '$lib/types/global';
   import type { WorkflowExecution } from '$lib/types/workflows';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
-  import { decodeUserMetadata } from '$lib/utilities/decode-payload';
+  import { decodePayloadAndParseDataToJSON } from '$lib/utilities/decode-payload';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
   interface Props {
@@ -63,13 +63,17 @@
     const userMetadata = { summary: '', details: '' };
     try {
       if (workflow?.summary) {
-        const decodedSummary = await decodeUserMetadata(workflow.summary);
+        const decodedSummary = await decodePayloadAndParseDataToJSON(
+          workflow.summary,
+        );
         if (typeof decodedSummary === 'string') {
           userMetadata.summary = decodedSummary;
         }
       }
       if (workflow?.details) {
-        const decodedDetails = await decodeUserMetadata(workflow.details);
+        const decodedDetails = await decodePayloadAndParseDataToJSON(
+          workflow.details,
+        );
         if (typeof decodedDetails === 'string') {
           userMetadata.details = decodedDetails;
         }
diff --git a/src/lib/pages/standalone-activity-details.svelte b/src/lib/pages/standalone-activity-details.svelte
index 089302c39d..08d79307e4 100644
--- a/src/lib/pages/standalone-activity-details.svelte
+++ b/src/lib/pages/standalone-activity-details.svelte
@@ -7,7 +7,7 @@
     DetailListTimestampValue,
   } from '$lib/components/detail-list';
   import DetailListValue from '$lib/components/detail-list/detail-list-value.svelte';
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import ActivityExecutionInputAndOutcome from '$lib/components/standalone-activities/activity-input-and-outcome.svelte';
   import Badge from '$lib/holocene/badge.svelte';
   import Card from '$lib/holocene/card.svelte';
@@ -211,21 +211,15 @@
         {#if $activityExecution.info.heartbeatDetails}
           <div class="space-y-2">
             <p class="font-medium text-secondary">Heartbeat Details</p>
-            <PayloadDecoder value={$activityExecution.info.heartbeatDetails}>
-              {#snippet children(content)}
-                <CodeBlock {content} />
-              {/snippet}
-            </PayloadDecoder>
+            <PayloadCodeBlock
+              value={$activityExecution.info.heartbeatDetails}
+            />
           </div>
         {/if}
         {#if $activityExecution.info.header}
           <div class="space-y-2">
             <p class="font-medium text-secondary">Header</p>
-            <PayloadDecoder value={$activityExecution.info.header.fields}>
-              {#snippet children(content)}
-                <CodeBlock {content} />
-              {/snippet}
-            </PayloadDecoder>
+            <PayloadCodeBlock value={$activityExecution.info.header.fields} />
           </div>
         {/if}
         {#if $activityExecution.info.priority}
diff --git a/src/lib/pages/standalone-activity-metadata.svelte b/src/lib/pages/standalone-activity-metadata.svelte
index 905590f16a..775dabc88c 100644
--- a/src/lib/pages/standalone-activity-metadata.svelte
+++ b/src/lib/pages/standalone-activity-metadata.svelte
@@ -4,7 +4,7 @@
   import UserMetadata from '$lib/components/user-metadata.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import type { UserMetadata as IUserMetadata } from '$lib/types';
-  import { decodeUserMetadata } from '$lib/utilities/decode-payload';
+  import { decodePayloadAndParseDataToJSON } from '$lib/utilities/decode-payload';
   import { activityExecution } from '$lib/utilities/standalone-activity-poller.svelte';
 
   const decodeMetadata = async (userMetadata: IUserMetadata) => {
@@ -16,14 +16,18 @@
     if (!userMetadata) return metadata;
 
     if (userMetadata.summary) {
-      const summary = await decodeUserMetadata(userMetadata.summary);
+      const summary = await decodePayloadAndParseDataToJSON(
+        userMetadata.summary,
+      );
       if (typeof summary === 'string') {
         metadata.summary = summary;
       }
     }
 
     if (userMetadata.details) {
-      const details = await decodeUserMetadata(userMetadata.details);
+      const details = await decodePayloadAndParseDataToJSON(
+        userMetadata.details,
+      );
 
       if (typeof details === 'string') {
         metadata.details = details;
diff --git a/src/lib/pages/standalone-activity-search-attributes.svelte b/src/lib/pages/standalone-activity-search-attributes.svelte
index 60cf3a05a0..3e15c5bce5 100644
--- a/src/lib/pages/standalone-activity-search-attributes.svelte
+++ b/src/lib/pages/standalone-activity-search-attributes.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import { translate } from '$lib/i18n/translate';
   import { activityExecution } from '$lib/utilities/standalone-activity-poller.svelte';
 
@@ -9,18 +8,7 @@
 
 <div class="flex flex-col gap-2">
   {#if searchAttributes}
-    <PayloadDecoder
-      value={{ searchAttributes: searchAttributes }}
-      key="searchAttributes"
-    >
-      {#snippet children(decodedValue)}
-        <CodeBlock
-          content={decodedValue}
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-      {/snippet}
-    </PayloadDecoder>
+    <PayloadCodeBlock value={searchAttributes.indexedFields} />
   {:else}
     <p>{translate('events.empty-search-attributes')}</p>
   {/if}
diff --git a/src/lib/pages/workflow-memo.svelte b/src/lib/pages/workflow-memo.svelte
index 056c26f684..25735cd9ec 100644
--- a/src/lib/pages/workflow-memo.svelte
+++ b/src/lib/pages/workflow-memo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import { translate } from '$lib/i18n/translate';
   import { workflowRun } from '$lib/stores/workflow-run';
 
@@ -10,15 +9,7 @@
 <div class="mt-4 flex flex-col gap-2">
   <h3>{translate('common.memo')}</h3>
   {#if workflow?.memo}
-    <PayloadDecoder value={{ memo: workflow.memo }} key="memo">
-      {#snippet children(decodedValue)}
-        <CodeBlock
-          content={decodedValue}
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-      {/snippet}
-    </PayloadDecoder>
+    <PayloadCodeBlock value={workflow.memo} />
   {:else}
     <p>{translate('events.empty-memo-attributes')}</p>
   {/if}
diff --git a/src/lib/pages/workflow-metadata.svelte b/src/lib/pages/workflow-metadata.svelte
index a18a623923..8032d5906d 100644
--- a/src/lib/pages/workflow-metadata.svelte
+++ b/src/lib/pages/workflow-metadata.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import { translate } from '$lib/i18n/translate';
   import { workflowRun } from '$lib/stores/workflow-run';
 
@@ -13,33 +12,14 @@
       <h3>
         {translate('events.attribute-group.search-attributes')}
       </h3>
-      <PayloadDecoder
-        value={{ searchAttributes: workflow.searchAttributes }}
-        key="searchAttributes"
-      >
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
+      <PayloadCodeBlock value={workflow.searchAttributes.indexedFields} />
     </div>
   {/if}
 
   {#if workflow?.memo}
     <div class="mt-4 flex flex-col gap-2">
       <h3>{translate('common.memo')}</h3>
-      <PayloadDecoder value={{ memo: workflow.memo }} key="memo">
-        {#snippet children(decodedValue)}
-          <CodeBlock
-            content={decodedValue}
-            copyIconTitle={translate('common.copy-icon-title')}
-            copySuccessIconTitle={translate('common.copy-success-icon-title')}
-          />
-        {/snippet}
-      </PayloadDecoder>
+      <PayloadCodeBlock value={workflow.memo} />
     </div>
   {/if}
 </div>
diff --git a/src/lib/pages/workflow-search-attributes.svelte b/src/lib/pages/workflow-search-attributes.svelte
index b5e6112f48..47dd50c6ad 100644
--- a/src/lib/pages/workflow-search-attributes.svelte
+++ b/src/lib/pages/workflow-search-attributes.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import PayloadDecoder from '$lib/components/event/payload-decoder.svelte';
-  import CodeBlock from '$lib/holocene/code-block.svelte';
+  import PayloadCodeBlock from '$lib/components/payload/payload-code-block.svelte';
   import { translate } from '$lib/i18n/translate';
   import { workflowRun } from '$lib/stores/workflow-run';
 
@@ -12,18 +11,7 @@
     {translate('events.attribute-group.search-attributes')}
   </h3>
   {#if workflow?.searchAttributes}
-    <PayloadDecoder
-      value={{ searchAttributes: workflow.searchAttributes }}
-      key="searchAttributes"
-    >
-      {#snippet children(decodedValue)}
-        <CodeBlock
-          content={decodedValue}
-          copyIconTitle={translate('common.copy-icon-title')}
-          copySuccessIconTitle={translate('common.copy-success-icon-title')}
-        />
-      {/snippet}
-    </PayloadDecoder>
+    <PayloadCodeBlock value={workflow.searchAttributes.indexedFields} />
   {:else}
     <p>{translate('events.empty-search-attributes')}</p>
   {/if}
diff --git a/src/lib/services/data-encoder.ts b/src/lib/services/data-encoder.ts
index 96b8fd62c3..279dbf2ebb 100644
--- a/src/lib/services/data-encoder.ts
+++ b/src/lib/services/data-encoder.ts
@@ -5,6 +5,7 @@ import {
   setLastDataEncoderFailure,
   setLastDataEncoderSuccess,
 } from '$lib/stores/data-encoder-config';
+import type { Payloads } from '$lib/types';
 import type { NetworkError } from '$lib/types/global';
 import { getAccessToken, getIdToken } from '$lib/utilities/core-provider';
 import {
@@ -23,7 +24,7 @@ export async function codeServerRequest({
 }: {
   type: 'decode' | 'encode';
   payloads: PotentialPayloads;
-}): Promise<PotentialPayloads> {
+}): Promise<Payloads> {
   const settings = page.data.settings;
   const namespace = page.params.namespace;
   const endpoint = getCodecEndpoint(settings);
@@ -107,7 +108,7 @@ export async function decodePayloadsWithCodec({
   payloads,
 }: {
   payloads: PotentialPayloads;
-}): Promise<PotentialPayloads> {
+}): Promise<Payloads> {
   return codeServerRequest({ type: 'decode', payloads });
 }
 
@@ -115,6 +116,6 @@ export async function encodePayloadsWithCodec({
   payloads,
 }: {
   payloads: PotentialPayloads;
-}): Promise<PotentialPayloads> {
+}): Promise<Payloads> {
   return codeServerRequest({ type: 'encode', payloads });
 }
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index e83203fb84..5ebd61cb9d 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -51,8 +51,7 @@ import type {
   WorkflowIdentifier,
 } from '$lib/types/workflows';
 import {
-  decodeEventAttributesForExport,
-  decodeUserMetadata,
+  decodePayloadAndParseDataToJSON,
   type PotentiallyDecodable,
 } from '$lib/utilities/decode-payload';
 import {
@@ -837,13 +836,16 @@ export const fetchInitialValuesForStartWorkflow = async ({
     const firstEvent = await fetchInitialEvent(params);
 
     const startEvent = firstEvent as WorkflowExecutionStartedEvent;
-    const convertedAttributes = (await decodeEventAttributesForExport(
-      startEvent?.attributes?.input,
-    )) as PotentiallyDecodable;
+    const decodedInput = await decodePayloadAndParseDataToJSON(
+      startEvent.attributes.input?.payloads[0],
+      false,
+    ); // only single payloads are supported starting a workflow;
 
     let summary = '';
     if (workflow.summary) {
-      const decodedSummary = await decodeUserMetadata(workflow.summary);
+      const decodedSummary = await decodePayloadAndParseDataToJSON(
+        workflow.summary,
+      );
       if (typeof decodedSummary === 'string') {
         summary = decodedSummary;
       }
@@ -851,24 +853,36 @@ export const fetchInitialValuesForStartWorkflow = async ({
 
     let details = '';
     if (workflow.details) {
-      const decodedDetails = await decodeUserMetadata(workflow.details);
+      const decodedDetails = await decodePayloadAndParseDataToJSON(
+        workflow.details,
+      );
       if (typeof decodedDetails === 'string') {
         details = decodedDetails;
       }
     }
-    const input = convertedAttributes?.payloads
-      ? stringifyWithBigInt(convertedAttributes.payloads[0]?.data)
-      : '';
-    const encoding =
-      convertedAttributes?.payloads &&
-      isPayloadInputEncodingType(
-        convertedAttributes.payloads[0]?.metadata?.encoding,
-      )
-        ? convertedAttributes.payloads[0]?.metadata?.encoding
-        : 'json/plain';
-    const messageType = convertedAttributes?.payloads
-      ? convertedAttributes.payloads[0]?.metadata?.messageType
-      : '';
+
+    let input = '';
+    let encoding: PayloadInputEncoding = 'json/plain';
+    let messageType = '';
+
+    if (decodedInput) {
+      if (decodedInput.data) {
+        input = stringifyWithBigInt(decodedInput.data);
+      }
+
+      if (decodedInput.metadata) {
+        if (
+          decodedInput.metadata.encoding &&
+          isPayloadInputEncodingType(decodedInput.metadata.encoding)
+        ) {
+          encoding = decodedInput.metadata.encoding;
+        }
+
+        if (decodedInput.metadata.messageType) {
+          messageType = decodedInput.metadata.messageType;
+        }
+      }
+    }
 
     return {
       input,
diff --git a/src/lib/types/workflows.ts b/src/lib/types/workflows.ts
index f3c5cf2906..25bead4e72 100644
--- a/src/lib/types/workflows.ts
+++ b/src/lib/types/workflows.ts
@@ -1,5 +1,6 @@
 import type {
   Memo,
+  Payload,
   Payloads,
   PendingWorkflowTaskInfo,
   Priority,
@@ -11,7 +12,6 @@ import type { Callback } from '$lib/types/nexus';
 
 import type { VersioningInfo } from './deployments';
 import type {
-  Payload,
   PendingActivity,
   PendingActivityInfo,
   PendingChildren,
diff --git a/src/lib/utilities/decode-local-activity.ts b/src/lib/utilities/decode-local-activity.ts
index d797a14a79..c9dfea089a 100644
--- a/src/lib/utilities/decode-local-activity.ts
+++ b/src/lib/utilities/decode-local-activity.ts
@@ -1,5 +1,6 @@
 import type { EventGroup } from '$lib/models/event-groups/event-groups';
-import type { IterableEvent, Payload, WorkflowEvent } from '$lib/types/events';
+import type { Payload } from '$lib/types';
+import type { IterableEvent, WorkflowEvent } from '$lib/types/events';
 
 import {
   decodeEventAttributes,
@@ -37,10 +38,10 @@ export const decodeLocalActivity = async (
   try {
     const convertedAttributes = await decodeEventAttributes(event.attributes);
 
-    const payloads = (event.markerRecordedEventAttributes?.details?.data
-      ?.payloads ||
+    const payloads =
+      event.markerRecordedEventAttributes?.details?.data?.payloads ||
       event.markerRecordedEventAttributes?.details?.type?.payloads ||
-      []) as unknown as Payload[];
+      [];
 
     if (!payloads?.length) return undefined;
 
diff --git a/src/lib/utilities/decode-payload.ts b/src/lib/utilities/decode-payload.ts
index 716ff80bd1..d623c596ff 100644
--- a/src/lib/utilities/decode-payload.ts
+++ b/src/lib/utilities/decode-payload.ts
@@ -1,7 +1,7 @@
 import { decodePayloadsWithCodec as callCodecEndpoint } from '$lib/services/data-encoder';
 import type { DownloadEventHistorySetting } from '$lib/stores/events';
-import type { Memo, Payloads, Payload as RawPayload } from '$lib/types';
-import type { EventAttribute, Payload, WorkflowEvent } from '$lib/types/events';
+import type { Memo, Payload, Payloads } from '$lib/types';
+import type { EventAttribute, WorkflowEvent } from '$lib/types/events';
 import type { Optional, Replace } from '$lib/types/global';
 
 import { atob } from './atob';
@@ -10,6 +10,7 @@ import { isObject } from './is';
 import { parseWithBigInt } from './parse-with-big-int';
 
 export type PotentiallyDecodable =
+  | Payload
   | Payloads
   | Record<string | number | symbol, unknown>;
 
@@ -18,6 +19,20 @@ export type DecodeFunctions = {
   decodeAttributes?: typeof parsePayloadAttributes;
 };
 
+export type PayloadContainingObject<T = object> = {
+  [K in keyof T]:
+    | Payload
+    | Payloads
+    | (T[K] extends object ? PayloadContainingObject<T[K]> : T[K]);
+};
+
+export type ParsedMetadata = { [key: string]: string };
+
+export type ParsedPayload = {
+  data: unknown;
+  metadata: ParsedMetadata;
+};
+
 /**
  * Decoding TL;DR
  * Decoding includes either 1 or 2 phases - "parse" and "decode"
@@ -56,6 +71,22 @@ const parseBase64ObjectValues = (
   return parsed;
 };
 
+export function base64ParsePayloadMetadata(payload: Payload): ParsedMetadata;
+export function base64ParsePayloadMetadata(
+  payloads: Payloads,
+): ParsedMetadata[];
+export function base64ParsePayloadMetadata(
+  payloadOrPayloads: Payload | Payloads,
+): ParsedMetadata | ParsedMetadata[] {
+  if (isRawPayload(payloadOrPayloads)) {
+    return parseBase64ObjectValues(payloadOrPayloads.metadata);
+  }
+
+  return payloadOrPayloads.payloads.map((payload) =>
+    parseBase64ObjectValues(payload.metadata),
+  );
+}
+
 /**
  * Phase 1 — synchronous, no network.
  *
@@ -183,9 +214,9 @@ const decodePayloadsWithRemoteCodecAndParseRawPayloadToJSON = async (
  * decoded payloads without further Base64-decoding. Use this when the
  * caller needs the full Payload shape (e.g. for re-serialisation on export).
  */
-export const decodePayloadsWithRemoteCodec = async (
+const decodePayloadsWithRemoteCodec = async (
   payloads: unknown[],
-): Promise<unknown[]> => {
+): Promise<Payload[]> => {
   const awaitData = await callCodecEndpoint({ payloads: { payloads } });
   return awaitData?.payloads ?? [];
 };
@@ -198,31 +229,12 @@ const keyIs = (key: string, ...validKeys: string[]) => {
   return false;
 };
 
-/**
- * Phase 2 — async, requires a configured codec endpoint.
- *
- * Decodes a single user-metadata payload (`summary` or `details` field on a
- * workflow) through the remote codec server. Returns the decoded string value
- * or the original Payload object; returns an empty string on error.
- */
-export const decodeUserMetadata = async (
-  payload: RawPayload | Payload,
-): Promise<string | Payload> => {
-  try {
-    const data = await decodePayloadsWithRemoteCodec([payload]);
-    const result = data[0];
-    return parseRawPayloadToJSON(result) || '';
-  } catch {
-    return '';
-  }
-};
-
 /**
  * Returns `true` when `payload` has exactly the `{ metadata, data }` shape of
  * a raw Temporal Payload object. Used to distinguish a bare Payload from a
  * map of payloads.
  */
-export const isRawPayload = (payload: unknown): boolean => {
+export const isRawPayload = (payload: unknown): payload is Payload => {
   if (!isObject(payload)) return false;
   const keys = Object.keys(payload);
   return (
@@ -230,6 +242,53 @@ export const isRawPayload = (payload: unknown): boolean => {
   );
 };
 
+/**
+ * Returns `true` when `payloads` has exactly the `{ payloads: Payloads[] }` shape of
+ * a raw Temporal Payloads proto.
+ */
+export const isRawPayloads = (payloads: unknown): payloads is Payloads => {
+  if (!isObject(payloads)) return false;
+  return (
+    has(payloads, 'payloads') &&
+    Array.isArray(payloads.payloads) &&
+    payloads.payloads.every(isRawPayload)
+  );
+};
+
+export async function decodePayloadAndParseDataToJSON(
+  payload: Payload,
+): Promise<unknown>;
+export async function decodePayloadAndParseDataToJSON(
+  payload: Payload,
+  returnDataOnly: false,
+): Promise<ParsedPayload>;
+export async function decodePayloadAndParseDataToJSON(
+  payload: Payload | null | undefined,
+  returnDataOnly: boolean = true,
+): Promise<unknown | ParsedPayload> {
+  if (!payload) return null;
+  const decoded = await decodePayloadsWithRemoteCodec(toArray(payload));
+
+  if (!decoded || !decoded[0]) {
+    return null;
+  }
+
+  return parseRawPayloadToJSON(decoded[0], returnDataOnly);
+}
+
+export const decodePayloadsAndParseDataToJSON = async (
+  payloads: Payloads | null | undefined,
+): Promise<unknown[]> => {
+  if (!payloads) return null;
+  const decoded = await decodePayloadsWithRemoteCodec(payloads?.payloads);
+
+  if (!decoded || !decoded[0]) {
+    return [null];
+  }
+
+  return decoded.map((payload) => parseRawPayloadToJSON(payload));
+};
+
 /**
  * Phase 2 internal implementation shared by {@link decodeEventAttributes} and
  * {@link decodeEventAttributesForExport}.
@@ -262,9 +321,8 @@ const decodeEventAttributesInternal = async (
   if (anyAttributes) {
     // Now that we can have single Payload that is not an array (Nexus)
     if (isRawPayload(clone)) {
-      const data = toArray(clone as Payload);
-      const decoded = await decode(data, returnDataOnly);
-      return decoded?.[0] || clone;
+      const decoded = await decode(toArray(clone), returnDataOnly);
+      return decoded?.[0] ?? clone;
     }
 
     for (const key of Object.keys(clone)) {
@@ -305,10 +363,9 @@ export const decodeEventAttributes = (
     | WorkflowEvent
     | Memo
     | null,
-  decodeSetting: DownloadEventHistorySetting = 'readable',
 ): Promise<
   PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo | null
-> => decodeEventAttributesInternal(anyAttributes, decodeSetting, true);
+> => decodeEventAttributesInternal(anyAttributes, 'readable', true);
 
 /**
  * Phase 2 only — async, requires a configured codec endpoint.
diff --git a/src/lib/utilities/get-single-attribute-for-event.ts b/src/lib/utilities/get-single-attribute-for-event.ts
index 1fc59c2062..4f5bbbcc6e 100644
--- a/src/lib/utilities/get-single-attribute-for-event.ts
+++ b/src/lib/utilities/get-single-attribute-for-event.ts
@@ -1,14 +1,17 @@
 import { isEvent } from '$lib/models/event-history';
-import type { Payloads } from '$lib/types';
+import type { Payload, Payloads } from '$lib/types';
 import type {
   PendingActivity,
   PendingNexusOperation,
   WorkflowEvent,
 } from '$lib/types/events';
-import type { Payload } from '$lib/types/events';
 import { capitalize } from '$lib/utilities/format-camel-case';
 
-import { isRawPayload, parseRawPayloadToJSON } from './decode-payload';
+import {
+  isRawPayload,
+  isRawPayloads,
+  parseRawPayloadToJSON,
+} from './decode-payload';
 import type { CombinedAttributes } from './format-event-attributes';
 import { has } from './has';
 import { isObject } from './is';
@@ -23,7 +26,7 @@ import {
 
 export type SummaryAttribute = {
   key: string;
-  value: string | Record<string, unknown> | Payloads;
+  value: string | Payload | Payloads | Record<string, unknown>;
 };
 
 const emptyAttribute: SummaryAttribute = { key: '', value: '' };
diff --git a/src/lib/utilities/get-started-completed-and-task-failed-events.test.ts b/src/lib/utilities/get-started-completed-and-task-failed-events.test.ts
index d67e1b0484..1c78706f04 100644
--- a/src/lib/utilities/get-started-completed-and-task-failed-events.test.ts
+++ b/src/lib/utilities/get-started-completed-and-task-failed-events.test.ts
@@ -115,7 +115,7 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     expect(
       getWorkflowStartedCompletedAndTaskFailedEvents([workflowStartedEvent])
         .input,
-    ).toBe('{"payloads":null}');
+    ).toEqual({ payloads: null });
   });
 
   it('should get the correct input for a completed event history', () => {
@@ -123,7 +123,14 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
       completedEventHistory,
     );
     expect(input).toMatchInlineSnapshot(
-      '"{"payloads":["1656707328774263000","canary"]}"',
+      `
+      {
+        "payloads": [
+          "1656707328774263000",
+          "canary",
+        ],
+      }
+    `,
     );
   });
 
@@ -131,14 +138,21 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { results } = getWorkflowStartedCompletedAndTaskFailedEvents(
       completedEventHistory,
     );
-    expect(results).toMatchInlineSnapshot('"null"');
+    expect(results).toMatchInlineSnapshot('null');
   });
 
   it('should get the correct input for a cancelled event history', () => {
     const { input } =
       getWorkflowStartedCompletedAndTaskFailedEvents(canceledEventHistory);
     expect(input).toMatchInlineSnapshot(
-      '"{"payloads":[1656706850149404400,480000000000]}"',
+      `
+      {
+        "payloads": [
+          1656706850149404400,
+          480000000000,
+        ],
+      }
+    `,
     );
   });
 
@@ -146,21 +160,51 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { results } =
       getWorkflowStartedCompletedAndTaskFailedEvents(canceledEventHistory);
     expect(results).toMatchInlineSnapshot(
-      '"{"type":"workflowExecutionCanceledEventAttributes","workflowTaskCompletedEventId":"11","details":null}"',
+      `
+      {
+        "details": null,
+        "type": "workflowExecutionCanceledEventAttributes",
+        "workflowTaskCompletedEventId": "11",
+      }
+    `,
     );
   });
 
   it('should get the correct input for a failed event history', () => {
     const { input } =
       getWorkflowStartedCompletedAndTaskFailedEvents(failedEventHistory);
-    expect(input).toMatchInlineSnapshot('"{"payloads":[1656706968987842000]}"');
+    expect(input).toMatchInlineSnapshot(`
+      {
+        "payloads": [
+          1656706968987842000,
+        ],
+      }
+    `);
   });
 
   it('should get the correct result for a failed event history', () => {
     const { results } =
       getWorkflowStartedCompletedAndTaskFailedEvents(failedEventHistory);
     expect(results).toMatchInlineSnapshot(
-      '"{"type":"workflowExecutionFailedEventAttributes","failure":{"message":"failing on attempt 2","source":"GoSDK","stackTrace":"","cause":null,"applicationFailureInfo":{"type":"","nonRetryable":false,"details":null}},"retryState":"InProgress","workflowTaskCompletedEventId":"4","newExecutionRunId":"15e13ed4-880a-4557-96c6-0116e3d07b8d"}"',
+      `
+      {
+        "failure": {
+          "applicationFailureInfo": {
+            "details": null,
+            "nonRetryable": false,
+            "type": "",
+          },
+          "cause": null,
+          "message": "failing on attempt 2",
+          "source": "GoSDK",
+          "stackTrace": "",
+        },
+        "newExecutionRunId": "15e13ed4-880a-4557-96c6-0116e3d07b8d",
+        "retryState": "InProgress",
+        "type": "workflowExecutionFailedEventAttributes",
+        "workflowTaskCompletedEventId": "4",
+      }
+    `,
     );
   });
 
@@ -168,7 +212,14 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { input } =
       getWorkflowStartedCompletedAndTaskFailedEvents(runningEventHistory);
     expect(input).toMatchInlineSnapshot(
-      '"{"payloads":[1656707029044596700,"canary"]}"',
+      `
+      {
+        "payloads": [
+          1656707029044596700,
+          "canary",
+        ],
+      }
+    `,
     );
   });
 
@@ -183,7 +234,16 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
       terminatedEventHistory,
     );
     expect(input).toMatchInlineSnapshot(
-      '"{"payloads":[1656706488881881600,"temporal.fixture.terminated.workflow.id","3cbbf515-36da-43b9-a1f3-18a7ec031ddd","canary"]}"',
+      `
+      {
+        "payloads": [
+          1656706488881881600,
+          "temporal.fixture.terminated.workflow.id",
+          "3cbbf515-36da-43b9-a1f3-18a7ec031ddd",
+          "canary",
+        ],
+      }
+    `,
     );
   });
 
@@ -192,7 +252,14 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
       terminatedEventHistory,
     );
     expect(results).toMatchInlineSnapshot(
-      '"{"type":"workflowExecutionTerminatedEventAttributes","reason":"reset canary","details":null,"identity":"history-service"}"',
+      `
+      {
+        "details": null,
+        "identity": "history-service",
+        "reason": "reset canary",
+        "type": "workflowExecutionTerminatedEventAttributes",
+      }
+    `,
     );
   });
 
@@ -200,7 +267,14 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { input } =
       getWorkflowStartedCompletedAndTaskFailedEvents(timedOutEventHistory);
     expect(input).toMatchInlineSnapshot(
-      '"{"payloads":[1656683778738403300,"canary"]}"',
+      `
+      {
+        "payloads": [
+          1656683778738403300,
+          "canary",
+        ],
+      }
+    `,
     );
   });
 
@@ -208,7 +282,13 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { results } =
       getWorkflowStartedCompletedAndTaskFailedEvents(timedOutEventHistory);
     expect(results).toMatchInlineSnapshot(
-      '"{"type":"workflowExecutionTimedOutEventAttributes","retryState":"RetryPolicyNotSet","newExecutionRunId":""}"',
+      `
+      {
+        "newExecutionRunId": "",
+        "retryState": "RetryPolicyNotSet",
+        "type": "workflowExecutionTimedOutEventAttributes",
+      }
+    `,
     );
   });
 
@@ -222,14 +302,28 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     const { input } = getWorkflowStartedCompletedAndTaskFailedEvents(
       continuedAsNewEventHistory,
     );
-    expect(input).toMatchInlineSnapshot('"{"payloads":[3,2]}"');
+    expect(input).toMatchInlineSnapshot(`
+      {
+        "payloads": [
+          3,
+          2,
+        ],
+      }
+    `);
   });
 
   it('should get the correct result for a continuedAsNew event history', () => {
     const { results } = getWorkflowStartedCompletedAndTaskFailedEvents(
       continuedAsNewEventHistory,
     );
-    expect(results).toMatchInlineSnapshot('"{"payloads":[4,1]}"');
+    expect(results).toMatchInlineSnapshot(`
+      {
+        "payloads": [
+          4,
+          1,
+        ],
+      }
+    `);
   });
 
   it('should set contAsNew to true for a continuedAsNew event history', () => {
@@ -261,7 +355,7 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     ];
 
     const { results } = getWorkflowStartedCompletedAndTaskFailedEvents(history);
-    expect(results).toBe('null');
+    expect(results).toBe(null);
   });
 
   it('should work as expected with a WorkflowCompletedEvent with a payloads', () => {
@@ -286,6 +380,6 @@ describe('getWorkflowStartedCompletedAndTaskFailedEvents', () => {
     ];
 
     const { results } = getWorkflowStartedCompletedAndTaskFailedEvents(history);
-    expect(results).toBe('{"payloads":"result"}');
+    expect(results).toEqual({ payloads: 'result' });
   });
 });
diff --git a/src/lib/utilities/get-started-completed-and-task-failed-events.ts b/src/lib/utilities/get-started-completed-and-task-failed-events.ts
index 3a0e945985..d9aa7d81b6 100644
--- a/src/lib/utilities/get-started-completed-and-task-failed-events.ts
+++ b/src/lib/utilities/get-started-completed-and-task-failed-events.ts
@@ -1,3 +1,4 @@
+import type { Payloads } from '$lib/types';
 import type {
   WorkflowEvent,
   WorkflowExecutionCanceledEvent,
@@ -13,11 +14,10 @@ import {
   isWorkflowExecutionCompletedEvent,
   isWorkflowExecutionContinuedAsNewEvent,
 } from './is-event-type';
-import { stringifyWithBigInt } from './parse-with-big-int';
 
 export type WorkflowInputAndResults = {
-  input: string;
-  results: string;
+  input: Payloads;
+  results: Payloads | CompletionEventAttributes;
   contAsNew: boolean;
 };
 
@@ -29,6 +29,8 @@ type CompletionEvent =
   | WorkflowExecutionCanceledEvent
   | WorkflowExecutionTerminatedEvent;
 
+export type CompletionEventAttributes = CompletionEvent['attributes'];
+
 const completedEventTypes = [
   'WorkflowExecutionFailed',
   'WorkflowExecutionCompleted',
@@ -67,8 +69,8 @@ const getEventResult = (event: CompletionEvent) => {
 export const getWorkflowStartedCompletedAndTaskFailedEvents = (
   eventHistory: WorkflowEvent[],
 ): WorkflowInputAndResults => {
-  let input: string;
-  let results: string;
+  let input: Payloads;
+  let results: Payloads | CompletionEventAttributes;
   let contAsNew = false;
 
   let workflowStartedEvent: WorkflowExecutionStartedEvent;
@@ -85,15 +87,14 @@ export const getWorkflowStartedCompletedAndTaskFailedEvents = (
   }
 
   if (workflowStartedEvent) {
-    input = stringifyWithBigInt(
+    input =
       workflowStartedEvent?.workflowExecutionStartedEventAttributes?.input ??
-        null,
-    );
+      null;
   }
 
   if (workflowCompletedEvent) {
     contAsNew = isWorkflowExecutionContinuedAsNewEvent(workflowCompletedEvent);
-    results = stringifyWithBigInt(getEventResult(workflowCompletedEvent));
+    results = getEventResult(workflowCompletedEvent);
   }
 
   return {
diff --git a/src/routes/(app)/nexus/[id]/+layout.ts b/src/routes/(app)/nexus/[id]/+layout.ts
index 2543ea9662..0b35f69991 100644
--- a/src/routes/(app)/nexus/[id]/+layout.ts
+++ b/src/routes/(app)/nexus/[id]/+layout.ts
@@ -1,5 +1,5 @@
 import { fetchNexusEndpoint } from '$lib/services/nexus-service.js';
-import { decodeUserMetadata } from '$lib/utilities/decode-payload.js';
+import { decodePayloadAndParseDataToJSON } from '$lib/utilities/decode-payload.js';
 
 export const load = async ({ params, fetch, parent }) => {
   const { id } = params;
@@ -11,7 +11,7 @@ export const load = async ({ params, fetch, parent }) => {
     let description = '';
     try {
       if (endpoint?.spec?.description?.data) {
-        const decodedDescription = await decodeUserMetadata(
+        const decodedDescription = await decodePayloadAndParseDataToJSON(
           endpoint.spec.description,
         );
 
diff --git a/temporal/activities/index.ts b/temporal/activities/index.ts
index 3463d186ec..9500c6273b 100644
--- a/temporal/activities/index.ts
+++ b/temporal/activities/index.ts
@@ -1,3 +1,4 @@
 export { default as echo } from './echo';
 export { default as double } from './double';
 export { complex } from './complex';
+export { default as multi } from './multi';
diff --git a/temporal/activities/multi.ts b/temporal/activities/multi.ts
new file mode 100644
index 0000000000..88d6fe4794
--- /dev/null
+++ b/temporal/activities/multi.ts
@@ -0,0 +1,7 @@
+export default async function (
+  input1: string,
+  input2: object,
+  input3: unknown[],
+): Promise<string> {
+  return `Received ${input1}, ${JSON.stringify(input2)}, and [${input3.join(', ')}]`;
+}
diff --git a/temporal/client.ts b/temporal/client.ts
index 57063c057e..74c9c5d293 100644
--- a/temporal/client.ts
+++ b/temporal/client.ts
@@ -4,6 +4,7 @@ import { getDataConverter } from './data-converter';
 import {
   BlockingWorkflow,
   CompletedWorkflow,
+  MultiInputWorkflow,
   type PayloadCoverageResult,
   PayloadCoverageWorkflow,
   RunningWorkflow,
@@ -100,7 +101,17 @@ export const startWorkflows = async (
     },
   });
 
-  workflows.push(wf1, wf2, wf3, wf4, wf5, wf6);
+  const wf7 = await client.workflow.start(MultiInputWorkflow, {
+    taskQueue: 'e2e-1',
+    workflowId: 'multi-payload-workflow',
+    args: [
+      'hello world',
+      { foo: 'bar', baz: true, blue: 42 },
+      ['cats', 'dogs', 'lizards'],
+    ],
+  });
+
+  workflows.push(wf1, wf2, wf3, wf4, wf5, wf6, wf7);
 
   if (config?.waitForResult) {
     return Promise.all(workflows.map((wf) => wf.result()));
diff --git a/temporal/workflows.ts b/temporal/workflows.ts
index b3b9c0d675..1eeb3a74c3 100644
--- a/temporal/workflows.ts
+++ b/temporal/workflows.ts
@@ -3,7 +3,9 @@ import * as workflow from '@temporalio/workflow';
 import type * as activities from './activities';
 import type { ComplexActivityResult } from './activities/complex';
 
-const { echo: Activity } = workflow.proxyActivities<typeof activities>({
+const { echo: Activity, multi: MultiInputActivity } = workflow.proxyActivities<
+  typeof activities
+>({
   startToCloseTimeout: '10 seconds',
 });
 
@@ -276,3 +278,13 @@ export async function PayloadCoverageWorkflow(
     completedAt: new Date().toISOString(),
   };
 }
+
+export async function MultiInputWorkflow(
+  input1: string,
+  input2: object,
+  input3: unknown[],
+): Promise<string> {
+  const activityResult = await MultiInputActivity(input1, input2, input3);
+
+  return activityResult;
+}