diff --git a/client/src/components/ActivityBar/ActivityBar.test.js b/client/src/components/ActivityBar/ActivityBar.test.js
index 1fbab6c98cad..8d1b7fc8bfb4 100644
--- a/client/src/components/ActivityBar/ActivityBar.test.js
+++ b/client/src/components/ActivityBar/ActivityBar.test.js
@@ -45,7 +45,7 @@ describe("ActivityBar", () => {
 
     beforeEach(async () => {
         const pinia = createTestingPinia({ stubActions: false });
-        activityStore = useActivityStore();
+        activityStore = useActivityStore("default");
         eventStore = useEventStore();
         wrapper = shallowMount(mountTarget, {
             localVue,
diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index cde4d7b190ad..5371d14f84fe 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faBell, faEllipsisH, faUserCog } from "@fortawesome/free-solid-svg-icons";
+import { watchImmediate } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import { computed, type Ref, ref, watch } from "vue";
+import { computed, type Ref, ref } from "vue";
 import { useRoute } from "vue-router/composables";
 import draggable from "vuedraggable";
 
 import { useConfig } from "@/composables/config";
-import { useHashedUserId } from "@/composables/hashedUserId";
 import { convertDropData } from "@/stores/activitySetup";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 import { useEventStore } from "@/stores/eventStore";
@@ -24,6 +26,35 @@ import NotificationsPanel from "@/components/Panels/NotificationsPanel.vue";
 import SettingsPanel from "@/components/Panels/SettingsPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
 
+const props = withDefaults(
+    defineProps<{
+        defaultActivities?: Activity[];
+        activityBarId?: string;
+        specialActivities?: Activity[];
+        showAdmin?: boolean;
+        optionsTitle?: string;
+        optionsTooltip?: string;
+        optionsHeading?: string;
+        optionsIcon?: IconDefinition;
+        optionsSearchPlaceholder?: string;
+        initialActivity?: string;
+        hidePanel?: boolean;
+    }>(),
+    {
+        defaultActivities: undefined,
+        activityBarId: "default",
+        specialActivities: () => [],
+        showAdmin: true,
+        optionsTitle: "More",
+        optionsHeading: "Additional Activities",
+        optionsIcon: () => faEllipsisH,
+        optionsSearchPlaceholder: "Search Activities",
+        optionsTooltip: "View additional activities",
+        initialActivity: undefined,
+        hidePanel: false,
+    }
+);
+
 // require user to long click before dragging
 const DRAG_DELAY = 50;
 
@@ -32,13 +63,30 @@ const { config, isConfigLoaded } = useConfig();
 const route = useRoute();
 const userStore = useUserStore();
 
-const { hashedUserId } = useHashedUserId();
-
 const eventStore = useEventStore();
-const activityStore = useActivityStore();
+const activityStore = useActivityStore(props.activityBarId);
+
+if (props.initialActivity) {
+    activityStore.toggledSideBar = props.initialActivity;
+}
+
+watchImmediate(
+    () => props.defaultActivities,
+    (defaults) => {
+        if (defaults) {
+            activityStore.overrideDefaultActivities(defaults);
+        } else {
+            activityStore.resetDefaultActivities();
+        }
+    }
+);
+
 const { isAdmin, isAnonymous } = storeToRefs(userStore);
 
-const emit = defineEmits(["dragstart"]);
+const emit = defineEmits<{
+    (e: "dragstart", dragItem: Activity | null): void;
+    (e: "activityClicked", activityId: string): void;
+}>();
 
 // activities from store
 const { activities } = storeToRefs(activityStore);
@@ -50,13 +98,10 @@ const dragItem: Ref<Activity | null> = ref(null);
 // drag state
 const isDragging = ref(false);
 
-// sync built-in activities with cached activities
-activityStore.sync();
-
 /**
  * Checks if the route of an activity is currently being visited and panels are collapsed
  */
-function isActiveRoute(activityTo: string) {
+function isActiveRoute(activityTo?: string | null) {
     return route.path === activityTo && isActiveSideBar("");
 }
 
@@ -64,16 +109,16 @@ function isActiveRoute(activityTo: string) {
  * Checks if a panel has been expanded
  */
 function isActiveSideBar(menuKey: string) {
-    return userStore.toggledSideBar === menuKey;
+    return activityStore.toggledSideBar === menuKey;
 }
 
-const isSideBarOpen = computed(() => userStore.toggledSideBar !== "");
+const isSideBarOpen = computed(() => activityStore.toggledSideBar !== "");
 
 /**
  * Checks if an activity that has a panel should have the `is-active` prop
  */
 function panelActivityIsActive(activity: Activity) {
-    return isActiveSideBar(activity.id) || (activity.to !== null && isActiveRoute(activity.to));
+    return isActiveSideBar(activity.id) || isActiveRoute(activity.to);
 }
 
 /**
@@ -123,25 +168,37 @@ function onDragOver(evt: MouseEvent) {
 /**
  * Tracks the state of activities which expand or collapse the sidepanel
  */
-function onToggleSidebar(toggle: string = "", to: string | null = null) {
+function toggleSidebar(toggle: string = "", to: string | null = null) {
     // if an activity's dedicated panel/sideBar is already active
     // but the route is different, don't collapse
     if (toggle && to && !(route.path === to) && isActiveSideBar(toggle)) {
         return;
     }
-    userStore.toggleSideBar(toggle);
+    activityStore.toggleSideBar(toggle);
 }
 
-watch(
-    () => hashedUserId.value,
-    () => {
-        activityStore.sync();
+function onActivityClicked(activity: Activity) {
+    if (activity.click) {
+        emit("activityClicked", activity.id);
+    } else {
+        toggleSidebar();
     }
-);
+}
+
+function setActiveSideBar(key: string) {
+    activityStore.toggledSideBar = key;
+}
+
+defineExpose({
+    isActiveSideBar,
+    setActiveSideBar,
+});
 </script>
 
 <template>
     <div class="d-flex">
+        <!-- while this warning is correct, it is hiding too many other errors -->
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
             class="activity-bar d-flex flex-column no-highlight"
             data-description="activity bar"
@@ -163,41 +220,44 @@ watch(
                         <div v-if="activity.visible && (activity.anonymous || !isAnonymous)">
                             <UploadItem
                                 v-if="activity.id === 'upload'"
-                                :id="`activity-${activity.id}`"
+                                :id="`${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip" />
                             <InteractiveItem
                                 v-else-if="activity.to && activity.id === 'interactivetools'"
-                                :id="`activity-${activity.id}`"
+                                :id="`${activity.id}`"
                                 :key="activity.id"
                                 :icon="activity.icon"
                                 :is-active="isActiveRoute(activity.to)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 :to="activity.to"
-                                @click="onToggleSidebar()" />
+                                @click="toggleSidebar()" />
                             <ActivityItem
                                 v-else-if="activity.id === 'admin' || activity.panel"
-                                :id="`activity-${activity.id}`"
+                                :id="`${activity.id}`"
                                 :key="activity.id"
+                                :activity-bar-id="props.activityBarId"
                                 :icon="activity.icon"
                                 :is-active="panelActivityIsActive(activity)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
                                 :to="activity.to || ''"
-                                @click="onToggleSidebar(activity.id, activity.to)" />
+                                @click="toggleSidebar(activity.id, activity.to)" />
                             <ActivityItem
-                                v-else-if="activity.to"
-                                :id="`activity-${activity.id}`"
+                                v-else
+                                :id="`${activity.id}`"
                                 :key="activity.id"
+                                :activity-bar-id="props.activityBarId"
                                 :icon="activity.icon"
                                 :is-active="isActiveRoute(activity.to)"
                                 :title="activity.title"
                                 :tooltip="activity.tooltip"
-                                :to="activity.to"
-                                @click="onToggleSidebar()" />
+                                :to="activity.to ?? undefined"
+                                :variant="activity.variant"
+                                @click="onActivityClicked(activity)" />
                         </div>
                     </div>
                 </draggable>
@@ -205,37 +265,71 @@ watch(
             <b-nav v-if="!isAnonymous" vertical class="activity-footer flex-nowrap p-1">
                 <NotificationItem
                     v-if="isConfigLoaded && config.enable_notification_system"
-                    id="activity-notifications"
-                    icon="bell"
+                    id="notifications"
+                    :icon="faBell"
                     :is-active="isActiveSideBar('notifications') || isActiveRoute('/user/notifications')"
                     title="Notifications"
-                    @click="onToggleSidebar('notifications')" />
+                    @click="toggleSidebar('notifications')" />
                 <ActivityItem
-                    id="activity-settings"
-                    icon="ellipsis-h"
+                    id="settings"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="props.optionsIcon"
                     :is-active="isActiveSideBar('settings')"
-                    title="More"
-                    tooltip="View additional activities"
-                    @click="onToggleSidebar('settings')" />
+                    :title="props.optionsTitle"
+                    :tooltip="props.optionsTooltip"
+                    @click="toggleSidebar('settings')" />
                 <ActivityItem
-                    v-if="isAdmin"
-                    id="activity-admin"
-                    icon="user-cog"
+                    v-if="isAdmin && showAdmin"
+                    id="admin"
+                    :activity-bar-id="props.activityBarId"
+                    :icon="faUserCog"
                     :is-active="isActiveSideBar('admin')"
                     title="Admin"
                     tooltip="Administer this Galaxy"
                     variant="danger"
-                    @click="onToggleSidebar('admin')" />
+                    @click="toggleSidebar('admin')" />
+                <template v-for="activity in props.specialActivities">
+                    <ActivityItem
+                        v-if="activity.panel"
+                        :id="`${activity.id}`"
+                        :key="activity.id"
+                        :activity-bar-id="props.activityBarId"
+                        :icon="activity.icon"
+                        :is-active="panelActivityIsActive(activity)"
+                        :title="activity.title"
+                        :tooltip="activity.tooltip"
+                        :to="activity.to || ''"
+                        :variant="activity.variant"
+                        @click="toggleSidebar(activity.id, activity.to)" />
+                    <ActivityItem
+                        v-else
+                        :id="`${activity.id}`"
+                        :key="activity.id"
+                        :activity-bar-id="props.activityBarId"
+                        :icon="activity.icon"
+                        :is-active="isActiveRoute(activity.to)"
+                        :title="activity.title"
+                        :tooltip="activity.tooltip"
+                        :to="activity.to ?? undefined"
+                        :variant="activity.variant"
+                        @click="onActivityClicked(activity)" />
+                </template>
             </b-nav>
         </div>
-        <FlexPanel v-if="isSideBarOpen" side="left" :collapsible="false">
+        <FlexPanel v-if="isSideBarOpen && !hidePanel" side="left" :collapsible="false">
             <ToolPanel v-if="isActiveSideBar('tools')" />
-            <InvocationsPanel v-else-if="isActiveSideBar('invocation')" />
+            <InvocationsPanel v-else-if="isActiveSideBar('invocation')" :activity-bar-id="props.activityBarId" />
             <VisualizationPanel v-else-if="isActiveSideBar('visualizations')" />
             <MultiviewPanel v-else-if="isActiveSideBar('multiview')" />
             <NotificationsPanel v-else-if="isActiveSideBar('notifications')" />
-            <SettingsPanel v-else-if="isActiveSideBar('settings')" />
+            <SettingsPanel
+                v-else-if="isActiveSideBar('settings')"
+                :activity-bar-id="props.activityBarId"
+                :heading="props.optionsHeading"
+                :search-placeholder="props.optionsSearchPlaceholder"
+                @activityClicked="(id) => emit('activityClicked', id)" />
             <AdminPanel v-else-if="isActiveSideBar('admin')" />
+            <slot name="side-panel" :is-active-side-bar="isActiveSideBar"></slot>
         </FlexPanel>
     </div>
 </template>
diff --git a/client/src/components/ActivityBar/ActivityItem.test.js b/client/src/components/ActivityBar/ActivityItem.test.js
index d4486230dda9..c1177158befa 100644
--- a/client/src/components/ActivityBar/ActivityItem.test.js
+++ b/client/src/components/ActivityBar/ActivityItem.test.js
@@ -1,3 +1,4 @@
+import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
 
@@ -12,6 +13,7 @@ describe("ActivityItem", () => {
         wrapper = mount(mountTarget, {
             propsData: {
                 id: "activity-test-id",
+                activityBarId: "activity-bar-test-id",
                 icon: "activity-test-icon",
                 indicator: 0,
                 progressPercentage: 0,
@@ -20,6 +22,7 @@ describe("ActivityItem", () => {
                 to: null,
                 tooltip: "activity-test-tooltip",
             },
+            pinia: createTestingPinia(),
             localVue,
             stubs: {
                 FontAwesomeIcon: true,
@@ -28,8 +31,7 @@ describe("ActivityItem", () => {
     });
 
     it("rendering", async () => {
-        const reference = wrapper.find("[id='activity-test-id']");
-        expect(reference.attributes().id).toBe("activity-test-id");
+        const reference = wrapper.find(".activity-item");
         expect(reference.text()).toBe("activity-test-title");
         expect(reference.find("[icon='activity-test-icon']").exists()).toBeTruthy();
         expect(reference.find(".progress").exists()).toBeFalsy();
@@ -45,7 +47,7 @@ describe("ActivityItem", () => {
     });
 
     it("rendering indicator", async () => {
-        const reference = wrapper.find("[id='activity-test-id']");
+        const reference = wrapper.find(".activity-item");
         const indicatorSelector = "[data-description='activity indicator']";
         const noindicator = reference.find(indicatorSelector);
         expect(noindicator.exists()).toBeFalsy();
diff --git a/client/src/components/ActivityBar/ActivityItem.vue b/client/src/components/ActivityBar/ActivityItem.vue
index 0586a1657f99..fa7e67d5e8c0 100644
--- a/client/src/components/ActivityBar/ActivityItem.vue
+++ b/client/src/components/ActivityBar/ActivityItem.vue
@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import type { Placement } from "@popperjs/core";
+import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
+import { type ActivityVariant, useActivityStore } from "@/stores/activityStore";
+import localize from "@/utils/localization";
+
 import TextShort from "@/components/Common/TextShort.vue";
 import Popper from "@/components/Popper/Popper.vue";
 
@@ -14,22 +21,23 @@ interface Option {
 
 export interface Props {
     id: string;
+    activityBarId: string;
     title?: string;
-    icon?: string | object;
+    icon?: IconDefinition;
     indicator?: number;
     isActive?: boolean;
     tooltip?: string;
-    tooltipPlacement?: string;
+    tooltipPlacement?: Placement;
     progressPercentage?: number;
     progressStatus?: string;
     options?: Option[];
     to?: string;
-    variant?: string;
+    variant?: ActivityVariant;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     title: undefined,
-    icon: "question",
+    icon: () => faQuestion,
     indicator: 0,
     isActive: false,
     options: undefined,
@@ -51,41 +59,44 @@ function onClick(evt: MouseEvent): void {
         router.push(props.to);
     }
 }
+
+const store = useActivityStore(props.activityBarId);
+const meta = computed(() => store.metaForId(props.id));
 </script>
 
 <template>
     <Popper reference-is="span" popper-is="span" :placement="tooltipPlacement">
         <template v-slot:reference>
-            <div :id="id" class="activity-item" @click="onClick">
-                <b-nav-item
-                    class="position-relative my-1 p-2"
-                    :class="{ 'nav-item-active': isActive }"
-                    :aria-label="title | l">
-                    <span v-if="progressStatus" class="progress">
-                        <div
-                            class="progress-bar notransition"
-                            :class="{
-                                'bg-danger': progressStatus === 'danger',
-                                'bg-success': progressStatus === 'success',
-                            }"
-                            :style="{
-                                width: `${Math.round(progressPercentage)}%`,
-                            }" />
-                    </span>
-                    <span class="position-relative" :class="`text-${variant}`">
-                        <div class="nav-icon">
-                            <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
-                                {{ Math.min(indicator, 99) }}
-                            </span>
-                            <FontAwesomeIcon :icon="icon" />
-                        </div>
-                        <TextShort v-if="title" :text="title" class="nav-title" />
+            <b-nav-item
+                :id="`activity-${id}`"
+                class="activity-item my-1 p-2"
+                :class="{ 'nav-item-active': isActive }"
+                :link-classes="`variant-${props.variant}`"
+                :aria-label="localize(title)"
+                :disabled="meta?.disabled"
+                @click="onClick">
+                <span v-if="progressStatus" class="progress">
+                    <div
+                        class="progress-bar notransition"
+                        :class="{
+                            'bg-danger': progressStatus === 'danger',
+                            'bg-success': progressStatus === 'success',
+                        }"
+                        :style="{
+                            width: `${Math.round(progressPercentage)}%`,
+                        }" />
+                </span>
+                <div class="nav-icon">
+                    <span v-if="indicator > 0" class="nav-indicator" data-description="activity indicator">
+                        {{ Math.min(indicator, 99) }}
                     </span>
-                </b-nav-item>
-            </div>
+                    <FontAwesomeIcon :icon="icon" />
+                </div>
+                <TextShort v-if="title" :text="title" class="nav-title" />
+            </b-nav-item>
         </template>
         <div class="text-center px-2 py-1">
-            <small v-if="tooltip">{{ tooltip | l }}</small>
+            <small v-if="tooltip">{{ localize(tooltip) }}</small>
             <small v-else>No tooltip available for this item</small>
             <div v-if="options" class="nav-options p-1">
                 <router-link v-for="(option, index) in options" :key="index" :to="option.value">
@@ -101,8 +112,25 @@ function onClick(evt: MouseEvent): void {
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
+.activity-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    &:deep(.variant-danger) {
+        color: $brand-danger;
+    }
+
+    &:deep(.variant-disabled) {
+        color: $text-light;
+    }
+}
+
 .nav-icon {
-    @extend .nav-item;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
     font-size: 1rem;
 }
 
@@ -121,13 +149,6 @@ function onClick(evt: MouseEvent): void {
     width: 1.2rem;
 }
 
-.nav-item {
-    display: flex;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-}
-
 .nav-item-active {
     border-radius: $border-radius-extralarge;
     background: $gray-300;
@@ -143,7 +164,9 @@ function onClick(evt: MouseEvent): void {
 }
 
 .nav-title {
-    @extend .nav-item;
+    position: relative;
+    display: flex;
+    justify-content: center;
     width: 4rem;
     margin-top: 0.5rem;
     font-size: 0.7rem;
diff --git a/client/src/components/ActivityBar/ActivitySettings.test.js b/client/src/components/ActivityBar/ActivitySettings.test.js
index 2fd33b00d02e..d40b35785650 100644
--- a/client/src/components/ActivityBar/ActivitySettings.test.js
+++ b/client/src/components/ActivityBar/ActivitySettings.test.js
@@ -2,8 +2,9 @@ import { createTestingPinia } from "@pinia/testing";
 import { mount } from "@vue/test-utils";
 import { PiniaVuePlugin } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
+import { nextTick } from "vue";
 
-import { Activities } from "@/stores/activitySetup";
+import { defaultActivities } from "@/stores/activitySetup";
 import { useActivityStore } from "@/stores/activityStore";
 
 import mountTarget from "./ActivitySettings.vue";
@@ -40,29 +41,30 @@ describe("ActivitySettings", () => {
 
     beforeEach(async () => {
         const pinia = createTestingPinia({ stubActions: false });
-        activityStore = useActivityStore();
-        activityStore.sync();
+        activityStore = useActivityStore(undefined);
         wrapper = mount(mountTarget, {
             localVue,
             pinia,
             props: {
                 query: "",
+                activityBarId: undefined,
             },
             stubs: {
-                icon: { template: "<div></div>" },
+                FontAwesomeIcon: { template: "<div></div>" },
             },
         });
+        await activityStore.sync();
     });
 
     it("availability of built-in activities", async () => {
         const items = wrapper.findAll(activityItemSelector);
-        const nOptional = Activities.filter((x) => x.optional).length;
+        const nOptional = defaultActivities.filter((x) => x.optional).length;
         expect(items.length).toBe(nOptional);
     });
 
     it("visible and optional activity", async () => {
         activityStore.setAll([testActivity("1")]);
-        await wrapper.vm.$nextTick();
+        await nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
         const checkbox = items.at(0).find("[title='Hide in Activity Bar']");
@@ -100,7 +102,7 @@ describe("ActivitySettings", () => {
         await wrapper.vm.$nextTick();
         const items = wrapper.findAll(activityItemSelector);
         expect(items.length).toBe(1);
-        const trash = items.at(0).find("[data-icon='trash']");
+        const trash = items.at(0).find("[data-description='delete activity']");
         expect(trash.exists()).toBeTruthy();
         expect(activityStore.getAll().length).toBe(1);
         trash.trigger("click");
diff --git a/client/src/components/ActivityBar/ActivitySettings.vue b/client/src/components/ActivityBar/ActivitySettings.vue
index fe2ecce28dd5..272c4304b938 100644
--- a/client/src/components/ActivityBar/ActivitySettings.vue
+++ b/client/src/components/ActivityBar/ActivitySettings.vue
@@ -1,35 +1,29 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSquare, faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
-import { faCheckSquare, faStar, faThumbtack, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+import { faStar, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { storeToRefs } from "pinia";
 import { computed, type ComputedRef } from "vue";
+import { useRouter } from "vue-router/composables";
 
-import { useActivityAction } from "@/composables/useActivityAction";
 import { type Activity, useActivityStore } from "@/stores/activityStore";
 
-library.add({
-    faCheckSquare,
-    faSquare,
-    faStar,
-    faStarRegular,
-    faTrash,
-    faThumbtack,
-});
-
 const props = defineProps<{
+    activityBarId: string;
     query: string;
 }>();
 
-const activityStore = useActivityStore();
-const { activities } = storeToRefs(activityStore);
-const activityAction = useActivityAction();
+const emit = defineEmits<{
+    (e: "activityClicked", activityId: string): void;
+}>();
+
+const activityStore = useActivityStore(props.activityBarId);
+
+const optionalActivities = computed(() => activityStore.activities.filter((a) => a.optional));
 
 const filteredActivities = computed(() => {
     if (props.query?.length > 0) {
         const queryLower = props.query.toLowerCase();
-        const results = activities.value.filter((a: Activity) => {
+        const results = optionalActivities.value.filter((a: Activity) => {
             const attributeValues = [a.title, a.description];
             for (const value of attributeValues) {
                 if (value.toLowerCase().indexOf(queryLower) !== -1) {
@@ -40,7 +34,7 @@ const filteredActivities = computed(() => {
         });
         return results;
     } else {
-        return activities.value;
+        return optionalActivities.value;
     }
 });
 
@@ -57,61 +51,76 @@ function onFavorite(activity: Activity) {
 function onRemove(activity: Activity) {
     activityStore.remove(activity.id);
 }
+
+const router = useRouter();
+
+function executeActivity(activity: Activity) {
+    if (activity.click) {
+        emit("activityClicked", activity.id);
+    }
+
+    if (activity.panel) {
+        activityStore.toggleSideBar(activity.id);
+    }
+
+    if (activity.to) {
+        router.push(activity.to);
+    }
+}
 </script>
 
 <template>
     <div class="activity-settings rounded no-highlight">
         <div v-if="foundActivities" class="activity-settings-content">
-            <div v-for="activity in filteredActivities" :key="activity.id">
-                <button
-                    v-if="activity.optional"
-                    class="activity-settings-item p-2 cursor-pointer"
-                    @click="activityAction.executeActivity(activity)">
-                    <div class="d-flex justify-content-between align-items-start">
-                        <span class="d-flex justify-content-between w-100">
-                            <span>
-                                <icon class="mr-1" :icon="activity.icon" />
-                                <span v-localize class="font-weight-bold">{{
-                                    activity.title || "No title available"
-                                }}</span>
-                            </span>
-                            <div>
-                                <BButton
-                                    v-if="activity.mutable"
-                                    v-b-tooltip.hover
-                                    data-description="delete activity"
-                                    size="sm"
-                                    title="Delete Activity"
-                                    variant="link"
-                                    @click.stop="onRemove(activity)">
-                                    <FontAwesomeIcon icon="fa-trash" fa-fw />
-                                </BButton>
-                                <BButton
-                                    v-if="activity.visible"
-                                    v-b-tooltip.hover
-                                    size="sm"
-                                    title="Hide in Activity Bar"
-                                    variant="link"
-                                    @click.stop="onFavorite(activity)">
-                                    <FontAwesomeIcon icon="fas fa-star" fa-fw />
-                                </BButton>
-                                <BButton
-                                    v-else
-                                    v-b-tooltip.hover
-                                    size="sm"
-                                    title="Show in Activity Bar"
-                                    variant="link"
-                                    @click.stop="onFavorite(activity)">
-                                    <FontAwesomeIcon icon="far fa-star" fa-fw />
-                                </BButton>
-                            </div>
+            <button
+                v-for="activity in filteredActivities"
+                :key="activity.id"
+                class="activity-settings-item p-2 cursor-pointer"
+                @click="executeActivity(activity)">
+                <div class="d-flex justify-content-between align-items-start">
+                    <span class="d-flex justify-content-between w-100">
+                        <span>
+                            <FontAwesomeIcon class="mr-1" :icon="activity.icon" />
+                            <span v-localize class="font-weight-bold">{{
+                                activity.title || "No title available"
+                            }}</span>
                         </span>
-                    </div>
-                    <div v-localize class="text-muted">
-                        {{ activity.description || "No description available" }}
-                    </div>
-                </button>
-            </div>
+                        <div>
+                            <BButton
+                                v-if="activity.mutable"
+                                v-b-tooltip.hover
+                                data-description="delete activity"
+                                size="sm"
+                                title="Delete Activity"
+                                variant="link"
+                                @click.stop="onRemove(activity)">
+                                <FontAwesomeIcon :icon="faTrash" fa-fw />
+                            </BButton>
+                            <BButton
+                                v-if="activity.visible"
+                                v-b-tooltip.hover
+                                size="sm"
+                                title="Hide in Activity Bar"
+                                variant="link"
+                                @click.stop="onFavorite(activity)">
+                                <FontAwesomeIcon :icon="faStar" fa-fw />
+                            </BButton>
+                            <BButton
+                                v-else
+                                v-b-tooltip.hover
+                                size="sm"
+                                title="Show in Activity Bar"
+                                variant="link"
+                                @click.stop="onFavorite(activity)">
+                                <FontAwesomeIcon :icon="faStarRegular" fa-fw />
+                            </BButton>
+                        </div>
+                    </span>
+                </div>
+                <div v-localize class="text-muted">
+                    {{ activity.description || "No description available" }}
+                </div>
+            </button>
         </div>
         <div v-else class="activity-settings-content">
             <b-alert v-localize class="py-1 px-2" show> No matching activities found. </b-alert>
diff --git a/client/src/components/ActivityBar/Items/InteractiveItem.vue b/client/src/components/ActivityBar/Items/InteractiveItem.vue
index 31b9324e93a0..e9e4756344a9 100644
--- a/client/src/components/ActivityBar/Items/InteractiveItem.vue
+++ b/client/src/components/ActivityBar/Items/InteractiveItem.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
 import { useEntryPointStore } from "@/stores/entryPointStore";
 
-import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+import ActivityItem from "@/components/ActivityBar/ActivityItem.vue";
 
 const { entryPoints } = storeToRefs(useEntryPointStore());
 
@@ -13,7 +14,7 @@ const totalCount = computed(() => entryPoints.value.length);
 export interface Props {
     id: string;
     title: string;
-    icon: string;
+    icon: IconDefinition;
     isActive: boolean;
     to: string;
 }
@@ -35,6 +36,7 @@ const tooltip = computed(() =>
     <ActivityItem
         v-if="totalCount > 0"
         :id="id"
+        :activity-bar-id="id"
         :icon="icon"
         :indicator="totalCount"
         :is-active="isActive"
diff --git a/client/src/components/ActivityBar/Items/NotificationItem.vue b/client/src/components/ActivityBar/Items/NotificationItem.vue
index 84e5a05bceda..1f1dde9110e3 100644
--- a/client/src/components/ActivityBar/Items/NotificationItem.vue
+++ b/client/src/components/ActivityBar/Items/NotificationItem.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
 import { useNotificationsStore } from "@/stores/notificationsStore";
 
-import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+import ActivityItem from "@/components/ActivityBar/ActivityItem.vue";
 
 const { totalUnreadCount } = storeToRefs(useNotificationsStore());
 
 export interface Props {
     id: string;
     title: string;
-    icon: string;
+    icon: IconDefinition;
     isActive: boolean;
 }
 
@@ -31,6 +32,7 @@ const tooltip = computed(() =>
 <template>
     <ActivityItem
         :id="id"
+        :activity-bar-id="'notifications'"
         :icon="icon"
         :indicator="totalUnreadCount"
         :is-active="isActive"
diff --git a/client/src/components/ActivityBar/Items/UploadItem.vue b/client/src/components/ActivityBar/Items/UploadItem.vue
index e5c2b357d0e7..6d5a6df9da64 100644
--- a/client/src/components/ActivityBar/Items/UploadItem.vue
+++ b/client/src/components/ActivityBar/Items/UploadItem.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { storeToRefs } from "pinia";
 import { onMounted } from "vue";
 
@@ -6,12 +7,12 @@ import { useGlobalUploadModal } from "@/composables/globalUploadModal.js";
 import { useUploadStore } from "@/stores/uploadStore";
 import Query from "@/utils/query-string-parsing.js";
 
-import ActivityItem from "components/ActivityBar/ActivityItem.vue";
+import ActivityItem from "@/components/ActivityBar/ActivityItem.vue";
 
 export interface Props {
     id: string;
     title: string;
-    icon: string;
+    icon: IconDefinition;
     tooltip: string;
 }
 
@@ -39,6 +40,7 @@ function onUploadModal() {
 <template>
     <ActivityItem
         :id="id"
+        :activity-bar-id="id"
         :title="title"
         :tooltip="tooltip"
         :icon="icon"
diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index 490c33de45d1..bbd9bc546646 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -2,15 +2,16 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { watchImmediate } from "@vueuse/core";
 import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
-import { onMounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
 
 import localize from "@/utils/localization";
 
 library.add(faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes);
 
 interface Props {
-    query?: string;
+    value?: string;
     delay?: number;
     loading?: boolean;
     placeholder?: string;
@@ -19,7 +20,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    query: "",
+    value: "",
     delay: 1000,
     loading: false,
     placeholder: "Enter your search term here.",
@@ -28,13 +29,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-    (e: "change", query: string): void;
+    (e: "input", value: string): void;
+    (e: "change", value: string): void;
     (e: "onToggle", showAdvanced: boolean): void;
 }>();
 
 const queryInput = ref<string>();
-const queryCurrent = ref<string>();
-const queryTimer = ref<any>(null);
+const queryTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 const titleClear = ref("Clear Search (esc)");
 const titleAdvanced = ref("Toggle Advanced Search");
 const toolInput = ref<HTMLInputElement | null>(null);
@@ -57,16 +58,17 @@ function delayQuery(query: string) {
 }
 
 function setQuery(queryNew: string) {
-    clearTimer();
-
-    if (queryCurrent.value !== queryInput.value || queryCurrent.value !== queryNew) {
-        queryCurrent.value = queryInput.value = queryNew;
-        emit("change", queryCurrent.value);
-    }
+    emit("input", queryNew);
+    emit("change", queryNew);
 }
 
+watch(
+    () => queryInput.value,
+    () => delayQuery(queryInput.value ?? "")
+);
+
 function clearBox() {
-    setQuery("");
+    queryInput.value = "";
     toolInput.value?.focus();
 }
 
@@ -74,18 +76,12 @@ function onToggle() {
     emit("onToggle", !props.showAdvanced);
 }
 
-watch(
-    () => props.query,
+watchImmediate(
+    () => props.value,
     (newQuery) => {
-        setQuery(newQuery);
+        queryInput.value = newQuery;
     }
 );
-
-onMounted(() => {
-    if (props.query) {
-        setQuery(props.query);
-    }
-});
 </script>
 
 <template>
@@ -98,9 +94,7 @@ onMounted(() => {
             autocomplete="off"
             :placeholder="placeholder"
             data-description="filter text input"
-            @input="delayQuery"
-            @change="setQuery"
-            @keydown.esc="setQuery('')" />
+            @keydown.esc="clearBox" />
 
         <BInputGroupAppend>
             <BButton
diff --git a/client/src/components/Common/DraggableSeparator.vue b/client/src/components/Common/DraggableSeparator.vue
new file mode 100644
index 000000000000..f63aa8f397a9
--- /dev/null
+++ b/client/src/components/Common/DraggableSeparator.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { useDebounce, useDraggable, useElementBounding } from "@vueuse/core";
+import { computed, onMounted, ref, watch } from "vue";
+
+import { useEmit } from "@/composables/eventEmitter";
+import { useClamp } from "@/composables/math";
+import { useAnimationFrameThrottle } from "@/composables/throttle";
+
+const props = withDefaults(
+    defineProps<{
+        position: number;
+        min?: number;
+        max?: number;
+        showDelay?: number;
+        keyboardStepSize?: number;
+        side: "left" | "right";
+        inner?: boolean;
+    }>(),
+    {
+        showDelay: 100,
+        keyboardStepSize: 50,
+        min: 0,
+        max: Infinity,
+        inner: false,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "positionChanged", position: number): void;
+    (e: "visibilityChanged", isVisible: boolean): void;
+    (e: "dragging", isDragging: boolean): void;
+}>();
+
+const { throttle } = useAnimationFrameThrottle();
+
+const draggable = ref<HTMLButtonElement | null>(null);
+const positionedParent = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+    positionedParent.value = (draggable.value?.offsetParent as HTMLElement) ?? null;
+});
+
+const rootBoundingBox = useElementBounding(positionedParent);
+
+const { position: draggablePosition, isDragging } = useDraggable(draggable, {
+    preventDefault: true,
+    exact: true,
+    initialValue: { x: props.position, y: 0 },
+});
+
+useEmit(isDragging, emit, "dragging");
+
+const handlePosition = useClamp(
+    ref(props.position),
+    () => props.min,
+    () => props.max
+);
+
+useEmit(handlePosition, emit, "positionChanged");
+
+watch(
+    () => props.position,
+    () => (handlePosition.value = props.position)
+);
+
+const borderWidth = 6;
+
+function updatePosition() {
+    if (props.side === "left") {
+        handlePosition.value = draggablePosition.value.x - rootBoundingBox.left.value + borderWidth;
+    } else {
+        const clientWidth = document.body.clientWidth;
+        const rootRightDistance = document.body.clientWidth - rootBoundingBox.right.value;
+        handlePosition.value = clientWidth - draggablePosition.value.x - rootRightDistance - borderWidth;
+    }
+}
+
+watch(
+    () => draggablePosition.value,
+    () => throttle(updatePosition)
+);
+
+const hoverDraggable = ref(false);
+
+const hoverDraggableDebounced = useDebounce(
+    hoverDraggable,
+    computed(() => props.showDelay)
+);
+
+const showHover = computed(() => (hoverDraggable.value && hoverDraggableDebounced.value) || isDragging.value);
+
+useEmit(showHover, emit, "visibilityChanged");
+
+function onKeyLeft() {
+    handlePosition.value -= props.keyboardStepSize;
+}
+
+function onKeyRight() {
+    handlePosition.value += props.keyboardStepSize;
+}
+
+const style = computed(() => ({
+    "--position": handlePosition.value + "px",
+}));
+</script>
+
+<template>
+    <button
+        ref="draggable"
+        class="drag-handle"
+        :class="[`side-${props.side}`, { show: showHover, inner: props.inner }]"
+        :style="style"
+        @mouseenter="hoverDraggable = true"
+        @focusin="hoverDraggable = true"
+        @mouseout="hoverDraggable = false"
+        @focusout="hoverDraggable = false"
+        @keydown.left="onKeyLeft"
+        @keydown.right="onKeyRight">
+        <span class="sr-only"> Resizable drag handle </span>
+    </button>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+$border-width: 6px;
+
+.drag-handle {
+    --position: 0;
+
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+    position: absolute;
+    width: $border-width;
+    padding: 0;
+    height: 100%;
+    z-index: 10000;
+    top: 0;
+
+    --hover-expand: 4px;
+
+    &:hover {
+        cursor: ew-resize;
+        width: calc($border-width + var(--hover-expand));
+    }
+
+    &.side-left {
+        left: var(--position);
+
+        &.inner {
+            left: min(var(--position), calc(100% + 1px));
+        }
+
+        margin-left: -$border-width;
+    }
+
+    &.side-right {
+        right: var(--position);
+
+        &.inner {
+            right: min(var(--position), calc(100% + 1px));
+        }
+
+        margin-right: -$border-width;
+    }
+
+    &::after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 0;
+        width: $border-width;
+        height: 100%;
+        background-color: transparent;
+        transition: background-color 0.1s;
+    }
+
+    &.show::after {
+        background-color: $brand-info;
+    }
+
+    &.side-left.show::after {
+        left: 0;
+    }
+
+    &.side-right.show::after {
+        right: 0;
+    }
+}
+</style>
diff --git a/client/src/components/Common/FilterMenu.test.ts b/client/src/components/Common/FilterMenu.test.ts
index b9ba3db65b3b..67d9bcc36f58 100644
--- a/client/src/components/Common/FilterMenu.test.ts
+++ b/client/src/components/Common/FilterMenu.test.ts
@@ -4,7 +4,7 @@ import { mount, type Wrapper } from "@vue/test-utils";
 
 import { HistoryFilters } from "@/components/History/HistoryFilters";
 import { setupSelectableMock } from "@/components/ObjectStore/mockServices";
-import { WorkflowFilters } from "@/components/Workflow/List/WorkflowFilters";
+import { getWorkflowFilters } from "@/components/Workflow/List/workflowFilters";
 import Filtering, { compare, contains, equals, toBool, toDate } from "@/utils/filtering";
 
 import FilterMenu from "./FilterMenu.vue";
@@ -201,48 +201,6 @@ describe("FilterMenu", () => {
         );
     });
 
-    it("test buttons that navigate menu and keyup.enter/esc events", async () => {
-        setUpWrapper("Test Items", "search test items", TestFilters);
-
-        expect(wrapper.find("[data-description='advanced filters']").exists()).toBe(false);
-        await wrapper.setProps({ showAdvanced: true });
-        expect(wrapper.find("[data-description='advanced filters']").exists()).toBe(true);
-
-        // only add name filter in the advanced menu
-        let filterName = wrapper.find("[placeholder='any name']");
-        if (filterName.vm && filterName.props().type == "text") {
-            await filterName.setValue("sample name");
-        }
-
-        // -------- Test keyup.enter key:  ---------
-        // toggles view out and performs a search
-        await filterName.trigger("keyup.enter");
-        await expectCorrectEmits("name:'sample name'", TestFilters, false);
-
-        // Test: clearing the filterText
-        const clearButton = wrapper.find("[data-description='reset query']");
-        await clearButton.trigger("click");
-        await expectCorrectEmits("", TestFilters, false);
-
-        // Test: toggling view back in
-        const toggleButton = wrapper.find("[data-description='toggle advanced search']");
-        await toggleButton.trigger("click");
-        await expectCorrectEmits("", TestFilters, true);
-
-        // -------- Test keyup.esc key:  ---------
-        // toggles view out only (doesn't cause a new search / doesn't emulate enter)
-
-        // find name field again (destroyed because of toggling out) and set value
-        filterName = wrapper.find("[placeholder='any name']");
-        if (filterName.vm && filterName.props().type == "text") {
-            filterName.setValue("newnamefilter");
-        }
-
-        // press esc key from name field (should not change emitted filterText unlike enter key)
-        await filterName.trigger("keyup.esc");
-        await expectCorrectEmits("", TestFilters, false);
-    });
-
     /**
      * Testing the default values of the filters defined in the HistoryFilters: Filtering
      * class, ensuring the default values are reflected in the radio-group buttons
@@ -306,7 +264,7 @@ describe("FilterMenu", () => {
      * class, ensuring the default values are reflected in the radio-group buttons
      */
     it("test compact menu with checkbox filters on WorkflowFilters", async () => {
-        const myWorkflowFilters = WorkflowFilters("my");
+        const myWorkflowFilters = getWorkflowFilters("my");
         setUpWrapper("Workflows", "search workflows", myWorkflowFilters);
         // a compact `FilterMenu` only needs to be opened once (doesn't toggle out automatically)
         await wrapper.setProps({ showAdvanced: true, view: "compact" });
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index 66a5e4c823f4..6686a141471a 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -207,7 +207,7 @@ function updateFilterText(newFilterText: string) {
             v-if="props.menuType !== 'standalone'"
             v-show="props.menuType == 'linked' || (props.menuType == 'separate' && !props.showAdvanced)"
             ref="delayedInputField"
-            :query="props.filterText"
+            :value="props.filterText"
             :delay="props.debounceDelay"
             :loading="props.loading"
             :show-advanced="props.showAdvanced"
diff --git a/client/src/components/Common/IdleLoad.vue b/client/src/components/Common/IdleLoad.vue
new file mode 100644
index 000000000000..cb0aeed58026
--- /dev/null
+++ b/client/src/components/Common/IdleLoad.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// This component delays the rendering of slotted elements
+// in order to not slow down the rendering of parent components,
+// or the responsiveness of the UI
+
+import { BSpinner } from "bootstrap-vue";
+import { onMounted, ref } from "vue";
+
+const props = defineProps<{
+    spinner?: boolean;
+    center?: boolean;
+}>();
+
+const render = ref(false);
+const idleFallbackTime = 250;
+
+onMounted(() => {
+    if ("requestIdleCallback" in window) {
+        window.requestIdleCallback(() => (render.value = true));
+    } else {
+        setTimeout(() => (render.value = true), idleFallbackTime);
+    }
+});
+</script>
+
+<template>
+    <div class="idle-load" :class="{ center: props.center }">
+        <slot v-if="render"></slot>
+        <BSpinner v-else-if="props.spinner"></BSpinner>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.idle-load.center {
+    display: grid;
+    place-items: center;
+}
+</style>
diff --git a/client/src/components/Common/TextShort.vue b/client/src/components/Common/TextShort.vue
index 012c770c6137..e1f0842a508c 100644
--- a/client/src/components/Common/TextShort.vue
+++ b/client/src/components/Common/TextShort.vue
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<Props>(), {
     maxLength: 24,
 });
 
-const text = computed(() => {
+const trimmedText = computed(() => {
     if (props.text.length > props.maxLength) {
         const partialText = props.text.slice(0, props.maxLength);
         return `${partialText}...`;
@@ -22,6 +22,6 @@ const text = computed(() => {
 
 <template>
     <span class="text-break text-center">
-        {{ text }}
+        {{ trimmedText }}
     </span>
 </template>
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 858cee8cbe45..e403d43774c5 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { faCaretDown, faCaretRight, faFile, faFolder, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretRight, faFile, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { computed, type ComputedRef, onMounted, ref } from "vue";
diff --git a/client/src/components/History/Archiving/HistoryArchive.vue b/client/src/components/History/Archiving/HistoryArchive.vue
index 22477bfb6b5b..7db329b99c4d 100644
--- a/client/src/components/History/Archiving/HistoryArchive.vue
+++ b/client/src/components/History/Archiving/HistoryArchive.vue
@@ -151,7 +151,7 @@ async function onImportCopy(history: ArchivedHistorySummary) {
     <section id="archived-histories" class="d-flex flex-column">
         <div>
             <DelayedInput
-                :query="searchText"
+                :value="searchText"
                 class="m-1 mb-3"
                 placeholder="search by name"
                 @change="updateSearchQuery" />
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 09ed3bd6e6bb..0ace2e5a3b6d 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="columns" class="d-flex">
         <FlexPanel side="left">
-            <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
+            <MarkdownToolBox :steps="steps" @insert="insertMarkdown" />
         </FlexPanel>
         <div id="center" class="overflow-auto w-100">
             <div class="markdown-editor h-100">
@@ -57,10 +57,10 @@ const FENCE = "```";
 
 export default {
     components: {
-        MarkdownToolBox,
         FlexPanel,
         FontAwesomeIcon,
         MarkdownHelpModal,
+        MarkdownToolBox,
     },
     props: {
         markdownText: {
@@ -97,7 +97,7 @@ export default {
         },
     },
     methods: {
-        onInsert(markdown) {
+        insertMarkdown(markdown) {
             markdown = markdown.replace(")(", ", ");
             markdown = `${FENCE}galaxy\n${markdown}\n${FENCE}\n`;
             const textArea = this.$refs["text-area"];
@@ -106,10 +106,10 @@ export default {
             let newContent = this.content.substr(0, cursorPosition);
             newContent += `\r\n${markdown.trim()}\r\n`;
             newContent += this.content.substr(cursorPosition);
-            this.$emit("onUpdate", newContent);
+            this.$emit("update", newContent);
         },
         onUpdate: _.debounce(function (e) {
-            this.$emit("onUpdate", this.content);
+            this.$emit("update", this.content);
         }, 300),
         onHelp() {
             this.$refs.help.showMarkdownHelp();
diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue
index fb2d9f0f91c8..336c5951dce1 100644
--- a/client/src/components/Markdown/MarkdownToolBox.vue
+++ b/client/src/components/Markdown/MarkdownToolBox.vue
@@ -1,32 +1,21 @@
 <template>
-    <div class="unified-panel">
-        <div class="unified-panel-header" unselectable="on">
-            <div class="unified-panel-header-inner">
-                <div class="panel-header-text">Insert Objects</div>
-            </div>
-        </div>
-        <div class="unified-panel-body">
-            <div class="toolMenuContainer">
-                <b-alert v-if="error" variant="danger" class="my-2 mx-3 px-2 py-1" show>
-                    {{ error }}
-                </b-alert>
-                <ToolSection v-if="isWorkflow" :category="historyInEditorSection" :expanded="true" @onClick="onClick" />
-                <ToolSection v-else :category="historySection" :expanded="true" @onClick="onClick" />
-                <ToolSection :category="jobSection" :expanded="true" @onClick="onClick" />
-                <ToolSection
-                    v-if="isWorkflow"
-                    :category="workflowInEditorSection"
-                    :expanded="true"
-                    @onClick="onClick" />
-                <ToolSection v-else :category="workflowSection" :expanded="true" @onClick="onClick" />
-                <ToolSection :category="linksSection" :expanded="false" @onClick="onClick" />
-                <ToolSection :category="otherSection" :expanded="true" @onClick="onClick" />
-                <ToolSection
-                    v-if="hasVisualizations"
-                    :category="visualizationSection"
-                    :expanded="true"
-                    @onClick="onClick" />
-            </div>
+    <ActivityPanel title="Insert Markdown Objects">
+        <div class="toolMenuContainer">
+            <b-alert v-if="error" variant="danger" class="my-2 mx-3 px-2 py-1" show>
+                {{ error }}
+            </b-alert>
+            <ToolSection v-if="isWorkflow" :category="historyInEditorSection" :expanded="true" @onClick="onClick" />
+            <ToolSection v-else :category="historySection" :expanded="true" @onClick="onClick" />
+            <ToolSection :category="jobSection" :expanded="true" @onClick="onClick" />
+            <ToolSection v-if="isWorkflow" :category="workflowInEditorSection" :expanded="true" @onClick="onClick" />
+            <ToolSection v-else :category="workflowSection" :expanded="true" @onClick="onClick" />
+            <ToolSection :category="linksSection" :expanded="false" @onClick="onClick" />
+            <ToolSection :category="otherSection" :expanded="true" @onClick="onClick" />
+            <ToolSection
+                v-if="hasVisualizations"
+                :category="visualizationSection"
+                :expanded="true"
+                @onClick="onClick" />
         </div>
         <MarkdownDialog
             v-if="selectedShow"
@@ -37,7 +26,7 @@
             :use-labels="isWorkflow"
             @onInsert="onInsert"
             @onCancel="onCancel" />
-    </div>
+    </ActivityPanel>
 </template>
 
 <script>
@@ -51,6 +40,8 @@ import { directiveEntry } from "./directives.ts";
 import { fromSteps } from "./labels.ts";
 import MarkdownDialog from "./MarkdownDialog";
 
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+
 Vue.use(BootstrapVue);
 
 function historySharedElements(mode) {
@@ -95,6 +86,7 @@ export default {
     components: {
         MarkdownDialog,
         ToolSection,
+        ActivityPanel,
     },
     props: {
         steps: {
@@ -317,7 +309,7 @@ export default {
             }
         },
         onInsert(markdownBlock) {
-            this.$emit("onInsert", markdownBlock);
+            this.$emit("insert", markdownBlock);
             this.selectedShow = false;
         },
         onCancel() {
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index 6e1cb5bcc76a..3d4834f4cd1e 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -4,7 +4,7 @@
         :markdown-text="markdownText"
         :markdown-config="contentData"
         mode="page"
-        @onUpdate="onUpdate">
+        @update="onUpdate">
         <template v-slot:buttons>
             <ObjectPermissionsModal
                 id="object-permissions-modal"
diff --git a/client/src/components/Panels/ActivityPanel.vue b/client/src/components/Panels/ActivityPanel.vue
index df4d58a6de64..20fb01d0d4ca 100644
--- a/client/src/components/Panels/ActivityPanel.vue
+++ b/client/src/components/Panels/ActivityPanel.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
-import { useRoute } from "vue-router/composables";
 
 interface Props {
     title: string;
@@ -14,16 +13,11 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
     goToAllTitle: undefined,
     href: undefined,
-    goToOnHref: true,
 });
 
-const route = useRoute();
-
 const emit = defineEmits(["goToAll"]);
 
-const hasGoToAll = computed(
-    () => props.goToAllTitle && props.href && (props.goToOnHref || (!props.goToOnHref && route.path !== props.href))
-);
+const hasGoToAll = computed(() => props.goToAllTitle && props.href);
 </script>
 
 <template>
@@ -83,7 +77,8 @@ const hasGoToAll = computed(
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        overflow-y: hidden;
+        overflow-y: auto;
+        position: relative;
         button:first-child {
             background: none;
             border: none;
diff --git a/client/src/components/Panels/Buttons/FavoritesButton.vue b/client/src/components/Panels/Buttons/FavoritesButton.vue
index c7d285bb4253..37d932b6fedd 100644
--- a/client/src/components/Panels/Buttons/FavoritesButton.vue
+++ b/client/src/components/Panels/Buttons/FavoritesButton.vue
@@ -3,6 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { faStar as faRegStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { watchImmediate } from "@vueuse/core";
 import { BButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
@@ -12,18 +13,33 @@ import { useUserStore } from "@/stores/userStore";
 library.add(faStar, faRegStar);
 
 interface Props {
-    query: string;
+    value?: boolean;
+    query?: string;
+    tooltip?: string;
 }
-const props = defineProps<Props>();
+
+const props = withDefaults(defineProps<Props>(), {
+    value: false,
+    query: undefined,
+    tooltip: "Show favorites",
+});
+
+const currentValue = computed(() => props.value ?? false);
+const toggle = ref(false);
+
+watchImmediate(
+    () => currentValue.value,
+    (val) => (toggle.value = val)
+);
 
 const emit = defineEmits<{
-    (e: "onFavorites", filter: string): void;
+    (e: "change", toggled: boolean): void;
+    (e: "input", toggled: boolean): void;
 }>();
 
 const { isAnonymous } = storeToRefs(useUserStore());
 
 const FAVORITES = ["#favorites", "#favs", "#favourites"];
-const toggle = ref(false);
 
 const tooltipText = computed(() => {
     if (isAnonymous.value) {
@@ -32,7 +48,7 @@ const tooltipText = computed(() => {
         if (toggle.value) {
             return "Clear";
         } else {
-            return "Show favorites";
+            return props.tooltip;
         }
     }
 });
@@ -40,17 +56,14 @@ const tooltipText = computed(() => {
 watch(
     () => props.query,
     () => {
-        toggle.value = FAVORITES.includes(props.query);
+        toggle.value = FAVORITES.includes(props.query ?? "");
     }
 );
 
-function onFavorites() {
+function toggleFavorites() {
     toggle.value = !toggle.value;
-    if (toggle.value) {
-        emit("onFavorites", "#favorites");
-    } else {
-        emit("onFavorites", "");
-    }
+    emit("input", toggle.value);
+    emit("change", toggle.value);
 }
 </script>
 
@@ -63,7 +76,7 @@ function onFavorites() {
         aria-label="Show favorite tools"
         :disabled="isAnonymous"
         :title="tooltipText"
-        @click="onFavorites">
+        @click="toggleFavorites">
         <FontAwesomeIcon :icon="toggle ? faRegStar : faStar" />
     </BButton>
 </template>
diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 70b776fc7fc9..818d6259d875 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -245,7 +245,7 @@ function onAdvancedSearch(filters: any) {
         <DelayedInput
             v-else
             class="mb-3"
-            :query="props.query"
+            :value="props.query"
             :delay="200"
             :loading="queryPending"
             :placeholder="placeholder"
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 9d0031af395f..1dd518b66ed9 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -2,14 +2,9 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { useDebounce, useDraggable } from "@vueuse/core";
 import { computed, ref, watch } from "vue";
 
-import { useTimeoutThrottle } from "@/composables/throttle";
-
-import { determineWidth } from "./utilities";
-
-const { throttle } = useTimeoutThrottle(10);
+import DraggableSeparator from "@/components/Common/DraggableSeparator.vue";
 
 library.add(faChevronLeft, faChevronRight);
 
@@ -28,26 +23,18 @@ const props = withDefaults(defineProps<Props>(), {
     defaultWidth: 300,
 });
 
-const draggable = ref<HTMLElement | null>(null);
-const root = ref<HTMLElement | null>(null);
-
 const panelWidth = ref(props.defaultWidth);
-const show = ref(true);
-
-const { position, isDragging } = useDraggable(draggable, {
-    preventDefault: true,
-    exact: true,
-});
 
-const hoverDraggable = ref(false);
-const hoverDraggableDebounced = useDebounce(hoverDraggable, 100);
-const showHover = computed(() => (hoverDraggable.value && hoverDraggableDebounced.value) || isDragging.value);
+const root = ref<HTMLElement | null>(null);
+const show = ref(true);
 
 const showToggle = ref(false);
 const hoverToggle = ref(false);
-const hoverDraggableOrToggle = computed(
-    () => (hoverDraggableDebounced.value || hoverToggle.value) && !isDragging.value
-);
+
+const isHoveringDragHandle = ref(false);
+const isDragging = ref(false);
+
+const hoverDraggableOrToggle = computed(() => (isHoveringDragHandle.value || hoverToggle.value) && !isDragging.value);
 
 const toggleLinger = 500;
 const toggleShowDelay = 600;
@@ -70,72 +57,6 @@ watch(
     }
 );
 
-/** Watch position changes and adjust width accordingly */
-watch(position, () => {
-    throttle(() => {
-        if (!root.value || !draggable.value) {
-            return;
-        }
-
-        const rectRoot = root.value.getBoundingClientRect();
-        const rectDraggable = draggable.value.getBoundingClientRect();
-        panelWidth.value = determineWidth(
-            rectRoot,
-            rectDraggable,
-            props.minWidth,
-            props.maxWidth,
-            props.side,
-            position.value.x
-        );
-    });
-});
-
-/** If the `maxWidth` changes, prevent the panel from exceeding it */
-watch(
-    () => props.maxWidth,
-    (newVal) => {
-        if (newVal && panelWidth.value > newVal) {
-            panelWidth.value = props.maxWidth;
-        }
-    },
-    { immediate: true }
-);
-
-/** If the `minWidth` changes, ensure the panel width is at least the `minWidth` */
-watch(
-    () => props.minWidth,
-    (newVal) => {
-        if (newVal && panelWidth.value < newVal) {
-            panelWidth.value = newVal;
-        }
-    },
-    { immediate: true }
-);
-
-function onKeyLeft() {
-    if (props.side === "left") {
-        decreaseWidth();
-    } else {
-        increaseWidth();
-    }
-}
-
-function onKeyRight() {
-    if (props.side === "left") {
-        increaseWidth();
-    } else {
-        decreaseWidth();
-    }
-}
-
-function increaseWidth(by = 50) {
-    panelWidth.value = Math.min(panelWidth.value + by, props.maxWidth);
-}
-
-function decreaseWidth(by = 50) {
-    panelWidth.value = Math.max(panelWidth.value - by, props.minWidth);
-}
-
 const sideClasses = computed(() => ({
     left: props.side === "left",
     right: props.side === "right",
@@ -148,19 +69,15 @@ const sideClasses = computed(() => ({
         :id="side"
         ref="root"
         class="flex-panel"
-        :class="{ ...sideClasses, 'show-hover': showHover }"
+        :class="{ ...sideClasses }"
         :style="`--width: ${panelWidth}px`">
-        <button
-            ref="draggable"
-            class="drag-handle"
-            @mouseenter="hoverDraggable = true"
-            @focusin="hoverDraggable = true"
-            @mouseout="hoverDraggable = false"
-            @focusout="hoverDraggable = false"
-            @keydown.left="onKeyLeft"
-            @keydown.right="onKeyRight">
-            <span class="sr-only"> Side panel drag handle </span>
-        </button>
+        <DraggableSeparator
+            :position="panelWidth"
+            :side="props.side"
+            :min="props.minWidth"
+            :max="props.maxWidth"
+            @positionChanged="(v) => (panelWidth = v)"
+            @visibilityChanged="(v) => (isHoveringDragHandle = v)"></DraggableSeparator>
 
         <button
             v-if="props.collapsible"
@@ -221,28 +138,12 @@ $border-width: 6px;
         background-color: $border-color;
     }
 
-    &.show-hover {
-        border-color: $brand-info;
-
-        &::after {
-            background-color: $brand-info;
-        }
-    }
-
     &.left {
         border-right-style: solid;
 
         &::after {
             right: -1px;
         }
-
-        .drag-handle {
-            right: -$border-width;
-
-            &:hover {
-                right: calc(-1 * $border-width - var(--hover-expand) / 2);
-            }
-        }
     }
 
     &.right {
@@ -251,32 +152,6 @@ $border-width: 6px;
         &::after {
             left: -1px;
         }
-
-        .drag-handle {
-            left: -$border-width;
-
-            &:hover {
-                left: calc(-1 * $border-width - var(--hover-expand) / 2);
-            }
-        }
-    }
-}
-
-.drag-handle {
-    background: none;
-    border: none;
-    border-radius: 0;
-    position: absolute;
-    width: $border-width;
-    padding: 0;
-    height: 100%;
-    z-index: 10000;
-
-    --hover-expand: 4px;
-
-    &:hover {
-        cursor: ew-resize;
-        width: calc($border-width + var(--hover-expand));
     }
 }
 
diff --git a/client/src/components/Panels/InvocationsPanel.vue b/client/src/components/Panels/InvocationsPanel.vue
index ba810258676e..2d404dde6637 100644
--- a/client/src/components/Panels/InvocationsPanel.vue
+++ b/client/src/components/Panels/InvocationsPanel.vue
@@ -3,12 +3,18 @@ import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
 
+import { useActivityStore } from "@/stores/activityStore";
 import { useUserStore } from "@/stores/userStore";
 
 import InvocationScrollList from "../Workflow/Invocation/InvocationScrollList.vue";
 import ActivityPanel from "./ActivityPanel.vue";
 
-const { currentUser, toggledSideBar } = storeToRefs(useUserStore());
+const props = defineProps<{
+    activityBarId: string;
+}>();
+
+const { currentUser } = storeToRefs(useUserStore());
+const { toggledSideBar } = storeToRefs(useActivityStore(props.activityBarId));
 
 const shouldCollapse = ref(false);
 function collapseOnLeave() {
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
index a71a31fda746..5f1c9dbe43cd 100644
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -96,11 +96,7 @@ function userTitle(title: string) {
 </script>
 
 <template>
-    <ActivityPanel
-        title="Select Histories"
-        go-to-all-title="Open History Multiview"
-        href="/histories/view_multiple"
-        :go-to-on-href="false">
+    <ActivityPanel title="Select Histories">
         <template v-slot:header-buttons>
             <BButtonGroup>
                 <BButton
diff --git a/client/src/components/Panels/SettingsPanel.vue b/client/src/components/Panels/SettingsPanel.vue
index a30b7329b705..7ffe6dbf5cd4 100644
--- a/client/src/components/Panels/SettingsPanel.vue
+++ b/client/src/components/Panels/SettingsPanel.vue
@@ -10,7 +10,17 @@ import ActivitySettings from "@/components/ActivityBar/ActivitySettings.vue";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
 
-const activityStore = useActivityStore();
+const props = defineProps<{
+    activityBarId: string;
+    heading: string;
+    searchPlaceholder: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "activityClicked", activityId: string): void;
+}>();
+
+const activityStore = useActivityStore(props.activityBarId);
 
 const confirmRestore = ref(false);
 const query = ref("");
@@ -21,9 +31,9 @@ function onQuery(newQuery: string) {
 </script>
 
 <template>
-    <ActivityPanel title="Additional Activities">
+    <ActivityPanel :title="props.heading">
         <template v-slot:header>
-            <DelayedInput :delay="100" placeholder="Search activities" @change="onQuery" />
+            <DelayedInput :delay="100" :placeholder="props.searchPlaceholder" @change="onQuery" />
         </template>
         <template v-slot:header-buttons>
             <BButton
@@ -37,7 +47,10 @@ function onQuery(newQuery: string) {
                 <FontAwesomeIcon :icon="faUndo" fixed-width />
             </BButton>
         </template>
-        <ActivitySettings :query="query" />
+        <ActivitySettings
+            :query="query"
+            :activity-bar-id="props.activityBarId"
+            @activityClicked="(...args) => emit('activityClicked', ...args)" />
         <BModal
             v-model="confirmRestore"
             title="Restore Activity Bar Defaults"
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 3589d51b1ab7..50e5aeb10ac7 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -6,12 +6,9 @@ import { storeToRefs } from "pinia";
 import { computed, type ComputedRef, type PropType, type Ref, ref } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { getGalaxyInstance } from "@/app";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
-import { getAppRoot } from "@/onload/loadConfig";
 import { type Tool, type ToolSection as ToolSectionType } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
-import { type Workflow, type Workflow as WorkflowType } from "@/stores/workflowStore";
 import localize from "@/utils/localization";
 
 import { filterTools, getValidPanelItems, getValidToolsInCurrentView, getValidToolsInEachSection } from "./utilities";
@@ -29,8 +26,6 @@ const emit = defineEmits<{
     (e: "update:panel-query", query: string): void;
     (e: "onInsertTool", toolId: string, toolName: string): void;
     (e: "onInsertModule", moduleName: string, moduleTitle: string | undefined): void;
-    (e: "onInsertWorkflow", workflowLatestId: string | undefined, workflowName: string): void;
-    (e: "onInsertWorkflowSteps", workflowId: string, workflowStepCount: number | undefined): void;
 }>();
 
 const props = defineProps({
@@ -132,44 +127,6 @@ const localPanel: ComputedRef<Record<string, Tool | ToolSectionType> | null> = c
     }
 });
 
-const favWorkflows = computed(() => {
-    const Galaxy = getGalaxyInstance();
-    const storedWorkflowMenuEntries = Galaxy && Galaxy.config.stored_workflow_menu_entries;
-    if (storedWorkflowMenuEntries) {
-        const returnedWfs = [];
-        if (!props.workflow) {
-            returnedWfs.push({
-                title: localize("All workflows") as string,
-                href: `${getAppRoot()}workflows/list`,
-                id: "list",
-            });
-        }
-        const storedWfs = [
-            ...storedWorkflowMenuEntries.map((menuEntry: Workflow) => {
-                return {
-                    id: menuEntry.id,
-                    title: menuEntry.name,
-                    href: `${getAppRoot()}workflows/run?id=${menuEntry.id}`,
-                };
-            }),
-        ];
-        return returnedWfs.concat(storedWfs);
-    } else {
-        return [];
-    }
-});
-
-const workflowSection = computed(() => {
-    if (props.workflow && props.editorWorkflows.length > 0) {
-        return {
-            name: localize("Workflows"),
-            elems: props.workflow && props.editorWorkflows,
-        };
-    } else {
-        return null;
-    }
-});
-
 const buttonIcon = computed(() => (showSections.value ? faEyeSlash : faEye));
 const buttonText = computed(() => (showSections.value ? localize("Hide Sections") : localize("Show Sections")));
 
@@ -178,15 +135,6 @@ function onInsertModule(module: Record<string, any>, event: Event) {
     emit("onInsertModule", module.name, module.title);
 }
 
-function onInsertWorkflow(workflow: WorkflowType, event: Event) {
-    event.preventDefault();
-    emit("onInsertWorkflow", workflow.latest_id, workflow.name);
-}
-
-function onInsertWorkflowSteps(workflow: WorkflowType) {
-    emit("onInsertWorkflowSteps", workflow.id, workflow.step_count);
-}
-
 function onToolClick(tool: Tool, evt: Event) {
     if (!props.workflow) {
         if (tool.id === "upload1") {
@@ -309,29 +257,6 @@ function onToggle() {
                             @onFilter="onSectionFilter" />
                     </div>
                 </div>
-                <ToolSection
-                    v-if="props.workflow && workflowSection"
-                    :key="workflowSection.name"
-                    :category="workflowSection"
-                    section-name="workflows"
-                    :sort-items="false"
-                    operation-icon="fa fa-files-o"
-                    operation-title="Insert individual steps."
-                    :query-filter="queryFilter || undefined"
-                    :disable-filter="true"
-                    @onClick="onInsertWorkflow"
-                    @onOperation="onInsertWorkflowSteps" />
-                <div v-else-if="favWorkflows.length > 0">
-                    <ToolSection :category="{ text: 'Workflows' }" />
-                    <div id="internal-workflows" class="toolSectionBody">
-                        <div class="toolSectionBg" />
-                        <div v-for="wf in favWorkflows" :key="wf.id" class="toolTitle">
-                            <a class="title-link" href="javascript:void(0)" @click="router.push(wf.href)">{{
-                                wf.title
-                            }}</a>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
diff --git a/client/src/components/Panels/ToolPanel.test.js b/client/src/components/Panels/ToolPanel.test.ts
similarity index 84%
rename from client/src/components/Panels/ToolPanel.test.js
rename to client/src/components/Panels/ToolPanel.test.ts
index 7b5575f251c9..1541fa67be4e 100644
--- a/client/src/components/Panels/ToolPanel.test.js
+++ b/client/src/components/Panels/ToolPanel.test.ts
@@ -3,27 +3,28 @@ import "jest-location-mock";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
-import toolsList from "components/ToolsView/testData/toolsList";
-import toolsListInPanel from "components/ToolsView/testData/toolsListInPanel";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
-import { useConfig } from "@/composables/config";
+import toolsList from "@/components/ToolsView/testData/toolsList.json";
+import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel.json";
 
-import viewsList from "./testData/viewsList";
-import ToolPanel from "./ToolPanel";
+import viewsList from "./testData/viewsList.json";
 import { types_to_icons } from "./utilities";
 
+import ToolPanel from "./ToolPanel.vue";
+
 const localVue = getLocalVue();
 
 const TEST_PANELS_URI = "/api/tool_panels";
 
-jest.mock("composables/config");
-useConfig.mockReturnValue({
-    config: {},
-    isConfigLoaded: true,
-});
+jest.mock("@/composables/config", () => ({
+    useConfig: jest.fn(() => ({
+        config: {},
+        isConfigLoaded: true,
+    })),
+}));
 
 describe("ToolPanel", () => {
     it("test navigation of tool panel views menu", async () => {
@@ -37,7 +38,7 @@ describe("ToolPanel", () => {
             .reply(200, { default_panel_view: "default", views: viewsList });
 
         const pinia = createPinia();
-        const wrapper = mount(ToolPanel, {
+        const wrapper = mount(ToolPanel as object, {
             propsData: {
                 workflow: false,
                 editorWorkflows: null,
@@ -88,7 +89,9 @@ describe("ToolPanel", () => {
 
                 // Test: check if the panel header now has an icon and a changed name
                 const panelViewIcon = wrapper.find("[data-description='panel view header icon']");
-                expect(panelViewIcon.classes()).toContain(`fa-${types_to_icons[value.view_type]}`);
+                expect(panelViewIcon.classes()).toContain(
+                    `fa-${types_to_icons[value.view_type as keyof typeof types_to_icons]}`
+                );
                 expect(wrapper.find("#toolbox-heading").text()).toBe(value.name);
             } else {
                 // Test: check if the default panel view is already selected, and no icon
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index a478b08f7c7a..fc9b9db2aa60 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { storeToRefs } from "pinia";
@@ -16,8 +15,6 @@ import PanelViewMenu from "./Menus/PanelViewMenu.vue";
 import ToolBox from "./ToolBox.vue";
 import Heading from "@/components/Common/Heading.vue";
 
-library.add(faCaretDown);
-
 const props = defineProps({
     workflow: { type: Boolean, default: false },
     editorWorkflows: { type: Array, default: null },
@@ -100,6 +97,21 @@ const viewIcon = computed(() => {
     }
 });
 
+const showFavorites = computed({
+    get() {
+        return query.value.includes("#favorites");
+    },
+    set(value) {
+        if (value) {
+            if (!query.value.includes("#favorites")) {
+                query.value = `#favorites ${query.value}`.trim();
+            }
+        } else {
+            query.value = query.value.replace("#favorites", "").trim();
+        }
+    },
+});
+
 async function initializeTools() {
     try {
         await toolStore.fetchTools();
@@ -130,10 +142,17 @@ function onInsertWorkflow(workflowId: string | undefined, workflowName: string)
 function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | undefined) {
     emit("onInsertWorkflowSteps", workflowId, workflowStepCount);
 }
+
+watch(
+    () => query.value,
+    (newQuery) => {
+        showFavorites.value = newQuery.includes("#favorites");
+    }
+);
 </script>
 
 <template>
-    <div v-if="arePanelsFetched" class="unified-panel" aria-labelledby="toolbox-heading">
+    <div v-if="arePanelsFetched" id="toolbox-panel" class="unified-panel" aria-labelledby="toolbox-heading">
         <div unselectable="on">
             <div class="unified-panel-header-inner mx-3 my-2 d-flex justify-content-between">
                 <PanelViewMenu
@@ -163,13 +182,13 @@ function onInsertWorkflowSteps(workflowId: string, workflowStepCount: number | u
                                 </Heading>
                             </div>
                             <div v-if="!showAdvanced" class="panel-header-buttons">
-                                <FontAwesomeIcon icon="caret-down" />
+                                <FontAwesomeIcon :icon="faCaretDown" />
                             </div>
                         </div>
                     </template>
                 </PanelViewMenu>
                 <div v-if="!showAdvanced" class="panel-header-buttons">
-                    <FavoritesButton :query="query" @onFavorites="(q) => (query = q)" />
+                    <FavoritesButton v-model="showFavorites" />
                 </div>
             </div>
         </div>
diff --git a/client/src/components/Panels/WorkflowPanel.vue b/client/src/components/Panels/WorkflowPanel.vue
new file mode 100644
index 000000000000..d5e56f332d5c
--- /dev/null
+++ b/client/src/components/Panels/WorkflowPanel.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { useMemoize, watchImmediate } from "@vueuse/core";
+import { computed, ref, watch } from "vue";
+
+import { loadWorkflows, type Workflow } from "@/components/Workflow/workflows.services";
+import { useAnimationFrameScroll } from "@/composables/sensors/animationFrameScroll";
+import { useToast } from "@/composables/toast";
+
+import ActivityPanel from "./ActivityPanel.vue";
+import FavoritesButton from "./Buttons/FavoritesButton.vue";
+import DelayedInput from "@/components/Common/DelayedInput.vue";
+import ScrollToTopButton from "@/components/ToolsList/ScrollToTopButton.vue";
+import WorkflowCardList from "@/components/Workflow/List/WorkflowCardList.vue";
+
+const props = defineProps<{
+    currentWorkflowId: string;
+}>();
+
+const emit = defineEmits<{
+    (e: "insertWorkflow", id: string, name: string): void;
+    (e: "insertWorkflowSteps", id: string, stepCount: number): void;
+}>();
+
+const scrollable = ref<HTMLDivElement | null>(null);
+const { arrived, scrollTop } = useAnimationFrameScroll(scrollable);
+
+const loading = ref(false);
+const totalWorkflowsCount = ref(Infinity);
+
+const allLoaded = computed(() => totalWorkflowsCount.value <= workflows.value.length);
+
+const filterText = ref("");
+
+const workflows = ref<Workflow[]>([]);
+
+const showFavorites = computed({
+    get() {
+        return filterText.value.includes("is:bookmarked");
+    },
+    set(value) {
+        if (value) {
+            if (!filterText.value.includes("is:bookmarked")) {
+                filterText.value = `is:bookmarked ${filterText.value}`.trim();
+            }
+        } else {
+            filterText.value = filterText.value.replace("is:bookmarked", "").trim();
+        }
+    },
+});
+
+const loadWorkflowsOptions = {
+    sortBy: "update_time",
+    sortDesc: true,
+    limit: 20,
+    showPublished: true,
+    skipStepCounts: false,
+} as const;
+
+const { error } = useToast();
+const getWorkflows = useMemoize(async (filterText: string, offset: number) => {
+    const { data, totalMatches } = await loadWorkflows({
+        ...loadWorkflowsOptions,
+        offset,
+        filterText,
+    });
+
+    return { data, totalMatches };
+});
+
+let fetchKey = "";
+let lastFetchKey = "";
+
+async function load() {
+    const isCurrentFetch = () => fetchKey.trim().toLowerCase() === lastFetchKey.trim().toLowerCase();
+
+    if (isCurrentFetch() && (loading.value || allLoaded.value)) {
+        return;
+    }
+
+    lastFetchKey = fetchKey;
+
+    loading.value = true;
+
+    try {
+        const { data, totalMatches } = await getWorkflows(filterText.value, workflows.value.length);
+
+        if (isCurrentFetch()) {
+            totalWorkflowsCount.value = totalMatches;
+
+            const workflowIds = new Set(workflows.value.map((w) => w.id));
+            const newWorkflows = data.filter((w) => !workflowIds.has(w.id));
+
+            workflows.value.push(...newWorkflows);
+        }
+    } catch (e) {
+        if (isCurrentFetch()) {
+            error(`Failed to load workflows: ${e}`);
+        }
+    } finally {
+        if (isCurrentFetch()) {
+            loading.value = false;
+        }
+    }
+}
+
+function resetWorkflows() {
+    workflows.value = [];
+    totalWorkflowsCount.value = Infinity;
+    loading.value = false;
+    fetchKey = "";
+}
+
+function refresh() {
+    resetWorkflows();
+    getWorkflows.clear();
+    load();
+}
+
+watchImmediate(
+    () => filterText.value,
+    (newFilterText) => {
+        showFavorites.value = newFilterText.includes("is:bookmarked");
+        resetWorkflows();
+        fetchKey = filterText.value;
+        load();
+    }
+);
+
+watch(
+    () => arrived.bottom,
+    () => {
+        if (arrived.bottom) {
+            load();
+        }
+    }
+);
+
+function scrollToTop() {
+    scrollable.value?.scrollTo({ top: 0, behavior: "smooth" });
+}
+</script>
+
+<template>
+    <ActivityPanel title="Workflows">
+        <template v-slot:header-buttons>
+            <FavoritesButton v-model="showFavorites" tooltip="Show bookmarked" />
+        </template>
+
+        <DelayedInput
+            v-model="filterText"
+            placeholder="search workflows"
+            :delay="800"
+            :loading="loading"></DelayedInput>
+
+        <div ref="scrollable" class="workflow-scroll-list mt-2">
+            <WorkflowCardList
+                :hide-runs="true"
+                :workflows="workflows"
+                :filterable="false"
+                :current-workflow-id="props.currentWorkflowId"
+                editor-view
+                @insertWorkflow="(...args) => emit('insertWorkflow', ...args)"
+                @insertWorkflowSteps="(...args) => emit('insertWorkflowSteps', ...args)"
+                @refreshList="refresh" />
+
+            <div v-if="allLoaded || filterText !== ''" class="list-end">
+                <span v-if="workflows.length == 1"> - 1 workflow loaded - </span>
+                <span v-else-if="workflows.length > 1"> - All {{ workflows.length }} workflows loaded - </span>
+                <span v-else> - No workflows found - </span>
+            </div>
+            <div v-else-if="loading" class="list-end">- loading -</div>
+        </div>
+
+        <ScrollToTopButton :offset="scrollTop" @click="scrollToTop" />
+    </ActivityPanel>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-scroll-list {
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-end {
+    align-self: center;
+    color: $text-light;
+    margin: 0.5rem;
+}
+</style>
diff --git a/client/src/components/Tour/TourList.vue b/client/src/components/Tour/TourList.vue
index 5f9f98f1a6c0..145a006ee48c 100644
--- a/client/src/components/Tour/TourList.vue
+++ b/client/src/components/Tour/TourList.vue
@@ -8,7 +8,7 @@
         <h2 class="h-sm">Tours</h2>
         <div v-if="error" class="alert alert-danger">{{ error }}</div>
         <div v-else>
-            <DelayedInput class="mb-3" :query="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
+            <DelayedInput class="mb-3" :value="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
             <div v-for="tour in tours" :key="tour.id">
                 <ul v-if="match(tour)" id="tourList" class="list-group">
                     <li class="list-group-item">
diff --git a/client/src/components/UndoRedo/UndoRedoStack.vue b/client/src/components/UndoRedo/UndoRedoStack.vue
index e0b89b1cbe73..80de89bc6e94 100644
--- a/client/src/components/UndoRedo/UndoRedoStack.vue
+++ b/client/src/components/UndoRedo/UndoRedoStack.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faHistory } from "@fortawesome/free-solid-svg-icons";
 import { ref, watch } from "vue";
 
 import { useUndoRedoStore } from "@/stores/undoRedoStore";
 
-import Heading from "@/components/Common/Heading.vue";
-
-library.add(faHistory);
+import ActivityPanel from "../Panels/ActivityPanel.vue";
 
 const props = defineProps<{
     storeId: string;
@@ -37,9 +33,7 @@ function updateSavedUndoActions() {
 </script>
 
 <template>
-    <section class="undo-redo-stack">
-        <Heading h2 size="sm" icon="fa-history">Latest Changes</Heading>
-
+    <ActivityPanel title="Latest Changes" class="undo-redo-stack">
         <div class="scroll-list">
             <button
                 v-for="action in currentStore.redoActionStack"
@@ -87,7 +81,7 @@ function updateSavedUndoActions() {
                 @focusout="updateSavedUndoActions"
                 @keyup.enter="updateSavedUndoActions" />
         </label>
-    </section>
+    </ActivityPanel>
 </template>
 
 <style scoped lang="scss">
diff --git a/client/src/components/Visualizations/PluginList.vue b/client/src/components/Visualizations/PluginList.vue
index 987858f06fa5..7245bb38eaf5 100644
--- a/client/src/components/Visualizations/PluginList.vue
+++ b/client/src/components/Visualizations/PluginList.vue
@@ -4,7 +4,7 @@
         <template v-else>
             <DelayedInput
                 class="mb-3"
-                :query="search"
+                :value="search"
                 :placeholder="titleSearchVisualizations"
                 :delay="100"
                 @change="onSearch" />
diff --git a/client/src/components/Workflow/Editor/Actions/actions.test.ts b/client/src/components/Workflow/Editor/Actions/actions.test.ts
index 78290cde330b..08d373cbfe49 100644
--- a/client/src/components/Workflow/Editor/Actions/actions.test.ts
+++ b/client/src/components/Workflow/Editor/Actions/actions.test.ts
@@ -269,11 +269,8 @@ describe("Workflow Undo Redo Actions", () => {
 
         it("RemoveStepAction", () => {
             const step = addStep();
-            const showAttributesCallback = jest.fn();
-            const action = new RemoveStepAction(stepStore, stateStore, connectionStore, showAttributesCallback, step);
+            const action = new RemoveStepAction(stepStore, stateStore, connectionStore, step);
             testUndoRedo(action);
-
-            expect(showAttributesCallback).toBeCalledTimes(2);
         });
 
         it("CopyStepAction", () => {
diff --git a/client/src/components/Workflow/Editor/Actions/stepActions.ts b/client/src/components/Workflow/Editor/Actions/stepActions.ts
index 168846c66dfa..c58573cc59e0 100644
--- a/client/src/components/Workflow/Editor/Actions/stepActions.ts
+++ b/client/src/components/Workflow/Editor/Actions/stepActions.ts
@@ -3,8 +3,9 @@ import { useToast } from "@/composables/toast";
 import { useRefreshFromStore } from "@/stores/refreshFromStore";
 import { LazyUndoRedoAction, UndoRedoAction, type UndoRedoStore } from "@/stores/undoRedoStore";
 import { type Connection, type WorkflowConnectionStore } from "@/stores/workflowConnectionStore";
+import { useWorkflowCommentStore } from "@/stores/workflowEditorCommentStore";
 import { type WorkflowStateStore } from "@/stores/workflowEditorStateStore";
-import { type NewStep, type Step, type WorkflowStepStore } from "@/stores/workflowStepStore";
+import { type NewStep, type Step, useWorkflowStepStore, type WorkflowStepStore } from "@/stores/workflowStepStore";
 import { assertDefined } from "@/utils/assertions";
 
 import { cloneStepWithUniqueLabel, getLabelSet } from "./cloneStep";
@@ -208,14 +209,12 @@ export class UpdateStepAction extends UndoRedoAction {
     run() {
         const step = this.stepStore.getStep(this.stepId);
         assertDefined(step);
-        this.stateStore.activeNodeId = this.stepId;
         this.stepStore.updateStep({ ...step, ...this.toPartial });
     }
 
     undo() {
         const step = this.stepStore.getStep(this.stepId);
         assertDefined(step);
-        this.stateStore.activeNodeId = this.stepId;
         this.stepStore.updateStep({ ...step, ...this.fromPartial });
         this.onUndoRedo?.();
     }
@@ -297,7 +296,6 @@ export class InsertStepAction extends UndoRedoAction {
     redo() {
         this.run();
         assertDefined(this.stepId);
-        this.stateStore.activeNodeId = this.stepId;
     }
 }
 
@@ -305,7 +303,6 @@ export class RemoveStepAction extends UndoRedoAction {
     stepStore;
     stateStore;
     connectionStore;
-    showAttributesCallback;
     step: Step;
     connections: Connection[];
 
@@ -313,14 +310,12 @@ export class RemoveStepAction extends UndoRedoAction {
         stepStore: WorkflowStepStore,
         stateStore: WorkflowStateStore,
         connectionStore: WorkflowConnectionStore,
-        showAttributesCallback: () => void,
         step: Step
     ) {
         super();
         this.stepStore = stepStore;
         this.stateStore = stateStore;
         this.connectionStore = connectionStore;
-        this.showAttributesCallback = showAttributesCallback;
         this.step = structuredClone(step);
         this.connections = structuredClone(this.connectionStore.getConnectionsForStep(this.step.id));
     }
@@ -331,14 +326,13 @@ export class RemoveStepAction extends UndoRedoAction {
 
     run() {
         this.stepStore.removeStep(this.step.id);
-        this.showAttributesCallback();
+        this.stateStore.activeNodeId = null;
         this.stateStore.hasChanges = true;
     }
 
     undo() {
         this.stepStore.addStep(structuredClone(this.step), false, false);
         this.connections.forEach((connection) => this.connectionStore.addConnection(connection));
-        this.stateStore.activeNodeId = this.step.id;
         this.stateStore.hasChanges = true;
     }
 }
@@ -369,7 +363,6 @@ export class CopyStepAction extends UndoRedoAction {
     run() {
         const newStep = this.stepStore.addStep(structuredClone(this.step));
         this.stepId = newStep.id;
-        this.stateStore.activeNodeId = this.stepId;
         this.stateStore.hasChanges = true;
     }
 
@@ -415,6 +408,112 @@ export class ToggleStepSelectedAction extends UndoRedoAction {
     }
 }
 
+interface Positions {
+    steps: { id: string; x: number; y: number }[];
+    comments: { id: string; x: number; y: number; w: number; h: number }[];
+}
+
+export class AutoLayoutAction extends UndoRedoAction {
+    stepStore;
+    commentStore;
+    positions: Positions;
+    oldPositions: Positions;
+    workflowId;
+    ran;
+
+    constructor(workflowId: string) {
+        super();
+
+        this.workflowId = workflowId;
+        this.stepStore = useWorkflowStepStore(workflowId);
+        this.commentStore = useWorkflowCommentStore(workflowId);
+
+        this.positions = {
+            steps: [],
+            comments: [],
+        };
+
+        this.oldPositions = {
+            steps: [],
+            comments: [],
+        };
+
+        this.ran = false;
+    }
+
+    get name() {
+        return "auto layout";
+    }
+
+    private mapPositionsToStore(positions: Positions) {
+        positions.steps.map((p) => {
+            const step = this.stepStore.steps[p.id];
+            if (step) {
+                this.stepStore.updateStep({
+                    ...step,
+                    position: {
+                        top: p.y,
+                        left: p.x,
+                    },
+                });
+            }
+        });
+
+        positions.comments.map((c) => {
+            const id = parseInt(c.id, 10);
+            const comment = this.commentStore.commentsRecord[id];
+            if (comment) {
+                this.commentStore.changePosition(id, [c.x, c.y]);
+                this.commentStore.changeSize(id, [c.w, c.h]);
+            }
+        });
+    }
+
+    async run() {
+        this.ran = true;
+
+        this.oldPositions.steps = Object.values(this.stepStore.steps).map((step) => ({
+            id: `${step.id}`,
+            x: step.position?.left ?? 0,
+            y: step.position?.top ?? 0,
+        }));
+
+        this.oldPositions.comments = this.commentStore.comments.map((comment) => ({
+            id: `${comment.id}`,
+            x: comment.position[0],
+            y: comment.position[1],
+            w: comment.size[0],
+            h: comment.size[1],
+        }));
+
+        const { autoLayout } = await import(
+            /* webpackChunkName: "workflowLayout" */ "@/components/Workflow/Editor/modules/layout"
+        );
+
+        this.commentStore.resolveCommentsInFrames();
+        this.commentStore.resolveStepsInFrames();
+
+        const newPositions = await autoLayout(this.workflowId, this.stepStore.steps, this.commentStore.comments);
+
+        assertDefined(newPositions);
+
+        this.positions = newPositions as Positions;
+
+        if (this.ran) {
+            this.mapPositionsToStore(this.positions);
+        }
+    }
+
+    undo() {
+        this.ran = false;
+        this.mapPositionsToStore(this.oldPositions);
+    }
+
+    redo() {
+        this.mapPositionsToStore(this.positions);
+    }
+}
+
 export function useStepActions(
     stepStore: WorkflowStepStore,
     undoRedoStore: UndoRedoStore,
@@ -481,7 +580,6 @@ export function useStepActions(
             undoRedoStore.applyLazyAction(action, timeout);
 
             action.onUndoRedo = () => {
-                stateStore.activeNodeId = step.id;
                 stateStore.hasChanges = true;
             };
 
@@ -547,7 +645,6 @@ export function useStepActions(
 
         if (!action.isEmpty()) {
             action.onUndoRedo = () => {
-                stateStore.activeNodeId = from.id;
                 stateStore.hasChanges = true;
                 refresh();
             };
@@ -555,8 +652,8 @@ export function useStepActions(
         }
     }
 
-    function removeStep(step: Step, showAttributesCallback: () => void) {
-        const action = new RemoveStepAction(stepStore, stateStore, connectionStore, showAttributesCallback, step);
+    function removeStep(step: Step) {
+        const action = new RemoveStepAction(stepStore, stateStore, connectionStore, step);
         undoRedoStore.applyAction(action);
     }
 
@@ -573,7 +670,6 @@ export function useStepActions(
 
         if (!action.isEmpty()) {
             action.onUndoRedo = () => {
-                stateStore.activeNodeId = id;
                 stateStore.hasChanges = true;
                 refresh();
             };
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 1943de38e215..9506a25386af 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isCanvas" id="columns" class="d-flex">
+    <div id="columns" class="d-flex">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -27,168 +27,162 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <FlexPanel side="left">
-            <ToolPanel
-                workflow
-                :module-sections="moduleSections"
-                :data-managers="dataManagers"
-                :editor-workflows="workflows"
-                @onInsertTool="onInsertTool"
-                @onInsertModule="onInsertModule"
-                @onInsertWorkflow="onInsertWorkflow"
-                @onInsertWorkflowSteps="onInsertWorkflowSteps" />
-        </FlexPanel>
-        <div id="center" class="workflow-center">
-            <div class="editor-top-bar" unselectable="on">
-                <span>
-                    <span class="sr-only">Workflow Editor</span>
-                    <span class="editor-title" :title="name"
-                        >{{ name }}
-                        <i v-if="hasChanges" class="text-muted"> (unsaved changes) </i>
-                    </span>
-                </span>
-
-                <b-button-group>
-                    <b-button
-                        :title="undoRedoStore.undoText + ' (Ctrl + Z)'"
-                        :variant="undoRedoStore.hasUndo ? 'secondary' : 'muted'"
-                        @click="undoRedoStore.undo()">
-                        <FontAwesomeIcon icon="fa-arrow-left" />
-                    </b-button>
-                    <b-button
-                        :title="undoRedoStore.redoText + ' (Ctrl + Shift + Z)'"
-                        :variant="undoRedoStore.hasRedo ? 'secondary' : 'muted'"
-                        @click="undoRedoStore.redo()">
-                        <FontAwesomeIcon icon="fa-arrow-right" />
-                    </b-button>
+        <ActivityBar
+            ref="activityBar"
+            :default-activities="workflowEditorActivities"
+            :special-activities="specialWorkflowActivities"
+            activity-bar-id="workflow-editor"
+            :show-admin="false"
+            options-title="Options"
+            options-heading="Workflow Options"
+            options-tooltip="View additional workflow options"
+            options-search-placeholder="Search options"
+            initial-activity="workflow-editor-attributes"
+            :options-icon="faCog"
+            :hide-panel="reportActive"
+            @activityClicked="onActivityClicked">
+            <template v-slot:side-panel="{ isActiveSideBar }">
+                <ToolPanel
+                    v-if="isActiveSideBar('workflow-editor-tools')"
+                    workflow
+                    :module-sections="moduleSections"
+                    :data-managers="dataManagers"
+                    :editor-workflows="workflows"
+                    @onInsertTool="onInsertTool"
+                    @onInsertModule="onInsertModule"
+                    @onInsertWorkflow="onInsertWorkflow"
+                    @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+                <WorkflowLint
+                    v-else-if="isActiveSideBar('workflow-best-practices')"
+                    :untyped-parameters="parameters"
+                    :annotation="annotation"
+                    :creator="creator"
+                    :license="license"
+                    :steps="steps"
+                    :datatypes-mapper="datatypesMapper"
+                    @onAttributes="showAttributes"
+                    @onHighlight="onHighlight"
+                    @onUnhighlight="onUnhighlight"
+                    @onRefactor="onAttemptRefactor"
+                    @onScrollTo="onScrollTo" />
+                <UndoRedoStack v-else-if="isActiveSideBar('workflow-undo-redo')" :store-id="id" />
+                <WorkflowPanel
+                    v-else-if="isActiveSideBar('workflow-editor-workflows')"
+                    :current-workflow-id="id"
+                    @insertWorkflow="onInsertWorkflow"
+                    @insertWorkflowSteps="onInsertWorkflowSteps" />
+                <WorkflowAttributes
+                    v-else-if="isActiveSideBar('workflow-editor-attributes')"
+                    :id="id"
+                    :tags="tags"
+                    :parameters="parameters"
+                    :annotation="annotation"
+                    :name="name"
+                    :version="version"
+                    :versions="versions"
+                    :license="license"
+                    :creator="creator"
+                    @version="onVersion"
+                    @tags="setTags"
+                    @license="onLicense"
+                    @creator="onCreator"
+                    @update:nameCurrent="setName"
+                    @update:annotationCurrent="setAnnotation" />
+            </template>
+        </ActivityBar>
+        <template v-if="reportActive">
+            <MarkdownEditor
+                ref="markdownEditor"
+                :markdown-text="report.markdown"
+                mode="report"
+                :title="'Workflow Report: ' + name"
+                :steps="steps"
+                @insert="insertMarkdown"
+                @update="onReportUpdate">
+                <template v-slot:buttons>
                     <b-button
-                        title="View Last Changes"
-                        :variant="showChanges ? 'primary' : 'link'"
-                        @click="toggleShowChanges">
-                        <FontAwesomeIcon icon="fa-history" />
+                        id="workflow-canvas-button"
+                        v-b-tooltip.hover.bottom
+                        title="Return to Workflow"
+                        variant="link"
+                        role="button"
+                        @click="showAttributes">
+                        <FontAwesomeIcon :icon="faTimes" />
                     </b-button>
-                </b-button-group>
-            </div>
-            <WorkflowGraph
-                v-if="!datatypesMapperLoading"
-                :steps="steps"
-                :datatypes-mapper="datatypesMapper"
-                :highlight-id="highlightId"
-                :scroll-to-id="scrollToId"
-                @scrollTo="scrollToId = null"
-                @transform="(value) => (transform = value)"
-                @graph-offset="(value) => (graphOffset = value)"
-                @onClone="onClone"
-                @onCreate="onInsertTool"
-                @onChange="onChange"
-                @onRemove="onRemove"
-                @onUpdateStepPosition="onUpdateStepPosition">
-            </WorkflowGraph>
-        </div>
-        <FlexPanel side="right">
-            <div class="unified-panel bg-white">
-                <div class="unified-panel-header" unselectable="on">
-                    <div class="unified-panel-header-inner">
-                        <WorkflowOptions
-                            :is-new-temp-workflow="isNewTempWorkflow"
-                            :has-changes="hasChanges"
-                            :has-invalid-connections="hasInvalidConnections"
-                            :current-active-panel="showInPanel"
-                            @onSave="onSave"
-                            @onCreate="onCreate"
-                            @onSaveAs="onSaveAs"
-                            @onRun="onRun"
-                            @onDownload="onDownload"
-                            @onReport="onReport"
-                            @onLayout="onLayout"
-                            @onEdit="onEdit"
-                            @onAttributes="() => showAttributes(true)"
-                            @onLint="onLint"
-                            @onUpgrade="onUpgrade" />
-                    </div>
-                </div>
-                <div ref="rightPanelElement" class="unified-panel-body workflow-right p-2">
-                    <div v-if="!initialLoading" class="position-relative h-100">
-                        <UndoRedoStack v-if="showChanges" :store-id="id" />
-                        <FormTool
-                            v-else-if="hasActiveNodeTool"
-                            :key="activeStep.id"
-                            :step="activeStep"
-                            :datatypes="datatypes"
-                            @onChangePostJobActions="onChangePostJobActions"
-                            @onAnnotation="onAnnotation"
-                            @onLabel="onLabel"
-                            @onSetData="onSetData"
-                            @onUpdateStep="updateStep" />
-                        <FormDefault
-                            v-else-if="hasActiveNodeDefault"
-                            :step="activeStep"
-                            :datatypes="datatypes"
-                            @onAnnotation="onAnnotation"
-                            @onLabel="onLabel"
-                            @onEditSubworkflow="onEditSubworkflow"
-                            @onAttemptRefactor="onAttemptRefactor"
-                            @onSetData="onSetData"
-                            @onUpdateStep="updateStep" />
-                        <WorkflowAttributes
-                            v-else-if="showInPanel === 'attributes'"
-                            :id="id"
-                            :tags="tags"
-                            :parameters="parameters"
-                            :annotation="annotation"
-                            :name="name"
-                            :version="version"
-                            :versions="versions"
-                            :license="license"
-                            :creator="creator"
-                            @onVersion="onVersion"
-                            @onTags="setTags"
-                            @onLicense="onLicense"
-                            @onCreator="onCreator"
-                            @update:nameCurrent="setName"
-                            @update:annotationCurrent="setAnnotation" />
-                        <WorkflowLint
-                            v-else-if="showInPanel === 'lint'"
-                            :untyped-parameters="parameters"
-                            :annotation="annotation"
-                            :creator="creator"
-                            :license="license"
-                            :steps="steps"
-                            :datatypes-mapper="datatypesMapper"
-                            @onAttributes="() => showAttributes(true)"
-                            @onHighlight="onHighlight"
-                            @onUnhighlight="onUnhighlight"
-                            @onRefactor="onAttemptRefactor"
-                            @onScrollTo="onScrollTo" />
-                    </div>
+                </template>
+            </MarkdownEditor>
+        </template>
+        <template v-else>
+            <div id="center" class="workflow-center">
+                <div class="editor-top-bar" unselectable="on">
+                    <span>
+                        <span class="sr-only">Workflow Editor</span>
+                        <span class="editor-title" :title="name"
+                            >{{ name }}
+                            <i v-if="hasChanges" class="text-muted"> (unsaved changes) </i>
+                            <b-button
+                                v-if="hasChanges"
+                                id="workflow-save-button"
+                                class="py-1 px-2"
+                                variant="link"
+                                :title="saveWorkflowTitle"
+                                @click="saveOrCreate">
+                                <FontAwesomeIcon :icon="faSave" />
+                            </b-button>
+                        </span>
+                    </span>
+
+                    <b-button-group>
+                        <b-button
+                            :title="undoRedoStore.undoText + ' (Ctrl + Z)'"
+                            :variant="undoRedoStore.hasUndo ? 'secondary' : 'muted'"
+                            @click="undoRedoStore.undo()">
+                            <FontAwesomeIcon icon="fa-arrow-left" />
+                        </b-button>
+                        <b-button
+                            :title="undoRedoStore.redoText + ' (Ctrl + Shift + Z)'"
+                            :variant="undoRedoStore.hasRedo ? 'secondary' : 'muted'"
+                            @click="undoRedoStore.redo()">
+                            <FontAwesomeIcon icon="fa-arrow-right" />
+                        </b-button>
+                    </b-button-group>
                 </div>
+                <WorkflowGraph
+                    v-if="!datatypesMapperLoading"
+                    :steps="steps"
+                    :datatypes-mapper="datatypesMapper"
+                    :highlight-id="highlightId"
+                    :scroll-to-id="scrollToId"
+                    :initial-position="{ x: 50, y: 50 }"
+                    @scrollTo="scrollToId = null"
+                    @transform="(value) => (transform = value)"
+                    @graph-offset="(value) => (graphOffset = value)"
+                    @onClone="onClone"
+                    @onCreate="onInsertTool"
+                    @onChange="onChange"
+                    @onRemove="onRemove"
+                    @onUpdateStepPosition="onUpdateStepPosition">
+                    <NodeInspector
+                        v-if="activeStep"
+                        :step="activeStep"
+                        :datatypes="datatypes"
+                        @postJobActionsChanged="onChangePostJobActions"
+                        @annotationChanged="onAnnotation"
+                        @labelChanged="onLabel"
+                        @dataChanged="onSetData"
+                        @stepUpdated="updateStep"
+                        @editSubworkflow="onEditSubworkflow"
+                        @attemptRefactor="onAttemptRefactor"
+                        @close="activeNodeId = null"></NodeInspector>
+                </WorkflowGraph>
             </div>
-        </FlexPanel>
-    </div>
-    <MarkdownEditor
-        v-else
-        :markdown-text="report.markdown"
-        mode="report"
-        :title="'Workflow Report: ' + name"
-        :steps="steps"
-        @onUpdate="onReportUpdate">
-        <template v-slot:buttons>
-            <b-button
-                id="workflow-canvas-button"
-                v-b-tooltip.hover.bottom
-                title="Return to Workflow"
-                variant="link"
-                role="button"
-                @click="onEdit">
-                <span class="fa fa-times" />
-            </b-button>
         </template>
-    </MarkdownEditor>
+    </div>
 </template>
 
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowLeft, faArrowRight, faHistory } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight, faCog, faHistory, faSave, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { whenever } from "@vueuse/core";
 import { logicAnd, logicNot, logicOr } from "@vueuse/math";
@@ -197,7 +191,7 @@ import { storeToRefs } from "pinia";
 import Vue, { computed, nextTick, onUnmounted, ref, unref, watch } from "vue";
 
 import { getUntypedWorkflowParameters } from "@/components/Workflow/Editor/modules/parameters";
-import { ConfirmDialog } from "@/composables/confirmDialog";
+import { ConfirmDialog, useConfirmDialog } from "@/composables/confirmDialog";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useMagicKeys } from "@/composables/useMagicKeys";
 import { useUid } from "@/composables/utils/uid";
@@ -212,38 +206,35 @@ import { Services } from "../services";
 import { InsertStepAction, useStepActions } from "./Actions/stepActions";
 import { CopyIntoWorkflowAction, SetValueActionHandler } from "./Actions/workflowActions";
 import { defaultPosition } from "./composables/useDefaultStepPosition";
+import { useActivityLogic, useSpecialWorkflowActivities, workflowEditorActivities } from "./modules/activities";
 import { fromSimple } from "./modules/model";
 import { getModule, getVersions, loadWorkflow, saveWorkflow } from "./modules/services";
 import { getStateUpgradeMessages } from "./modules/utilities";
 import reportDefault from "./reportDefault";
 
-import WorkflowAttributes from "./Attributes.vue";
 import WorkflowLint from "./Lint.vue";
 import MessagesModal from "./MessagesModal.vue";
-import WorkflowOptions from "./Options.vue";
+import NodeInspector from "./NodeInspector.vue";
 import RefactorConfirmationModal from "./RefactorConfirmationModal.vue";
 import SaveChangesModal from "./SaveChangesModal.vue";
 import StateUpgradeModal from "./StateUpgradeModal.vue";
+import WorkflowAttributes from "./WorkflowAttributes.vue";
 import WorkflowGraph from "./WorkflowGraph.vue";
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolPanel from "@/components/Panels/ToolPanel.vue";
+import WorkflowPanel from "@/components/Panels/WorkflowPanel.vue";
 import UndoRedoStack from "@/components/UndoRedo/UndoRedoStack.vue";
-import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
-import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 
 library.add(faArrowLeft, faArrowRight, faHistory);
 
 export default {
     components: {
+        ActivityBar,
         MarkdownEditor,
-        FlexPanel,
         SaveChangesModal,
         StateUpgradeModal,
         ToolPanel,
-        FormDefault,
-        FormTool,
-        WorkflowOptions,
         WorkflowAttributes,
         WorkflowLint,
         RefactorConfirmationModal,
@@ -251,6 +242,8 @@ export default {
         WorkflowGraph,
         FontAwesomeIcon,
         UndoRedoStack,
+        WorkflowPanel,
+        NodeInspector,
     },
     props: {
         workflowId: {
@@ -295,7 +288,8 @@ export default {
         whenever(logicAnd(undoKeys, logicNot(redoKeys)), undo);
         whenever(redoKeys, redo);
 
-        const isCanvas = ref(true);
+        const activityBar = ref(null);
+        const reportActive = computed(() => activityBar.value?.isActiveSideBar("workflow-editor-report"));
 
         const parameters = ref(null);
 
@@ -303,22 +297,10 @@ export default {
             parameters.value = getUntypedWorkflowParameters(steps.value);
         }
 
-        const showInPanel = ref("attributes");
-        const showChanges = ref(false);
-
-        function toggleShowChanges() {
-            ensureParametersSet();
-            showChanges.value = !showChanges.value;
-        }
-
-        function showAttributes(closeChanges = false) {
-            if (closeChanges) {
-                showChanges.value = false;
-            }
-
+        function showAttributes() {
             ensureParametersSet();
             stateStore.activeNodeId = null;
-            showInPanel.value = "attributes";
+            activityBar.value?.setActiveSideBar("workflow-editor-attributes");
         }
 
         const name = ref("Unnamed Workflow");
@@ -457,15 +439,39 @@ export default {
 
         const stepActions = useStepActions(stepStore, undoRedoStore, stateStore, connectionStore);
 
+        const markdownEditor = ref(null);
+        function insertMarkdown(markdown) {
+            markdownEditor.value?.insertMarkdown(markdown);
+        }
+
+        const isNewTempWorkflow = computed(() => !props.workflowId);
+
+        const { specialWorkflowActivities } = useSpecialWorkflowActivities(
+            computed(() => ({
+                hasInvalidConnections: hasInvalidConnections.value,
+            }))
+        );
+
+        const saveWorkflowTitle = computed(() =>
+            hasInvalidConnections.value
+                ? "Workflow has invalid connections, review and remove invalid connections"
+                : "Save Workflow"
+        );
+
+        useActivityLogic(
+            computed(() => ({
+                activityBarId: "workflow-editor",
+                isNewTempWorkflow: isNewTempWorkflow.value,
+            }))
+        );
+
+        const { confirm } = useConfirmDialog();
+
         return {
             id,
             name,
-            isCanvas,
             parameters,
             ensureParametersSet,
-            showInPanel,
-            showChanges,
-            toggleShowChanges,
             showAttributes,
             setName,
             report,
@@ -496,6 +502,14 @@ export default {
             initialLoading,
             stepActions,
             undoRedoStore,
+            activityBar,
+            reportActive,
+            markdownEditor,
+            insertMarkdown,
+            specialWorkflowActivities,
+            isNewTempWorkflow,
+            saveWorkflowTitle,
+            confirm,
         };
     },
     data() {
@@ -520,6 +534,10 @@ export default {
             debounceTimer: null,
             showSaveChangesModal: false,
             navUrl: "",
+            workflowEditorActivities,
+            faTimes,
+            faCog,
+            faSave,
         };
     },
     computed: {
@@ -529,12 +547,6 @@ export default {
         hasActiveNodeDefault() {
             return this.activeStep && this.activeStep?.type != "tool";
         },
-        hasActiveNodeTool() {
-            return this.activeStep?.type == "tool";
-        },
-        isNewTempWorkflow() {
-            return !this.workflowId;
-        },
     },
     watch: {
         id(newId, oldId) {
@@ -633,7 +645,7 @@ export default {
             this.stepActions.updateStep(nodeId, partialStep);
         },
         onRemove(nodeId) {
-            this.stepActions.removeStep(this.steps[nodeId], this.showAttributes);
+            this.stepActions.removeStep(this.steps[nodeId]);
         },
         onEditSubworkflow(contentId) {
             const editUrl = `/workflows/edit?workflow_id=${contentId}`;
@@ -674,10 +686,6 @@ export default {
             });
         },
         async onInsertWorkflowSteps(workflowId, stepCount) {
-            if (!this.isCanvas) {
-                this.isCanvas = true;
-                return;
-            }
             if (stepCount < 10) {
                 this.copyIntoWorkflow(workflowId);
             } else {
@@ -718,12 +726,56 @@ export default {
         onSaveAs() {
             this.showSaveAsModal = true;
         },
-        onLayout() {
-            return import(/* webpackChunkName: "workflowLayout" */ "./modules/layout.ts").then((layout) => {
-                layout.autoLayout(this.id, this.steps).then((newSteps) => {
-                    newSteps.map((step) => this.stepStore.updateStep(step));
-                });
-            });
+        async saveOrCreate() {
+            if (this.hasInvalidConnections) {
+                const confirmed = await this.confirm(
+                    `Workflow has invalid connections. You can save the workflow, but it may not run correctly.`,
+                    {
+                        id: "save-workflow-confirmation",
+                        okTitle: "Save Workflow",
+                    }
+                );
+
+                if (!confirmed) {
+                    return;
+                }
+            }
+
+            if (this.isNewTempWorkflow) {
+                await this.onCreate();
+            } else {
+                await this.onSave();
+            }
+        },
+        async onActivityClicked(activityId) {
+            if (activityId === "save-and-exit") {
+                await this.saveOrCreate();
+                this.$router.push("/workflows/list");
+            }
+
+            if (activityId === "exit") {
+                this.$router.push("/workflows/list");
+            }
+
+            if (activityId === "workflow-download") {
+                this.onDownload();
+            }
+
+            if (activityId === "workflow-upgrade") {
+                this.onUpgrade();
+            }
+
+            if (activityId === "workflow-run") {
+                this.onRun();
+            }
+
+            if (activityId === "save-workflow") {
+                await this.saveOrCreate();
+            }
+
+            if (activityId === "save-workflow-as") {
+                this.onSaveAs();
+            }
         },
         onAnnotation(nodeId, newAnnotation) {
             this.stepActions.setAnnotation(this.steps[nodeId], newAnnotation);
@@ -797,21 +849,9 @@ export default {
         onUnhighlight(stepId) {
             this.highlightId = null;
         },
-        onLint() {
-            this.ensureParametersSet();
-            this.stateStore.activeNodeId = null;
-            this.showInPanel = "lint";
-            this.showChanges = false;
-        },
         onUpgrade() {
             this.onAttemptRefactor([{ action_type: "upgrade_all_steps" }]);
         },
-        onEdit() {
-            this.isCanvas = true;
-        },
-        onReport() {
-            this.isCanvas = false;
-        },
         onReportUpdate(markdown) {
             this.hasChanges = true;
             this.report.markdown = markdown;
@@ -874,11 +914,6 @@ export default {
             }
         },
         _insertStep(contentId, name, type) {
-            if (!this.isCanvas) {
-                this.isCanvas = true;
-                return;
-            }
-
             const action = new InsertStepAction(this.stepStore, this.stateStore, {
                 contentId,
                 name,
diff --git a/client/src/components/Workflow/Editor/Lint.test.js b/client/src/components/Workflow/Editor/Lint.test.js
index 6c8e516d428f..83b749fd4f5c 100644
--- a/client/src/components/Workflow/Editor/Lint.test.js
+++ b/client/src/components/Workflow/Editor/Lint.test.js
@@ -111,28 +111,18 @@ describe("Lint", () => {
 
     it("test checked vs unchecked issues", async () => {
         const checked = wrapper.findAll("[data-icon='check']");
-        // Expecting 5 checks:
-        // 1. Workflow is annotated
-        // 2. Non-optional inputs (if available) are formal inputs
-        // 3. Inputs (if available) have labels and annotations
         expect(checked.length).toBe(2);
+
         const unchecked = wrapper.findAll("[data-icon='exclamation-triangle']");
-        // Expecting 3 warnings:
-        // 1. Workflow creator is not specified
-        // 2. Workflow license is not specified
-        // 3. Workflow has no labeled outputs
-        // 4. Untyped parameter found
-        // 5. Missing an annotation
-        // 6. Unlabeled output found
         expect(unchecked.length).toBe(5);
+
         const links = wrapper.findAll("a");
-        expect(links.length).toBe(6);
-        expect(links.at(0).text()).toContain("Try to automatically fix issues.");
-        expect(links.at(1).text()).toContain("Provide Creator Details.");
-        expect(links.at(2).text()).toContain("Specify a License.");
-        expect(links.at(3).text()).toContain("untyped_parameter");
-        expect(links.at(4).text()).toContain("data input: Missing an annotation");
-        expect(links.at(5).text()).toContain("step label: output");
+        expect(links.length).toBe(5);
+        expect(links.at(0).text()).toContain("Provide Creator Details.");
+        expect(links.at(1).text()).toContain("Specify a License.");
+        expect(links.at(2).text()).toContain("untyped_parameter");
+        expect(links.at(3).text()).toContain("data input: Missing an annotation");
+        expect(links.at(4).text()).toContain("step label: output");
     });
 
     it("should fire refactor event to extract untyped parameter and remove unlabeled workflows", async () => {
diff --git a/client/src/components/Workflow/Editor/Lint.vue b/client/src/components/Workflow/Editor/Lint.vue
index 86b80a1c392c..3cb265c9d90c 100644
--- a/client/src/components/Workflow/Editor/Lint.vue
+++ b/client/src/components/Workflow/Editor/Lint.vue
@@ -1,77 +1,69 @@
 <template>
-    <b-card id="lint-panel" header-tag="header" body-class="p-0" class="right-content">
-        <template v-slot:header>
-            <div class="mb-1 font-weight-bold">
-                <FontAwesomeIcon icon="magic" class="mr-1" />
-                Best Practices Review
-            </div>
-            <div v-if="showRefactor">
-                <a class="refactor-button" href="#" @click="onRefactor"> Try to automatically fix issues. </a>
-            </div>
+    <ActivityPanel title="Best Practices Review">
+        <template v-if="showRefactor" v-slot:header>
+            <button class="refactor-button ui-link" @click="onRefactor">Try to automatically fix issues.</button>
         </template>
-        <b-card-body>
-            <LintSection
-                :okay="checkAnnotation"
-                success-message="This workflow is annotated. Ideally, this helps the executors of the workflow
+        <LintSection
+            :okay="checkAnnotation"
+            success-message="This workflow is annotated. Ideally, this helps the executors of the workflow
                     understand the purpose and usage of the workflow."
-                warning-message="This workflow is not annotated. Providing an annotation helps workflow executors
+            warning-message="This workflow is not annotated. Providing an annotation helps workflow executors
                     understand the purpose and usage of the workflow."
-                attribute-link="Annotate your Workflow."
-                @onClick="onAttributes" />
-            <LintSection
-                :okay="checkCreator"
-                success-message="This workflow defines creator information."
-                warning-message="This workflow does not specify creator(s). This is important metadata for workflows
+            attribute-link="Annotate your Workflow."
+            @onClick="onAttributes" />
+        <LintSection
+            :okay="checkCreator"
+            success-message="This workflow defines creator information."
+            warning-message="This workflow does not specify creator(s). This is important metadata for workflows
                     that will be published and/or shared to help workflow executors know how to cite the
                     workflow authors."
-                attribute-link="Provide Creator Details."
-                @onClick="onAttributes" />
-            <LintSection
-                :okay="checkLicense"
-                success-message="This workflow defines a license."
-                warning-message="This workflow does not specify a license. This is important metadata for workflows
+            attribute-link="Provide Creator Details."
+            @onClick="onAttributes" />
+        <LintSection
+            :okay="checkLicense"
+            success-message="This workflow defines a license."
+            warning-message="This workflow does not specify a license. This is important metadata for workflows
                     that will be published and/or shared to help workflow executors understand how it
                     may be used."
-                attribute-link="Specify a License."
-                @onClick="onAttributes" />
-            <LintSection
-                success-message="Workflow parameters are using formal input parameters."
-                warning-message="This workflow uses legacy workflow parameters. They should be replaced with
+            attribute-link="Specify a License."
+            @onClick="onAttributes" />
+        <LintSection
+            success-message="Workflow parameters are using formal input parameters."
+            warning-message="This workflow uses legacy workflow parameters. They should be replaced with
                 formal workflow inputs. Formal input parameters make tracking workflow provenance, usage within subworkflows,
                 and executing the workflow via the API more robust:"
-                :warning-items="warningUntypedParameters"
-                @onMouseOver="onHighlight"
-                @onMouseLeave="onUnhighlight"
-                @onClick="onFixUntypedParameter" />
-            <LintSection
-                success-message="All non-optional inputs to workflow steps are connected to formal input parameters."
-                warning-message="Some non-optional inputs are not connected to formal workflow inputs. Formal input parameters
+            :warning-items="warningUntypedParameters"
+            @onMouseOver="onHighlight"
+            @onMouseLeave="onUnhighlight"
+            @onClick="onFixUntypedParameter" />
+        <LintSection
+            success-message="All non-optional inputs to workflow steps are connected to formal input parameters."
+            warning-message="Some non-optional inputs are not connected to formal workflow inputs. Formal input parameters
                 make tracking workflow provenance, usage within subworkflows, and executing the workflow via the API more robust:"
-                :warning-items="warningDisconnectedInputs"
-                @onMouseOver="onHighlight"
-                @onMouseLeave="onUnhighlight"
-                @onClick="onFixDisconnectedInput" />
-            <LintSection
-                success-message="All workflow inputs have labels and annotations."
-                warning-message="Some workflow inputs are missing labels and/or annotations:"
-                :warning-items="warningMissingMetadata"
-                @onMouseOver="onHighlight"
-                @onMouseLeave="onUnhighlight"
-                @onClick="onScrollTo" />
-            <LintSection
-                success-message="This workflow has outputs and they all have valid labels."
-                warning-message="The following workflow outputs have no labels, they should be assigned a useful label or
+            :warning-items="warningDisconnectedInputs"
+            @onMouseOver="onHighlight"
+            @onMouseLeave="onUnhighlight"
+            @onClick="onFixDisconnectedInput" />
+        <LintSection
+            success-message="All workflow inputs have labels and annotations."
+            warning-message="Some workflow inputs are missing labels and/or annotations:"
+            :warning-items="warningMissingMetadata"
+            @onMouseOver="onHighlight"
+            @onMouseLeave="onUnhighlight"
+            @onClick="openAndFocus" />
+        <LintSection
+            success-message="This workflow has outputs and they all have valid labels."
+            warning-message="The following workflow outputs have no labels, they should be assigned a useful label or
                     unchecked in the workflow editor to mark them as no longer being a workflow output:"
-                :warning-items="warningUnlabeledOutputs"
-                @onMouseOver="onHighlight"
-                @onMouseLeave="onUnhighlight"
-                @onClick="onFixUnlabeledOutputs" />
-            <div v-if="!hasActiveOutputs">
-                <FontAwesomeIcon icon="exclamation-triangle" class="text-warning" />
-                <span>This workflow has no labeled outputs, please select and label at least one output.</span>
-            </div>
-        </b-card-body>
-    </b-card>
+            :warning-items="warningUnlabeledOutputs"
+            @onMouseOver="onHighlight"
+            @onMouseLeave="onUnhighlight"
+            @onClick="onFixUnlabeledOutputs" />
+        <div v-if="!hasActiveOutputs">
+            <FontAwesomeIcon icon="exclamation-triangle" class="text-warning" />
+            <span>This workflow has no labeled outputs, please select and label at least one output.</span>
+        </div>
+    </ActivityPanel>
 </template>
 
 <script>
@@ -79,7 +71,6 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExclamationTriangle, faMagic } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import BootstrapVue from "bootstrap-vue";
-import LintSection from "components/Workflow/Editor/LintSection";
 import { UntypedParameters } from "components/Workflow/Editor/modules/parameters";
 import { storeToRefs } from "pinia";
 import Vue from "vue";
@@ -98,6 +89,9 @@ import {
     getUntypedParameters,
 } from "./modules/linting";
 
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import LintSection from "@/components/Workflow/Editor/LintSection.vue";
+
 Vue.use(BootstrapVue);
 
 library.add(faExclamationTriangle);
@@ -107,6 +101,7 @@ export default {
     components: {
         FontAwesomeIcon,
         LintSection,
+        ActivityPanel,
     },
     props: {
         untypedParameters: {
@@ -136,9 +131,9 @@ export default {
     },
     setup() {
         const stores = useWorkflowStores();
-        const { connectionStore, stepStore } = stores;
+        const { connectionStore, stepStore, stateStore } = stores;
         const { hasActiveOutputs } = storeToRefs(stepStore);
-        return { stores, connectionStore, stepStore, hasActiveOutputs };
+        return { stores, connectionStore, stepStore, hasActiveOutputs, stateStore };
     },
     computed: {
         showRefactor() {
@@ -218,7 +213,8 @@ export default {
                 this.$emit("onScrollTo", item.stepId);
             }
         },
-        onScrollTo(item) {
+        openAndFocus(item) {
+            this.stateStore.activeNodeId = item.stepId;
             this.$emit("onScrollTo", item.stepId);
         },
         onHighlight(item) {
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 4af194ad89a6..1f4085242a70 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -18,7 +18,8 @@
         <div
             class="unselectable clearfix card-header py-1 px-2"
             :class="headerClass"
-            @click.exact="makeActive"
+            @pointerdown.exact="onPointerDown"
+            @pointerup.exact="onPointerUp"
             @click.shift.capture.prevent.stop="toggleSelected"
             @keyup.enter="makeActive">
             <b-button-group class="float-right">
@@ -91,7 +92,8 @@
             variant="danger"
             show
             class="node-error m-0 rounded-0 rounded-bottom"
-            @click.exact="makeActive"
+            @pointerdown.exact="onPointerDown"
+            @pointerup.exact="onPointerUp"
             @click.shift.capture.prevent.stop="toggleSelected">
             {{ errors }}
         </b-alert>
@@ -100,7 +102,8 @@
             v-else
             class="node-body position-relative card-body p-0 mx-2"
             :class="{ 'cursor-pointer': isInvocation }"
-            @click.exact="makeActive"
+            @pointerdown.exact="onPointerDown"
+            @pointerup.exact="onPointerUp"
             @click.shift.capture.prevent.stop="toggleSelected"
             @keyup.enter="makeActive">
             <NodeInput
@@ -160,7 +163,9 @@ import WorkflowIcons from "@/components/Workflow/icons";
 import type { GraphStep } from "@/composables/useInvocationGraph";
 import { useWorkflowStores } from "@/composables/workflowStores";
 import type { TerminalPosition, XYPosition } from "@/stores/workflowEditorStateStore";
+import { useWorkflowNodeInspectorStore } from "@/stores/workflowNodeInspectorStore";
 import type { Step } from "@/stores/workflowStepStore";
+import { composedPartialPath, isClickable } from "@/utils/dom";
 
 import { ToggleStepSelectedAction } from "./Actions/stepActions";
 import type { OutputTerminals } from "./modules/terminals";
@@ -224,12 +229,14 @@ const postJobActions = computed(() => props.step.post_job_actions || {});
 const workflowOutputs = computed(() => props.step.workflow_outputs || []);
 const { connectionStore, stateStore, stepStore, undoRedoStore } = useWorkflowStores();
 const isLoading = computed(() => Boolean(stateStore.getStepLoadingState(props.id)?.loading));
+
 useNodePosition(
     elHtml,
     props.id,
     stateStore,
     computed(() => props.scale)
 );
+
 const title = computed(() => props.step.label || props.step.name);
 const idString = computed(() => `wf-node-step-${props.id}`);
 const showRule = computed(() => props.step.inputs?.length > 0 && props.step.outputs?.length > 0);
@@ -247,10 +254,13 @@ const classes = computed(() => {
         "node-multi-selected": stateStore.getStepMultiSelected(props.id),
     };
 });
+
 const style = computed(() => {
     return { top: props.step.position!.top + "px", left: props.step.position!.left + "px" };
 });
+
 const errors = computed(() => props.step.errors || stateStore.getStepLoadingState(props.id)?.error);
+
 const headerClass = computed(() => {
     return {
         ...invocationStep.value.headerClass,
@@ -259,6 +269,7 @@ const headerClass = computed(() => {
         "cursor-move": !props.readonly && !props.isInvocation,
     };
 });
+
 const inputs = computed(() => {
     const connections = connectionStore.getConnectionsForStep(props.id);
     const extraStepInputs = stepStore.getStepExtraInputs(props.id);
@@ -275,6 +286,7 @@ const inputs = computed(() => {
     });
     return [...stepInputs, ...invalidInputTerminalSource];
 });
+
 const invalidOutputs = computed(() => {
     const connections = connectionStore.getConnectionsForStep(props.id);
     const invalidConnections = connections.filter(
@@ -287,6 +299,7 @@ const invalidOutputs = computed(() => {
         return { name, optional: false, datatypes: [], valid: false };
     });
 });
+
 const invocationStep = computed(() => props.step as GraphStep);
 const outputs = computed(() => {
     return [...props.step.outputs, ...invalidOutputs.value];
@@ -296,7 +309,56 @@ function onDragConnector(dragPosition: TerminalPosition, terminal: OutputTermina
     emit("onDragConnector", dragPosition, terminal);
 }
 
+const mouseMovementThreshold = 9;
+const singleClickTimeout = 800;
+const doubleClickTimeout = 500;
+
+let mouseDownTime = 0;
+let doubleClickTime = 0;
+
+let movementDistance = 0;
+let lastPosition: XYPosition | null = null;
+
+const inspectorStore = useWorkflowNodeInspectorStore();
+
+function onPointerDown() {
+    mouseDownTime = Date.now();
+}
+
+function onPointerUp(e: PointerEvent) {
+    const path = composedPartialPath(e);
+    const unclickable = path.every((target) => !isClickable(target as Element));
+
+    if (!unclickable) {
+        return;
+    }
+
+    const mouseUpTime = Date.now();
+    const clickTime = mouseUpTime - mouseDownTime;
+
+    if (clickTime <= singleClickTimeout && movementDistance <= mouseMovementThreshold) {
+        makeActive();
+    }
+
+    const timeBetweenClicks = mouseUpTime - doubleClickTime;
+
+    if (timeBetweenClicks < doubleClickTimeout) {
+        inspectorStore.setMaximized(props.step, true);
+    }
+
+    doubleClickTime = Date.now();
+    lastPosition = null;
+    movementDistance = 0;
+}
+
 function onMoveTo(position: XYPosition) {
+    if (lastPosition) {
+        movementDistance += Math.abs(position.x - lastPosition.x);
+        movementDistance += Math.abs(position.y - lastPosition.y);
+    }
+
+    lastPosition = position;
+
     emit("onUpdateStepPosition", props.id, {
         top: position.y + props.scroll.y.value / props.scale,
         left: position.x + props.scroll.x.value / props.scale,
@@ -337,6 +399,8 @@ function toggleSelected() {
 @import "theme/blue.scss";
 
 .workflow-node {
+    --dblclick: prevent;
+
     position: absolute;
     z-index: 100;
     width: $workflow-node-width;
diff --git a/client/src/components/Workflow/Editor/NodeInspector.vue b/client/src/components/Workflow/Editor/NodeInspector.vue
new file mode 100644
index 000000000000..af19ab5cd1bf
--- /dev/null
+++ b/client/src/components/Workflow/Editor/NodeInspector.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { faCog, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BButtonGroup, BDropdown, BDropdownForm, BDropdownItemButton, BFormCheckbox } from "bootstrap-vue";
+//@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
+import { ArrowLeftFromLine, ArrowRightToLine } from "lucide-vue";
+import { computed } from "vue";
+
+import { useWorkflowNodeInspectorStore } from "@/stores/workflowNodeInspectorStore";
+import type { Step } from "@/stores/workflowStepStore";
+
+import FormDefault from "./Forms/FormDefault.vue";
+import FormTool from "./Forms/FormTool.vue";
+import DraggableSeparator from "@/components/Common/DraggableSeparator.vue";
+import Heading from "@/components/Common/Heading.vue";
+import IdleLoad from "@/components/Common/IdleLoad.vue";
+
+const props = defineProps<{
+    step: Step;
+    datatypes: string[];
+}>();
+
+const emit = defineEmits<{
+    (e: "postJobActionsChanged", id: string, postJobActions: unknown): void;
+    (e: "annotationChanged", id: string, annotation: string): void;
+    (e: "labelChanged", id: string, label: string): void;
+    (e: "dataChanged", id: string, data: unknown): void;
+    (e: "stepUpdated", id: string, step: Step): void;
+    (e: "editSubworkflow", id: string): void;
+    (e: "attemptRefactor", ...args: any[]): void;
+    (e: "close"): void;
+}>();
+
+const inspectorStore = useWorkflowNodeInspectorStore();
+
+const maximized = computed(() => inspectorStore.maximized(props.step));
+const width = computed(() => inspectorStore.width(props.step));
+
+const cssVars = computed(() => ({
+    "--width": `${width.value}px`,
+}));
+
+const isTool = computed(() => props.step.type === "tool");
+
+const title = computed(() => `${props.step.id + 1}: ${props.step.label ?? props.step.name}`);
+
+function close() {
+    inspectorStore.generalMaximized = false;
+    emit("close");
+}
+</script>
+
+<template>
+    <section class="tool-inspector" :class="{ maximized }" :style="cssVars">
+        <DraggableSeparator
+            v-if="!maximized"
+            inner
+            :position="width"
+            side="right"
+            :min="100"
+            :max="1200"
+            @positionChanged="(v) => inspectorStore.setWidth(props.step, v)"></DraggableSeparator>
+
+        <div class="inspector-heading">
+            <Heading h2 inline size="sm"> {{ title }} </Heading>
+
+            <BButtonGroup>
+                <BButton
+                    v-if="!maximized"
+                    class="heading-button"
+                    variant="link"
+                    size="md"
+                    title="maximize"
+                    @click="inspectorStore.setMaximized(props.step, true)">
+                    <ArrowLeftFromLine absolute-stroke-width :size="17" />
+                </BButton>
+                <BButton
+                    v-else
+                    class="heading-button"
+                    variant="link"
+                    size="md"
+                    title="minimize"
+                    @click="inspectorStore.setMaximized(props.step, false)">
+                    <ArrowRightToLine absolute-stroke-width :size="17" />
+                </BButton>
+
+                <BDropdown class="dropdown" toggle-class="heading-button" variant="link" size="md" no-caret>
+                    <template v-slot:button-content>
+                        <FontAwesomeIcon :icon="faCog" fixed-width />
+                    </template>
+
+                    <BDropdownForm form-class="px-2" title="remember size for all steps using this tool">
+                        <BFormCheckbox
+                            :checked="inspectorStore.isStored(props.step)"
+                            @input="(v) => inspectorStore.setStored(props.step, v)">
+                            remember size
+                        </BFormCheckbox>
+                    </BDropdownForm>
+
+                    <BDropdownItemButton @click="inspectorStore.clearAllStored">
+                        reset all stored sizes
+                    </BDropdownItemButton>
+                </BDropdown>
+
+                <BButton class="heading-button" variant="link" size="md" title="close" @click="close">
+                    <FontAwesomeIcon :icon="faTimes" fixed-width />
+                </BButton>
+            </BButtonGroup>
+        </div>
+
+        <div class="inspector-content">
+            <IdleLoad :key="props.step.id" spinner center class="w-100 h-50">
+                <FormTool
+                    v-if="isTool"
+                    class="w-100"
+                    :step="props.step"
+                    :datatypes="props.datatypes"
+                    @onSetData="(id, d) => emit('dataChanged', id, d)"
+                    @onUpdateStep="(id, s) => emit('stepUpdated', id, s)"
+                    @onChangePostJobActions="(id, a) => emit('postJobActionsChanged', id, a)"
+                    @onAnnotation="(id, a) => emit('annotationChanged', id, a)"
+                    @onLabel="(id, l) => emit('labelChanged', id, l)"></FormTool>
+                <FormDefault
+                    v-else
+                    class="w-100"
+                    :step="props.step"
+                    :datatypes="datatypes"
+                    @onSetData="(id, d) => emit('dataChanged', id, d)"
+                    @onUpdateStep="(id, s) => emit('stepUpdated', id, s)"
+                    @onAnnotation="(id, a) => emit('annotationChanged', id, a)"
+                    @onLabel="(id, l) => emit('labelChanged', id, l)"
+                    @onEditSubworkflow="(id) => emit('editSubworkflow', id)"
+                    @onAttemptRefactor="(...args) => emit('attemptRefactor', ...args)" />
+            </IdleLoad>
+        </div>
+    </section>
+</template>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.tool-inspector {
+    --clearance: 8px;
+    --width: 300px;
+
+    position: absolute;
+    right: 0;
+    top: var(--clearance);
+    bottom: var(--clearance);
+    // add border width to node draggable separators width
+    width: calc(var(--width) + 1px);
+    max-width: calc(100% - var(--clearance));
+
+    overflow: hidden;
+
+    background-color: $white;
+
+    z-index: 50000;
+    border-color: $border-color;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.5rem 0 0 0.5rem;
+    display: flex;
+    flex-direction: column;
+
+    &.maximized {
+        border-radius: 0.5rem;
+        --clearance: 16px;
+        right: var(--clearance);
+        top: var(--clearance);
+        bottom: var(--clearance);
+        left: var(--clearance);
+        width: calc(100% - var(--clearance) * 2);
+    }
+
+    .inspector-heading {
+        padding: 0.25rem 0.5rem;
+        display: flex;
+        justify-content: space-between;
+
+        h2 {
+            word-break: break-word;
+        }
+
+        &:deep(.heading-button) {
+            padding: 0.4rem;
+            display: grid;
+            place-items: center;
+        }
+
+        .dropdown.show {
+            display: inline-flex;
+        }
+    }
+
+    .inspector-content {
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 0.5rem 0.5rem;
+        padding-top: 0;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/Options.test.js b/client/src/components/Workflow/Editor/Options.test.js
deleted file mode 100644
index b51974a781b0..000000000000
--- a/client/src/components/Workflow/Editor/Options.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
-
-import Options from "./Options";
-
-const localVue = getLocalVue();
-
-describe("Options", () => {
-    it("render properly", async () => {
-        const wrapper = shallowMount(Options, {
-            propsData: { hasChanges: true },
-            localVue,
-        });
-        await wrapper.vm.$nextTick();
-        expect(wrapper.find(".editor-button-save").attributes("role")).toBe("button");
-        expect(wrapper.find(".editor-button-save").attributes("disabled")).toBeFalsy();
-        expect(wrapper.find(".editor-button-save-group").attributes("title")).toBe("Save Workflow");
-
-        // requires a non-shallow mount
-        // wrapper.find('.editor-button-attributes').trigger('click');
-        // expect(wrapper.emitted().onAttributes).toBeTruthy();
-    });
-
-    it("should disable save if no changes", async () => {
-        const wrapper = shallowMount(Options, {
-            propsData: { hasChanges: false },
-            localVue,
-        });
-        await wrapper.vm.$nextTick();
-        expect(wrapper.find(".editor-button-save").attributes("disabled")).toBe("true");
-    });
-});
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
deleted file mode 100644
index e288489a0364..000000000000
--- a/client/src/components/Workflow/Editor/Options.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSave } from "@fortawesome/free-regular-svg-icons";
-import {
-    faAlignLeft,
-    faCog,
-    faDownload,
-    faEdit,
-    faHistory,
-    faMagic,
-    faPencilAlt,
-    faPlay,
-    faRecycle,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BDropdown, BDropdownItem } from "bootstrap-vue";
-import { computed } from "vue";
-
-import { useConfirmDialog } from "@/composables/confirmDialog";
-
-library.add(faPencilAlt, faEdit, faCog, faAlignLeft, faMagic, faDownload, faPlay, faHistory, faSave, faRecycle);
-
-const emit = defineEmits<{
-    (e: "onAttributes"): void;
-    (e: "onSave"): void;
-    (e: "onCreate"): void;
-    (e: "onReport"): void;
-    (e: "onSaveAs"): void;
-    (e: "onLayout"): void;
-    (e: "onLint"): void;
-    (e: "onUpgrade"): void;
-    (e: "onDownload"): void;
-    (e: "onRun"): void;
-}>();
-
-const props = defineProps<{
-    isNewTempWorkflow?: boolean;
-    hasChanges?: boolean;
-    hasInvalidConnections?: boolean;
-    requiredReindex?: boolean;
-}>();
-
-const { confirm } = useConfirmDialog();
-
-const saveHover = computed(() => {
-    if (props.isNewTempWorkflow) {
-        return "Save Workflow";
-    } else if (!props.hasChanges) {
-        return "Workflow has no changes";
-    } else if (props.hasInvalidConnections) {
-        return "Workflow has invalid connections, review and remove invalid connections";
-    } else {
-        return "Save Workflow";
-    }
-});
-
-function emitSaveOrCreate() {
-    if (props.isNewTempWorkflow) {
-        emit("onCreate");
-    } else {
-        emit("onSave");
-    }
-}
-
-async function onSave() {
-    if (props.hasInvalidConnections) {
-        console.log("getting confirmation");
-        const confirmed = await confirm(
-            `Workflow has invalid connections. You can save the workflow, but it may not run correctly.`,
-            {
-                id: "save-workflow-confirmation",
-                okTitle: "Save Workflow",
-            }
-        );
-        if (confirmed) {
-            emitSaveOrCreate();
-        }
-    } else {
-        emitSaveOrCreate();
-    }
-}
-</script>
-
-<template>
-    <div class="panel-header-buttons">
-        <BButton
-            id="workflow-home-button"
-            v-b-tooltip.hover.noninteractive
-            role="button"
-            title="Edit Attributes"
-            variant="link"
-            aria-label="Edit Attributes"
-            class="editor-button-attributes"
-            @click="emit('onAttributes')">
-            <FontAwesomeIcon icon="fa fa-pencil-alt" />
-        </BButton>
-
-        <b-button-group v-b-tooltip.hover.noninteractive class="editor-button-save-group" :title="saveHover">
-            <BButton
-                id="workflow-save-button"
-                role="button"
-                :variant="isNewTempWorkflow ? 'primary' : 'link'"
-                aria-label="Save Workflow"
-                class="editor-button-save"
-                :disabled="!isNewTempWorkflow && !hasChanges"
-                @click="onSave">
-                <FontAwesomeIcon icon="far fa-save" />
-            </BButton>
-        </b-button-group>
-
-        <BButton
-            id="workflow-report-button"
-            v-b-tooltip.hover.noninteractive
-            role="button"
-            title="Edit Report"
-            variant="link"
-            aria-label="Edit Report"
-            class="editor-button-report"
-            :disabled="isNewTempWorkflow"
-            @click="emit('onReport')">
-            <FontAwesomeIcon icon="fa fa-edit" />
-        </BButton>
-
-        <BDropdown
-            id="workflow-options-button"
-            v-b-tooltip.hover.noninteractive
-            no-caret
-            right
-            role="button"
-            title="Workflow Options"
-            variant="link"
-            aria-label="Workflow Options"
-            class="editor-button-options"
-            :disabled="isNewTempWorkflow">
-            <template v-slot:button-content>
-                <FontAwesomeIcon icon="fa fa-cog" />
-            </template>
-
-            <BDropdownItem href="#" @click="emit('onSaveAs')">
-                <FontAwesomeIcon icon="far fa-save" /> Save As...
-            </BDropdownItem>
-
-            <BDropdownItem href="#" @click="emit('onLayout')">
-                <FontAwesomeIcon icon="fa fa-align-left" /> Auto Layout
-            </BDropdownItem>
-
-            <BDropdownItem href="#" @click="emit('onLint')">
-                <FontAwesomeIcon icon="fa fa-magic" /> Best Practices
-            </BDropdownItem>
-
-            <BDropdownItem href="#" @click="emit('onUpgrade')">
-                <FontAwesomeIcon icon="fa fa-recycle" /> Upgrade Workflow
-            </BDropdownItem>
-
-            <BDropdownItem href="#" @click="emit('onDownload')">
-                <FontAwesomeIcon icon="fa fa-download" /> Download
-            </BDropdownItem>
-        </BDropdown>
-
-        <BButton
-            id="workflow-run-button"
-            v-b-tooltip.hover.noninteractive
-            role="button"
-            title="Run Workflow"
-            variant="link"
-            aria-label="Run Workflow"
-            class="editor-button-run"
-            :disabled="isNewTempWorkflow"
-            @click="emit('onRun')">
-            <FontAwesomeIcon icon="fa fa-play" />
-        </BButton>
-    </div>
-</template>
diff --git a/client/src/components/Workflow/Editor/Tools/ToolBar.vue b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
index c902f381bccf..d68eaa62f0ce 100644
--- a/client/src/components/Workflow/Editor/Tools/ToolBar.vue
+++ b/client/src/components/Workflow/Editor/Tools/ToolBar.vue
@@ -17,7 +17,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useMagicKeys, whenever } from "@vueuse/core";
 import { BButton, BButtonGroup, BFormInput } from "bootstrap-vue";
 //@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
-import { BoxSelect } from "lucide-vue";
+import { BoxSelect, Workflow } from "lucide-vue";
 import { storeToRefs } from "pinia";
 import { computed, toRefs, watch } from "vue";
 
@@ -27,6 +27,7 @@ import { useWorkflowStores } from "@/composables/workflowStores";
 import { type CommentTool } from "@/stores/workflowEditorToolbarStore";
 import { match } from "@/utils/utils";
 
+import { AutoLayoutAction } from "../Actions/stepActions";
 import { useSelectionOperations } from "./useSelectionOperations";
 import { useToolLogic } from "./useToolLogic";
 
@@ -46,7 +47,7 @@ library.add(
     faTrash
 );
 
-const { toolbarStore, undoRedoStore, commentStore } = useWorkflowStores();
+const { toolbarStore, undoRedoStore, commentStore, workflowId } = useWorkflowStores();
 const { snapActive, currentTool } = toRefs(toolbarStore);
 
 const { commentOptions } = toolbarStore;
@@ -128,7 +129,7 @@ function onRemoveAllFreehand() {
 
 useToolLogic();
 
-const { ctrl_1, ctrl_2, ctrl_3, ctrl_4, ctrl_5, ctrl_6, ctrl_7, ctrl_8 } = useMagicKeys();
+const { ctrl_1, ctrl_2, ctrl_3, ctrl_4, ctrl_5, ctrl_6, ctrl_7, ctrl_8, ctrl_9 } = useMagicKeys();
 
 whenever(ctrl_1!, () => (toolbarStore.currentTool = "pointer"));
 whenever(ctrl_2!, () => (toolbarStore.snapActive = !toolbarStore.snapActive));
@@ -138,6 +139,7 @@ whenever(ctrl_5!, () => (toolbarStore.currentTool = "frameComment"));
 whenever(ctrl_6!, () => (toolbarStore.currentTool = "freehandComment"));
 whenever(ctrl_7!, () => (toolbarStore.currentTool = "freehandEraser"));
 whenever(ctrl_8!, () => (toolbarStore.currentTool = "boxSelect"));
+whenever(ctrl_9!, () => autoLayout());
 
 const toggleVisibilityButtonTitle = computed(() => {
     if (toolbarVisible.value) {
@@ -148,6 +150,10 @@ const toggleVisibilityButtonTitle = computed(() => {
 });
 
 const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateSelection } = useSelectionOperations();
+
+function autoLayout() {
+    undoRedoStore.applyAction(new AutoLayoutAction(workflowId));
+}
 </script>
 
 <template>
@@ -242,6 +248,17 @@ const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateS
                     @click="onClickBoxSelect">
                     <BoxSelect />
                 </BButton>
+
+                <BButton
+                    id="auto-layout-button"
+                    v-b-tooltip.hover.noninteractive.right
+                    title="Auto Layout (Ctrl + 9)"
+                    data-tool="auto_layout"
+                    class="button"
+                    variant="outline-primary"
+                    @click="autoLayout">
+                    <Workflow />
+                </BButton>
             </template>
 
             <BButton
@@ -255,6 +272,22 @@ const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateS
             </BButton>
         </div>
         <div v-if="toolbarVisible" class="options">
+            <div v-if="anySelected" class="selection-options">
+                <span>{{ selectedCountText }}</span>
+
+                <BButtonGroup>
+                    <BButton class="button" title="clear selection" @click="deselectAll">
+                        Clear <FontAwesomeIcon icon="fa-times" />
+                    </BButton>
+                    <BButton class="button" title="duplicate selected" @click="duplicateSelection">
+                        Duplicate <FontAwesomeIcon icon="fa-clone" />
+                    </BButton>
+                    <BButton class="button" title="delete selected" @click="deleteSelection">
+                        Delete <FontAwesomeIcon icon="fa-trash" />
+                    </BButton>
+                </BButtonGroup>
+            </div>
+
             <div
                 v-if="
                     toolbarStore.snapActive &&
@@ -381,22 +414,6 @@ const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateS
                 </BButtonGroup>
             </div>
         </div>
-
-        <div v-if="anySelected" class="selection-options">
-            <span>{{ selectedCountText }}</span>
-
-            <BButtonGroup>
-                <BButton class="button" title="clear selection" @click="deselectAll">
-                    Clear <FontAwesomeIcon icon="fa-times" />
-                </BButton>
-                <BButton class="button" title="duplicate selected" @click="duplicateSelection">
-                    Duplicate <FontAwesomeIcon icon="fa-clone" />
-                </BButton>
-                <BButton class="button" title="delete selected" @click="deleteSelection">
-                    Delete <FontAwesomeIcon icon="fa-trash" />
-                </BButton>
-            </BButtonGroup>
-        </div>
     </div>
 </template>
 
@@ -507,7 +524,7 @@ const { anySelected, selectedCountText, deleteSelection, deselectAll, duplicateS
         display: flex;
         padding: 0.25rem;
         gap: 0.25rem;
-        align-items: end;
+        align-items: start;
         flex-direction: column-reverse;
         align-self: flex-start;
 
diff --git a/client/src/components/Workflow/Editor/Attributes.test.js b/client/src/components/Workflow/Editor/WorkflowAttributes.test.ts
similarity index 64%
rename from client/src/components/Workflow/Editor/Attributes.test.js
rename to client/src/components/Workflow/Editor/WorkflowAttributes.test.ts
index b1b4e2cd5a4a..8b9f0eb013b4 100644
--- a/client/src/components/Workflow/Editor/Attributes.test.js
+++ b/client/src/components/Workflow/Editor/WorkflowAttributes.test.ts
@@ -1,11 +1,15 @@
-import { createLocalVue, mount } from "@vue/test-utils";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount } from "@vue/test-utils";
 import { isDate } from "date-fns";
+import flushPromises from "flush-promises";
+import { createPinia, setActivePinia } from "pinia";
 
 import { useUserTagsStore } from "@/stores/userTagsStore";
 
-import Attributes from "./Attributes";
 import { UntypedParameters } from "./modules/parameters";
 
+import WorkflowAttributes from "./WorkflowAttributes.vue";
+
 jest.mock("app");
 
 const TEST_ANNOTATION = "my cool annotation";
@@ -16,21 +20,19 @@ const TEST_VERSIONS = [
 ];
 const autocompleteTags = ["#named_uer_tag", "abc", "my_tag"];
 
-jest.mock("@/stores/userTagsStore");
-useUserTagsStore.mockReturnValue({
-    userTags: autocompleteTags,
-    onNewTagSeen: jest.fn(),
-    onTagUsed: jest.fn(),
-    onMultipleNewTagsSeen: jest.fn(),
-});
-
-describe("Attributes", () => {
+describe("WorkflowAttributes", () => {
     it("test attributes", async () => {
-        const localVue = createLocalVue();
+        const pinia = createPinia();
+        const localVue = getLocalVue(true);
+
+        setActivePinia(pinia);
+
         const untypedParameters = new UntypedParameters();
+
         untypedParameters.getParameter("workflow_parameter_0");
         untypedParameters.getParameter("workflow_parameter_1");
-        const wrapper = mount(Attributes, {
+
+        const wrapper = mount(WorkflowAttributes as object, {
             propsData: {
                 id: "workflow_id",
                 name: TEST_NAME,
@@ -44,18 +46,30 @@ describe("Attributes", () => {
                 LicenseSelector: true,
             },
             localVue,
+            pinia,
         });
+
+        await flushPromises();
+
+        const userTagsStore = useUserTagsStore();
+        jest.spyOn(userTagsStore, "userTags", "get").mockReturnValue(autocompleteTags);
+        userTagsStore.onNewTagSeen = jest.fn();
+        userTagsStore.onTagUsed = jest.fn();
+        userTagsStore.onMultipleNewTagsSeen = jest.fn();
+
         expect(wrapper.find(`[itemprop='description']`).attributes("content")).toBe(TEST_ANNOTATION);
         expect(wrapper.find(`[itemprop='name']`).attributes("content")).toBe(TEST_NAME);
         expect(wrapper.find(`#workflow-version-area > select`).exists()).toBeTruthy();
 
         const name = wrapper.find("#workflow-name");
-        expect(name.element.value).toBe(TEST_NAME);
+        expect((name.element as HTMLInputElement).value).toBe(TEST_NAME);
         await wrapper.setProps({ name: "new_workflow_name" });
-        expect(name.element.value).toBe("new_workflow_name");
+        expect((name.element as HTMLInputElement).value).toBe("new_workflow_name");
+
+        const version = wrapper.findAll(`#workflow-version-area > select > option`);
 
-        const version = wrapper.findAllComponents(`#workflow-version-area > select > option`);
         expect(version).toHaveLength(TEST_VERSIONS.length);
+
         for (let i = 0; i < version.length; i++) {
             const versionLabel = version.at(i).text();
             const versionDate = versionLabel.substring(versionLabel.indexOf(":") + 1, versionLabel.indexOf(",")).trim();
@@ -66,6 +80,6 @@ describe("Attributes", () => {
         expect(parameters.length).toBe(2);
         expect(parameters.at(0).text()).toBe("1: workflow_parameter_0");
         expect(parameters.at(1).text()).toBe("2: workflow_parameter_1");
-        expect(wrapper.find("#workflow-annotation").element.value).toBe(TEST_ANNOTATION);
+        expect((wrapper.find("#workflow-annotation").element as HTMLInputElement).value).toBe(TEST_ANNOTATION);
     });
 });
diff --git a/client/src/components/Workflow/Editor/Attributes.vue b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
similarity index 89%
rename from client/src/components/Workflow/Editor/Attributes.vue
rename to client/src/components/Workflow/Editor/WorkflowAttributes.vue
index c0d7311e06ee..dfcccc86ded2 100644
--- a/client/src/components/Workflow/Editor/Attributes.vue
+++ b/client/src/components/Workflow/Editor/WorkflowAttributes.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="edit-attributes" class="right-content p-2" itemscope itemtype="http://schema.org/CreativeWork">
+    <ActivityPanel id="edit-attributes" title="Attributes" itemscope itemtype="http://schema.org/CreativeWork">
         <b-alert :variant="messageVariant" :show="!!message">
             {{ message }}
         </b-alert>
@@ -52,28 +52,28 @@
                 Apply tags to make it easy to search for and find items with the same tag.
             </div>
         </div>
-    </div>
+    </ActivityPanel>
 </template>
 
 <script>
-import BootstrapVue from "bootstrap-vue";
-import LicenseSelector from "components/License/LicenseSelector";
-import CreatorEditor from "components/SchemaOrg/CreatorEditor";
-import StatelessTags from "components/TagsMultiselect/StatelessTags";
-import { Services } from "components/Workflow/services";
 import { format, parseISO } from "date-fns";
-import Vue from "vue";
+
+import { Services } from "@/components/Workflow/services";
 
 import { UntypedParameters } from "./modules/parameters";
 
-Vue.use(BootstrapVue);
+import LicenseSelector from "@/components/License/LicenseSelector.vue";
+import ActivityPanel from "@/components/Panels/ActivityPanel.vue";
+import CreatorEditor from "@/components/SchemaOrg/CreatorEditor.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
 export default {
-    name: "Attributes",
+    name: "WorkflowAttributes",
     components: {
         StatelessTags,
         LicenseSelector,
         CreatorEditor,
+        ActivityPanel,
     },
     props: {
         id: {
@@ -186,16 +186,16 @@ export default {
     methods: {
         onTags(tags) {
             this.onAttributes({ tags });
-            this.$emit("onTags", tags);
+            this.$emit("tags", tags);
         },
         onVersion() {
-            this.$emit("onVersion", this.versionCurrent);
+            this.$emit("version", this.versionCurrent);
         },
         onLicense(license) {
-            this.$emit("onLicense", license);
+            this.$emit("license", license);
         },
         onCreator(creator) {
-            this.$emit("onCreator", creator);
+            this.$emit("creator", creator);
         },
         onError(error) {
             this.message = error;
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 14c83d2a8cbf..b0a27f1b6235 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -64,6 +64,7 @@
             :viewport-bounding-box="viewportBoundingBox"
             @panBy="panBy"
             @moveTo="moveTo" />
+        <slot></slot>
     </div>
 </template>
 <script setup lang="ts">
diff --git a/client/src/components/Workflow/Editor/composables/d3Zoom.ts b/client/src/components/Workflow/Editor/composables/d3Zoom.ts
index f8b36e5ddc09..d0f708514334 100644
--- a/client/src/components/Workflow/Editor/composables/d3Zoom.ts
+++ b/client/src/components/Workflow/Editor/composables/d3Zoom.ts
@@ -7,9 +7,22 @@ import { type XYPosition } from "@/stores/workflowEditorStateStore";
 
 // if element is draggable it may implement its own drag handler,
 // but d3zoom would call preventDefault
-const filter = (event: any) => {
-    const preventZoom = event.target.classList.contains("prevent-zoom");
-    return !preventZoom;
+const filter = (event: D3ZoomEvent<HTMLElement, unknown>["sourceEvent"]) => {
+    const target = event.target as HTMLElement;
+
+    if (target.classList.contains("prevent-zoom")) {
+        return false;
+    }
+
+    if (event.type === "dblclick") {
+        const style = getComputedStyle(target);
+
+        if (style.getPropertyValue("--dblclick") === "prevent") {
+            return false;
+        }
+    }
+
+    return true;
 };
 
 export function useD3Zoom(
diff --git a/client/src/components/Workflow/Editor/modules/activities.ts b/client/src/components/Workflow/Editor/modules/activities.ts
new file mode 100644
index 000000000000..aed37909dea2
--- /dev/null
+++ b/client/src/components/Workflow/Editor/modules/activities.ts
@@ -0,0 +1,176 @@
+import { faSave as farSave } from "@fortawesome/free-regular-svg-icons";
+import {
+    faDownload,
+    faEdit,
+    faHistory,
+    faMagic,
+    faPencilAlt,
+    faPlay,
+    faRecycle,
+    faSave,
+    faSignOutAlt,
+    faSitemap,
+    faWrench,
+} from "@fortawesome/free-solid-svg-icons";
+import { watchImmediate } from "@vueuse/core";
+import { computed, type Ref } from "vue";
+
+import { type Activity, useActivityStore } from "@/stores/activityStore";
+
+export const workflowEditorActivities = [
+    {
+        title: "Attributes",
+        id: "workflow-editor-attributes",
+        tooltip: "Edit workflow attributes",
+        description: "View and edit the attributes of this workflow.",
+        panel: true,
+        icon: faPencilAlt,
+        visible: true,
+    },
+    {
+        title: "Tools",
+        id: "workflow-editor-tools",
+        description: "Displays the tool panel to search and place all available tools.",
+        icon: faWrench,
+        panel: true,
+        tooltip: "Search tools to use in your workflow",
+        visible: true,
+    },
+    {
+        title: "Workflows",
+        id: "workflow-editor-workflows",
+        description: "Browse other workflows and add them as sub-workflows.",
+        tooltip: "Search workflows to use in your workflow",
+        icon: faSitemap,
+        panel: true,
+        visible: true,
+        optional: true,
+    },
+    {
+        title: "Report",
+        id: "workflow-editor-report",
+        description: "Edit the report for this workflow.",
+        tooltip: "Edit workflow report",
+        icon: faEdit,
+        panel: true,
+        visible: true,
+        optional: true,
+    },
+    {
+        title: "Best Practices",
+        id: "workflow-best-practices",
+        description: "Show and test for the best practices in this workflow.",
+        tooltip: "Test workflow for best practices",
+        icon: faMagic,
+        panel: true,
+        visible: true,
+        optional: true,
+    },
+    {
+        title: "Changes",
+        id: "workflow-undo-redo",
+        description: "View, undo, and redo your latest changes.",
+        tooltip: "Show and manage latest changes",
+        icon: faHistory,
+        panel: true,
+        visible: true,
+        optional: true,
+    },
+    {
+        title: "Run",
+        id: "workflow-run",
+        description: "Run this workflow with specific parameters.",
+        tooltip: "Run workflow",
+        icon: faPlay,
+        visible: true,
+        click: true,
+        optional: true,
+    },
+    {
+        description: "Save this workflow with a different name and annotation",
+        icon: farSave,
+        id: "save-workflow-as",
+        title: "Save as",
+        tooltip: "Save a copy of this workflow",
+        visible: true,
+        click: true,
+        optional: true,
+    },
+    {
+        title: "Upgrade",
+        id: "workflow-upgrade",
+        description: "Update all tools used in this workflow.",
+        tooltip: "Update all tools",
+        icon: faRecycle,
+        visible: true,
+        click: true,
+        optional: true,
+    },
+    {
+        title: "Download",
+        id: "workflow-download",
+        description: "Download this workflow in '.ga' format.",
+        tooltip: "Download workflow",
+        icon: faDownload,
+        visible: true,
+        click: true,
+        optional: true,
+    },
+    {
+        description: "Exit the workflow editor and return to the start screen.",
+        icon: faSignOutAlt,
+        id: "exit",
+        title: "Exit",
+        tooltip: "Exit workflow editor",
+        visible: false,
+        click: true,
+        optional: true,
+    },
+] as const satisfies Readonly<Activity[]>;
+
+interface ActivityLogicOptions {
+    activityBarId: string;
+    isNewTempWorkflow: boolean;
+}
+
+export function useActivityLogic(options: Ref<ActivityLogicOptions>) {
+    const store = useActivityStore(options.value.activityBarId);
+
+    watchImmediate(
+        () => options.value.isNewTempWorkflow,
+        (value) => {
+            store.setMeta("workflow-run", "disabled", value);
+        }
+    );
+}
+
+interface SpecialActivityOptions {
+    hasInvalidConnections: boolean;
+}
+
+export function useSpecialWorkflowActivities(options: Ref<SpecialActivityOptions>) {
+    const saveHover = computed(() => {
+        if (options.value.hasInvalidConnections) {
+            return "Workflow has invalid connections, review and remove invalid connections";
+        } else {
+            return "Save this workflow, then exit the workflow editor";
+        }
+    });
+
+    const specialWorkflowActivities = computed<Activity[]>(() => [
+        {
+            description: "",
+            icon: faSave,
+            id: "save-and-exit",
+            title: "Save + Exit",
+            tooltip: saveHover.value,
+            visible: false,
+            click: true,
+            mutable: false,
+        },
+    ]);
+
+    return {
+        specialWorkflowActivities,
+    };
+}
diff --git a/client/src/components/Workflow/Editor/modules/geometry.ts b/client/src/components/Workflow/Editor/modules/geometry.ts
index eee7fc3d56be..03bea2c0a3dc 100644
--- a/client/src/components/Workflow/Editor/modules/geometry.ts
+++ b/client/src/components/Workflow/Editor/modules/geometry.ts
@@ -108,6 +108,15 @@ export class AxisAlignedBoundingBox implements Rectangle {
             this.endY >= other.y + other.height
         );
     }
+
+    intersects(other: Rectangle) {
+        return (
+            this.x < other.x + other.width &&
+            this.endX > other.x &&
+            this.y < other.y + other.height &&
+            this.endY > other.y
+        );
+    }
 }
 
 /* Format
@@ -240,3 +249,16 @@ export function vecReduceFigures(a: Vector, significantFigures = 1): Vector {
 
     return [Math.round(a[0] * factor) / factor, Math.round(a[1] * factor) / factor];
 }
+
+export function rectCenterPoint(rect: Rectangle): Vector {
+    return [rect.x + rect.width / 2, rect.y + rect.height / 2];
+}
+
+export function rectDistance(a: Rectangle, b: Rectangle): number {
+    const vecA = rectCenterPoint(a);
+    const vecB = rectCenterPoint(b);
+    const dx = vecA[0] - vecB[0];
+    const dy = vecA[1] - vecB[1];
+
+    return Math.hypot(dx, dy);
+}
diff --git a/client/src/components/Workflow/Editor/modules/layout.ts b/client/src/components/Workflow/Editor/modules/layout.ts
index 11a31adf138a..843867c7def1 100644
--- a/client/src/components/Workflow/Editor/modules/layout.ts
+++ b/client/src/components/Workflow/Editor/modules/layout.ts
@@ -1,88 +1,122 @@
-import ELK from "elkjs/lib/elk.bundled.js";
+import ELK, { type ElkExtendedEdge, type ElkNode } from "elkjs/lib/elk.bundled";
 
 import { useConnectionStore } from "@/stores/workflowConnectionStore";
+import type { FreehandWorkflowComment, WorkflowComment } from "@/stores/workflowEditorCommentStore";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import { type Step } from "@/stores/workflowStepStore";
 import { assertDefined } from "@/utils/assertions";
+import { match } from "@/utils/utils";
+
+import { AxisAlignedBoundingBox, type Rectangle, rectDistance } from "./geometry";
 
 const elk = new ELK();
 
-interface GraphChild {
-    id: string;
-    height: number;
-    width: number;
-    ports: {
-        id: string;
-        properties: {
-            "port.side": string;
-            "port.index": number;
-        };
-    }[];
+interface OptionObject {
+    [key: string]: OptionValue | OptionObject;
 }
+type OptionValue = number | string | boolean;
 
-interface GraphEdge {
-    id: string;
-    sources: string[];
-    targets: string[];
+export function elkOptionObject(object: OptionObject): string {
+    const entries = Object.entries(object);
+    const stringifiedEntries = entries.map(([key, value]) => {
+        const type = typeof value as "number" | "string" | "boolean" | "object";
+
+        const valueAsString = match(type, {
+            number: () => `${value}`,
+            string: () => `"${value}"`,
+            boolean: () => `${value}`,
+            object: () => elkOptionObject(value as OptionObject),
+        });
+
+        return `${key}=${valueAsString}`;
+    });
+
+    return `[${stringifiedEntries.join(", ")}]`;
 }
 
-interface NewGraph {
-    id: string;
-    layoutOptions: { [index: string]: string };
-    children: GraphChild[];
-    edges: GraphEdge[];
+export function elkSpacing(left = 0, top = 0, right = 0, bottom = 0) {
+    return elkOptionObject({
+        left,
+        top,
+        right,
+        bottom,
+    });
 }
 
-export async function autoLayout(id: string, steps: { [index: string]: Step }) {
+export async function autoLayout(id: string, steps: { [index: string]: Step }, comments: WorkflowComment[]) {
     const connectionStore = useConnectionStore(id);
     const stateStore = useWorkflowStateStore(id);
 
+    // making this follow the user set snapping distance get's messy fast, so it's hardcoded for simplicity
+    const snappingDistance = 10;
+    const horizontalDistance = Math.max(snappingDistance * 2, 100);
+    const verticalDistance = Math.max(snappingDistance, 50);
+
+    const roundUpToSnappingDistance = (value: number) => {
+        const floatErrorTolerance = 0.0001;
+        return Math.ceil(value / snappingDistance - floatErrorTolerance) * snappingDistance;
+    };
+
+    const childLayoutOptions = {
+        "elk.layered.spacing.nodeNodeBetweenLayers": `${horizontalDistance / 2}`,
+        "elk.portConstraints": "FIXED_POS",
+    };
+
     // Convert this to ELK compat.
-    const newGraph: NewGraph = {
+    const newGraph: ElkNode = {
         id: "",
         layoutOptions: {
+            "elk.padding": elkSpacing(0, 0),
+            "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+            "elk.layered.spacing.baseValue": `${horizontalDistance}`,
             "elk.algorithm": "layered",
-            "crossingMinimization.semiInteractive": "true",
-            "nodePlacement.strategy": "NETWORK_SIMPLEX",
+            "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+            "elk.spacing.nodeNode": `${verticalDistance}`,
         },
         children: [],
         edges: [],
     };
 
-    newGraph.children = Object.entries(steps).map(([stepId, step]) => {
-        const inputs = Object.values(step.inputs).map((input) => {
-            return {
-                id: `${stepId}/in/${input.name}`,
-                properties: {
-                    "port.side": "WEST",
-                    "port.index": step.id,
-                },
-            };
-        });
+    const freehandComments: FreehandWorkflowComment[] = [];
+    const otherComments: WorkflowComment[] = [];
 
-        const outputs = Object.values(step.outputs).map((output) => {
-            return {
-                id: `${stepId}/out/${output.name}`,
-                properties: {
-                    "port.side": "EAST",
-                    "port.index": step.id,
-                },
-            };
-        });
+    comments.forEach((comment) => {
+        if (comment.type === "freehand") {
+            freehandComments.push(comment);
+        } else {
+            otherComments.push(comment);
+        }
+    });
 
+    const stepsWithRect = Object.entries(steps).map(([stepId, step]) => {
         const position = stateStore.stepPosition[step.id];
         assertDefined(position, `No StepPosition with step id ${step.id} found in workflowStateStore`);
 
         return {
             id: stepId,
-            height: position.height + 20,
-            width: position.width + 60,
-            ports: inputs.concat(outputs),
+            step,
+            rect: {
+                x: step.position?.left ?? 0,
+                y: step.position?.top ?? 0,
+                width: position.width,
+                height: position.height,
+            },
         };
     });
 
-    newGraph.edges = connectionStore.connections.map((connection) => {
-        const edge: GraphEdge = {
+    const collapsedFreehandComments = collapseFreehandComments(freehandComments);
+    populateClosestSteps(collapsedFreehandComments, stepsWithRect);
+
+    newGraph.children = graphToElkGraph(
+        steps,
+        otherComments,
+        stateStore,
+        roundUpToSnappingDistance,
+        childLayoutOptions
+    );
+
+    const dataEdges = connectionStore.connections.map((connection) => {
+        const edge: ElkExtendedEdge = {
             id: `e_${connection.input.stepId}_${connection.output.stepId}`,
             sources: [`${connection.output.stepId}/out/${connection.output.name}`],
             targets: [`${connection.input.stepId}/in/${connection.input.name}`],
@@ -90,15 +124,371 @@ export async function autoLayout(id: string, steps: { [index: string]: Step }) {
         return edge;
     });
 
+    const commentEdges = getCommentEdges(otherComments, stepsWithRect);
+
+    newGraph.edges = [...dataEdges, ...commentEdges];
+
+    const roundToSnappingDistance = (value: number) => Math.round(value / snappingDistance) * snappingDistance;
+
     try {
         const elkNode = await elk.layout(newGraph);
-        // Reapply positions to galaxy graph from our relayed out graph.
-        const newSteps = elkNode.children?.map((q) => {
-            const newStep = { ...steps[q.id], position: { top: q.y, left: q.x } };
-            return newStep;
-        });
-        return newSteps;
+        const positions = graphToPositions(elkNode.children, roundToSnappingDistance);
+
+        const freehandPositions = resolveDeltaPositions(collapsedFreehandComments, positions.steps);
+        positions.comments = positions.comments.concat(freehandPositions);
+
+        return positions;
     } catch (error) {
         console.error(error);
     }
 }
+
+interface HierarchicalComment {
+    comment: WorkflowComment;
+    root: boolean;
+    children: (HierarchicalComment | Step)[];
+}
+
+function graphToElkGraph(
+    steps: Record<number, Step>,
+    comments: WorkflowComment[],
+    stateStore: ReturnType<typeof useWorkflowStateStore>,
+    roundingFunction: (value: number) => number,
+    layoutOptions: Record<string, string>
+): ElkNode[] {
+    const flatHierarchicalComments: Map<number, HierarchicalComment> = new Map(
+        comments.map((comment) => [comment.id, { comment, root: true, children: [] }])
+    );
+
+    const rootSteps = new Map(Object.entries(steps));
+
+    flatHierarchicalComments.forEach((c) => {
+        if (c.comment.child_comments) {
+            c.comment.child_comments.forEach((id) => {
+                const childComment = flatHierarchicalComments.get(id);
+
+                if (childComment) {
+                    childComment.root = false;
+                    c.children.push(childComment);
+                }
+            });
+        }
+
+        if (c.comment.child_steps) {
+            c.comment.child_steps.forEach((id) => {
+                const idAsString = `${id}`;
+                const childStep = rootSteps.get(idAsString)!;
+                rootSteps.delete(idAsString);
+                c.children.push(childStep);
+            });
+        }
+    });
+
+    const rootHierarchicalComments: HierarchicalComment[] = [...flatHierarchicalComments.values()].filter(
+        (c) => c.root
+    );
+
+    const elkRootSteps = [...rootSteps.values()].map((step) => {
+        return stepToElkStep(step, stateStore, roundingFunction);
+    });
+
+    const elkRootComments = rootHierarchicalComments.map((c) =>
+        commentToElkStep(c, stateStore, roundingFunction, layoutOptions)
+    );
+
+    return [...elkRootSteps, ...elkRootComments];
+}
+
+function stepToElkStep(
+    step: Step,
+    stateStore: ReturnType<typeof useWorkflowStateStore>,
+    roundingFunction: (value: number) => number
+): ElkNode {
+    const inputs = Object.values(step.inputs).map((input, index) => {
+        return {
+            id: `${step.id}/in/${input.name}`,
+            properties: {
+                "port.side": "WEST",
+                "port.index": `${index}`,
+            },
+            x: 0,
+            y: index * 20,
+        };
+    });
+
+    const position = stateStore.stepPosition[step.id];
+    assertDefined(position, `No StepPosition with step id ${step.id} found in workflowStateStore`);
+
+    const outputs = Object.values(step.outputs).map((output, index) => {
+        return {
+            id: `${step.id}/out/${output.name}`,
+            properties: {
+                "port.side": "EAST",
+                "port.index": `${index}`,
+            },
+            x: position.width,
+            y: index * 20,
+        };
+    });
+
+    return {
+        id: `${step.id}`,
+        height: roundingFunction(position.height),
+        width: roundingFunction(position.width),
+        x: step.position?.left,
+        y: step.position?.top,
+        layoutOptions: {
+            "elk.portConstraints": "FIXED_POS",
+        },
+        ports: inputs.concat(outputs),
+    };
+}
+
+function commentToElkStep(
+    hierarchicalComment: HierarchicalComment,
+    stateStore: ReturnType<typeof useWorkflowStateStore>,
+    roundingFunction: (value: number) => number,
+    layoutOptions: Record<string, string>
+): ElkNode {
+    const base: ElkNode = {
+        id: `comment_${hierarchicalComment.comment.id}`,
+        x: hierarchicalComment.comment.position[0],
+        y: hierarchicalComment.comment.position[1],
+        width: hierarchicalComment.comment.size[0],
+        height: hierarchicalComment.comment.size[1],
+        layoutOptions: {
+            "elk.commentBox": hierarchicalComment.comment.type === "frame" ? "false" : "true",
+            ...layoutOptions,
+            "elk.padding": elkSpacing(20, 40, 20, 20),
+        },
+    };
+
+    const children: ElkNode[] = hierarchicalComment.children?.map((c) => {
+        if ("comment" in c) {
+            return commentToElkStep(c, stateStore, roundingFunction, layoutOptions);
+        } else {
+            return stepToElkStep(c, stateStore, roundingFunction);
+        }
+    });
+
+    return { ...base, children };
+}
+
+interface Positions {
+    steps: { id: string; x: number; y: number }[];
+    comments: { id: string; x: number; y: number; w: number; h: number }[];
+}
+
+function graphToPositions(
+    graph: ElkNode[] | undefined,
+    roundingFunction: (value: number) => number,
+    parentPosition?: { x: number; y: number }
+): Positions {
+    const positions: Positions = {
+        steps: [],
+        comments: [],
+    };
+
+    if (!graph) {
+        return positions;
+    }
+
+    const offset = parentPosition ?? { x: 0, y: 0 };
+
+    graph.forEach((node) => {
+        if (!node.id.startsWith("comment_")) {
+            positions.steps.push({
+                id: node.id,
+                x: roundingFunction(node.x ?? 0) + offset.x,
+                y: roundingFunction(node.y ?? 0) + offset.y,
+            });
+        } else {
+            const id = node.id.slice("comment_".length);
+
+            const position = {
+                x: roundingFunction(node.x ?? 0) + offset.x,
+                y: roundingFunction(node.y ?? 0) + offset.y,
+            };
+
+            positions.comments.push({
+                id,
+                ...position,
+                w: node.width ?? 0,
+                h: node.height ?? 0,
+            });
+
+            if (node.children) {
+                const childPositions = graphToPositions(node.children, roundingFunction, position);
+
+                positions.steps = positions.steps.concat(childPositions.steps);
+                positions.comments = positions.comments.concat(childPositions.comments);
+            }
+        }
+    });
+
+    return positions;
+}
+
+function getCommentEdges(comments: WorkflowComment[], stepsWithRect: StepWithRect[]): ElkExtendedEdge[] {
+    const edges: ElkExtendedEdge[] = [];
+
+    comments.forEach((comment) => {
+        if (comment.type === "freehand") {
+            return;
+        }
+
+        let closestDistance = Infinity;
+        let closestId: string | null = null;
+
+        const commentRect = {
+            x: comment.position[0],
+            y: comment.position[1],
+            width: comment.size[0],
+            height: comment.size[1],
+        };
+
+        stepsWithRect.forEach((step) => {
+            const distance = rectDistance(step.rect, commentRect);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                closestId = step.id;
+            }
+        });
+
+        if (closestId) {
+            const edge: ElkExtendedEdge = {
+                id: `comment_edge_${closestId}_${comment.id}`,
+                sources: [closestId],
+                targets: [`comment_${comment.id}`],
+            };
+
+            edges.push(edge);
+        }
+    });
+
+    return edges;
+}
+
+interface CollapsedFreehandComment {
+    aabb: AxisAlignedBoundingBox;
+    comments: FreehandWorkflowComment[];
+    closestStepId?: string;
+    positionFrom?: { x: number; y: number };
+}
+
+/** groups freehand comments into distinct sets with any amount of overlap */
+function collapseFreehandComments(comments: FreehandWorkflowComment[]): CollapsedFreehandComment[] {
+    const commentsAsCollapsed: CollapsedFreehandComment[] = comments.map((c) => {
+        const aabb = new AxisAlignedBoundingBox();
+        aabb.fitRectangle({
+            x: c.position[0],
+            y: c.position[1],
+            width: c.size[0],
+            height: c.size[1],
+        });
+
+        return {
+            aabb,
+            comments: [c],
+        };
+    });
+
+    const collapsedFreehandComments: Set<CollapsedFreehandComment> = new Set(commentsAsCollapsed);
+
+    const compareAgainstOtherCollapsed = (a: CollapsedFreehandComment) => {
+        const iterator = collapsedFreehandComments.values();
+
+        for (const other of iterator) {
+            if (a !== other && a.aabb.intersects(other.aabb)) {
+                mergeCollapsedComments(a, other);
+                break;
+            }
+        }
+    };
+
+    const mergeCollapsedComments = (a: CollapsedFreehandComment, b: CollapsedFreehandComment) => {
+        const aabb = new AxisAlignedBoundingBox();
+        aabb.fitRectangle(a.aabb);
+        aabb.fitRectangle(b.aabb);
+
+        collapsedFreehandComments.delete(a);
+        collapsedFreehandComments.delete(b);
+
+        const merged = {
+            aabb: aabb,
+            comments: [...a.comments, ...b.comments],
+        };
+
+        collapsedFreehandComments.add(merged);
+        compareAgainstOtherCollapsed(merged);
+    };
+
+    const iterator = collapsedFreehandComments.values();
+
+    for (const comment of iterator) {
+        compareAgainstOtherCollapsed(comment);
+    }
+
+    return [...collapsedFreehandComments.values()];
+}
+
+interface StepWithRect {
+    id: string;
+    step: Step;
+    rect: Rectangle;
+}
+
+/** find out which step is the closest to each comment, save it's id and position */
+function populateClosestSteps(collapsedFreehandComments: CollapsedFreehandComment[], stepsWithRect: StepWithRect[]) {
+    collapsedFreehandComments.forEach((comment) => {
+        let closestDistance = Infinity;
+
+        stepsWithRect.forEach((s) => {
+            const distance = rectDistance(comment.aabb, s.rect);
+            if (distance < closestDistance) {
+                closestDistance = distance;
+                comment.closestStepId = s.id;
+                comment.positionFrom = {
+                    x: s.rect.x,
+                    y: s.rect.y,
+                };
+            }
+        });
+    });
+}
+
+/** resolve by how much to move the freehand comments */
+function resolveDeltaPositions(
+    collapsedFreehandComments: CollapsedFreehandComment[],
+    stepPositions: Positions["steps"]
+): Positions["comments"] {
+    const positions: Positions["comments"] = [];
+    const stepPositionMap = new Map(stepPositions.map((p) => [p.id, p]));
+
+    collapsedFreehandComments.forEach((collapsed) => {
+        if (!collapsed.closestStepId) {
+            return;
+        }
+
+        const newPosition = stepPositionMap.get(collapsed.closestStepId);
+
+        if (newPosition) {
+            const delta = {
+                x: newPosition.x - (collapsed.positionFrom?.x ?? 0),
+                y: newPosition.y - (collapsed.positionFrom?.y ?? 0),
+            };
+
+            collapsed.comments.forEach((comment) => {
+                positions.push({
+                    id: `${comment.id}`,
+                    x: comment.position[0] + delta.x,
+                    y: comment.position[1] + delta.y,
+                    w: comment.size[0],
+                    h: comment.size[1],
+                });
+            });
+        }
+    });
+
+    return positions;
+}
diff --git a/client/src/components/Workflow/Editor/modules/terminals.test.ts b/client/src/components/Workflow/Editor/modules/terminals.test.ts
index f72e83896ab7..b90fb55cc119 100644
--- a/client/src/components/Workflow/Editor/modules/terminals.test.ts
+++ b/client/src/components/Workflow/Editor/modules/terminals.test.ts
@@ -41,6 +41,7 @@ function useStores(id = "mock-workflow") {
     const undoRedoStore = useUndoRedoStore(id);
 
     return {
+        workflowId: id,
         connectionStore,
         stateStore,
         stepStore,
diff --git a/client/src/components/Workflow/List/WorkflowActions.vue b/client/src/components/Workflow/List/WorkflowActions.vue
index 91c5524c1ac4..7202b22756d0 100644
--- a/client/src/components/Workflow/List/WorkflowActions.vue
+++ b/client/src/components/Workflow/List/WorkflowActions.vue
@@ -1,48 +1,55 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 import {
     faCaretDown,
+    faCopy,
+    faDownload,
     faExternalLinkAlt,
-    faEye,
     faFileExport,
+    faLink,
+    faPlay,
+    faShareAlt,
     faSpinner,
     faStar,
     faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup } from "bootstrap-vue";
+import { BButton, BButtonGroup, BDropdown, BDropdownItem } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 
-import { getGalaxyInstance } from "@/app";
-import { deleteWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
-import { useConfirmDialog } from "@/composables/confirmDialog";
-import { Toast } from "@/composables/toast";
+import type { StoredWorkflowDetailed } from "@/api/workflows";
 import { useUserStore } from "@/stores/userStore";
 
-library.add(farStar, faCaretDown, faExternalLinkAlt, faEye, faFileExport, faSpinner, faStar, faTrash);
+import { useWorkflowActions } from "./useWorkflowActions";
 
 interface Props {
-    workflow: any;
+    workflow: StoredWorkflowDetailed;
     published?: boolean;
+    editor?: boolean;
+    current?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     published: false,
+    editor: false,
+    current: false,
 });
 
 const emit = defineEmits<{
-    (e: "refreshList", a?: boolean): void;
+    (e: "refreshList", overlayLoading?: boolean): void;
+    (e: "dropdown", open: boolean): void;
 }>();
 
+const { bookmarkLoading, deleteWorkflow, toggleBookmark, copyPublicLink, copyWorkflow, downloadUrl } =
+    useWorkflowActions(
+        computed(() => props.workflow),
+        () => emit("refreshList", true)
+    );
+
 const userStore = useUserStore();
 const { isAnonymous } = storeToRefs(userStore);
 
-const { confirm } = useConfirmDialog();
-
-const bookmarkLoading = ref(false);
-
 const shared = computed(() => {
     return !userStore.matchesCurrentUsername(props.workflow.owner);
 });
@@ -57,48 +64,12 @@ const sourceType = computed(() => {
     }
 });
 
-async function onToggleBookmark(checked: boolean) {
-    try {
-        bookmarkLoading.value = true;
-
-        await updateWorkflow(props.workflow.id, {
-            show_in_tool_panel: checked,
-        });
-
-        Toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
-
-        if (checked) {
-            getGalaxyInstance().config.stored_workflow_menu_entries.push({
-                id: props.workflow.id,
-                name: props.workflow.name,
-            });
-        } else {
-            const indexToRemove = getGalaxyInstance().config.stored_workflow_menu_entries.findIndex(
-                (w: any) => w.id === props.workflow.id
-            );
-            getGalaxyInstance().config.stored_workflow_menu_entries.splice(indexToRemove, 1);
-        }
-    } catch (error) {
-        Toast.error("Failed to update workflow bookmark status");
-    } finally {
-        emit("refreshList", true);
-        bookmarkLoading.value = false;
-    }
-}
-
-async function onDelete() {
-    const confirmed = await confirm("Are you sure you want to delete this workflow?", {
-        title: "Delete workflow",
-        okTitle: "Delete",
-        okVariant: "danger",
-    });
-
-    if (confirmed) {
-        await deleteWorkflow(props.workflow.id);
-        emit("refreshList", true);
-        Toast.info("Workflow deleted");
-    }
-}
+const runPath = computed(
+    () =>
+        `/workflows/run?id=${props.workflow.id}${
+            props.workflow.version !== undefined ? `&version=${props.workflow.version}` : ""
+        }`
+);
 </script>
 
 <template>
@@ -112,7 +83,7 @@ async function onDelete() {
                 title="Add to bookmarks"
                 tooltip="Add to bookmarks. This workflow will appear in the left tool panel."
                 size="sm"
-                @click="onToggleBookmark(true)">
+                @click="toggleBookmark(true)">
                 <FontAwesomeIcon v-if="!bookmarkLoading" :icon="farStar" fixed-width />
                 <FontAwesomeIcon v-else :icon="faSpinner" spin fixed-width />
             </BButton>
@@ -123,7 +94,7 @@ async function onDelete() {
                 variant="link"
                 title="Remove bookmark"
                 size="sm"
-                @click="onToggleBookmark(false)">
+                @click="toggleBookmark(false)">
                 <FontAwesomeIcon v-if="!bookmarkLoading" :icon="faStar" fixed-width />
                 <FontAwesomeIcon v-else :icon="faSpinner" spin fixed-width />
             </BButton>
@@ -136,20 +107,60 @@ async function onDelete() {
                 class="workflow-actions-dropdown"
                 title="Workflow actions"
                 toggle-class="inline-icon-button"
-                variant="link">
+                variant="link"
+                @show="() => emit('dropdown', true)"
+                @hide="() => emit('dropdown', false)">
                 <template v-slot:button-content>
                     <FontAwesomeIcon :icon="faCaretDown" fixed-width />
                 </template>
 
+                <template v-if="props.editor">
+                    <BDropdownItem :to="runPath" title="Run workflow" size="sm" variant="link">
+                        <FontAwesomeIcon :icon="faPlay" fixed-width />
+                        Run
+                    </BDropdownItem>
+
+                    <BDropdownItem
+                        v-if="props.workflow.published"
+                        size="sm"
+                        title="Copy link to workflow"
+                        @click="copyPublicLink">
+                        <FontAwesomeIcon :icon="faLink" fixed-width />
+                        Link to Workflow
+                    </BDropdownItem>
+
+                    <BDropdownItem v-if="!isAnonymous && !shared" size="sm" title="Copy workflow" @click="copyWorkflow">
+                        <FontAwesomeIcon :icon="faCopy" fixed-width />
+                        Copy
+                    </BDropdownItem>
+
+                    <BDropdownItem
+                        size="sm"
+                        title="Download workflow in .ga format"
+                        target="_blank"
+                        :href="downloadUrl">
+                        <FontAwesomeIcon :icon="faDownload" fixed-width />
+                        Download
+                    </BDropdownItem>
+
+                    <BDropdownItem
+                        v-if="!isAnonymous && !shared"
+                        size="sm"
+                        title="Share"
+                        :to="`/workflows/sharing?id=${workflow.id}`">
+                        <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+                        Share
+                    </BDropdownItem>
+                </template>
+
                 <BDropdownItem
-                    v-if="!isAnonymous && !shared && !props.workflow.deleted"
+                    v-if="!isAnonymous && !shared && !props.workflow.deleted && !props.current"
                     class="workflow-delete-button"
                     title="Delete workflow"
                     size="sm"
-                    variant="link"
-                    @click="onDelete">
+                    @click="deleteWorkflow">
                     <FontAwesomeIcon :icon="faTrash" fixed-width />
-                    <span>Delete</span>
+                    Delete
                 </BDropdownItem>
 
                 <BDropdownItem
@@ -157,11 +168,10 @@ async function onDelete() {
                     class="source-trs-button"
                     :title="`View on ${props.workflow.source_metadata?.trs_server}`"
                     size="sm"
-                    variant="link"
                     :href="`https://dockstore.org/workflows${props.workflow?.source_metadata?.trs_tool_id?.slice(9)}`"
                     target="_blank">
                     <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width />
-                    <span>View on Dockstore</span>
+                    View on Dockstore
                 </BDropdownItem>
 
                 <BDropdownItem
@@ -169,11 +179,10 @@ async function onDelete() {
                     class="workflow-view-external-link-button"
                     title="View external link"
                     size="sm"
-                    variant="link"
                     :href="props.workflow.source_metadata?.url"
                     target="_blank">
                     <FontAwesomeIcon :icon="faExternalLinkAlt" fixed-width />
-                    <span>View external link</span>
+                    View external link
                 </BDropdownItem>
 
                 <BDropdownItem
@@ -181,10 +190,9 @@ async function onDelete() {
                     class="workflow-export-button"
                     title="Export"
                     size="sm"
-                    variant="link"
                     :to="`/workflows/export?id=${props.workflow.id}`">
                     <FontAwesomeIcon :icon="faFileExport" fixed-width />
-                    <span>Export</span>
+                    Export
                 </BDropdownItem>
             </BDropdown>
         </BButtonGroup>
diff --git a/client/src/components/Workflow/List/WorkflowActionsExtend.vue b/client/src/components/Workflow/List/WorkflowActionsExtend.vue
index ae5878a44e7f..56082d79ac9c 100644
--- a/client/src/components/Workflow/List/WorkflowActionsExtend.vue
+++ b/client/src/components/Workflow/List/WorkflowActionsExtend.vue
@@ -1,56 +1,57 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCopy, faDownload, faLink, faShareAlt, faTrashRestore } from "@fortawesome/free-solid-svg-icons";
+import {
+    faCopy,
+    faDownload,
+    faEdit,
+    faLink,
+    faPlusSquare,
+    faShareAlt,
+    faTrashRestore,
+    faUpload,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
 
-import { copyWorkflow, undeleteWorkflow } from "@/components/Workflow/workflows.services";
+import type { StoredWorkflowDetailed } from "@/api/workflows";
+import { undeleteWorkflow } from "@/components/Workflow/workflows.services";
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
-import { copy } from "@/utils/clipboard";
-import { withPrefix } from "@/utils/redirect";
-import { getFullAppUrl } from "@/utils/utils";
 
-library.add(faCopy, faDownload, faLink, faShareAlt, faTrashRestore);
+import { useWorkflowActions } from "./useWorkflowActions";
+
+import AsyncButton from "@/components/Common/AsyncButton.vue";
+import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
 
 interface Props {
-    workflow: any;
+    workflow: StoredWorkflowDetailed;
     published?: boolean;
+    editor?: boolean;
+    current?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     published: false,
+    editor: false,
+    current: false,
 });
 
 const emit = defineEmits<{
     (e: "refreshList", overlayLoading?: boolean): void;
+    (e: "insert"): void;
+    (e: "insertSteps"): void;
 }>();
 
 const userStore = useUserStore();
 const { confirm } = useConfirmDialog();
 const { isAnonymous } = storeToRefs(useUserStore());
 
-const downloadUrl = computed(() => {
-    return withPrefix(`/api/workflows/${props.workflow.id}/download?format=json-download`);
-});
-
 const shared = computed(() => {
     return !userStore.matchesCurrentUsername(props.workflow.owner);
 });
 
-async function onCopy() {
-    const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
-
-    if (confirmed) {
-        await copyWorkflow(props.workflow.id, props.workflow.owner);
-        emit("refreshList", true);
-        Toast.success("Workflow copied");
-    }
-}
-
 async function onRestore() {
     const confirmed = await confirm("Are you sure you want to restore this workflow?", "Restore workflow");
 
@@ -61,94 +62,175 @@ async function onRestore() {
     }
 }
 
-const relativeLink = computed(() => {
-    return `/published/workflow?id=${props.workflow.id}`;
+const editButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to edit Workflow";
+    } else {
+        if (props.workflow.deleted) {
+            return "You cannot edit a deleted workflow. Restore it first.";
+        } else {
+            return "Edit Workflow";
+        }
+    }
 });
-
-const fullLink = computed(() => {
-    return getFullAppUrl(relativeLink.value.substring(1));
+const importedButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to import workflow";
+    } else {
+        return "Import this workflow to edit";
+    }
+});
+const runButtonTitle = computed(() => {
+    if (isAnonymous.value) {
+        return "Log in to run workflow";
+    } else {
+        if (props.workflow.deleted) {
+            return "You cannot run a deleted workflow. Restore it first.";
+        } else {
+            return "Run workflow";
+        }
+    }
 });
 
-function onCopyPublicLink() {
-    copy(fullLink.value);
-    Toast.success("Link to workflow copied");
-}
+const { copyPublicLink, copyWorkflow, downloadUrl, importWorkflow } = useWorkflowActions(
+    computed(() => props.workflow),
+    () => emit("refreshList", true)
+);
 </script>
 
 <template>
-    <div class="workflow-actions-extend flex-gapx-1">
+    <div class="workflow-card-actions flex-gapx-1">
         <BButtonGroup>
-            <BButton
-                v-if="workflow.published && !workflow.deleted"
-                id="workflow-copy-public-button"
-                v-b-tooltip.hover.noninteractive
-                size="sm"
-                title="Copy link to workflow"
-                variant="outline-primary"
-                @click="onCopyPublicLink">
-                <FontAwesomeIcon :icon="faLink" fixed-width />
-                <span class="compact-view">Link to Workflow</span>
-            </BButton>
+            <template v-if="!props.editor && !workflow.deleted">
+                <BButton
+                    v-if="workflow.published"
+                    id="workflow-copy-public-button"
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Copy link to workflow"
+                    variant="outline-primary"
+                    @click="copyPublicLink">
+                    <FontAwesomeIcon :icon="faLink" fixed-width />
+                    <span class="compact-view">Link to Workflow</span>
+                </BButton>
+
+                <BButton
+                    v-if="!isAnonymous && !shared"
+                    id="workflow-copy-button"
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Copy"
+                    variant="outline-primary"
+                    @click="copyWorkflow">
+                    <FontAwesomeIcon :icon="faCopy" fixed-width />
+                    <span class="compact-view">Copy</span>
+                </BButton>
+
+                <BButton
+                    id="workflow-download-button"
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Download workflow in .ga format"
+                    variant="outline-primary"
+                    :href="downloadUrl">
+                    <FontAwesomeIcon :icon="faDownload" fixed-width />
+                    <span class="compact-view">Download</span>
+                </BButton>
+
+                <BButton
+                    v-if="!isAnonymous && !shared"
+                    id="workflow-share-button"
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Share"
+                    variant="outline-primary"
+                    :to="`/workflows/sharing?id=${workflow.id}`">
+                    <FontAwesomeIcon :icon="faShareAlt" fixed-width />
+                    <span class="compact-view">Share</span>
+                </BButton>
+            </template>
 
             <BButton
-                v-if="!isAnonymous && !shared && !workflow.deleted"
-                id="workflow-copy-button"
+                v-if="workflow.deleted"
+                id="restore-button"
                 v-b-tooltip.hover.noninteractive
                 size="sm"
-                title="Copy"
+                title="Restore"
                 variant="outline-primary"
-                @click="onCopy">
-                <FontAwesomeIcon :icon="faCopy" fixed-width />
-                <span class="compact-view">Copy</span>
+                @click="onRestore">
+                <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
+                <span class="compact-view">Restore</span>
             </BButton>
+        </BButtonGroup>
 
-            <BButton
-                v-if="!workflow.deleted"
-                id="workflow-download-button"
-                v-b-tooltip.hover.noninteractive
-                size="sm"
-                title="Download workflow in .ga format"
-                variant="outline-primary"
-                :href="downloadUrl">
-                <FontAwesomeIcon :icon="faDownload" fixed-width />
-                <span class="compact-view">Download</span>
-            </BButton>
+        <div>
+            <i v-if="props.current" class="mr-2"> current workflow </i>
 
             <BButton
-                v-if="!isAnonymous && !shared && !workflow.deleted"
-                id="workflow-share-button"
+                v-if="!isAnonymous && !shared && !props.current"
                 v-b-tooltip.hover.noninteractive
+                :disabled="workflow.deleted"
                 size="sm"
-                title="Share"
+                class="workflow-edit-button"
+                :title="editButtonTitle"
                 variant="outline-primary"
-                :to="`/workflows/sharing?id=${workflow.id}`">
-                <FontAwesomeIcon :icon="faShareAlt" fixed-width />
-                <span class="compact-view">Share</span>
+                :to="`/workflows/edit?id=${workflow.id}`">
+                <FontAwesomeIcon :icon="faEdit" fixed-width />
+                Edit
             </BButton>
 
-            <BButton
-                v-if="workflow.deleted"
-                id="restore-button"
+            <AsyncButton
+                v-else-if="!props.current"
                 v-b-tooltip.hover.noninteractive
                 size="sm"
-                title="Restore"
+                :disabled="isAnonymous"
+                :title="importedButtonTitle"
+                :icon="faUpload"
                 variant="outline-primary"
-                @click="onRestore">
-                <FontAwesomeIcon :icon="faTrashRestore" fixed-width />
-                <span class="compact-view">Restore</span>
-            </BButton>
-        </BButtonGroup>
+                :action="importWorkflow">
+                Import
+            </AsyncButton>
+
+            <WorkflowRunButton
+                v-if="!props.editor"
+                :id="workflow.id"
+                :disabled="isAnonymous || workflow.deleted"
+                :title="runButtonTitle" />
+
+            <BButtonGroup v-if="props.editor && !workflow.deleted">
+                <BButton
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Copy steps into workflow"
+                    variant="outline-primary"
+                    @click="emit('insertSteps')">
+                    <FontAwesomeIcon :icon="faCopy" fixed-width />
+                </BButton>
+
+                <BButton
+                    v-if="!props.current"
+                    v-b-tooltip.hover.noninteractive
+                    size="sm"
+                    title="Insert as sub-workflow"
+                    variant="primary"
+                    @click="emit('insert')">
+                    <FontAwesomeIcon :icon="faPlusSquare" fixed-width />
+                    <span> Insert </span>
+                </BButton>
+            </BButtonGroup>
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-@import "breakpoints.scss";
+@import "_breakpoints.scss";
 
-.workflow-actions-extend {
+.workflow-card-actions {
     display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-    justify-content: flex-end;
+    gap: 0.25rem;
+    margin-top: 0.25rem;
+    align-items: center;
+    justify-content: end;
 
     @container (max-width: #{$breakpoint-md}) {
         .compact-view {
diff --git a/client/src/components/Workflow/List/WorkflowCard.vue b/client/src/components/Workflow/List/WorkflowCard.vue
index 585ba221b81e..953ac58ee5aa 100644
--- a/client/src/components/Workflow/List/WorkflowCard.vue
+++ b/client/src/components/Workflow/List/WorkflowCard.vue
@@ -1,52 +1,53 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faEdit, faEye, faPen, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faPen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BLink } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
-import { copyWorkflow, updateWorkflow } from "@/components/Workflow/workflows.services";
-import { Toast } from "@/composables/toast";
+import { updateWorkflow } from "@/components/Workflow/workflows.services";
 import { useUserStore } from "@/stores/userStore";
 
-import AsyncButton from "@/components/Common/AsyncButton.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import WorkflowActions from "@/components/Workflow/List/WorkflowActions.vue";
 import WorkflowActionsExtend from "@/components/Workflow/List/WorkflowActionsExtend.vue";
 import WorkflowIndicators from "@/components/Workflow/List/WorkflowIndicators.vue";
-import WorkflowRename from "@/components/Workflow/List/WorkflowRename.vue";
-import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 import WorkflowInvocationsCount from "@/components/Workflow/WorkflowInvocationsCount.vue";
-import WorkflowRunButton from "@/components/Workflow/WorkflowRunButton.vue";
-
-library.add(faEdit, faEye, faPen, faUpload);
 
 interface Props {
     workflow: any;
     gridView?: boolean;
+    hideRuns?: boolean;
+    filterable?: boolean;
     publishedView?: boolean;
+    editorView?: boolean;
+    current?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     gridView: false,
     publishedView: false,
+    hideRuns: false,
+    filterable: true,
+    editorView: false,
+    current: false,
 });
 
 const emit = defineEmits<{
     (e: "tagClick", tag: string): void;
-    (e: "refreshList", overlayLoading?: boolean, b?: boolean): void;
-    (e: "update-filter", key: string, value: any): void;
+    (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
+    (e: "updateFilter", key: string, value: any): void;
+    (e: "rename", id: string, name: string): void;
+    (e: "preview", id: string): void;
+    (e: "insert"): void;
+    (e: "insertSteps"): void;
 }>();
 
 const userStore = useUserStore();
 
 const { isAnonymous } = storeToRefs(userStore);
 
-const showRename = ref(false);
-const showPreview = ref(false);
-
 const workflow = computed(() => props.workflow);
 
 const shared = computed(() => {
@@ -60,49 +61,6 @@ const description = computed(() => {
         return null;
     }
 });
-const editButtonTitle = computed(() => {
-    if (isAnonymous.value) {
-        return "Log in to edit Workflow";
-    } else {
-        if (workflow.value.deleted) {
-            return "You cannot edit a deleted workflow. Restore it first.";
-        } else {
-            return "Edit Workflow";
-        }
-    }
-});
-const importedButtonTitle = computed(() => {
-    if (isAnonymous.value) {
-        return "Log in to import workflow";
-    } else {
-        return "Import this workflow to edit";
-    }
-});
-const runButtonTitle = computed(() => {
-    if (isAnonymous.value) {
-        return "Log in to run workflow";
-    } else {
-        if (workflow.value.deleted) {
-            return "You cannot run a deleted workflow. Restore it first.";
-        } else {
-            return "Run workflow";
-        }
-    }
-});
-
-async function onImport() {
-    await copyWorkflow(workflow.value.id, workflow.value.owner);
-    Toast.success("Workflow imported successfully");
-}
-
-function onRenameClose(e: any) {
-    showRename.value = false;
-    emit("refreshList", true);
-}
-
-function toggleShowPreview(val: boolean = false) {
-    showPreview.value = val;
-}
 
 async function onTagsUpdate(tags: string[]) {
     workflow.value.tags = tags;
@@ -113,10 +71,16 @@ async function onTagsUpdate(tags: string[]) {
 async function onTagClick(tag: string) {
     emit("tagClick", tag);
 }
+
+const dropdownOpen = ref(false);
 </script>
 
 <template>
-    <div class="workflow-card" :data-workflow-id="workflow.id">
+    <div
+        class="workflow-card"
+        :class="{ 'dropdown-open': dropdownOpen }"
+        :data-workflow-id="workflow.id"
+        :data-workflow-name="workflow.name">
         <div
             class="workflow-card-container"
             :class="{
@@ -124,18 +88,25 @@ async function onTagClick(tag: string) {
             }">
             <div class="workflow-card-header">
                 <WorkflowIndicators
+                    class="workflow-card-indicators"
                     :workflow="workflow"
                     :published-view="publishedView"
-                    @update-filter="(k, v) => emit('update-filter', k, v)" />
+                    :filterable="props.filterable"
+                    @updateFilter="(k, v) => emit('updateFilter', k, v)" />
 
                 <div class="workflow-count-actions">
-                    <WorkflowInvocationsCount v-if="!isAnonymous && !shared" class="mx-1" :workflow="workflow" />
+                    <WorkflowInvocationsCount
+                        v-if="!props.hideRuns && !isAnonymous && !shared"
+                        class="invocations-count mx-1"
+                        :workflow="workflow" />
 
                     <WorkflowActions
-                        :workflow="workflow"
-                        :published="publishedView"
+                        :workflow="props.workflow"
+                        :published="props.publishedView"
+                        :editor="props.editorView"
+                        :current="props.current"
                         @refreshList="emit('refreshList', true)"
-                        @toggleShowPreview="toggleShowPreview" />
+                        @dropdown="(open) => (dropdownOpen = open)" />
                 </div>
 
                 <span class="workflow-name font-weight-bold">
@@ -143,25 +114,25 @@ async function onTagClick(tag: string) {
                         v-b-tooltip.hover.noninteractive
                         class="workflow-name-preview"
                         title="Preview Workflow"
-                        @click.stop.prevent="toggleShowPreview(true)"
-                        >{{ workflow.name }}</BLink
-                    >
+                        @click.stop.prevent="emit('preview', props.workflow.id)">
+                        {{ workflow.name }}
+                    </BLink>
                     <BButton
-                        v-if="!shared && !workflow.deleted"
+                        v-if="!props.current && !shared && !workflow.deleted"
                         v-b-tooltip.hover.noninteractive
                         :data-workflow-rename="workflow.id"
                         class="inline-icon-button workflow-rename"
                         variant="link"
                         size="sm"
                         title="Rename"
-                        @click="showRename = !showRename">
+                        @click="emit('rename', props.workflow.id, props.workflow.name)">
                         <FontAwesomeIcon :icon="faPen" fixed-width />
                     </BButton>
                 </span>
 
                 <TextSummary
                     v-if="description"
-                    class="my-1"
+                    class="workflow-summary my-1"
                     :description="description"
                     :max-length="gridView ? 100 : 250" />
             </div>
@@ -171,90 +142,37 @@ async function onTagClick(tag: string) {
                     <StatelessTags
                         clickable
                         :value="workflow.tags"
-                        :disabled="isAnonymous || workflow.deleted || shared"
+                        :disabled="props.current || isAnonymous || workflow.deleted || shared"
                         :max-visible-tags="gridView ? 2 : 8"
                         @input="onTagsUpdate($event)"
                         @tag-click="onTagClick($event)" />
                 </div>
 
-                <div class="workflow-card-actions">
-                    <WorkflowActionsExtend
-                        :workflow="workflow"
-                        :published="publishedView"
-                        @refreshList="emit('refreshList', true)" />
-
-                    <div class="workflow-edit-run-buttons">
-                        <BButton
-                            v-if="!isAnonymous && !shared"
-                            v-b-tooltip.hover.noninteractive
-                            :disabled="workflow.deleted"
-                            size="sm"
-                            class="workflow-edit-button"
-                            :title="editButtonTitle"
-                            variant="outline-primary"
-                            :to="`/workflows/edit?id=${workflow.id}`">
-                            <FontAwesomeIcon :icon="faEdit" fixed-width />
-                            Edit
-                        </BButton>
-
-                        <AsyncButton
-                            v-else
-                            v-b-tooltip.hover.noninteractive
-                            size="sm"
-                            :disabled="isAnonymous"
-                            :title="importedButtonTitle"
-                            :icon="faUpload"
-                            variant="outline-primary"
-                            :action="onImport">
-                            Import
-                        </AsyncButton>
-
-                        <WorkflowRunButton
-                            :id="workflow.id"
-                            :disabled="isAnonymous || workflow.deleted"
-                            :title="runButtonTitle" />
-                    </div>
-                </div>
+                <WorkflowActionsExtend
+                    :workflow="workflow"
+                    :published="publishedView"
+                    :editor="editorView"
+                    :current="props.current"
+                    @refreshList="emit('refreshList', true)"
+                    @insert="(...args) => emit('insert', ...args)"
+                    @insertSteps="(...args) => emit('insertSteps', ...args)" />
             </div>
-
-            <WorkflowRename
-                v-if="!isAnonymous && !shared && !workflow.deleted"
-                :id="workflow.id"
-                :show="showRename"
-                :name="workflow.name"
-                @close="onRenameClose" />
-
-            <BModal
-                v-model="showPreview"
-                ok-only
-                size="xl"
-                hide-header
-                dialog-class="workflow-card-preview-modal w-auto"
-                centered>
-                <WorkflowPublished v-if="showPreview" :id="workflow.id" quick-view />
-            </BModal>
         </div>
     </div>
 </template>
 
-<style lang="scss">
-.workflow-card-preview-modal {
-    max-width: min(1400px, calc(100% - 200px));
-
-    .modal-content {
-        height: min(800px, calc(100vh - 80px));
-    }
-}
-</style>
-
 <style scoped lang="scss">
 @import "theme/blue.scss";
-@import "breakpoints.scss";
+@import "_breakpoints.scss";
 
 .workflow-card {
     container: workflow-card / inline-size;
     padding: 0 0.25rem 0.5rem 0.25rem;
 
+    &.dropdown-open {
+        z-index: 10;
+    }
+
     .workflow-rename {
         opacity: 0;
     }
@@ -283,20 +201,48 @@ async function onTagClick(tag: string) {
         .workflow-card-header {
             display: grid;
             position: relative;
+            align-items: start;
+            grid-template-areas:
+                "i b"
+                "n n"
+                "s s";
+
+            &:has(.invocations-count) {
+                @container workflow-card (max-width: #{$breakpoint-xs}) {
+                    grid-template-areas:
+                        "i b"
+                        "n b"
+                        "s s";
+                }
+            }
+
+            .workflow-card-indicators {
+                grid-area: i;
+            }
 
             .workflow-count-actions {
+                grid-area: b;
                 display: flex;
                 align-items: center;
                 flex-direction: row;
-                position: absolute;
-                right: 0.5rem;
+                justify-content: end;
+
+                @container workflow-card (max-width: #{$breakpoint-xs}) {
+                    align-items: end;
+                    flex-direction: column-reverse;
+                }
             }
 
             .workflow-name {
+                grid-area: n;
                 font-size: 1rem;
                 font-weight: bold;
                 word-break: break-all;
             }
+
+            .workflow-summary {
+                grid-area: s;
+            }
         }
 
         .workflow-card-footer {
@@ -307,14 +253,6 @@ async function onTagClick(tag: string) {
             .workflow-card-tags {
                 max-width: 60%;
             }
-
-            .workflow-card-actions {
-                display: flex;
-                gap: 0.25rem;
-                margin-top: 0.25rem;
-                align-items: center;
-                justify-content: end;
-            }
         }
 
         @container workflow-card (max-width: #{$breakpoint-sm}) {
@@ -326,32 +264,6 @@ async function onTagClick(tag: string) {
                 }
             }
         }
-
-        @container workflow-card (max-width: #{$breakpoint-sm}) {
-            .workflow-card-actions {
-                justify-content: space-between;
-            }
-        }
-
-        @container workflow-card (min-width: #{$breakpoint-sm}, max-width: #{$breakpoint-md}) {
-            .workflow-card-actions {
-                justify-content: end;
-            }
-        }
-    }
-
-    @container workflow-card (max-width: #{$breakpoint-md}) {
-        .workflow-count-actions {
-            align-items: baseline;
-            justify-content: end;
-        }
-    }
-
-    @container workflow-card (min-width: #{$breakpoint-md}) {
-        .workflow-count-actions {
-            align-items: end;
-            flex-direction: column-reverse;
-        }
     }
 }
 </style>
diff --git a/client/src/components/Workflow/List/WorkflowCardList.vue b/client/src/components/Workflow/List/WorkflowCardList.vue
new file mode 100644
index 000000000000..a4ed88d3a193
--- /dev/null
+++ b/client/src/components/Workflow/List/WorkflowCardList.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { BModal } from "bootstrap-vue";
+import { reactive, ref } from "vue";
+
+import type { Workflow } from "@/components/Workflow/workflows.services";
+
+import WorkflowCard from "./WorkflowCard.vue";
+import WorkflowRename from "./WorkflowRename.vue";
+import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
+
+interface Props {
+    workflows: Workflow[];
+    gridView?: boolean;
+    hideRuns?: boolean;
+    filterable?: boolean;
+    publishedView?: boolean;
+    editorView?: boolean;
+    currentWorkflowId?: string;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "tagClick", tag: string): void;
+    (e: "refreshList", overlayLoading?: boolean, silent?: boolean): void;
+    (e: "updateFilter", key: string, value: any): void;
+    (e: "insertWorkflow", id: string, name: string): void;
+    (e: "insertWorkflowSteps", id: string, stepCount: number): void;
+}>();
+
+const modalOptions = reactive({
+    rename: {
+        id: "",
+        name: "",
+    },
+    preview: {
+        id: "",
+    },
+});
+
+const showRename = ref(false);
+
+function onRenameClose() {
+    showRename.value = false;
+    emit("refreshList", true);
+}
+
+function onRename(id: string, name: string) {
+    modalOptions.rename.id = id;
+    modalOptions.rename.name = name;
+    showRename.value = true;
+}
+
+const showPreview = ref(false);
+
+function onPreview(id: string) {
+    modalOptions.preview.id = id;
+    showPreview.value = true;
+}
+
+// TODO: clean-up types, as soon as better Workflow type is available
+function onInsert(workflow: Workflow) {
+    emit("insertWorkflow", workflow.latest_workflow_id as any, workflow.name as any);
+}
+
+function onInsertSteps(workflow: Workflow) {
+    emit("insertWorkflowSteps", workflow.id as any, workflow.number_of_steps as any);
+}
+</script>
+
+<template>
+    <div class="workflow-card-list" :class="{ grid: props.gridView }">
+        <WorkflowCard
+            v-for="workflow in props.workflows"
+            :key="workflow.id"
+            :workflow="workflow"
+            :grid-view="props.gridView"
+            :hide-runs="props.hideRuns"
+            :filterable="props.filterable"
+            :published-view="props.publishedView"
+            :editor-view="props.editorView"
+            :current="workflow.id === props.currentWorkflowId"
+            class="workflow-card"
+            @tagClick="(...args) => emit('tagClick', ...args)"
+            @refreshList="(...args) => emit('refreshList', ...args)"
+            @updateFilter="(...args) => emit('updateFilter', ...args)"
+            @rename="onRename"
+            @preview="onPreview"
+            @insert="onInsert(workflow)"
+            @insertSteps="onInsertSteps(workflow)">
+        </WorkflowCard>
+
+        <WorkflowRename
+            :id="modalOptions.rename.id"
+            :show="showRename"
+            :name="modalOptions.rename.name"
+            @close="onRenameClose" />
+
+        <BModal
+            v-model="showPreview"
+            ok-only
+            size="xl"
+            hide-header
+            dialog-class="workflow-card-preview-modal w-auto"
+            centered>
+            <WorkflowPublished v-if="showPreview" :id="modalOptions.preview.id" quick-view />
+        </BModal>
+    </div>
+</template>
+
+<style lang="scss">
+.workflow-card-preview-modal {
+    max-width: min(1400px, calc(100% - 200px));
+
+    .modal-content {
+        height: min(800px, calc(100vh - 80px));
+    }
+}
+</style>
+
+<style scoped lang="scss">
+@import "_breakpoints.scss";
+
+.workflow-card-list {
+    container: card-list / inline-size;
+    display: flex;
+    flex-wrap: wrap;
+
+    .workflow-card {
+        width: 100%;
+    }
+
+    &.grid .workflow-card {
+        width: calc(100% / 3);
+
+        @container card-list (max-width: #{$breakpoint-xl}) {
+            width: calc(100% / 2);
+        }
+
+        @container card-list (max-width: #{$breakpoint-sm}) {
+            width: 100%;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/List/WorkflowIndicators.vue b/client/src/components/Workflow/List/WorkflowIndicators.vue
index 10f841277c80..d63617f852b5 100644
--- a/client/src/components/Workflow/List/WorkflowIndicators.vue
+++ b/client/src/components/Workflow/List/WorkflowIndicators.vue
@@ -6,7 +6,7 @@ import { BBadge, BButton } from "bootstrap-vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router/composables";
 
-import { Toast } from "@/composables/toast";
+import { useToast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 import { copy } from "@/utils/clipboard";
 
@@ -14,26 +14,35 @@ import UtcDate from "@/components/UtcDate.vue";
 
 library.add(faFileImport, faGlobe, faShieldAlt, faUsers, faUser);
 
+// TODO: replace me with a proper definition
+type Workflow = any;
+
 interface Props {
-    workflow: any;
+    workflow: Workflow;
     publishedView: boolean;
     noEditTime?: boolean;
+    filterable?: boolean;
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "update-filter", key: string, value: any): void;
+    (e: "updateFilter", key: string, value: string | boolean): void;
 }>();
 
 const router = useRouter();
 const userStore = useUserStore();
 
 const publishedTitle = computed(() => {
-    if (userStore.matchesCurrentUsername(props.workflow.owner)) {
-        return "Published by you. Click to view all published workflows by you";
+    if (props.workflow.published && !props.publishedView) {
+        return "Published workflow" + (props.filterable ? ". Click to filter published workflows" : "");
+    } else if (userStore.matchesCurrentUsername(props.workflow.owner)) {
+        return "Published by you" + (props.filterable ? ". Click to view all published workflows by you" : "");
     } else {
-        return `Published by '${props.workflow.owner}'. Click to view all published workflows by '${props.workflow.owner}'`;
+        return (
+            `Published by '${props.workflow.owner}'` +
+            (props.filterable ? `. Click to view all published workflows by '${props.workflow.owner}'` : "")
+        );
     }
 });
 
@@ -61,36 +70,46 @@ const sourceTitle = computed(() => {
     }
 });
 
+const { success } = useToast();
+
 function onCopyLink() {
     if (sourceType.value == "url") {
         copy(props.workflow.source_metadata.url);
-        Toast.success("URL copied");
+        success("URL copied");
     } else if (sourceType.value.includes("trs")) {
         copy(props.workflow.source_metadata.trs_tool_id);
-        Toast.success("TRS ID copied");
+        success("TRS ID copied");
     }
 }
 
 function onViewMySharedByUser() {
     router.push(`/workflows/list_shared_with_me?owner=${props.workflow.owner}`);
-    emit("update-filter", "user", `'${props.workflow.owner}'`);
+    emit("updateFilter", "user", `'${props.workflow.owner}'`);
 }
 
 function onViewUserPublished() {
     router.push(`/workflows/list_published?owner=${props.workflow.owner}`);
-    emit("update-filter", "user", `'${props.workflow.owner}'`);
+    emit("updateFilter", "user", `'${props.workflow.owner}'`);
+}
+
+function getStepText(steps: number) {
+    if (steps === 1) {
+        return "1 step";
+    } else {
+        return `${steps} steps`;
+    }
 }
 </script>
 
 <template>
-    <div>
+    <div class="workflow-indicators">
         <BButton
             v-if="workflow.published && !publishedView"
             v-b-tooltip.noninteractive.hover
             size="sm"
             class="workflow-published-icon inline-icon-button"
-            title="Published workflow. Click to filter published workflows"
-            @click="emit('update-filter', 'published', true)">
+            :title="publishedTitle"
+            @click="emit('updateFilter', 'published', true)">
             <FontAwesomeIcon :icon="faGlobe" fixed-width />
         </BButton>
         <FontAwesomeIcon
@@ -126,6 +145,10 @@ function onViewUserPublished() {
             </small>
         </span>
 
+        <BBadge v-if="workflow.number_of_steps" pill class="mr-1 step-count">
+            {{ getStepText(workflow.number_of_steps) }}
+        </BBadge>
+
         <BBadge
             v-if="shared && !publishedView"
             v-b-tooltip.noninteractive.hover
@@ -152,14 +175,14 @@ function onViewUserPublished() {
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.workflow-badge {
-    background: $brand-secondary;
-    color: $brand-primary;
-    border: 1px solid $brand-primary;
+.workflow-indicators {
+    display: flex;
+    align-items: center;
+}
 
-    &:hover {
-        color: $brand-secondary;
-        background: $brand-primary;
-    }
+.step-count {
+    display: grid;
+    place-items: center;
+    height: 1rem;
 }
 </style>
diff --git a/client/src/components/Workflow/List/WorkflowList.vue b/client/src/components/Workflow/List/WorkflowList.vue
index 9db7e4865c03..327c514bd495 100644
--- a/client/src/components/Workflow/List/WorkflowList.vue
+++ b/client/src/components/Workflow/List/WorkflowList.vue
@@ -8,17 +8,17 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import { GalaxyApi } from "@/api";
-import { helpHtml, WorkflowFilters } from "@/components/Workflow/List/WorkflowFilters";
+import { getWorkflowFilters, helpHtml } from "@/components/Workflow/List/workflowFilters";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 import { rethrowSimple } from "@/utils/simple-error";
 
+import WorkflowCardList from "./WorkflowCardList.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
 import Heading from "@/components/Common/Heading.vue";
 import ListHeader from "@/components/Common/ListHeader.vue";
 import LoginRequired from "@/components/Common/LoginRequired.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
-import WorkflowCard from "@/components/Workflow/List/WorkflowCard.vue";
 import WorkflowListActions from "@/components/Workflow/List/WorkflowListActions.vue";
 
 library.add(faStar, faTrash);
@@ -77,7 +77,7 @@ const bookmarkButtonTitle = computed(() =>
 );
 
 // Filtering computed refs
-const workflowFilters = computed(() => WorkflowFilters(props.activeList));
+const workflowFilters = computed(() => getWorkflowFilters(props.activeList));
 const rawFilters = computed(() =>
     Object.fromEntries(workflowFilters.value.getFiltersForText(filterText.value, true, false))
 );
@@ -305,23 +305,14 @@ onMounted(() => {
             </BAlert>
         </span>
 
-        <BOverlay
-            v-else
-            id="workflow-cards"
-            :show="overlay"
-            rounded="sm"
-            class="cards-list mt-2"
-            :class="view === 'grid' ? 'd-flex flex-wrap' : ''">
-            <WorkflowCard
-                v-for="w in workflowsLoaded"
-                :key="w.id"
-                :workflow="w"
+        <BOverlay v-else id="workflow-cards" :show="overlay" rounded="sm" class="cards-list mt-2">
+            <WorkflowCardList
+                :workflows="workflowsLoaded"
                 :published-view="published"
                 :grid-view="view === 'grid'"
-                :class="view === 'grid' ? 'grid-view' : 'list-view'"
                 @refreshList="load"
                 @tagClick="(tag) => updateFilterValue('tag', `'${tag}'`)"
-                @update-filter="updateFilterValue" />
+                @updateFilter="updateFilterValue" />
 
             <BPagination
                 v-if="!loading && totalWorkflows > limit"
@@ -338,9 +329,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss">
-@import "scss/mixins.scss";
-@import "breakpoints.scss";
-
 .workflows-list {
     overflow: auto;
     display: flex;
@@ -358,32 +346,13 @@ onMounted(() => {
     }
 
     .cards-list {
-        container: card-list / inline-size;
         scroll-behavior: smooth;
         min-height: 150px;
+        display: flex;
+        flex-direction: column;
 
         overflow-y: auto;
         overflow-x: hidden;
-
-        .list-view {
-            width: 100%;
-        }
-
-        .grid-view {
-            width: calc(100% / 3);
-        }
-
-        @container card-list (max-width: #{$breakpoint-xl}) {
-            .grid-view {
-                width: calc(100% / 2);
-            }
-        }
-
-        @container card-list (max-width: #{$breakpoint-sm}) {
-            .grid-view {
-                width: 100%;
-            }
-        }
     }
 }
 </style>
diff --git a/client/src/style/scss/breakpoints.scss b/client/src/components/Workflow/List/_breakpoints.scss
similarity index 83%
rename from client/src/style/scss/breakpoints.scss
rename to client/src/components/Workflow/List/_breakpoints.scss
index 641b39ff9d2b..d758c7980ec2 100644
--- a/client/src/style/scss/breakpoints.scss
+++ b/client/src/components/Workflow/List/_breakpoints.scss
@@ -1,3 +1,4 @@
+$breakpoint-xs: 300px;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
diff --git a/client/src/components/Workflow/List/useWorkflowActions.ts b/client/src/components/Workflow/List/useWorkflowActions.ts
new file mode 100644
index 000000000000..d1900f86a5a6
--- /dev/null
+++ b/client/src/components/Workflow/List/useWorkflowActions.ts
@@ -0,0 +1,96 @@
+import { computed, type Ref, ref } from "vue";
+
+import type { StoredWorkflowDetailed } from "@/api/workflows";
+import {
+    copyWorkflow as copyWorkflowService,
+    deleteWorkflow as deleteWorkflowService,
+    updateWorkflow as updateWorkflowService,
+} from "@/components/Workflow/workflows.services";
+import { useConfirmDialog } from "@/composables/confirmDialog";
+import { useToast } from "@/composables/toast";
+import { copy } from "@/utils/clipboard";
+import { withPrefix } from "@/utils/redirect";
+import { getFullAppUrl } from "@/utils/utils";
+
+type Workflow = StoredWorkflowDetailed;
+
+export function useWorkflowActions(workflow: Ref<Workflow>, refreshCallback: () => void) {
+    const toast = useToast();
+
+    const bookmarkLoading = ref(false);
+
+    const toggleBookmark = async (checked: boolean) => {
+        try {
+            bookmarkLoading.value = true;
+
+            await updateWorkflowService(workflow.value.id, {
+                show_in_tool_panel: checked,
+            });
+
+            toast.info(`Workflow ${checked ? "added to" : "removed from"} bookmarks`);
+        } catch (error) {
+            toast.error("Failed to update workflow bookmark status");
+        } finally {
+            refreshCallback();
+            bookmarkLoading.value = false;
+        }
+    };
+
+    const { confirm } = useConfirmDialog();
+
+    const deleteWorkflow = async () => {
+        const confirmed = await confirm("Are you sure you want to delete this workflow?", {
+            title: "Delete workflow",
+            okTitle: "Delete",
+            okVariant: "danger",
+        });
+
+        if (confirmed) {
+            await deleteWorkflowService(workflow.value.id);
+            refreshCallback();
+            toast.info("Workflow deleted");
+        }
+    };
+
+    const relativeLink = computed(() => {
+        return `/published/workflow?id=${workflow.value.id}`;
+    });
+
+    const fullLink = computed(() => {
+        return getFullAppUrl(relativeLink.value.substring(1));
+    });
+
+    function copyPublicLink() {
+        copy(fullLink.value);
+        toast.success("Link to workflow copied");
+    }
+
+    async function copyWorkflow() {
+        const confirmed = await confirm("Are you sure you want to make a copy of this workflow?", "Copy workflow");
+
+        if (confirmed) {
+            await copyWorkflowService(workflow.value.id, workflow.value.owner);
+            refreshCallback();
+            toast.success("Workflow copied");
+        }
+    }
+
+    const downloadUrl = computed(() => {
+        return withPrefix(`/api/workflows/${workflow.value.id}/download?format=json-download`);
+    });
+
+    async function importWorkflow() {
+        await copyWorkflowService(workflow.value.id, workflow.value.owner);
+        toast.success("Workflow imported successfully");
+    }
+
+    return {
+        bookmarkLoading,
+        toggleBookmark,
+        deleteWorkflow,
+        copyPublicLink,
+        copyWorkflow,
+        importWorkflow,
+        downloadUrl,
+    };
+}
diff --git a/client/src/components/Workflow/List/WorkflowFilters.js b/client/src/components/Workflow/List/workflowFilters.ts
similarity index 98%
rename from client/src/components/Workflow/List/WorkflowFilters.js
rename to client/src/components/Workflow/List/workflowFilters.ts
index a7c1f3f3b3c8..47f523b0a66e 100644
--- a/client/src/components/Workflow/List/WorkflowFilters.js
+++ b/client/src/components/Workflow/List/workflowFilters.ts
@@ -1,4 +1,4 @@
-import Filtering, { contains, equals, expandNameTag, toBool } from "utils/filtering";
+import Filtering, { contains, equals, expandNameTag, toBool } from "@/utils/filtering";
 
 export function helpHtml(activeList = "my") {
     let extra = "";
@@ -71,7 +71,7 @@ export function helpHtml(activeList = "my") {
     return conditionalHelpHtml;
 }
 
-export function WorkflowFilters(activeList = "my") {
+export function getWorkflowFilters(activeList = "my") {
     const commonFilters = {
         name: { placeholder: "name", type: String, handler: contains("name"), menuItem: true },
         n: { handler: contains("n"), menuItem: false },
@@ -82,7 +82,7 @@ export function WorkflowFilters(activeList = "my") {
             menuItem: true,
         },
         t: { type: "MultiTags", handler: contains("t", "t", expandNameTag), menuItem: false },
-    };
+    } as const;
 
     if (activeList === "my") {
         return new Filtering(
diff --git a/client/src/components/Workflow/WorkflowAnnotation.test.ts b/client/src/components/Workflow/WorkflowAnnotation.test.ts
index abb7a4f5c062..8ebc19904b64 100644
--- a/client/src/components/Workflow/WorkflowAnnotation.test.ts
+++ b/client/src/components/Workflow/WorkflowAnnotation.test.ts
@@ -142,9 +142,7 @@ describe("WorkflowAnnotation renders", () => {
 
             const indicatorsLink = wrapper.find(SELECTORS.INDICATORS_LINK);
             expect(indicatorsLink.text()).toBe(WORKFLOW_OWNER);
-            expect(indicatorsLink.attributes("title")).toContain(
-                `Click to view all published workflows by '${WORKFLOW_OWNER}'`
-            );
+            expect(indicatorsLink.attributes("title")).toContain(`Published by '${WORKFLOW_OWNER}'`);
         }
         await checkHasIndicators("run_form");
         await checkHasIndicators("invocation");
diff --git a/client/src/components/Workflow/WorkflowInvocationsCount.vue b/client/src/components/Workflow/WorkflowInvocationsCount.vue
index 275173da3eb9..e9101f5def7a 100644
--- a/client/src/components/Workflow/WorkflowInvocationsCount.vue
+++ b/client/src/components/Workflow/WorkflowInvocationsCount.vue
@@ -41,7 +41,7 @@ onMounted(initCounts);
 
 <template>
     <div class="workflow-invocations-count d-flex align-items-center flex-gapx-1">
-        <BBadge v-if="count != undefined && count === 0" pill class="list-view">
+        <BBadge v-if="count != undefined && count === 0" pill>
             <span>never run</span>
         </BBadge>
         <BBadge
@@ -49,7 +49,7 @@ onMounted(initCounts);
             v-b-tooltip.hover.noninteractive
             pill
             :title="localize('View workflow invocations')"
-            class="outline-badge cursor-pointer list-view"
+            class="outline-badge cursor-pointer"
             :to="`/workflows/${props.workflow.id}/invocations`">
             <FontAwesomeIcon :icon="faList" fixed-width />
 
diff --git a/client/src/components/Workflow/workflows.services.ts b/client/src/components/Workflow/workflows.services.ts
index 0b5efab9e469..7c611620c807 100644
--- a/client/src/components/Workflow/workflows.services.ts
+++ b/client/src/components/Workflow/workflows.services.ts
@@ -1,9 +1,55 @@
 import axios from "axios";
 
+import { GalaxyApi } from "@/api";
 import { useUserStore } from "@/stores/userStore";
 import { withPrefix } from "@/utils/redirect";
+import { rethrowSimple } from "@/utils/simple-error";
 
-type Workflow = Record<string, never>;
+export type Workflow = Record<string, never>;
+
+type SortBy = "create_time" | "update_time" | "name";
+
+interface LoadWorkflowsOptions {
+    sortBy: SortBy;
+    sortDesc: boolean;
+    limit: number;
+    offset: number;
+    filterText: string;
+    showPublished: boolean;
+    skipStepCounts: boolean;
+}
+
+export async function loadWorkflows({
+    sortBy = "update_time",
+    sortDesc = true,
+    limit = 20,
+    offset = 0,
+    filterText = "",
+    showPublished = false,
+    skipStepCounts = true,
+}: LoadWorkflowsOptions): Promise<{ data: Workflow[]; totalMatches: number }> {
+    const { response, data, error } = await GalaxyApi().GET("/api/workflows", {
+        params: {
+            query: {
+                sort_by: sortBy,
+                sort_desc: sortDesc,
+                limit,
+                offset,
+                search: filterText,
+                show_published: showPublished,
+                skip_step_counts: skipStepCounts,
+            },
+        },
+    });
+
+    if (error) {
+        rethrowSimple(error);
+    }
+
+    const totalMatches = parseInt(response.headers.get("Total_matches") || "0", 10) || 0;
+
+    return { data, totalMatches };
+}
 
 export async function updateWorkflow(id: string, changes: object): Promise<Workflow> {
     const { data } = await axios.put(withPrefix(`/api/workflows/${id}`), changes);
diff --git a/client/src/composables/eventEmitter.ts b/client/src/composables/eventEmitter.ts
new file mode 100644
index 000000000000..13f95a4992ba
--- /dev/null
+++ b/client/src/composables/eventEmitter.ts
@@ -0,0 +1,20 @@
+import { type Ref, watch } from "vue";
+
+/**
+ * Emits an event whenever a value changes
+ * @param ref value to watch
+ * @param emit event emitter function
+ * @param name event to emit
+ */
+export function useEmit<Name extends string, T, F extends { (name: Name, arg: T): void }>(
+    ref: Ref<T>,
+    emit: F,
+    name: Name
+) {
+    watch(
+        () => ref.value,
+        () => {
+            emit(name, ref.value);
+        }
+    );
+}
diff --git a/client/src/composables/useActivityAction.ts b/client/src/composables/useActivityAction.ts
deleted file mode 100644
index 3dc1babc7f84..000000000000
--- a/client/src/composables/useActivityAction.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useRouter } from "vue-router/composables";
-
-import { type Activity } from "@/stores/activityStore";
-import { useUserStore } from "@/stores/userStore";
-
-export function useActivityAction() {
-    const router = useRouter();
-    const userStore = useUserStore();
-    const executeActivity = (activity: Activity) => {
-        if (activity.panel) {
-            userStore.toggleSideBar(activity.id);
-        }
-        if (activity.to) {
-            router.push(activity.to);
-        }
-    };
-
-    return {
-        executeActivity,
-    };
-}
diff --git a/client/src/composables/workflowStores.ts b/client/src/composables/workflowStores.ts
index 79338bacfffb..63704068e3c9 100644
--- a/client/src/composables/workflowStores.ts
+++ b/client/src/composables/workflowStores.ts
@@ -76,6 +76,7 @@ export function useWorkflowStores(workflowId?: Ref<string> | string) {
     const undoRedoStore = useUndoRedoStore(id);
 
     return {
+        workflowId: id,
         connectionStore,
         stateStore,
         stepStore,
diff --git a/client/src/stores/activitySetup.ts b/client/src/stores/activitySetup.ts
index 17551fc89e2b..af494b4b0409 100644
--- a/client/src/stores/activitySetup.ts
+++ b/client/src/stores/activitySetup.ts
@@ -1,14 +1,30 @@
 /**
  * List of built-in activities
  */
+import {
+    faChartBar,
+    faColumns,
+    faDatabase,
+    faFile,
+    faFileContract,
+    faFolder,
+    faHdd,
+    faLaptop,
+    faList,
+    faPlay,
+    faSitemap,
+    faUpload,
+    faWrench,
+} from "@fortawesome/free-solid-svg-icons";
+
 import { type Activity } from "@/stores/activityStore";
 import { type EventData } from "@/stores/eventStore";
 
-export const Activities = [
+export const defaultActivities = [
     {
         anonymous: false,
         description: "Displays currently running interactive tools (ITs), if these are enabled by the administrator.",
-        icon: "fa-laptop",
+        icon: faLaptop,
         id: "interactivetools",
         mutable: false,
         optional: false,
@@ -21,7 +37,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Opens a data dialog, allowing uploads from URL, pasted content or disk.",
-        icon: "upload",
+        icon: faUpload,
         id: "upload",
         mutable: false,
         optional: false,
@@ -34,7 +50,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Displays the tool panel to search and access all available tools.",
-        icon: "wrench",
+        icon: faWrench,
         id: "tools",
         mutable: false,
         optional: false,
@@ -47,7 +63,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Displays a panel to search and access workflows.",
-        icon: "sitemap",
+        icon: faSitemap,
         id: "workflows",
         mutable: false,
         optional: true,
@@ -60,7 +76,7 @@ export const Activities = [
     {
         anonymous: false,
         description: "Displays all workflow runs.",
-        icon: "fa-list",
+        icon: faList,
         id: "invocation",
         mutable: false,
         optional: true,
@@ -73,7 +89,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Displays the list of available visualizations.",
-        icon: "chart-bar",
+        icon: faChartBar,
         id: "visualizations",
         mutable: false,
         optional: true,
@@ -86,7 +102,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Displays the list of all histories.",
-        icon: "fa-hdd",
+        icon: faHdd,
         id: "histories",
         mutable: false,
         optional: true,
@@ -99,7 +115,7 @@ export const Activities = [
     {
         anonymous: false,
         description: "Displays the history selector panel and opens History Multiview in the center panel.",
-        icon: "fa-columns",
+        icon: faColumns,
         id: "multiview",
         mutable: false,
         optional: true,
@@ -112,7 +128,7 @@ export const Activities = [
     {
         anonymous: false,
         description: "Displays all of your datasets across all histories.",
-        icon: "fa-folder",
+        icon: faFolder,
         id: "datasets",
         mutable: false,
         optional: true,
@@ -125,7 +141,7 @@ export const Activities = [
     {
         anonymous: true,
         description: "Display and create new pages.",
-        icon: "fa-file-contract",
+        icon: faFileContract,
         id: "pages",
         mutable: false,
         optional: true,
@@ -138,7 +154,7 @@ export const Activities = [
     {
         anonymous: false,
         description: "Display Data Libraries with datasets available to all users.",
-        icon: "fa-database",
+        icon: faDatabase,
         id: "libraries",
         mutable: false,
         optional: true,
@@ -148,14 +164,14 @@ export const Activities = [
         to: "/libraries",
         visible: true,
     },
-];
+] as const;
 
 export function convertDropData(data: EventData): Activity | null {
     if (data.history_content_type === "dataset") {
         return {
             anonymous: true,
             description: "Displays this dataset.",
-            icon: "fa-file",
+            icon: faFile,
             id: `dataset-${data.id}`,
             mutable: true,
             optional: true,
@@ -170,7 +186,7 @@ export function convertDropData(data: EventData): Activity | null {
         return {
             anonymous: false,
             description: data.description as string,
-            icon: "fa-play",
+            icon: faPlay,
             id: `workflow-${data.id}`,
             mutable: true,
             optional: true,
diff --git a/client/src/stores/activityStore.test.ts b/client/src/stores/activityStore.test.ts
index e5fee99c70ea..93eebee8e56b 100644
--- a/client/src/stores/activityStore.test.ts
+++ b/client/src/stores/activityStore.test.ts
@@ -1,14 +1,15 @@
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { createPinia, setActivePinia } from "pinia";
 
 import { useActivityStore } from "@/stores/activityStore";
 
 // mock Galaxy object
 jest.mock("./activitySetup", () => ({
-    Activities: [
+    defaultActivities: [
         {
             anonymous: false,
             description: "a-description",
-            icon: "a-icon",
+            icon: "a-icon" as unknown as IconDefinition,
             id: "a-id",
             mutable: false,
             optional: false,
@@ -25,7 +26,7 @@ const newActivities = [
     {
         anonymous: false,
         description: "a-description-new",
-        icon: "a-icon-new",
+        icon: "a-icon-new" as unknown as IconDefinition,
         id: "a-id",
         mutable: false,
         optional: false,
@@ -38,7 +39,7 @@ const newActivities = [
     {
         anonymous: false,
         description: "b-description-new",
-        icon: "b-icon-new",
+        icon: "b-icon-new" as unknown as IconDefinition,
         id: "b-id",
         mutable: true,
         optional: false,
@@ -55,16 +56,16 @@ describe("Activity Store", () => {
         setActivePinia(createPinia());
     });
 
-    it("initialize store", () => {
-        const activityStore = useActivityStore();
+    it("initialize store", async () => {
+        const activityStore = useActivityStore("default");
         expect(activityStore.getAll().length).toBe(0);
-        activityStore.sync();
+        await activityStore.sync();
         expect(activityStore.getAll().length).toBe(1);
     });
 
-    it("add activity", () => {
-        const activityStore = useActivityStore();
-        activityStore.sync();
+    it("add activity", async () => {
+        const activityStore = useActivityStore("default");
+        await activityStore.sync();
         const initialActivities = activityStore.getAll();
         expect(initialActivities[0]?.visible).toBeTruthy();
         activityStore.setAll(newActivities);
@@ -72,7 +73,7 @@ describe("Activity Store", () => {
         const currentActivities = activityStore.getAll();
         expect(currentActivities[0]).toEqual(newActivities[0]);
         expect(currentActivities[1]).toEqual(newActivities[1]);
-        activityStore.sync();
+        await activityStore.sync();
         const syncActivities = activityStore.getAll();
         expect(syncActivities.length).toEqual(2);
         expect(syncActivities[0]?.description).toEqual("a-description");
@@ -80,19 +81,19 @@ describe("Activity Store", () => {
         expect(syncActivities[1]).toEqual(newActivities[1]);
     });
 
-    it("remove activity", () => {
-        const activityStore = useActivityStore();
-        activityStore.sync();
+    it("remove activity", async () => {
+        const activityStore = useActivityStore("default");
+        await activityStore.sync();
         const initialActivities = activityStore.getAll();
         expect(initialActivities.length).toEqual(1);
         activityStore.remove("a-id");
         expect(activityStore.getAll().length).toEqual(0);
-        activityStore.sync();
+        await activityStore.sync();
         expect(activityStore.getAll().length).toEqual(1);
         activityStore.setAll(newActivities);
         expect(activityStore.getAll().length).toEqual(2);
         activityStore.remove("b-id");
-        activityStore.sync();
+        await activityStore.sync();
         expect(activityStore.getAll().length).toEqual(1);
     });
 });
diff --git a/client/src/stores/activityStore.ts b/client/src/stores/activityStore.ts
index 377a68e08964..466ee226bf00 100644
--- a/client/src/stores/activityStore.ts
+++ b/client/src/stores/activityStore.ts
@@ -1,47 +1,87 @@
 /**
  * Stores the Activity Bar state
  */
+import { type IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { useDebounceFn, watchImmediate } from "@vueuse/core";
+import { computed, type Ref, ref, set } from "vue";
 
-import { defineStore } from "pinia";
-import { type Ref } from "vue";
-
+import { useHashedUserId } from "@/composables/hashedUserId";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
+import { ensureDefined } from "@/utils/assertions";
+
+import { defaultActivities } from "./activitySetup";
+import { defineScopedStore } from "./scopedStore";
 
-import { Activities } from "./activitySetup";
+export type ActivityVariant = "primary" | "danger" | "disabled";
 
 export interface Activity {
     // determine wether an anonymous user can access this activity
-    anonymous: boolean;
+    anonymous?: boolean;
     // description of the activity
     description: string;
     // unique identifier
     id: string;
     // icon to be displayed in activity bar
-    icon: string;
+    icon: IconDefinition;
     // indicate if this activity can be modified and/or deleted
-    mutable: boolean;
+    mutable?: boolean;
     // indicate wether this activity can be disabled by the user
-    optional: boolean;
+    optional?: boolean;
     // specifiy wether this activity utilizes the side panel
-    panel: boolean;
+    panel?: boolean;
     // title to be displayed in the activity bar
     title: string;
     // route to be executed upon selecting the activity
-    to: string | null;
+    to?: string | null;
     // tooltip to be displayed when hovering above the icon
     tooltip: string;
     // indicate wether the activity should be visible by default
-    visible: boolean;
+    visible?: boolean;
+    // if activity should cause a click event
+    click?: true;
+    variant?: ActivityVariant;
+}
+
+export interface ActivityMeta {
+    disabled: boolean;
 }
 
-export const useActivityStore = defineStore("activityStore", () => {
-    const activities: Ref<Array<Activity>> = useUserLocalStorage("activity-store-activities", []);
+function defaultActivityMeta(): ActivityMeta {
+    return {
+        disabled: false,
+    };
+}
+
+export const useActivityStore = defineScopedStore("activityStore", (scope) => {
+    const activities: Ref<Array<Activity>> = useUserLocalStorage(`activity-store-activities-${scope}`, []);
+    const activityMeta: Ref<Record<string, ActivityMeta>> = ref({});
+
+    const { hashedUserId } = useHashedUserId();
+
+    const customDefaultActivities = ref<Activity[] | null>(null);
+    const currentDefaultActivities = computed(() => customDefaultActivities.value ?? defaultActivities);
+
+    const toggledSideBar = useUserLocalStorage(`activity-store-current-side-bar-${scope}`, "tools");
+
+    function toggleSideBar(currentOpen = "") {
+        toggledSideBar.value = toggledSideBar.value === currentOpen ? "" : currentOpen;
+    }
+
+    function overrideDefaultActivities(activities: Activity[]) {
+        customDefaultActivities.value = activities;
+        sync();
+    }
+
+    function resetDefaultActivities() {
+        customDefaultActivities.value = null;
+        sync();
+    }
 
     /**
      * Restores the default activity bar items
      */
     function restore() {
-        activities.value = Activities.slice();
+        activities.value = currentDefaultActivities.value.slice();
     }
 
     /**
@@ -49,15 +89,18 @@ export const useActivityStore = defineStore("activityStore", () => {
      * This helper function applies changes of the built-in activities,
      * to the user stored activities which are persisted in local cache.
      */
-    function sync() {
+    const sync = useDebounceFn(() => {
         // create a map of built-in activities
         const activitiesMap: Record<string, Activity> = {};
-        Activities.forEach((a) => {
+
+        currentDefaultActivities.value.forEach((a) => {
             activitiesMap[a.id] = a;
         });
+
         // create an updated array of activities
         const newActivities: Array<Activity> = [];
         const foundActivity = new Set();
+
         activities.value.forEach((a: Activity) => {
             if (a.mutable) {
                 // existing custom activity
@@ -66,6 +109,7 @@ export const useActivityStore = defineStore("activityStore", () => {
                 // update existing built-in activity attributes
                 // skip legacy built-in activities
                 const sourceActivity = activitiesMap[a.id];
+
                 if (sourceActivity) {
                     foundActivity.add(a.id);
                     newActivities.push({
@@ -75,17 +119,37 @@ export const useActivityStore = defineStore("activityStore", () => {
                 }
             }
         });
+
         // add new built-in activities
-        Activities.forEach((a) => {
+        currentDefaultActivities.value.forEach((a) => {
             if (!foundActivity.has(a.id)) {
                 newActivities.push({ ...a });
             }
         });
+
         // update activities stored in local cache only if changes were applied
         if (JSON.stringify(activities.value) !== JSON.stringify(newActivities)) {
             activities.value = newActivities;
         }
-    }
+
+        // if toggled side-bar does not exist, choose the first option
+        if (toggledSideBar.value !== "") {
+            const allSideBars = activities.value.flatMap((activity) => {
+                if (activity.panel) {
+                    return [activity.id];
+                } else {
+                    return [];
+                }
+            });
+
+            const allSideBarsSet = new Set(allSideBars);
+            const firstSideBar = allSideBars[0];
+
+            if (firstSideBar && !allSideBarsSet.has(toggledSideBar.value)) {
+                toggledSideBar.value = firstSideBar;
+            }
+        }
+    }, 10);
 
     function getAll() {
         return activities.value;
@@ -97,17 +161,56 @@ export const useActivityStore = defineStore("activityStore", () => {
 
     function remove(activityId: string) {
         const findIndex = activities.value.findIndex((a: Activity) => a.id === activityId);
+
         if (findIndex !== -1) {
             activities.value.splice(findIndex, 1);
         }
     }
 
+    const metaForId = computed(() => (activityId: string) => {
+        let meta = activityMeta.value[activityId];
+
+        if (!meta) {
+            set(activityMeta.value, activityId, defaultActivityMeta());
+            meta = ensureDefined(activityMeta.value[activityId]);
+        }
+
+        return meta;
+    });
+
+    function setMeta<K extends keyof ActivityMeta>(activityId: string, metaKey: K, value: ActivityMeta[K]) {
+        let meta = activityMeta.value[activityId];
+
+        if (!meta) {
+            set(activityMeta.value, activityId, defaultActivityMeta());
+            meta = ensureDefined(activityMeta.value[activityId]);
+        }
+
+        set(meta, metaKey, value);
+    }
+
+    watchImmediate(
+        () => hashedUserId.value,
+        () => {
+            sync();
+        }
+    );
+
     return {
+        toggledSideBar,
+        toggleSideBar,
         activities,
+        activityMeta,
+        metaForId,
+        setMeta,
         getAll,
         remove,
         setAll,
         restore,
         sync,
+        customDefaultActivities,
+        currentDefaultActivities,
+        overrideDefaultActivities,
+        resetDefaultActivities,
     };
 });
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 55a49d491209..a83daa94b5ff 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -27,8 +27,6 @@ export const useUserStore = defineStore("userStore", () => {
     const currentUser = ref<AnyUser>(null);
     const currentPreferences = ref<Preferences | null>(null);
 
-    // explicitly pass current User, because userStore might not exist yet
-    const toggledSideBar = useUserLocalStorage("user-store-toggled-side-bar", "tools", currentUser);
     const preferredListViewMode = useUserLocalStorage("user-store-preferred-list-view-mode", "grid", currentUser);
 
     let loadPromise: Promise<void> | null = null;
@@ -132,10 +130,6 @@ export const useUserStore = defineStore("userStore", () => {
         preferredListViewMode.value = view;
     }
 
-    function toggleSideBar(currentOpen = "") {
-        toggledSideBar.value = toggledSideBar.value === currentOpen ? "" : currentOpen;
-    }
-
     function processUserPreferences(user: RegisteredUser): Preferences {
         // Favorites are returned as a JSON string by the API
         const favorites =
@@ -153,7 +147,6 @@ export const useUserStore = defineStore("userStore", () => {
         isAnonymous,
         currentTheme,
         currentFavorites,
-        toggledSideBar,
         preferredListViewMode,
         loadUser,
         matchesCurrentUsername,
@@ -162,7 +155,6 @@ export const useUserStore = defineStore("userStore", () => {
         setPreferredListViewMode,
         addFavoriteTool,
         removeFavoriteTool,
-        toggleSideBar,
         $reset,
     };
 });
diff --git a/client/src/stores/workflowNodeInspectorStore.ts b/client/src/stores/workflowNodeInspectorStore.ts
new file mode 100644
index 000000000000..6591baf1c8bb
--- /dev/null
+++ b/client/src/stores/workflowNodeInspectorStore.ts
@@ -0,0 +1,114 @@
+import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { computed, del, ref, set } from "vue";
+
+import { ensureDefined } from "@/utils/assertions";
+import { getShortToolId } from "@/utils/tool";
+import { match } from "@/utils/utils";
+
+import type { Step } from "./workflowStepStore";
+
+interface StoredSize {
+    width: number;
+    maximized: boolean;
+}
+
+function getContentId(step: Step) {
+    return match(step.type, {
+        tool: () => `tool_${getShortToolId(ensureDefined(step.content_id))}`,
+        subworkflow: () => `subworkflow_${step.content_id}`,
+        data_collection_input: () => "input",
+        data_input: () => "input",
+        parameter_input: () => "input",
+        pause: () => "pause",
+    });
+}
+
+export const useWorkflowNodeInspectorStore = defineStore("workflowNodeInspectorStore", () => {
+    /** width of the node inspector if no other width is stored */
+    const generalWidth = useLocalStorage("workflowNodeInspectorGeneralWidth", 300);
+    /** maximized state of the node inspector if no other value is stored */
+    const generalMaximized = ref(false);
+    const storedSizes = useLocalStorage<Record<string, StoredSize>>("workflowNodeInspectorStoredSizes", {});
+
+    const isStored = computed(() => (step: Step) => {
+        const id = getContentId(step);
+        const storedIds = new Set(Object.keys(storedSizes.value));
+
+        return storedIds.has(id);
+    });
+
+    function setStored(step: Step, stored: boolean) {
+        const id = getContentId(step);
+        const storedValue = storedSizes.value[id];
+
+        if (stored) {
+            if (!storedValue) {
+                set(storedSizes.value, id, {
+                    width: generalWidth.value,
+                    maximized: generalMaximized.value,
+                });
+            }
+        } else {
+            if (storedValue) {
+                generalWidth.value = storedValue.width;
+                generalMaximized.value = storedValue.maximized;
+                del(storedSizes.value, id);
+            }
+        }
+    }
+
+    const width = computed(() => (step: Step) => {
+        const id = getContentId(step);
+        return storedSizes.value[id]?.width ?? generalWidth.value;
+    });
+
+    /**
+     * sets the inspectors width. If the width is stored,
+     * stores the new width, otherwise, updates the general width
+     */
+    function setWidth(step: Step, newWidth: number) {
+        const id = getContentId(step);
+
+        if (storedSizes.value[id]) {
+            storedSizes.value[id]!.width = newWidth;
+        } else {
+            generalWidth.value = newWidth;
+        }
+    }
+
+    const maximized = computed(() => (step: Step) => {
+        const id = getContentId(step);
+        return storedSizes.value[id]?.maximized ?? generalMaximized.value;
+    });
+
+    /**
+     * sets the inspectors maximized state. If the state is stored,
+     * stores the maximized state, otherwise, updates the general maximized state
+     */
+    function setMaximized(step: Step, newMaximized: boolean) {
+        const id = getContentId(step);
+
+        if (storedSizes.value[id]) {
+            storedSizes.value[id]!.maximized = newMaximized;
+        } else {
+            generalMaximized.value = newMaximized;
+        }
+    }
+
+    function clearAllStored() {
+        storedSizes.value = {};
+    }
+
+    return {
+        isStored,
+        setStored,
+        clearAllStored,
+        generalWidth,
+        generalMaximized,
+        width,
+        setWidth,
+        maximized,
+        setMaximized,
+    };
+});
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index d29d05759050..7a540d9fef5f 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -224,7 +224,7 @@ $ui-margin-horizontal-large: $margin-v * 2;
 
 .ui-textarea {
     @extend .ui-input;
-    height: 100px !important;
+    min-height: 100px;
 }
 
 .ui-switch {
diff --git a/client/src/utils/dom.ts b/client/src/utils/dom.ts
new file mode 100644
index 000000000000..7fd2ec12dd68
--- /dev/null
+++ b/client/src/utils/dom.ts
@@ -0,0 +1,33 @@
+/**
+ * composed array of all Event Targets between the original and current target
+ *
+ * @param e Event to return partial composed path of
+ */
+export function composedPartialPath(e: Event): EventTarget[] {
+    const current = e.currentTarget;
+    const composed = e.composedPath();
+
+    const currentIndex = composed.findIndex((target) => target === current);
+
+    if (currentIndex === -1) {
+        throw new Error("current target is not part of composed path");
+    }
+
+    const partial = composed.slice(0, currentIndex);
+
+    return partial;
+}
+
+/**
+ * checks if an element has a valid mouse interaction
+ */
+export function isClickable(element: Element): boolean {
+    const clickable =
+        element instanceof HTMLButtonElement ||
+        element instanceof HTMLInputElement ||
+        element instanceof HTMLAnchorElement ||
+        element instanceof HTMLSelectElement ||
+        element instanceof HTMLLabelElement;
+
+    return clickable;
+}
diff --git a/client/src/utils/filterConversion.test.js b/client/src/utils/filterConversion.test.js
index 6867c20c23f0..84affdcae555 100644
--- a/client/src/utils/filterConversion.test.js
+++ b/client/src/utils/filterConversion.test.js
@@ -1,9 +1,9 @@
-import { HistoryFilters } from "components/History/HistoryFilters";
-import { WorkflowFilters } from "components/Workflow/List/WorkflowFilters";
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { getWorkflowFilters } from "@/components/Workflow/List/workflowFilters";
 
 describe("test filtering helpers to convert filters to filter text", () => {
-    const MyWorkflowFilters = WorkflowFilters("my");
-    const PublishedWorkflowFilters = WorkflowFilters("published");
+    const MyWorkflowFilters = getWorkflowFilters("my");
+    const PublishedWorkflowFilters = getWorkflowFilters("published");
     it("conversion from filters to new filter text", async () => {
         const normalized = HistoryFilters.defaultFilters;
         expect(Object.keys(normalized).length).toBe(2);
@@ -66,7 +66,7 @@ describe("test filtering helpers to convert filters to filter text", () => {
 });
 
 describe("test filtering helpers to convert filter text to filters", () => {
-    const PublishedWorkflowFilters = WorkflowFilters("published");
+    const PublishedWorkflowFilters = getWorkflowFilters("published");
     function getFilters(filteringClass, filterText) {
         return filteringClass.getValidFilters(Object.fromEntries(filteringClass.getFiltersForText(filterText)))
             .validFilters;
diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
index 13030445e978..4b25ad56bec4 100644
--- a/client/src/utils/filtering.ts
+++ b/client/src/utils/filtering.ts
@@ -525,13 +525,16 @@ export default class Filtering<T> {
             if (this.validFilters[key]?.type === "MultiTags" && Array.isArray(value)) {
                 const validValues = value
                     .map((v) => this.getConvertedValue(key, v, backendFormatted))
-                    .filter((v) => v !== undefined);
+                    .filter((v) => v !== undefined) as T[];
+
                 if (validValues.length > 0) {
                     validFilters[key] = validValues as T;
                 }
+
                 const invalidValues = value.filter(
-                    (v) => !validValues.includes(this.getConvertedValue(key, v, backendFormatted))
+                    (v) => !validValues.includes(this.getConvertedValue(key, v, backendFormatted) as T)
                 );
+
                 if (invalidValues.length > 0) {
                     invalidFilters[key] = invalidValues as T;
                 }
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index dc4fcaeaa0cb..6285837e44a8 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -19,6 +19,8 @@ _:  # global stuff
     right_panel_drag: '.flex-panel.right .drag-handle'
     right_panel_collapse: '.collapse-button.right'
     by_attribute: '${scope} [${name}="${value}"]'
+    active_nav_item: '.nav-item-active'
+    toolbox_panel: '#toolbox-panel'
 
     confirm_button:
       type: xpath
@@ -92,10 +94,10 @@ object_store_instances:
       create_button: '#object-store-create'
       _: '#user-object-stores-index'
 
-  create: 
+  create:
     selectors:
       select: '.object-store-template-select-button[data-template-id="${template_id}"]'
-      _: '#create-object-store-landing'      
+      _: '#create-object-store-landing'
       submit: '#submit'
 
 file_source_instances:
@@ -104,10 +106,10 @@ file_source_instances:
       create_button: '#file-source-create'
       _: '#user-file-sources-index'
 
-  create: 
+  create:
     selectors:
       select: '.file-source-template-select-button[data-template-id="${template_id}"]'
-      _: '#create-file-source-landing'      
+      _: '#create-file-source-landing'
       submit: '#submit'
 
 toolbox_filters:
@@ -606,6 +608,7 @@ workflows:
     workflows_list_empty: '#workflow-list-empty'
     workflow_not_found_message: '#no-workflow-found'
     workflow_card: '.workflow-card'
+    workflow_card_button: '.workflow-card[data-workflow-name="${name}"] button[title="${title}"]'
     workflow_cards: '#workflow-cards'
     external_link: '.workflow-external-link'
     trs_icon: '.workflow-trs-icon'
@@ -700,6 +703,7 @@ workflow_editor:
   node:
     selectors:
       _: "[node-label='${label}']"
+      by_id: "#wf-node-step-${id}"
       title: '${_} .node-title'
       destroy: '${_} .node-destroy'
       clone: '${_} .node-clone'
@@ -731,6 +735,7 @@ workflow_editor:
       clear_selection: "[title='clear selection']"
       duplicate_selection: "[title='duplicate selected']"
       delete_selection: "[title='delete selected']"
+      auto_layout: "#auto-layout-button"
   comment:
     selectors:
       _: ".workflow-editor-comment"
@@ -744,6 +749,8 @@ workflow_editor:
       freehand_path: ".freehand-workflow-comment path"
       delete: "button[title='Delete comment']"
   selectors:
+    node_inspector: '.tool-inspector'
+    node_inspector_close: ".tool-inspector [title='close']"
     canvas_body: '#workflow-canvas'
     edit_annotation: '#workflow-annotation'
     edit_name: '#workflow-name'
@@ -803,10 +810,7 @@ workflow_editor:
       type: xpath
       selector: >
         //div[@data-label='Change datatype']//div[contains(@class, 'multiselect')]
-    select_datatype_text_search:
-      type: xpath
-      selector: >
-        //input[@class="multiselect__input"]
+    select_datatype_text_search: "div[data-label='Change datatype'] .multiselect__input"
     select_datatype:
       type: xpath
       selector: >
@@ -830,10 +834,12 @@ workflow_editor:
     tool_version_button: ".tool-versions"
     connector_for: "#connection-${sink_id}-${source_id}"
     connector_invalid_for: "#connection-${sink_id}-${source_id} .connection.invalid"
-    save_button: '.editor-button-save'
+    save_button: '#workflow-save-button'
     save_workflow_confirmation_button: '#save-workflow-confirmation .btn-primary'
     state_modal_body: '.state-upgrade-modal'
     modal_button_continue: '.modal-footer .btn'
+    workflow_activity: '#activity-workflow-editor-workflows'
+    save_as_activity: "#activity-save-workflow-as"
 
 workflow_show:
   selectors:
@@ -891,10 +897,13 @@ tour:
 tools:
   selectors:
     activity: '#activity-tools'
+    tools_activity_workflow_editor: '#activity-workflow-editor-tools'
+    workflows_activity: '#activity-workflow-editor-workflows'
     body: '#center #tool-card-body'
     execute: '#execute'
     help: 'div.form-help'
-    search: '.search-query'
+    search: '#toolbox-panel .search-query'
+    clear_search: '#toolbox-panel .search-clear'
     title: '.toolSectionTitle'
 
 admin:
diff --git a/lib/galaxy/model/__init__.py b/lib/galaxy/model/__init__.py
index a5e03373dfb7..bd5d59384efd 100644
--- a/lib/galaxy/model/__init__.py
+++ b/lib/galaxy/model/__init__.py
@@ -7766,6 +7766,7 @@ class StoredWorkflow(Base, HasTags, Dictifiable, RepresentById, UsesCreateAndUpd
 
     dict_collection_visible_keys = [
         "id",
+        "latest_workflow_id",
         "name",
         "create_time",
         "update_time",
@@ -7776,6 +7777,7 @@ class StoredWorkflow(Base, HasTags, Dictifiable, RepresentById, UsesCreateAndUpd
     ]
     dict_element_visible_keys = [
         "id",
+        "latest_workflow_id",
         "name",
         "create_time",
         "update_time",
diff --git a/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 7a1c2aab576c..04a9372723e6 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1214,7 +1214,7 @@ def workflow_editor_set_license(self, license: str) -> None:
     def workflow_editor_click_option(self, option_label):
         self.workflow_editor_click_options()
         menu_element = self.workflow_editor_options_menu_element()
-        option_elements = menu_element.find_elements(By.CSS_SELECTOR, "a")
+        option_elements = menu_element.find_elements(By.CSS_SELECTOR, "button")
         assert len(option_elements) > 0, "Failed to find workflow editor options"
         self.sleep_for(WAIT_TYPES.UX_RENDER)
         found_option = False
@@ -1231,10 +1231,10 @@ def workflow_editor_click_option(self, option_label):
             raise Exception(f"Failed to find workflow editor option with label [{option_label}]")
 
     def workflow_editor_click_options(self):
-        return self.wait_for_and_click_selector("#workflow-options-button")
+        return self.wait_for_and_click_selector("#activity-settings")
 
     def workflow_editor_options_menu_element(self):
-        return self.wait_for_selector_visible("#workflow-options-button")
+        return self.wait_for_selector_visible(".activity-settings")
 
     def workflow_editor_click_run(self):
         return self.wait_for_and_click_selector("#workflow-run-button")
@@ -1243,6 +1243,33 @@ def workflow_editor_click_save(self):
         self.wait_for_and_click_selector("#workflow-save-button")
         self.sleep_for(self.wait_types.DATABASE_OPERATION)
 
+    def workflow_editor_search_for_workflow(self, name: str):
+        self.wait_for_and_click(self.components.workflow_editor.workflow_activity)
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+        input = self.wait_for_selector(".activity-panel input")
+        input.send_keys(name)
+
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+    def workflow_editor_add_steps(self, name: str):
+        self.workflow_editor_search_for_workflow(name)
+
+        insert_button = self.components.workflows.workflow_card_button(name=name, title="Copy steps into workflow")
+        insert_button.wait_for_and_click()
+
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+    def workflow_editor_add_subworkflow(self, name: str):
+        self.workflow_editor_search_for_workflow(name)
+
+        insert_button = self.components.workflows.workflow_card_button(name=name, title="Insert as sub-workflow")
+        insert_button.wait_for_and_click()
+
+        self.components.workflow_editor.node._(label=name).wait_for_present()
+
+        self.sleep_for(self.wait_types.UX_RENDER)
+
     def navigate_to_histories_page(self):
         self.home()
         self.components.histories.activity.wait_for_and_click()
@@ -1643,7 +1670,26 @@ def invocation_index_table_elements(self):
         invocations.invocations_table.wait_for_visible()
         return invocations.invocations_table_rows.all()
 
+    def open_toolbox(self):
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+        if self.element_absent(self.components.tools.tools_activity_workflow_editor):
+            if self.element_absent(self.components._.toolbox_panel):
+                self.components.tools.activity.wait_for_and_click()
+        else:
+            if self.element_absent(self.components._.toolbox_panel):
+                self.components.tools.tools_activity_workflow_editor.wait_for_and_click()
+
+        self.sleep_for(self.wait_types.UX_RENDER)
+
     def tool_open(self, tool_id, outer=False):
+        self.open_toolbox()
+
+        self.components.tools.clear_search.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+        self.components.tools.search.wait_for_and_send_keys(f"id:{tool_id}")
+
         if outer:
             tool_link = self.components.tool_panel.outer_tool_link(tool_id=tool_id)
         else:
diff --git a/lib/galaxy/webapps/galaxy/services/workflows.py b/lib/galaxy/webapps/galaxy/services/workflows.py
index 0f7f13b3aa05..f34ce0db46b2 100644
--- a/lib/galaxy/webapps/galaxy/services/workflows.py
+++ b/lib/galaxy/webapps/galaxy/services/workflows.py
@@ -70,7 +70,9 @@ def index(
         query, total_matches = self._workflows_manager.index_query(trans, payload, include_total_count)
         rval = []
         for wf in query.all():
-            item = wf.to_dict(value_mapper={"id": trans.security.encode_id})
+            item = wf.to_dict(
+                value_mapper={"id": trans.security.encode_id, "latest_workflow_id": trans.security.encode_id}
+            )
             encoded_id = trans.security.encode_id(wf.id)
             item["annotations"] = [x.annotation for x in wf.annotations]
             item["url"] = web.url_for("workflow", id=encoded_id)
diff --git a/lib/galaxy_test/selenium/framework.py b/lib/galaxy_test/selenium/framework.py
index 9c300dc7b0de..d9cdb995a386 100644
--- a/lib/galaxy_test/selenium/framework.py
+++ b/lib/galaxy_test/selenium/framework.py
@@ -455,6 +455,7 @@ def assert_workflow_has_changes_and_save(self):
         save_button.wait_for_visible()
         assert not save_button.has_class("disabled")
         save_button.wait_for_and_click()
+        save_button.wait_for_absent()
         self.sleep_for(self.wait_types.UX_RENDER)
 
     @retry_assertion_during_transitions
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index af8ba29fbc53..f15d37846be2 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -23,7 +23,6 @@
 )
 from .framework import (
     retry_assertion_during_transitions,
-    retry_during_transitions,
     RunsWorkflows,
     selenium_test,
     SeleniumTestCase,
@@ -42,28 +41,18 @@ def test_basics(self):
         self.assert_wf_annotation_is(annotation)
 
         editor.canvas_body.wait_for_visible()
-        editor.tool_menu.wait_for_visible()
 
         # shouldn't have changes on fresh load
         save_button = self.components.workflow_editor.save_button
-        save_button.wait_for_visible()
-        assert save_button.has_class("disabled")
+        assert save_button.is_absent
 
         self.screenshot("workflow_editor_blank")
 
         self.hover_over(self.components._.left_panel_drag.wait_for_visible())
-        self.components._.left_panel_collapse.wait_for_and_click()
-
-        self.sleep_for(self.wait_types.UX_RENDER)
 
-        self.screenshot("workflow_editor_left_collapsed")
-
-        self.hover_over(self.components._.right_panel_drag.wait_for_visible())
-        self.components._.right_panel_collapse.wait_for_and_click()
-
-        self.sleep_for(self.wait_types.UX_RENDER)
+        self.workflow_editor_maximize_center_pane()
 
-        self.screenshot("workflow_editor_left_and_right_collapsed")
+        self.screenshot("workflow_editor_center_pane_maximized")
 
     @selenium_test
     def test_edit_annotation(self):
@@ -268,6 +257,7 @@ def test_non_data_connections(self):
         editor = self.components.workflow_editor
 
         tool_node = editor.node._(label="tool_exec")
+        tool_node.wait_for_and_click()
         tool_input = tool_node.input_terminal(name="inttest")
         self.hover_over(tool_input.wait_for_visible())
         tool_node.connector_destroy_callout(name="inttest").wait_for_and_click()
@@ -473,7 +463,8 @@ def test_save_as(self):
         self.workflow_index_open_with_name(name)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.screenshot("workflow_editor_edit_menu")
-        self.workflow_editor_click_option("Save As")
+
+        self.components.workflow_editor.save_as_activity.wait_for_and_click()
 
     @selenium_test
     def test_editor_tool_upgrade(self):
@@ -703,6 +694,8 @@ def test_editor_duplicate_node(self):
         editor.remove_tags_input.wait_for_and_send_keys("#oldboringtag" + Keys.ENTER + Keys.ESCAPE)
         self.sleep_for(self.wait_types.UX_RENDER)
         cat_node.clone.wait_for_and_click()
+        cloned_node = editor.node.by_id(id=2)
+        cloned_node.wait_for_and_click()
         editor.label_input.wait_for_and_send_keys(Keys.BACKSPACE * 20)
         editor.label_input.wait_for_and_send_keys("cloned label")
         output_label = editor.label_output(output="out_file1")
@@ -744,9 +737,7 @@ def setup_subworkflow(self):
         self.components.workflows.edit_button.wait_for_and_click()
         editor = self.components.workflow_editor
         editor.canvas_body.wait_for_visible()
-        editor.tool_menu.wait_for_visible()
-        editor.tool_menu_section_link(section_name="workflows").wait_for_and_click()
-        editor.workflow_link(workflow_title=child_workflow_name).wait_for_and_click()
+        self.workflow_editor_add_subworkflow(child_workflow_name)
         self.sleep_for(self.wait_types.UX_RENDER)
         self.assert_workflow_has_changes_and_save()
         workflow = self.workflow_populator.download_workflow(parent_workflow_id)
@@ -770,9 +761,7 @@ def test_editor_insert_steps(self):
         self.workflow_editor_add_input(item_name="data_input")
         editor = self.components.workflow_editor
         editor.canvas_body.wait_for_visible()
-        editor.tool_menu.wait_for_visible()
-        editor.tool_menu_section_link(section_name="workflows").wait_for_and_click()
-        editor.insert_steps(workflow_title=steps_to_insert).wait_for_and_click()
+        self.workflow_editor_add_steps(steps_to_insert)
         self.assert_connected("input1#output", "first_cat#input1")
         self.assert_workflow_has_changes_and_save()
         workflow_id = self.driver.current_url.split("id=")[1]
@@ -788,14 +777,15 @@ def test_editor_create_conditional_step(self):
         param_type_element = editor.param_type_form.wait_for_present()
         self.switch_param_type(param_type_element, "Boolean")
         editor.label_input.wait_for_and_send_keys("param_input")
-        editor.tool_menu.wait_for_visible()
         # Insert cat tool
         self.tool_open("cat")
         self.sleep_for(self.wait_types.UX_RENDER)
         editor.label_input.wait_for_and_send_keys("downstream_step")
         # Insert head tool
         self.tool_open("head")
-        self.workflow_editor_click_option("Auto Layout")
+
+        self.components.workflow_editor.tool_bar.auto_layout.wait_for_and_click()
+
         self.sleep_for(self.wait_types.UX_RENDER)
         editor.label_input.wait_for_and_send_keys("conditional_step")
         # Connect head to cat
@@ -845,7 +835,7 @@ def test_conditional_subworkflow_step(self):
         param_type_element = editor.param_type_form.wait_for_present()
         self.switch_param_type(param_type_element, "Boolean")
         editor.label_input.wait_for_and_send_keys("param_input")
-        self.workflow_editor_click_option("Auto Layout")
+        self.components.workflow_editor.tool_bar.auto_layout.wait_for_and_click()
         self.sleep_for(self.wait_types.UX_RENDER)
         conditional_node = editor.node._(label=child_workflow_name)
         conditional_node.wait_for_and_click()
@@ -889,29 +879,6 @@ def test_missing_tools(self):
         self.assert_modal_has_text("Tool is not installed")
         self.screenshot("workflow_editor_missing_tool")
 
-    @selenium_test
-    def test_workflow_bookmarking(self):
-        @retry_during_transitions
-        def assert_workflow_bookmarked_status(target_status):
-            name_matches = [c.text == new_workflow_name for c in self.components.tool_panel.workflow_names.all()]
-            status = any(name_matches)
-            assert status == target_status
-
-        new_workflow_name = self.workflow_create_new(clear_placeholder=True)
-        self.components.workflow_editor.canvas_body.wait_for_visible()
-        self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
-
-        # Assert workflow not initially bookmarked.
-        self.navigate_to_tools()
-        assert_workflow_bookmarked_status(False)
-
-        self.click_activity_workflow()
-        self.components.workflows.bookmark_link(action="add").wait_for_and_click()
-
-        # search for bookmark in tools menu
-        self.navigate_to_tools()
-        assert_workflow_bookmarked_status(True)
-
     def tab_to(self, accessible_name, direction="forward"):
         for _ in range(100):
             ac = self.action_chains()
@@ -1219,8 +1186,6 @@ def test_editor_snapping(self):
         self.workflow_create_new(annotation="simple workflow")
         self.sleep_for(self.wait_types.UX_RENDER)
 
-        editor.tool_menu.wait_for_visible()
-
         self.tool_open("cat")
         self.sleep_for(self.wait_types.UX_RENDER)
         editor.label_input.wait_for_and_send_keys("tool_node")
@@ -1266,6 +1231,7 @@ def test_editor_selection(self):
         self.mouse_drag(from_element=tool_node, to_element=canvas, to_offset=(0, -100))
 
         # select the node
+        editor.node_inspector_close.wait_for_and_click()
         self.action_chains().move_to_element(tool_node).key_down(Keys.SHIFT).click().key_up(Keys.SHIFT).perform()
         self.sleep_for(self.wait_types.UX_RENDER)
 
@@ -1377,12 +1343,14 @@ def assert_node_output_is(self, label: str, output_type: str, subcollection_type
         self.click_center()
 
     def workflow_editor_maximize_center_pane(self, collapse_left=True, collapse_right=True):
-        if collapse_left:
-            self.hover_over(self.components._.left_panel_drag.wait_for_visible())
-            self.components._.left_panel_collapse.wait_for_and_click()
-        if collapse_right:
-            self.hover_over(self.components._.right_panel_drag.wait_for_visible())
-            self.components._.right_panel_collapse.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+        editor = self.components.workflow_editor
+
+        if collapse_right and not editor.node_inspector.is_absent:
+            editor.node_inspector_close.wait_for_and_click()
+        if collapse_left and not self.components._.active_nav_item.is_absent:
+            self.components._.active_nav_item.wait_for_and_click()
+
         self.sleep_for(self.wait_types.UX_RENDER)
 
     def workflow_editor_connect(self, source, sink, screenshot_partial=None):
@@ -1415,7 +1383,7 @@ def open_in_workflow_editor(self, yaml_content, auto_layout=True):
         self.workflow_index_open()
         self.workflow_index_open_with_name(name)
         if auto_layout:
-            self.workflow_editor_click_option("Auto Layout")
+            self.components.workflow_editor.tool_bar.auto_layout.wait_for_and_click()
             self.sleep_for(self.wait_types.UX_RENDER)
         return name
 
@@ -1448,7 +1416,7 @@ def workflow_editor_add_input(self, item_name="data_input"):
         # Make sure we're on the workflow editor and not clicking the main tool panel.
         editor.canvas_body.wait_for_visible()
 
-        editor.tool_menu.wait_for_visible()
+        self.open_toolbox()
         editor.tool_menu_section_link(section_name="inputs").wait_for_and_click()
         editor.tool_menu_item_link(item_name=item_name).wait_for_and_click()
 
diff --git a/test/integration_selenium/test_edam_tool_panel_views.py b/test/integration_selenium/test_edam_tool_panel_views.py
index a98b608d2e6a..5155e84e174e 100644
--- a/test/integration_selenium/test_edam_tool_panel_views.py
+++ b/test/integration_selenium/test_edam_tool_panel_views.py
@@ -28,7 +28,7 @@ def test_basic_navigation(self):
 
         editor = self.components.workflow_editor
         editor.canvas_body.wait_for_visible()
-        editor.tool_menu.wait_for_visible()
+        self.open_toolbox()
         self._assert_displaying_edam_operations()
         self.screenshot("tool_panel_view_edam_workflow_editor")