From f97800556156ae14a8c9333024b7b6b30c3d7812 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@temporal.io>
Date: Thu, 9 Jan 2025 11:45:12 -0600
Subject: [PATCH] Workflow Relationship Tree (#2487)

* Accordion component updates (#2316)

* Fix styling for non-expandable Accordion

* Update padding on Card to match Accordion

* Add AccordionGroup

* Make ring inset on focus-within

* Fix imports and A11y warning

* Highlight active link in nav bar (#2324)

* Add active styling for nav item

* Add isActive check for nav links

* Account for if isActive is undefined

* Add workflow electron

* Add http api port and async update flag (#2314)

* Show all possible failures for WorkflowTaskError (#2328)

* Use AccordionGroup to show all possible failures

* Dont use red text

* Move source to accordion

* Add pending task component and move into accordion group

* Fixes from Laura's review

* Add border

* WIP: filter

* Bump express from 4.19.2 to 4.20.0 (#2323)

Bumps [express](https://github.com/expressjs/express) from 4.19.2 to 4.20.0.
- [Release notes](https://github.com/expressjs/express/releases)
- [Changelog](https://github.com/expressjs/express/blob/master/History.md)
- [Commits](https://github.com/expressjs/express/compare/4.19.2...4.20.0)

---
updated-dependencies:
- dependency-name: express
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump vite from 5.0.13 to 5.2.14 (#2329)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.0.13 to 5.2.14.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.2.14/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.2.14/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Fix the go things

* MVP of electron. Needs some performance tweaks and to add links to each node

* Add icons, clean up

* Remove commented out code

* Update snapshots

* Update go to 1.22.6 (#2334)

* Update go to 1.23

* Use 1.22.6

* Remove work files

* Add go.work to gitignore

* Small UI fixes (#2345)

* Remove unnecessary coerced Boolean

* Pluralize Namespaces badge for Nexus endpoints

* Fix action slot on Accordion component

* Ignore a11y test on Accordion with action

* 2.31.1 (#2346)

Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io>

* Update version.go to v2.31.0 (#2347)

* Use go 1.23.0 (#2348)

* Use 1.23 (#2349)

* Update go version to 1.23 in update ui-server (#2351)

* Update go version to 1.23 in update ui-server

* Use v4

* Add breadcrumbs for nodes

* Add hover/click state with opacity

* Add back child table

* Fix overfetching issue

* Fix icon type

* WIP Family Tree

* Get math right for tree positions

* I did things but can't remember what

* Remove electron stuff

* Get rid of pane

* Add side panel descriptions

* Better styles and status color

* Better side nav buttons. Better lines to dots. Need to fix the tree node expanding

* Add link, needs a better place

* Better styles on description, add links, fix opening nodes

* Add table of info and link vis/sidenav with open/close

* Add table

* Better description

* fix lines

* Better isActive, isCurrent checks

* isCurrent check

* Make split 50/50

* Fix types

* Better styles for active, better borders.

* Refactor to include root, clean up styles, better basis widths

* Add root child count on node tree

* Make tree sticky on lg screens

* Add CaN tree

* Add schedule tree

* Delete all unused tables

* Delete breadcrumbs

* Use justify-end to move links to far right

* Fix sm screen layout

* Make visual a little shorter at 240px, hide times if small screen

* Add dash and min-w for end time, py-1

* Fix root node click and accessibility issues

* Bump maxZoomOut for a lot of children

* Add back old tables in case api not supported or if we wanna go labs mode route

* Small style updates based on feedback, better responsive padding

* Better count placement

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: temporal-cicd[bot] <138905749+temporal-cicd[bot]@users.noreply.github.com>
Co-authored-by: Temporal Data (cicd) <commander-data@temporal.io>
---
 pnpm-lock.yaml                                |   2 +-
 .../components/event/payload-decoder.svelte   |   9 +-
 .../lines-and-dots/workflow-details.svelte    |   6 +-
 .../relationships/continue-as-new-node.svelte |  30 ++
 .../relationships/continue-as-new-tree.svelte |  66 ++++
 .../relationships/schedule-tree.svelte        |  39 +++
 ...low-family-node-description-details.svelte |  70 ++++
 ...rkflow-family-node-description-tree.svelte |  24 ++
 .../workflow-family-node-description.svelte   | 131 ++++++++
 .../workflow-family-node-tree.svelte          | 301 ++++++++++++++++++
 .../relationships/workflow-family-tree.svelte |  86 +++++
 .../workflow-relationships-old.svelte         |  66 ++++
 .../workflow/workflow-relationships.svelte    |  89 +++---
 src/lib/holocene/icon/paths.ts                |   2 +
 src/lib/holocene/icon/svg/target.svelte       |  40 +++
 src/lib/holocene/zoom-svg.svelte              | 129 ++++++++
 src/lib/i18n/locales/en/common.ts             |   1 +
 src/lib/i18n/locales/en/workflows.ts          |   1 +
 src/lib/layouts/workflow-header.svelte        |  31 +-
 .../layouts/workflow-history-layout.svelte    |   4 +-
 src/lib/layouts/workflow-padded-layout.svelte |   2 +-
 src/lib/layouts/workflow-run-layout.svelte    |   2 +-
 .../workflow-execution.test.ts.snap           |  13 +
 ...flow-execution.write-disabled.test.ts.snap |  13 +
 src/lib/models/workflow-execution.ts          |   2 +
 src/lib/services/workflow-service.ts          |  91 ++++++
 src/lib/theme/plugin.ts                       |   2 +-
 src/lib/types/workflows.ts                    |   1 +
 src/lib/utilities/decode-payload.ts           |  13 +-
 .../[run]/relationships/+page.svelte          |   5 +-
 30 files changed, 1180 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/components/workflow/relationships/continue-as-new-node.svelte
 create mode 100644 src/lib/components/workflow/relationships/continue-as-new-tree.svelte
 create mode 100644 src/lib/components/workflow/relationships/schedule-tree.svelte
 create mode 100644 src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
 create mode 100644 src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte
 create mode 100644 src/lib/components/workflow/relationships/workflow-family-node-description.svelte
 create mode 100644 src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
 create mode 100644 src/lib/components/workflow/relationships/workflow-family-tree.svelte
 create mode 100644 src/lib/components/workflow/workflow-relationships-old.svelte
 create mode 100644 src/lib/holocene/icon/svg/target.svelte
 create mode 100644 src/lib/holocene/zoom-svg.svelte

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15b9db765..1758184d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
diff --git a/src/lib/components/event/payload-decoder.svelte b/src/lib/components/event/payload-decoder.svelte
index d0993cddd..e689615d5 100644
--- a/src/lib/components/event/payload-decoder.svelte
+++ b/src/lib/components/event/payload-decoder.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
 
   import { authUser } from '$lib/stores/auth-user';
+  import type { Memo } from '$lib/types';
   import type { EventAttribute, WorkflowEvent } from '$lib/types/events';
   import {
     cloneAllPotentialPayloadsWithCodec,
@@ -15,7 +16,11 @@
   } from '$lib/utilities/get-codec';
   import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 
-  export let value: PotentiallyDecodable | EventAttribute | WorkflowEvent;
+  export let value:
+    | PotentiallyDecodable
+    | EventAttribute
+    | WorkflowEvent
+    | Memo;
   export let key = '';
   export let onDecode: (decodedValue: string) => void | undefined = undefined;
 
@@ -36,7 +41,7 @@
   };
 
   const decodePayloads = async (
-    _value: PotentiallyDecodable | EventAttribute | WorkflowEvent,
+    _value: PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo,
   ) => {
     try {
       const convertedAttributes = await cloneAllPotentialPayloadsWithCodec(
diff --git a/src/lib/components/lines-and-dots/workflow-details.svelte b/src/lib/components/lines-and-dots/workflow-details.svelte
index e752b4b62..9f886e4fd 100644
--- a/src/lib/components/lines-and-dots/workflow-details.svelte
+++ b/src/lib/components/lines-and-dots/workflow-details.svelte
@@ -3,7 +3,7 @@
 
   import { translate } from '$lib/i18n/translate';
   import { relativeTime, timeFormat } from '$lib/stores/time-format';
-  import { workflowRun } from '$lib/stores/workflow-run';
+  import type { WorkflowExecution } from '$lib/types/workflows';
   import { formatDate } from '$lib/utilities/format-date';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import {
@@ -14,8 +14,10 @@
 
   import WorkflowDetail from './workflow-detail.svelte';
 
+  export let workflow: WorkflowExecution;
+
   $: ({ namespace } = $page.params);
-  $: ({ workflow } = $workflowRun);
+
   $: elapsedTime = formatDistanceAbbreviated({
     start: workflow?.startTime,
     end: workflow?.endTime || Date.now(),
diff --git a/src/lib/components/workflow/relationships/continue-as-new-node.svelte b/src/lib/components/workflow/relationships/continue-as-new-node.svelte
new file mode 100644
index 000000000..eb44600d9
--- /dev/null
+++ b/src/lib/components/workflow/relationships/continue-as-new-node.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { IconName } from '$lib/holocene/icon';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
+
+  export let label: string;
+  export let value: string;
+  export let href: string | undefined = undefined;
+  export let icon: IconName | undefined = undefined;
+  export let current = false;
+</script>
+
+<div
+  class="flex w-full flex-col items-center gap-2 border border-subtle px-1 py-4 text-center text-xs transition-all lg:text-base {current &&
+    'bg-subtle'} max-w-md"
+>
+  {#if icon}
+    <Icon name={icon} />
+  {/if}
+  <p class="font-mono">{label}</p>
+  <div class="px-1 lg:px-2">
+    {#if href}
+      <Link {href}>
+        {value}
+      </Link>
+    {:else}
+      <p>{value}</p>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/components/workflow/relationships/continue-as-new-tree.svelte b/src/lib/components/workflow/relationships/continue-as-new-tree.svelte
new file mode 100644
index 000000000..3f282c90a
--- /dev/null
+++ b/src/lib/components/workflow/relationships/continue-as-new-tree.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { translate } from '$lib/i18n/translate';
+  import { routeForRelationships } from '$lib/utilities/route-for';
+
+  import ContinueAsNewNode from './continue-as-new-node.svelte';
+
+  export let namespace: string;
+  export let workflowId: string;
+  export let first: string;
+  export let previous: string;
+  export let current: string;
+  export let next: string;
+</script>
+
+<div
+  class="flex w-full items-center justify-between overflow-auto bg-primary px-8 py-16 lg:py-36 xl:px-32"
+>
+  {#if first}
+    <ContinueAsNewNode
+      label={translate('workflows.first-execution')}
+      value={first}
+      href={routeForRelationships({
+        namespace,
+        workflow: workflowId,
+        run: first,
+      })}
+    />
+    <div
+      class="border-top border-1 w-full border border-dashed border-subtle"
+    ></div>
+  {/if}
+  {#if previous}
+    <ContinueAsNewNode
+      label={translate('workflows.previous-execution')}
+      value={first}
+      href={routeForRelationships({
+        namespace,
+        workflow: workflowId,
+        run: previous,
+      })}
+    />
+    <div class="border-top border-1 w-full border border-subtle"></div>
+  {/if}
+  <ContinueAsNewNode
+    label={translate('workflows.current-execution')}
+    value={current}
+    href={routeForRelationships({
+      namespace,
+      workflow: workflowId,
+      run: current,
+    })}
+    current
+  />
+  {#if next}
+    <div class="border-top border-1 w-full border border-subtle"></div>
+    <ContinueAsNewNode
+      label={translate('workflows.next-execution')}
+      value={next}
+      href={routeForRelationships({
+        namespace,
+        workflow: workflowId,
+        run: next,
+      })}
+    />
+  {/if}
+</div>
diff --git a/src/lib/components/workflow/relationships/schedule-tree.svelte b/src/lib/components/workflow/relationships/schedule-tree.svelte
new file mode 100644
index 000000000..3044c92ef
--- /dev/null
+++ b/src/lib/components/workflow/relationships/schedule-tree.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { translate } from '$lib/i18n/translate';
+  import {
+    routeForRelationships,
+    routeForSchedule,
+  } from '$lib/utilities/route-for';
+
+  import ContinueAsNewNode from './continue-as-new-node.svelte';
+
+  export let namespace: string;
+  export let workflowId: string;
+  export let scheduleId: string;
+  export let current: string;
+</script>
+
+<div
+  class="flex w-full flex-col items-center justify-between gap-4 bg-primary px-8 py-12 xl:px-32"
+>
+  <ContinueAsNewNode
+    label="Schedule"
+    value={scheduleId}
+    icon="schedules"
+    href={routeForSchedule({
+      namespace: namespace,
+      scheduleId,
+    })}
+  />
+  <div class="border-top border-1 h-24 w-0.5 bg-subtle" />
+  <ContinueAsNewNode
+    label={translate('workflows.current-execution')}
+    value={current}
+    href={routeForRelationships({
+      namespace,
+      workflow: workflowId,
+      run: current,
+    })}
+    current
+  />
+</div>
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
new file mode 100644
index 000000000..0a49c8ceb
--- /dev/null
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description-details.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import WorkflowStatus from '$lib/components/workflow-status.svelte';
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import { relativeTime, timeFormat } from '$lib/stores/time-format';
+  import type { WorkflowExecution } from '$lib/types/workflows';
+  import { formatDate } from '$lib/utilities/format-date';
+  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+
+  export let workflow: WorkflowExecution;
+  export let isRootWorkflow = false;
+
+  $: elapsedTime = formatDistanceAbbreviated({
+    start: workflow?.startTime,
+    end: workflow?.endTime || Date.now(),
+    includeMilliseconds: true,
+  });
+</script>
+
+<div
+  class="flex w-full flex-col gap-2 p-1 text-left text-sm lg:flex-row lg:items-center"
+>
+  <div class="flex items-center gap-2 lg:basis-96">
+    <div class="w-32 leading-3">
+      <WorkflowStatus status={workflow.status} />
+    </div>
+    <div class="w-full leading-3">
+      {#if isRootWorkflow}
+        <p class="font-mono text-xs">{translate('common.type')}</p>
+      {/if}
+      <p>{workflow.name}</p>
+    </div>
+  </div>
+  <div class="leading-3 lg:basis-[800px]">
+    {#if isRootWorkflow}
+      <p class="font-mono text-xs">{translate('common.id')}</p>
+    {/if}
+    <p>{workflow.id}</p>
+  </div>
+  <div class="hidden items-center gap-4 lg:flex lg:basis-5/12">
+    <div class="leading-3">
+      {#if isRootWorkflow}
+        <p class="font-mono text-xs">
+          {translate('common.start')}
+        </p>
+      {/if}
+      <p>
+        {formatDate(workflow?.startTime, $timeFormat, {
+          relative: $relativeTime,
+        })}
+      </p>
+    </div>
+    <div class="leading-3">
+      {#if isRootWorkflow}
+        <p class="min-w-12 font-mono text-xs">{translate('common.end')}</p>
+      {/if}
+      <p>
+        {formatDate(workflow?.endTime, $timeFormat, {
+          relative: $relativeTime,
+        }) || '-'}
+      </p>
+    </div>
+    <div class="leading-3">
+      {#if isRootWorkflow}
+        <Icon name="clock" class="h-4 w-3" />
+      {/if}
+      <p>{elapsedTime}</p>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte
new file mode 100644
index 000000000..99210ec28
--- /dev/null
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description-tree.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { RootNode } from '$lib/services/workflow-service';
+  import type { WorkflowExecution } from '$lib/types/workflows';
+
+  import WorkflowFamilyNodeDescription from './workflow-family-node-description.svelte';
+
+  export let root: RootNode;
+  export let expandAll: boolean;
+  export let onNodeClick: (node: RootNode, generation: number) => void;
+  export let activeWorkflow: WorkflowExecution | undefined = undefined;
+  export let generation = 1;
+  export let openRuns: Map<number, string>;
+</script>
+
+{#each root?.children as child}
+  <WorkflowFamilyNodeDescription
+    root={child}
+    {expandAll}
+    {onNodeClick}
+    {activeWorkflow}
+    {generation}
+    {openRuns}
+  />
+{/each}
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-description.svelte b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
new file mode 100644
index 000000000..2b279892c
--- /dev/null
+++ b/src/lib/components/workflow/relationships/workflow-family-node-description.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import Icon from '$lib/holocene/icon/icon.svelte';
+  import Link from '$lib/holocene/link.svelte';
+  import type { RootNode } from '$lib/services/workflow-service';
+  import type { WorkflowExecution } from '$lib/types/workflows';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
+
+  import WorkflowFamilyNodeDescriptionDetails from './workflow-family-node-description-details.svelte';
+  import WorkflowFamilyNodeDescriptionTree from './workflow-family-node-description-tree.svelte';
+
+  export let root: RootNode;
+  export let expandAll: boolean;
+  export let generation = 0;
+  export let onNodeClick: (node: RootNode, generation: number) => void;
+  export let activeWorkflow: WorkflowExecution | undefined = undefined;
+  export let openRuns: Map<number, string>;
+
+  $: ({ namespace, workflow, run } = $page.params);
+  $: expanded =
+    expandAll ||
+    openRuns.get(generation) === root.workflow.runId ||
+    generation === 0;
+  $: isCurrent = root.workflow.id === workflow && root.workflow.runId === run;
+  $: isActive = root.workflow.runId === activeWorkflow?.runId;
+  $: isRootWorkflow = generation === 0;
+
+  const onClick = () => {
+    onNodeClick(root, generation);
+  };
+</script>
+
+<div class="w-full border-subtle" class:border-l={!isRootWorkflow}>
+  <button
+    class="flex w-full select-none {isActive &&
+      'surface-interactive'} {isCurrent &&
+      !isActive &&
+      'surface-subtle'} items-center gap-1 px-2 py-1 lg:py-2 {!isActive &&
+      'hover:surface-interactive-secondary'}"
+    on:click|stopPropagation={onClick}
+  >
+    <div class="flex w-full items-center gap-3 pr-2 text-sm">
+      <WorkflowFamilyNodeDescriptionDetails
+        workflow={root.workflow}
+        {isRootWorkflow}
+      />
+      <div class="flex basis-16 items-center justify-end gap-1">
+        {#if !isCurrent}
+          <Link
+            href={routeForEventHistory({
+              namespace,
+              workflow: root.workflow.id,
+              run: root.workflow.runId,
+            })}
+          >
+            <Icon name="external-link" class={isActive && 'text-white'} />
+          </Link>
+        {/if}
+        {#if root?.children?.length}
+          <div class="flex items-center gap-2 text-sm">
+            <Icon name="relationship" class="-mr-1 w-3 flex-shrink-0" />
+            <span class="inline-block">{root?.children?.length}</span>
+          </div>
+          {#if !isRootWorkflow}
+            <Icon
+              name={expanded ? 'chevron-up' : 'chevron-down'}
+              class="-mr-1 w-4 flex-shrink-0"
+            />
+          {/if}
+        {/if}
+      </div>
+    </div>
+  </button>
+  {#if expanded}
+    <div class="pl-4">
+      {#if root?.children?.length}
+        <WorkflowFamilyNodeDescriptionTree
+          {root}
+          {onNodeClick}
+          {expandAll}
+          {activeWorkflow}
+          generation={generation + 1}
+          {openRuns}
+        />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="postcss">
+  .Running {
+    background-color: #93bbfd;
+  }
+
+  .Started {
+    background-color: #92a4c3;
+  }
+
+  .Completed {
+    background-color: #00f37e;
+  }
+
+  .Fired {
+    background-color: #f8a208;
+  }
+
+  .Signaled {
+    background-color: #d300d8;
+  }
+
+  .Failed {
+    background-color: #ff4518;
+  }
+
+  .Terminated {
+    background-color: #fde989;
+  }
+
+  .TimedOut {
+    background-color: #c2570c;
+  }
+
+  .Canceled {
+    background-color: #fed64b;
+  }
+
+  .ContinuedAsNew {
+    background-color: #e2d5fe;
+  }
+</style>
diff --git a/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
new file mode 100644
index 000000000..9fa01b744
--- /dev/null
+++ b/src/lib/components/workflow/relationships/workflow-family-node-tree.svelte
@@ -0,0 +1,301 @@
+<script lang="ts">
+  import { cva } from 'class-variance-authority';
+
+  import { page } from '$app/stores';
+
+  import type { RootNode } from '$lib/services/workflow-service';
+  import type { WorkflowExecution } from '$lib/types/workflows';
+
+  export let root: RootNode;
+  export let width: number;
+  export let height: number;
+  export let zoomLevel: number;
+  export let rootX = 0;
+  export let rootY = 0;
+  export let generation = 1;
+  export let openRuns: Map<number, string>;
+  export let expandAll: boolean;
+  export let onNodeClick: (node: RootNode, generation: number) => void;
+  export let activeWorkflow: WorkflowExecution | undefined = undefined;
+
+  $: ({ workflow, run } = $page.params);
+
+  const getPositions = (
+    width: number,
+    height: number,
+    rootX: number,
+    rootY: number,
+  ) => {
+    const x = rootX || width / 2;
+    const y = rootY || height / 3;
+    const radius = 20;
+    return {
+      x,
+      y,
+      radius,
+    };
+  };
+
+  $: ({ x, y, radius } = getPositions(width, height, rootX, rootY));
+
+  $: getPosition = (index: number) => {
+    const childY = y + 4 * radius;
+
+    const getX = () => {
+      const numberOfSiblings = root.children?.length;
+      if (numberOfSiblings === 1) return x;
+      const expandFactor = (radius * 6) / zoomLevel;
+      if (numberOfSiblings % 2 === 0) {
+        return (
+          x + (index - numberOfSiblings * 0.5) * expandFactor + expandFactor / 2
+        );
+      } else {
+        const middleIndex = numberOfSiblings / 2 - 0.5;
+        if (index === middleIndex) return x;
+        return x + (index - middleIndex) * expandFactor;
+      }
+    };
+
+    return { childX: getX(), childY };
+  };
+
+  const nodeClick = (e, node: RootNode) => {
+    e.stopPropagation();
+    onNodeClick(node, generation);
+  };
+
+  $: isExpanded = (node: RootNode) => {
+    const opened = openRuns.get(generation) === node.workflow.runId;
+    return expandAll || opened;
+  };
+
+  $: isCurrent = (node: RootNode) => {
+    return node.workflow.id === workflow && node.workflow.runId === run;
+  };
+
+  $: isActive = (node: RootNode) => {
+    return node.workflow.runId === activeWorkflow?.runId;
+  };
+
+  const workflowStatus = cva(['stroke-2'], {
+    variants: {
+      status: {
+        Running: 'fill-blue-300 stroke-blue-500',
+        TimedOut: 'fill-orange-200 stroke-orange-400',
+        Completed: 'fill-green-200 stroke-green-400',
+        Failed: 'fill-red-200 stroke-red-400',
+        ContinuedAsNew: 'fill-purple-200 stroke-purple-400',
+        Canceled: 'fill-slate-100 stroke-slate-300',
+        Terminated: 'fill-yellow-200 stroke-yellow-400',
+        Paused: 'fill-yellow-200 stroke-yellow-400',
+        Unspecified: 'fill-slate-100 stroke-slate-300',
+        Scheduled: 'fill-blue-300 stroke-blue-500',
+        Started: 'fill-blue-300 stroke-blue-500',
+        Open: 'fill-green-200 stroke-green-400',
+        New: 'fill-blue-300 stroke-blue-500',
+        Initiated: 'fill-blue-300 stroke-blue-500',
+        Fired: 'fill-pink-200 stroke-pink-400',
+        CancelRequested: 'fill-yellow-200 stroke-yellow-400',
+        Signaled: 'fill-pink-200 stroke-pink-400',
+      },
+    },
+  });
+</script>
+
+{#if root?.children.length}
+  <line
+    x1={getPosition(0).childX}
+    y1={getPosition(0).childY - 1.5 * radius}
+    x2={getPosition(root?.children.length - 1).childX}
+    y2={getPosition(0).childY - 1.5 * radius}
+    class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
+      ? 'stroke-indigo-700'
+      : 'stroke-slate-100 dark:stroke-slate-800'}"
+  />
+{/if}
+{#each root?.children as child, index}
+  {@const { childX, childY } = getPosition(index)}
+  {#if child.children.length && isExpanded(child)}
+    <svelte:self
+      root={child}
+      {width}
+      {height}
+      {zoomLevel}
+      rootX={childX}
+      rootY={childY}
+      generation={generation + 1}
+      {expandAll}
+      {openRuns}
+      {onNodeClick}
+      {activeWorkflow}
+    />
+  {/if}
+  <line
+    x1={childX}
+    y1={childY - 1.5 * radius}
+    x2={childX}
+    y2={childY}
+    class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
+      ? 'stroke-indigo-700'
+      : 'stroke-slate-100 dark:stroke-slate-800'}"
+  />
+  />
+  <g
+    role="button"
+    tabindex="0"
+    class="outline-none"
+    on:click={(e) => nodeClick(e, child)}
+    on:keypress={(e) => nodeClick(e, child)}
+  >
+    {#if child?.children?.length && isExpanded(child)}
+      <line
+        x1={childX}
+        y1={childY}
+        x2={childX}
+        y2={childY + 2.5 * radius}
+        class="stroke-2 transition-all duration-300 ease-in-out {isActive(child)
+          ? 'stroke-indigo-700'
+          : 'stroke-slate-100 dark:stroke-slate-800'}"
+      />
+    {/if}
+    {#if isActive(child)}
+      <circle
+        cx={childX}
+        cy={childY}
+        r={radius}
+        class="fill-indigo-700"
+        fill-opacity=".95"
+      />
+    {/if}
+    {#if isCurrent(child)}
+      <circle
+        cx={childX}
+        cy={childY}
+        r={radius}
+        class="fill-indigo-200"
+        fill-opacity=".75"
+      />
+    {/if}
+    <rect
+      class={workflowStatus({ status: child.workflow.status })}
+      x={childX - radius / 2}
+      y={childY - radius / 2}
+      cx={radius / 2}
+      cy={radius / 2}
+      width={radius}
+      height={radius}
+      cursor="pointer"
+    />
+    {#if child?.children?.length && !isExpanded(child)}
+      <text
+        x={childX}
+        y={childY + 2 * radius}
+        class="text-center font-mono text-lg"
+        fill="currentColor"
+        text-anchor="middle"
+        font-weight="500">{child.children.length}</text
+      >
+    {/if}
+  </g>
+{/each}
+
+{#if generation === 1}
+  <g
+    role="button"
+    class="outline-none"
+    tabindex="0"
+    on:click={(e) => nodeClick(e, root)}
+    on:keypress={(e) => nodeClick(e, root)}
+  >
+    {#if root?.children?.length}
+      <line
+        x1={x}
+        y1={y}
+        x2={x}
+        y2={y + 2.5 * radius}
+        class="stroke-2 transition-all duration-300 ease-in-out {isActive(root)
+          ? 'stroke-indigo-700'
+          : 'stroke-slate-100 dark:stroke-slate-800'}"
+      />
+    {/if}
+    {#if isCurrent(root)}
+      <circle
+        cx={x}
+        cy={y}
+        r={radius}
+        class="fill-indigo-200"
+        fill-opacity=".75"
+      />
+    {/if}
+    {#if isActive(root)}
+      <circle
+        cx={x}
+        cy={y}
+        r={radius}
+        class="fill-indigo-700"
+        fill-opacity=".95"
+      />
+    {/if}
+    <rect
+      class={workflowStatus({ status: root.workflow.status })}
+      x={x - radius / 2}
+      y={y - radius / 2}
+      width={radius}
+      height={radius}
+      cx={radius / 2}
+      cy={radius / 2}
+    />
+    {#if root?.children?.length}
+      <text
+        {x}
+        y={y - radius * 1.5}
+        class="text-center font-mono text-lg"
+        fill="currentColor"
+        text-anchor="middle"
+        font-weight="500">{root.children.length}</text
+      >
+    {/if}
+  </g>
+{/if}
+
+<style lang="postcss">
+  .Running {
+    @apply fill-green-200;
+  }
+
+  .Started {
+    @apply fill-green-200;
+  }
+
+  .Completed {
+    @apply fill-green-200;
+  }
+
+  .Fired {
+    @apply fill-green-200;
+  }
+
+  .Signaled {
+    @apply fill-green-200;
+  }
+
+  .Failed {
+    @apply fill-green-200;
+  }
+
+  .Terminated {
+    @apply fill-green-200;
+  }
+
+  .TimedOut {
+    @apply fill-green-200;
+  }
+
+  .Canceled {
+    @apply fill-green-200;
+  }
+
+  .ContinuedAsNew {
+    @apply fill-green-200;
+  }
+</style>
diff --git a/src/lib/components/workflow/relationships/workflow-family-tree.svelte b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
new file mode 100644
index 000000000..f6575a15d
--- /dev/null
+++ b/src/lib/components/workflow/relationships/workflow-family-tree.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import ToggleSwitch from '$lib/holocene/toggle-switch.svelte';
+  import ZoomSvg from '$lib/holocene/zoom-svg.svelte';
+  import { translate } from '$lib/i18n/translate';
+  import type { RootNode } from '$lib/services/workflow-service';
+  import type { WorkflowExecution } from '$lib/types/workflows';
+
+  import WorkflowFamilyNodeDescription from './workflow-family-node-description.svelte';
+  import WorkflowFamilyNodeTree from './workflow-family-node-tree.svelte';
+
+  export let root: RootNode;
+
+  let expandAll = false;
+  let activeWorkflow: WorkflowExecution | undefined = undefined;
+
+  let openRuns = new Map<number, string>();
+
+  const onExpandAll = () => {
+    expandAll = !expandAll;
+  };
+
+  const onNodeClick = (node: RootNode, generation: number) => {
+    const newRuns = new Map(openRuns);
+    const highestGeneration = Math.max(...Array.from(newRuns.keys()));
+
+    if (openRuns.get(generation) === node.workflow.runId) {
+      newRuns.set(generation, '');
+    } else {
+      newRuns.set(generation, node.workflow.runId);
+    }
+
+    if (generation < highestGeneration) {
+      for (let i = generation + 1; i <= highestGeneration; i++) {
+        newRuns.delete(i);
+      }
+    }
+
+    openRuns = newRuns;
+    activeWorkflow = node.workflow;
+  };
+</script>
+
+<div class="flex flex-col bg-primary">
+  <div
+    class="relative z-30 w-full overflow-hidden border-b border-subtle bg-primary lg:sticky lg:top-12"
+  >
+    <ZoomSvg
+      initialZoom={2}
+      maxZoomOut={5}
+      maxZoomIn={0.25}
+      containerHeight={240}
+      let:width
+      let:height
+      let:zoomLevel
+    >
+      <div class="flex py-4" slot="controls">
+        <ToggleSwitch
+          label={translate('common.view-all')}
+          labelPosition="left"
+          id="autorefresh"
+          checked={expandAll}
+          on:change={onExpandAll}
+        />
+      </div>
+      <WorkflowFamilyNodeTree
+        {root}
+        {width}
+        {height}
+        {zoomLevel}
+        {onNodeClick}
+        {expandAll}
+        {openRuns}
+        {activeWorkflow}
+      />
+    </ZoomSvg>
+  </div>
+  <div class="flex h-auto w-full flex-col overflow-auto bg-secondary text-base">
+    <WorkflowFamilyNodeDescription
+      {root}
+      {expandAll}
+      {onNodeClick}
+      {activeWorkflow}
+      {openRuns}
+    />
+  </div>
+</div>
diff --git a/src/lib/components/workflow/workflow-relationships-old.svelte b/src/lib/components/workflow/workflow-relationships-old.svelte
new file mode 100644
index 000000000..078ce85be
--- /dev/null
+++ b/src/lib/components/workflow/workflow-relationships-old.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  import { fetchAllChildWorkflows } from '$lib/services/workflow-service';
+  import { fullEventHistory } from '$lib/stores/events';
+  import { namespaces } from '$lib/stores/namespaces';
+  import { workflowRun } from '$lib/stores/workflow-run';
+  import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
+
+  import ChildWorkflowsTable from './child-workflows-table.svelte';
+  import FirstPreviousNextWorkflowTable from './first-previous-next-workflow-table.svelte';
+  import LiveChildWorkflowsTable from './live-child-workflows-table.svelte';
+  import ParentWorkflowTable from './parent-workflow-table.svelte';
+  import SchedulerTable from './scheduler-table.svelte';
+
+  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
+  $: ({ workflow } = $workflowRun);
+
+  $: workflowRelationships = getWorkflowRelationships(
+    workflow,
+    $fullEventHistory,
+    $namespaces,
+  );
+
+  $: ({
+    hasChildren,
+    first,
+    parent,
+    parentNamespaceName,
+    children,
+    next,
+    previous,
+    scheduleId,
+  } = workflowRelationships);
+</script>
+
+<div class="flex flex-col gap-4 px-2 py-4 md:px-4 lg:px-8">
+  <div class="flex w-full flex-wrap gap-4">
+    {#if scheduleId}
+      <SchedulerTable {scheduleId} {namespace} />
+    {/if}
+    {#if parent}
+      <ParentWorkflowTable {parent} {parentNamespaceName} {namespace} />
+    {/if}
+    {#if first || previous || next}
+      <FirstPreviousNextWorkflowTable
+        {first}
+        {previous}
+        {next}
+        workflow={workflowId}
+        {namespace}
+      />
+    {/if}
+  </div>
+  {#await fetchAllChildWorkflows(namespace, workflowId, runId) then liveChildren}
+    {#if liveChildren.length}
+      <LiveChildWorkflowsTable children={liveChildren} />
+    {:else if hasChildren}
+      <ChildWorkflowsTable
+        {children}
+        pendingChildren={$workflowRun.workflow.pendingChildren}
+        namespace={$page.params.namespace}
+      />
+    {/if}
+  {/await}
+</div>
diff --git a/src/lib/components/workflow/workflow-relationships.svelte b/src/lib/components/workflow/workflow-relationships.svelte
index 22c8c7020..5368676dc 100644
--- a/src/lib/components/workflow/workflow-relationships.svelte
+++ b/src/lib/components/workflow/workflow-relationships.svelte
@@ -1,78 +1,61 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-
   import { page } from '$app/stores';
 
-  import ChildWorkflowsTable from '$lib/components/workflow/child-workflows-table.svelte';
+  import Loading from '$lib/holocene/loading.svelte';
   import { translate } from '$lib/i18n/translate';
-  import { fetchAllChildWorkflows } from '$lib/services/workflow-service';
+  import { fetchAllRootWorkflows } from '$lib/services/workflow-service';
   import { fullEventHistory } from '$lib/stores/events';
   import { namespaces } from '$lib/stores/namespaces';
   import { workflowRun } from '$lib/stores/workflow-run';
-  import type { WorkflowExecution } from '$lib/types/workflows';
   import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
 
-  import FirstPreviousNextWorkflowTable from './first-previous-next-workflow-table.svelte';
-  import LiveChildWorkflowsTable from './live-child-workflows-table.svelte';
-  import ParentWorkflowTable from './parent-workflow-table.svelte';
-  import SchedulerTable from './scheduler-table.svelte';
+  import ContinueAsNewTree from './relationships/continue-as-new-tree.svelte';
+  import ScheduleTree from './relationships/schedule-tree.svelte';
+  import WorkflowFamilyTree from './relationships/workflow-family-tree.svelte';
+  import WorkflowRelationshipsOld from './workflow-relationships-old.svelte';
 
-  $: ({ workflow: workflowId, run: runId, namespace } = $page.params);
+  $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
   $: ({ workflow } = $workflowRun);
 
-  let liveChildren: WorkflowExecution[] = [];
-
-  onMount(async () => {
-    liveChildren = await fetchAllChildWorkflows(namespace, workflowId, runId);
-  });
+  $: rootWorkflowId = workflow.rootExecution.workflowId;
+  $: rootRunId = workflow.rootExecution.runId;
 
   $: workflowRelationships = getWorkflowRelationships(
     workflow,
     $fullEventHistory,
     $namespaces,
   );
-  $: ({
-    hasChildren,
-    hasRelationships,
-    first,
-    parent,
-    parentNamespaceName,
-    children,
-    next,
-    previous,
-    scheduleId,
-  } = workflowRelationships);
+  $: ({ hasRelationships, first, next, previous, scheduleId } =
+    workflowRelationships);
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-4 pb-12">
   {#if hasRelationships}
-    <div class="flex w-full flex-wrap gap-4">
-      {#if scheduleId}
-        <SchedulerTable {scheduleId} {namespace} />
-      {/if}
-      {#if parent}
-        <ParentWorkflowTable {parent} {parentNamespaceName} {namespace} />
-      {/if}
-      {#if first || previous || next}
-        <FirstPreviousNextWorkflowTable
-          {first}
-          {previous}
-          {next}
-          workflow={workflowId}
-          {namespace}
-        />
-      {/if}
+    <div class="flex w-full flex-col justify-center gap-4">
+      {#await fetchAllRootWorkflows(namespace, rootWorkflowId, rootRunId)}
+        <Loading />
+      {:then root}
+        {#if root && !!root.children.length}
+          <WorkflowFamilyTree {root} />
+        {/if}
+        {#if scheduleId}
+          <ScheduleTree {scheduleId} current={runId} {workflowId} {namespace} />
+        {/if}
+        {#if first || previous || next}
+          <ContinueAsNewTree
+            {first}
+            {previous}
+            {next}
+            current={runId}
+            {workflowId}
+            {namespace}
+          />
+        {/if}
+      {:catch}
+        <WorkflowRelationshipsOld />
+      {/await}
     </div>
-    {#if liveChildren.length}
-      <LiveChildWorkflowsTable children={liveChildren} />
-    {:else if hasChildren}
-      <ChildWorkflowsTable
-        {children}
-        pendingChildren={$workflowRun.workflow.pendingChildren}
-        namespace={$page.params.namespace}
-      />
-    {/if}
   {:else}
-    <p>{translate('workflows.no-relationships')}</p>
+    <h4 class="px-8 py-4">{translate('workflows.no-relationships')}</h4>
   {/if}
 </div>
diff --git a/src/lib/holocene/icon/paths.ts b/src/lib/holocene/icon/paths.ts
index 740c1388a..ef52a3d98 100644
--- a/src/lib/holocene/icon/paths.ts
+++ b/src/lib/holocene/icon/paths.ts
@@ -92,6 +92,7 @@ import summary from './svg/summary.svelte';
 import sun from './svg/sun.svelte';
 import support from './svg/support.svelte';
 import table from './svg/table.svelte';
+import target from './svg/target.svelte';
 import temporalLogo from './svg/temporal-logo.svelte';
 import terminal from './svg/terminal.svelte';
 import timeline from './svg/timeline.svelte';
@@ -204,6 +205,7 @@ export const icons = {
   support,
   'spinner-solid': spinnerSolid,
   table,
+  target,
   'temporal-logo': temporalLogo,
   terminal,
   timeline,
diff --git a/src/lib/holocene/icon/svg/target.svelte b/src/lib/holocene/icon/svg/target.svelte
new file mode 100644
index 000000000..a7a6dc813
--- /dev/null
+++ b/src/lib/holocene/icon/svg/target.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Svg from '../svg.svelte';
+</script>
+
+<Svg {...$$props}>
+  <circle stroke="currentColor" stroke-width="1.5" cx="12" cy="12" r="9" />
+  <circle stroke="currentColor" stroke-width="1.5" cx="12" cy="12" r="5" />
+  <line
+    x1="12"
+    x2="12"
+    y1="0"
+    y2="11"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+  <line
+    x1="12"
+    x2="12"
+    y1="13"
+    y2="24"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+  <line
+    x1="0"
+    x2="11"
+    y1="12"
+    y2="12"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+  <line
+    x1="13"
+    x2="24"
+    y1="12"
+    y2="12"
+    stroke="currentColor"
+    stroke-width="1.5"
+  />
+</Svg>
diff --git a/src/lib/holocene/zoom-svg.svelte b/src/lib/holocene/zoom-svg.svelte
new file mode 100644
index 000000000..f80a694ad
--- /dev/null
+++ b/src/lib/holocene/zoom-svg.svelte
@@ -0,0 +1,129 @@
+<script lang="ts">
+  import Button from './button.svelte';
+  import Tooltip from './tooltip.svelte';
+
+  export let containerHeight = 600;
+  export let initialZoom = 1;
+  export let maxZoomIn = 0.25;
+  export let maxZoomOut = 2.5;
+  export let width = 600;
+  export let height = 400;
+  export let zoomable = true;
+  export let pannable = true;
+
+  let zoomLevel = initialZoom;
+
+  let svg;
+
+  $: viewBox = {
+    x: 0,
+    y: 0,
+    width,
+    height,
+  };
+
+  let isPanning = false;
+  let startX = 0;
+  let startY = 0;
+  let panOffsetX = 0;
+  let panOffsetY = 0;
+
+  const handleWheel = (event: WheelEvent) => {
+    if (!zoomable) return;
+    event.preventDefault();
+
+    const rect = svg.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+
+    const zoomAmount = event.deltaY * 0.001;
+    let newZoomLevel = zoomLevel + zoomAmount;
+
+    if (newZoomLevel < maxZoomIn || newZoomLevel > maxZoomOut) return;
+
+    const zoomRatio = newZoomLevel / zoomLevel;
+    const newWidth = viewBox.width * zoomRatio;
+    const newHeight = viewBox.height * zoomRatio;
+
+    viewBox.x = mouseX - (mouseX - viewBox.x) * zoomRatio;
+    viewBox.y = mouseY - (mouseY - viewBox.y) * zoomRatio;
+    viewBox.width = newWidth;
+    viewBox.height = newHeight;
+
+    zoomLevel = newZoomLevel;
+  };
+
+  function handleMouseDown(event: MouseEvent) {
+    if (!pannable) return;
+    isPanning = true;
+    startX = event.clientX;
+    startY = event.clientY;
+    panOffsetX = viewBox.x;
+    panOffsetY = viewBox.y;
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (!isPanning) return;
+
+    const dx = (startX - event.clientX) * (viewBox.width / svg.clientWidth);
+    const dy = (startY - event.clientY) * (viewBox.height / svg.clientHeight);
+
+    viewBox.x = panOffsetX + dx;
+    viewBox.y = panOffsetY + dy;
+  }
+
+  function handleMouseUp() {
+    isPanning = false;
+  }
+
+  function handleMouseLeave() {
+    isPanning = false;
+  }
+
+  function onCenter() {
+    viewBox.x = 0;
+    viewBox.y = 0;
+    viewBox.width = width;
+    viewBox.height = height;
+    zoomLevel = initialZoom;
+  }
+</script>
+
+<div
+  class="relative overflow-hidden"
+  bind:clientWidth={width}
+  bind:clientHeight={height}
+  style="height: {containerHeight}px"
+>
+  <div class="absolute right-4 top-4 z-20 flex items-center gap-2">
+    <slot name="controls" />
+    <Tooltip text="Center" bottom>
+      <Button
+        class="cursor-pointer"
+        variant="secondary"
+        size="sm"
+        leadingIcon="target"
+        on:click={() => {
+          onCenter();
+        }}
+      />
+    </Tooltip>
+  </div>
+  <svg
+    role="presentation"
+    bind:this={svg}
+    viewBox="{viewBox.x} {viewBox.y} {viewBox.width} {viewBox.height}"
+    {width}
+    {height}
+    class="relative select-none {$$restProps.class}"
+    class:cursor-grab={pannable}
+    class:active:cursor-grabbing={pannable}
+    on:wheel={handleWheel}
+    on:mousedown={handleMouseDown}
+    on:mousemove={handleMouseMove}
+    on:mouseup={handleMouseUp}
+    on:mouseleave={handleMouseLeave}
+  >
+    <slot {width} {height} {zoomLevel} />
+  </svg>
+</div>
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index 8b873c250..c1e56f52f 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -158,6 +158,7 @@ export const Strings = {
   'auto-refresh': 'Auto refresh',
   'auto-refresh-tooltip': '{{ interval }} second page refresh',
   'view-more': 'View More...',
+  'view-all': 'View All',
   'view-all-runs': 'View All Runs',
   'more-options': 'More options',
   download: 'Download',
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index af59dbff4..9526cadc7 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -146,6 +146,7 @@ export const Strings = {
   'parent-workflow': 'Parent Workflow',
   'first-execution': 'First Execution',
   'previous-execution': 'Previous Execution',
+  'current-execution': 'Current Execution',
   'next-execution': 'Next Execution',
   'child-id': 'Child Workflow ID',
   'child-run-id': 'Child Run ID',
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index c06873da3..6fddd3dbb 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -19,12 +19,10 @@
   import Tabs from '$lib/holocene/tab/tabs.svelte';
   import { translate } from '$lib/i18n/translate';
   import { fullEventHistory } from '$lib/stores/events';
-  import { namespaces } from '$lib/stores/namespaces';
   import { resetWorkflows } from '$lib/stores/reset-workflows';
   import { workflowRun } from '$lib/stores/workflow-run';
   import { workflowsSearchParams } from '$lib/stores/workflows';
   import { isCancelInProgress } from '$lib/utilities/cancel-in-progress';
-  import { getWorkflowRelationships } from '$lib/utilities/get-workflow-relationships';
   import { has } from '$lib/utilities/has';
   import { pathMatches } from '$lib/utilities/path-matches';
   import {
@@ -59,11 +57,6 @@
   $: workflowUsesVersioning =
     workflow?.assignedBuildId ??
     workflow?.mostRecentWorkerVersionStamp?.useVersioning;
-  $: workflowRelationships = getWorkflowRelationships(
-    workflow,
-    $fullEventHistory,
-    $namespaces,
-  );
 
   $: summary = $workflowRun?.userMetadata?.summary;
   $: details = $workflowRun?.userMetadata?.details;
@@ -173,7 +166,7 @@
       {/if}
     </AccordionLight>
   {/if}
-  <WorkflowDetails />
+  <WorkflowDetails {workflow} />
   {#if cancelInProgress}
     <div in:fly={{ duration: 200, delay: 100 }}>
       <Alert
@@ -222,6 +215,15 @@
           {workflow?.historyEvents}
         </Badge>
       </Tab>
+      <Tab
+        label={translate('workflows.relationships')}
+        id="relationships-tab"
+        href={routeForRelationships(routeParameters)}
+        active={pathMatches(
+          $page.url.pathname,
+          routeForRelationships(routeParameters),
+        )}
+      ></Tab>
       <Tab
         label={translate('workflows.workers-tab')}
         id="workers-tab"
@@ -235,19 +237,6 @@
           {workers?.pollers?.length}
         </Badge>
       </Tab>
-      <Tab
-        label={translate('workflows.relationships')}
-        id="relationships-tab"
-        href={routeForRelationships(routeParameters)}
-        active={pathMatches(
-          $page.url.pathname,
-          routeForRelationships(routeParameters),
-        )}
-      >
-        <Badge type="primary" class="px-2 py-0"
-          >{workflowRelationships.relationshipCount}</Badge
-        >
-      </Tab>
       <Tab
         label={translate('workflows.pending-activities-tab')}
         id="pending-activities-tab"
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index 6feb1d045..010045509 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -58,7 +58,7 @@
   }
 </script>
 
-<div class="flex flex-col gap-0 px-8">
+<div class="flex flex-col gap-0 px-2 pt-4 md:px-4 lg:px-8">
   <WorkflowCallStackError />
   <div class="flex flex-col gap-2">
     <InputAndResults />
@@ -80,7 +80,7 @@
     </div>
   </div>
 </div>
-<div class="px-8 pb-24">
+<div class="px-2 pb-24 md:px-4 lg:px-8">
   <div class="flex w-full flex-col border border-subtle">
     <TimelineGraph
       {workflow}
diff --git a/src/lib/layouts/workflow-padded-layout.svelte b/src/lib/layouts/workflow-padded-layout.svelte
index ecc652ad7..39b6bd689 100644
--- a/src/lib/layouts/workflow-padded-layout.svelte
+++ b/src/lib/layouts/workflow-padded-layout.svelte
@@ -1,3 +1,3 @@
-<div class="h-full px-8 pb-16">
+<div class="h-full px-2 pb-16 pt-4 md:px-4 lg:px-8">
   <slot />
 </div>
diff --git a/src/lib/layouts/workflow-run-layout.svelte b/src/lib/layouts/workflow-run-layout.svelte
index 716affb9c..bf5059666 100644
--- a/src/lib/layouts/workflow-run-layout.svelte
+++ b/src/lib/layouts/workflow-run-layout.svelte
@@ -219,7 +219,7 @@
     class="absolute bottom-0 left-0 right-0 {$viewDataEncoderSettings
       ? 'top-[540px]'
       : 'top-0'}
-    } flex h-full flex-col gap-4"
+   flex h-full flex-col"
   >
     {#if workflowError}
       <WorkflowError error={workflowError} />
diff --git a/src/lib/models/__snapshots__/workflow-execution.test.ts.snap b/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
index 6397028c8..cdc65db89 100644
--- a/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
+++ b/src/lib/models/__snapshots__/workflow-execution.test.ts.snap
@@ -27,6 +27,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "346e7a24-c660-4f91-a777-ffe3274d8144",
   "searchAttributes": {
     "indexedFields": {
@@ -75,6 +76,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "202dcff6-7f35-4c65-995c-bcadce524fb1",
   "searchAttributes": {
     "indexedFields": {
@@ -120,6 +122,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "7e00b341-c579-4bb5-9e28-810d34ef4329",
   "searchAttributes": {
     "indexedFields": {
@@ -190,6 +193,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
   "searchAttributes": {
     "indexedFields": {
@@ -269,6 +273,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "16c5fbe5-f82d-43c1-acbc-18c65c449ace",
   "searchAttributes": {
     "indexedFields": {
@@ -323,6 +328,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
     "startedTime": null,
     "state": "Scheduled",
   },
+  "rootExecution": undefined,
   "runId": "445a17cb-6cb4-4508-bc59-187d08c6c6e2",
   "searchAttributes": {
     "indexedFields": {
@@ -369,6 +375,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "346e7a24-c660-4f91-a777-ffe3274d8144",
     "searchAttributes": {
       "indexedFields": {
@@ -411,6 +418,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "202dcff6-7f35-4c65-995c-bcadce524fb1",
     "searchAttributes": {
       "indexedFields": {
@@ -453,6 +461,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "7e00b341-c579-4bb5-9e28-810d34ef4329",
     "searchAttributes": {
       "indexedFields": {
@@ -491,6 +500,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
     "searchAttributes": {
       "indexedFields": {
@@ -533,6 +543,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "dfd4039d-4bc0-4864-9a24-85d136814977",
     "searchAttributes": {
       "indexedFields": {
@@ -575,6 +586,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "16c5fbe5-f82d-43c1-acbc-18c65c449ace",
     "searchAttributes": {
       "indexedFields": {
@@ -617,6 +629,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "445a17cb-6cb4-4508-bc59-187d08c6c6e2",
     "searchAttributes": {
       "indexedFields": {
diff --git a/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap b/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
index a718e1540..4d77029e4 100644
--- a/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
+++ b/src/lib/models/__snapshots__/workflow-execution.write-disabled.test.ts.snap
@@ -27,6 +27,7 @@ exports[`toWorkflowExecution > should match the snapshot for Canceled workflows
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "346e7a24-c660-4f91-a777-ffe3274d8144",
   "searchAttributes": {
     "indexedFields": {
@@ -75,6 +76,7 @@ exports[`toWorkflowExecution > should match the snapshot for Completed workflows
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "202dcff6-7f35-4c65-995c-bcadce524fb1",
   "searchAttributes": {
     "indexedFields": {
@@ -120,6 +122,7 @@ exports[`toWorkflowExecution > should match the snapshot for Failed workflows 1`
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "7e00b341-c579-4bb5-9e28-810d34ef4329",
   "searchAttributes": {
     "indexedFields": {
@@ -190,6 +193,7 @@ exports[`toWorkflowExecution > should match the snapshot for Running workflows 1
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
   "searchAttributes": {
     "indexedFields": {
@@ -269,6 +273,7 @@ exports[`toWorkflowExecution > should match the snapshot for Terminated workflow
   "pendingChildren": [],
   "pendingNexusOperations": [],
   "pendingWorkflowTask": null,
+  "rootExecution": undefined,
   "runId": "16c5fbe5-f82d-43c1-acbc-18c65c449ace",
   "searchAttributes": {
     "indexedFields": {
@@ -323,6 +328,7 @@ exports[`toWorkflowExecution > should match the snapshot for TimedOut workflows
     "startedTime": null,
     "state": "Scheduled",
   },
+  "rootExecution": undefined,
   "runId": "445a17cb-6cb4-4508-bc59-187d08c6c6e2",
   "searchAttributes": {
     "indexedFields": {
@@ -369,6 +375,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "346e7a24-c660-4f91-a777-ffe3274d8144",
     "searchAttributes": {
       "indexedFields": {
@@ -411,6 +418,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "202dcff6-7f35-4c65-995c-bcadce524fb1",
     "searchAttributes": {
       "indexedFields": {
@@ -453,6 +461,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "7e00b341-c579-4bb5-9e28-810d34ef4329",
     "searchAttributes": {
       "indexedFields": {
@@ -491,6 +500,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "2a7ba421-f74b-4b8b-b9d8-e6e30e4caac7",
     "searchAttributes": {
       "indexedFields": {
@@ -533,6 +543,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "dfd4039d-4bc0-4864-9a24-85d136814977",
     "searchAttributes": {
       "indexedFields": {
@@ -575,6 +586,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "16c5fbe5-f82d-43c1-acbc-18c65c449ace",
     "searchAttributes": {
       "indexedFields": {
@@ -617,6 +629,7 @@ exports[`toWorkflowExecutions > should match the snapshot 1`] = `
     "pendingChildren": [],
     "pendingNexusOperations": [],
     "pendingWorkflowTask": undefined,
+    "rootExecution": undefined,
     "runId": "445a17cb-6cb4-4508-bc59-187d08c6c6e2",
     "searchAttributes": {
       "indexedFields": {
diff --git a/src/lib/models/workflow-execution.ts b/src/lib/models/workflow-execution.ts
index 9b468c5ed..2f649b97c 100644
--- a/src/lib/models/workflow-execution.ts
+++ b/src/lib/models/workflow-execution.ts
@@ -115,6 +115,7 @@ export const toWorkflowExecution = (
     toPendingNexusOperations(response?.pendingNexusOperations);
   const pendingWorkflowTask = response?.pendingWorkflowTask;
   const callbacks = toCallbacks(response?.callbacks);
+  const rootExecution = response.workflowExecutionInfo?.rootExecution;
 
   let summary;
   let details;
@@ -135,6 +136,7 @@ export const toWorkflowExecution = (
     historySizeBytes,
     searchAttributes,
     memo,
+    rootExecution,
     url,
     taskQueue,
     assignedBuildId,
diff --git a/src/lib/services/workflow-service.ts b/src/lib/services/workflow-service.ts
index adc972fe0..dc76dd2f6 100644
--- a/src/lib/services/workflow-service.ts
+++ b/src/lib/services/workflow-service.ts
@@ -50,6 +50,7 @@ import {
   isForbidden,
   isUnauthorized,
 } from '$lib/utilities/handle-error';
+import { paginated } from '$lib/utilities/paginated';
 import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
 import { toListWorkflowQuery } from '$lib/utilities/query/list-workflow-query';
 import type { ErrorCallback } from '$lib/utilities/request-from-api';
@@ -661,3 +662,93 @@ export const fetchInitialValuesForStartWorkflow = async ({
     return emptyValues;
   }
 };
+
+export interface RootNode {
+  workflow: WorkflowExecution;
+  children: RootNode[];
+  rootPaths: { runId: string; workflowId: string }[];
+}
+
+const buildRoots = (
+  root: WorkflowExecution,
+  workflows: WorkflowExecution[],
+) => {
+  const rootMap: RootNode = {
+    workflow: root,
+    children: [],
+    rootPaths: [{ runId: root.runId, workflowId: root.id }],
+  };
+
+  const getOrCreateNodes = (node: RootNode, children: WorkflowExecution[]) => {
+    if (children?.length) {
+      node.children = children.map((wf) => ({
+        workflow: wf,
+        children: [],
+        rootPaths: [...node.rootPaths, { runId: wf.runId, workflowId: wf.id }],
+      }));
+      node.children.forEach((child) => {
+        const nodeChildren = workflows.filter(
+          (w) =>
+            w?.parent?.workflowId === child.workflow.id &&
+            w?.parent?.runId === child.workflow.runId,
+        );
+        getOrCreateNodes(child, nodeChildren);
+      });
+    } else {
+      node.children = [];
+    }
+  };
+
+  const rootChildren = workflows.filter(
+    (w) => w?.parent?.workflowId === root.id && w?.parent?.runId === root.runId,
+  );
+
+  getOrCreateNodes(rootMap, rootChildren);
+
+  return rootMap;
+};
+
+export async function fetchAllRootWorkflows(
+  namespace: string,
+  rootWorkflowId: string,
+  rootRunId?: string,
+): Promise<RootNode | undefined> {
+  let query = `RootWorkflowId = "${rootWorkflowId}"`;
+  if (rootRunId) {
+    query += ` AND RootRunId = "${rootRunId}"`;
+  }
+
+  const root = await fetchWorkflow({
+    namespace,
+    workflowId: rootWorkflowId,
+    runId: rootRunId,
+  });
+  const workflows = await fetchAllPaginatedWorkflows(namespace, { query });
+  return buildRoots(root?.workflow, workflows);
+}
+
+export const fetchAllPaginatedWorkflows = async (
+  namespace: string,
+  parameters: ValidWorkflowParameters,
+  request = fetch,
+  archived = false,
+): Promise<WorkflowExecution[]> => {
+  const rawQuery =
+    parameters.query || toListWorkflowQuery(parameters, archived);
+  let query: string;
+  try {
+    query = decodeURIComponent(rawQuery);
+  } catch {
+    query = rawQuery;
+  }
+
+  const route = routeForApi('workflows', { namespace });
+  const { executions } = await paginated(async (token: string) => {
+    return requestFromAPI<ListWorkflowExecutionsResponse>(route, {
+      token,
+      request,
+      params: { query },
+    });
+  });
+  return toWorkflowExecutions({ executions });
+};
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index e52f56445..e2dcbf0a5 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -76,7 +76,7 @@ const temporal = plugin(
       },
       '.surface-interactive': {
         backgroundColor: css('--color-interactive-surface'),
-        color: css('--color-text-primary'),
+        color: css('--color-text-white'),
         '&:focus-visible': {
           backgroundColor: css('--color-interactive-hover'),
         },
diff --git a/src/lib/types/workflows.ts b/src/lib/types/workflows.ts
index a7f57e5ff..aec65d6c5 100644
--- a/src/lib/types/workflows.ts
+++ b/src/lib/types/workflows.ts
@@ -162,6 +162,7 @@ export type WorkflowExecution = {
   assignedBuildId?: string;
   searchAttributes?: WorkflowSearchAttributes;
   memo: Memo;
+  rootExecution?: WorkflowIdentifier;
   pendingChildren: PendingChildren[];
   pendingNexusOperations: PendingNexusOperation[];
   pendingActivities: PendingActivity[];
diff --git a/src/lib/utilities/decode-payload.ts b/src/lib/utilities/decode-payload.ts
index 7b871ff29..d34f2c335 100644
--- a/src/lib/utilities/decode-payload.ts
+++ b/src/lib/utilities/decode-payload.ts
@@ -10,7 +10,7 @@ import type {
   passAccessToken,
 } from '$lib/stores/data-encoder-config';
 import type { DownloadEventHistorySetting } from '$lib/stores/events';
-import type { Payloads, Payload as RawPayload } from '$lib/types';
+import type { Memo, Payloads, Payload as RawPayload } from '$lib/types';
 import type {
   EventAttribute,
   EventRequestMetadata,
@@ -232,13 +232,20 @@ export const isSinglePayload = (payload: unknown): boolean => {
 };
 
 export const cloneAllPotentialPayloadsWithCodec = async (
-  anyAttributes: PotentiallyDecodable | EventAttribute | WorkflowEvent | null,
+  anyAttributes:
+    | PotentiallyDecodable
+    | EventAttribute
+    | WorkflowEvent
+    | Memo
+    | null,
   namespace: string,
   settings: Settings,
   accessToken: string,
   decodeSetting: DownloadEventHistorySetting = 'readable',
   returnDataOnly: boolean = true,
-): Promise<PotentiallyDecodable | EventAttribute | WorkflowEvent | null> => {
+): Promise<
+  PotentiallyDecodable | EventAttribute | WorkflowEvent | Memo | null
+> => {
   if (!anyAttributes) return anyAttributes;
 
   const decode =
diff --git a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/relationships/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/relationships/+page.svelte
index 3913b2969..552406ac2 100644
--- a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/relationships/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/relationships/+page.svelte
@@ -4,7 +4,6 @@
   import PageTitle from '$lib/components/page-title.svelte';
   import WorkflowRelationships from '$lib/components/workflow/workflow-relationships.svelte';
   import { translate } from '$lib/i18n/translate';
-  import WorkflowPaddedLayout from '$lib/layouts/workflow-padded-layout.svelte';
 
   const workflow = $page.params.workflow;
 </script>
@@ -13,6 +12,4 @@
   title={`${translate('workflows.relationships')} | ${workflow}`}
   url={$page.url.href}
 />
-<WorkflowPaddedLayout>
-  <WorkflowRelationships />
-</WorkflowPaddedLayout>
+<WorkflowRelationships />