From 720c327e84098c09415c371aae9185a26876d33b Mon Sep 17 00:00:00 2001
From: Bjoern Gruening <bjoern.gruening@gmail.com>
Date: Mon, 5 Jan 2026 19:58:42 +0100
Subject: [PATCH 01/30] add new tool panel

---
 .../BaseComponents/Form/GFormInput.vue        |  14 +-
 client/src/components/Panels/Common/Tool.vue  |  41 +++-
 .../Panels/Common/ToolPanelLabel.vue          |  44 +++-
 .../components/Panels/Common/ToolSection.vue  |   4 +
 .../components/Panels/Menus/PanelViewMenu.vue |  12 +-
 client/src/components/Panels/ToolBox.vue      | 212 ++++++++++++++++--
 client/src/components/Panels/ToolPanel.vue    |   7 +-
 .../components/Panels/testData/viewsList.json |  10 +-
 client/src/components/Panels/utilities.ts     |   2 +
 client/src/stores/toolStore.ts                |  51 ++++-
 10 files changed, 360 insertions(+), 37 deletions(-)

diff --git a/client/src/components/BaseComponents/Form/GFormInput.vue b/client/src/components/BaseComponents/Form/GFormInput.vue
index e810350c1c1..2df280c0952 100644
--- a/client/src/components/BaseComponents/Form/GFormInput.vue
+++ b/client/src/components/BaseComponents/Form/GFormInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 const props = defineProps<{
     value?: string | null;
@@ -10,6 +10,8 @@ const emit = defineEmits<{
     (e: "keydown", event: KeyboardEvent): void;
 }>();
 
+const inputRef = ref<HTMLInputElement | null>(null);
+
 const inputValue = computed({
     get() {
         return props.value;
@@ -18,10 +20,18 @@ const inputValue = computed({
         emit("input", value ?? null);
     },
 });
+
+function focus() {
+    inputRef.value?.focus();
+}
+
+defineExpose({
+    focus,
+});
 </script>
 
 <template>
-    <input v-model="inputValue" class="g-form-input" @keydown="(event) => emit('keydown', event)" />
+    <input ref="inputRef" v-model="inputValue" class="g-form-input" @keydown="(event) => emit('keydown', event)" />
 </template>
 
 <style scoped lang="scss">
diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 0ec8aa0f647..2691dfce515 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="toolTitle">
-        <a v-if="tool.disabled" :data-tool-id="tool.id" class="title-link name text-muted">
+        <a v-if="tool.disabled" :data-tool-id="tool.id" class="title-link name text-muted tool-link">
             <span v-if="!hideName">{{ tool.name }}</span>
             <span class="description">{{ tool.description }}</span>
         </a>
@@ -28,20 +28,34 @@
                 :title="operationTitle"
                 @click.stop.prevent="onOperation" />
         </a>
+        <ToolFavoriteButton
+            v-if="showFavoriteAction"
+            class="tool-favorite-button"
+            :data-tool-id="tool.id"
+            :id="tool.id"
+            color="grey" />
     </div>
 </template>
 
 <script>
 import BootstrapVue from "bootstrap-vue";
 import Vue from "vue";
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
 
 import { useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 import ariaAlert from "@/utils/ariaAlert";
 
+import ToolFavoriteButton from "@/components/Tool/Buttons/ToolFavoriteButton.vue";
+
 Vue.use(BootstrapVue);
 
 export default {
     name: "Tool",
+    components: {
+        ToolFavoriteButton,
+    },
     props: {
         tool: {
             type: Object,
@@ -67,12 +81,20 @@ export default {
             type: Boolean,
             default: false,
         },
+        showFavoriteButton: {
+            type: Boolean,
+            default: false,
+        },
     },
-    setup() {
+    setup(props) {
         const toolStore = useToolStore();
+        const userStore = useUserStore();
+        const { currentFavorites } = storeToRefs(userStore);
+        const isFavorite = computed(() => currentFavorites.value.tools?.includes(props.tool.id));
         return {
             getLinkById: toolStore.getLinkById,
             getTargetById: toolStore.getTargetById,
+            isFavorite,
         };
     },
     computed: {
@@ -84,11 +106,14 @@ export default {
         },
         targetClass() {
             if (this.toolKey) {
-                return `tool-menu-item-${this.tool[this.toolKey]} title-link cursor-pointer`;
+                return `tool-menu-item-${this.tool[this.toolKey]} title-link cursor-pointer tool-link`;
             } else {
-                return `title-link cursor-pointer`;
+                return `title-link cursor-pointer tool-link`;
             }
         },
+        showFavoriteAction() {
+            return this.showFavoriteButton && !this.isFavorite;
+        },
     },
     methods: {
         onClick(evt) {
@@ -105,6 +130,14 @@ export default {
 
 <style scoped>
 .toolTitle {
+    display: flex;
+    align-items: flex-start;
     overflow-wrap: anywhere;
 }
+.tool-link {
+    flex: 1 1 auto;
+}
+.tool-favorite-button {
+    margin-left: 0.25rem;
+}
 </style>
diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 832713bdcaf..06fc0bf0386 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { faStar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import type { ToolSectionLabel } from "@/stores/toolStore";
@@ -9,12 +11,25 @@ const props = defineProps<{
     definition: ToolSectionLabel;
 }>();
 
+const FAVORITES_LABEL_ID = "favorites_results_label";
+const dividerLabelIds = new Set([FAVORITES_LABEL_ID, "search_results_label"]);
+
 const description = computed(() => props.definition.description || undefined);
+const isDivider = computed(() => dividerLabelIds.has(props.definition.id));
+const isFavoritesDivider = computed(() => props.definition.id === FAVORITES_LABEL_ID);
 </script>
 
 <template>
-    <div v-b-tooltip.topright.hover.noninteractive class="tool-panel-label" tabindex="0" :title="description">
-        {{ definition.text }}
+    <div
+        v-b-tooltip.topright.hover.noninteractive
+        :class="['tool-panel-label', { 'tool-panel-label-divider': isDivider }]"
+        tabindex="0"
+        :title="description">
+        <span v-if="isDivider" class="tool-panel-label-divider-text">
+            <FontAwesomeIcon v-if="isFavoritesDivider" :icon="faStar" class="tool-panel-label-divider-icon" />
+            {{ definition.text }}
+        </span>
+        <template v-else>{{ definition.text }}</template>
         <ToolPanelLinks :links="definition.links || undefined" />
     </div>
 </template>
@@ -33,4 +48,29 @@ const description = computed(() => props.definition.description || undefined);
         }
     }
 }
+
+.tool-panel-label.tool-panel-label-divider {
+    align-items: center;
+    background: transparent;
+    border-left: 0;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    text-transform: none;
+
+    &::before,
+    &::after {
+        border-bottom: 1px solid currentColor;
+        content: "";
+        flex: 1;
+        opacity: 0.35;
+    }
+}
+
+.tool-panel-label-divider-text {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.25rem;
+    white-space: nowrap;
+}
 </style>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index cb4528282ea..b7b8d88589d 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -32,6 +32,7 @@ interface Props {
     expanded?: boolean;
     sortItems?: boolean;
     hasFilterButton?: boolean;
+    searchActive?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,6 +46,7 @@ const props = withDefaults(defineProps<Props>(), {
     expanded: false,
     sortItems: true,
     hasFilterButton: false,
+    searchActive: false,
 });
 
 const { config, isConfigLoaded } = useConfig();
@@ -194,6 +196,7 @@ function toggleMenu(nextState = !opened.value) {
                         :hide-name="hideName"
                         :operation-title="operationTitle"
                         :operation-icon="operationIcon"
+                        :show-favorite-button="searchActive"
                         @onOperation="onOperation"
                         @onClick="onClick" />
                 </template>
@@ -208,6 +211,7 @@ function toggleMenu(nextState = !opened.value) {
             :hide-name="hideName"
             :operation-title="operationTitle"
             :operation-icon="operationIcon"
+            :show-favorite-button="searchActive"
             @onOperation="onOperation"
             @onClick="onClick" />
     </div>
diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index 42bc4ca2755..40334e01081 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -21,6 +21,7 @@ const groupsDefinitions = [
     { type: "publication", title: "...from Publication" },
     { type: "training", title: "...for Training" },
 ];
+const groupedPanelViewTypes = new Set(groupsDefinitions.map((group) => group.type));
 
 const props = defineProps<{
     /** Whether the menu is compact: doesn't take up full width of the parent when `true`.
@@ -81,7 +82,16 @@ const groupedPanelViews = computed(() => {
     return groups;
 });
 
-const ungroupedPanelViews = computed(() => panelViewsOfType("generic"));
+const ungroupedPanelViews = computed(() => {
+    const defaultPanelId = defaultPanelView.value?.id;
+    return Object.values(panels.value).filter((panel) => {
+        if (!panel || panel.id === defaultPanelId) {
+            return false;
+        }
+        const viewType = panel.view_type;
+        return viewType ? !groupedPanelViewTypes.has(viewType) : false;
+    });
+});
 
 function panelViewsOfType(panelViewType: string) {
     const panelViews = [];
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index c03f8f7ece7..40a4d75e656 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge } from "bootstrap-vue";
+import { BAlert, BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, type ComputedRef, type Ref, ref, watch } from "vue";
 
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
-import type { Tool, ToolSection as ToolSectionType } from "@/stores/toolStore";
+import { getAppRoot } from "@/onload/loadConfig";
+import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
 import {
@@ -37,12 +39,14 @@ interface Props {
     workflow?: boolean;
     useSearchWorker?: boolean;
     showFavorites?: boolean;
+    favoritesDefault?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     workflow: false,
     useSearchWorker: true,
     showFavorites: false,
+    favoritesDefault: false,
 });
 
 const query = ref("");
@@ -53,8 +57,9 @@ const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null
 const closestTerm: Ref<string | null> = ref(null);
 
 const toolStore = useToolStore();
+const { currentFavorites } = storeToRefs(useUserStore());
 
-const { currentPanelView, currentToolSections } = storeToRefs(toolStore);
+const { currentPanelView, currentToolSections, defaultPanelView, toolSections } = storeToRefs(toolStore);
 const hasResults = computed(() => results.value.length > 0);
 const queryTooShort = computed(() => query.value && query.value.length < 3);
 const queryFinished = computed(() => query.value && queryPending.value != true);
@@ -64,20 +69,24 @@ watch(
     () => query.value,
     () => {
         queryPending.value = true;
-        if (FAVORITES_KEYS.includes(query.value)) {
-            emit("update:show-favorites", true);
-        } else {
-            emit("update:show-favorites", false);
+        if (!props.favoritesDefault) {
+            if (FAVORITES_KEYS.includes(query.value)) {
+                emit("update:show-favorites", true);
+            } else {
+                emit("update:show-favorites", false);
+            }
         }
     },
 );
 watch(
     () => props.showFavorites,
     (newValue) => {
-        if (newValue) {
-            query.value = "#favorites";
-        } else {
-            query.value = "";
+        if (!props.favoritesDefault) {
+            if (newValue) {
+                query.value = "#favorites";
+            } else {
+                query.value = "";
+            }
         }
     },
 );
@@ -115,24 +124,169 @@ const localSectionsById = computed(() => {
     ) as Record<string, Tool | ToolSectionType>;
 });
 
+const ALL_TOOLS_SECTION_ID = "all_tools";
+
+type PanelItem = Tool | ToolSectionType | ToolSectionLabel;
+
+const favoriteToolIds = computed(() => currentFavorites.value.tools || []);
+const favoriteToolIdSet = computed(() => new Set(favoriteToolIds.value));
+const favoriteResults = computed(() => results.value.filter((id) => favoriteToolIdSet.value.has(id)));
+const nonFavoriteResults = computed(() => results.value.filter((id) => !favoriteToolIdSet.value.has(id)));
+const hasMixedResults = computed(() => favoriteResults.value.length > 0 && nonFavoriteResults.value.length > 0);
+
+const toolsListHref = computed(() => `${getAppRoot()}tools/list`);
+const toolsCount = computed(() => toolsList.value.length);
+const showEmptyFavorites = computed(
+    () => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0,
+);
+
+const FAVORITES_RESULTS_SECTION_ID = "favorites_results";
+const FAVORITES_RESULTS_LABEL_ID = "favorites_results_label";
+const SEARCH_RESULTS_LABEL_ID = "search_results_label";
+
+function buildToolSection(id: string, name: string, tools: string[]): ToolSectionType {
+    return {
+        model_class: "ToolSection",
+        id,
+        name,
+        tools,
+    };
+}
+
+function buildToolLabel(id: string, text: string): ToolSectionLabel {
+    return {
+        model_class: "ToolSectionLabel",
+        id,
+        text,
+    };
+}
+
+function filterPanelByToolIds(panel: Record<string, Tool | ToolSectionType>, toolIds: Set<string>) {
+    const filtered: Record<string, Tool | ToolSectionType> = {};
+    for (const [key, item] of Object.entries(panel)) {
+        const section = item as ToolSectionType;
+        if (section.tools) {
+            const tools = section.tools.filter((toolId) => typeof toolId === "string" && toolIds.has(toolId));
+            if (tools.length > 0) {
+                filtered[key] = { ...section, tools };
+            }
+        } else if ((item as Tool).id && toolIds.has((item as Tool).id)) {
+            filtered[key] = item;
+        }
+    }
+    return filtered;
+}
+
+const defaultSectionsById = computed(() => {
+    if (!defaultPanelView.value) {
+        return null;
+    }
+    const defaultPanelSections = toolSections.value[defaultPanelView.value];
+    if (!defaultPanelSections) {
+        return null;
+    }
+    const validToolIdsInCurrentView = Object.keys(localToolsById.value);
+    const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, defaultPanelSections);
+    return getValidPanelItems(
+        sectionEntries,
+        validToolIdsInCurrentView,
+        !props.workflow ? SECTION_IDS_TO_EXCLUDE : [],
+    ) as Record<string, Tool | ToolSectionType>;
+});
+
+const resultsSet = computed(() => new Set(results.value));
+const nonFavoriteResultsSet = computed(() => new Set(nonFavoriteResults.value));
+const allToolsPanel = computed(() => {
+    return {
+        [ALL_TOOLS_SECTION_ID]: {
+            model_class: "ToolSection",
+            id: ALL_TOOLS_SECTION_ID,
+            name: localize("All tools"),
+            tools: Object.keys(localToolsById.value),
+        },
+    } as Record<string, Tool | ToolSectionType>;
+});
+const searchPanelSections = computed(() => {
+    if (props.favoritesDefault) {
+        return defaultSectionsById.value || allToolsPanel.value;
+    }
+    return localSectionsById.value;
+});
+
 const toolsList = computed(() => Object.values(localToolsById.value));
 
+const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
+    if (!hasResults.value) {
+        return null;
+    }
+    if (!hasMixedResults.value) {
+        return filterTools(localToolsById.value, results.value) as Record<string, PanelItem>;
+    }
+    const entries: Array<[string, PanelItem]> = [];
+    entries.push([FAVORITES_RESULTS_LABEL_ID, buildToolLabel(FAVORITES_RESULTS_LABEL_ID, localize("Favorites"))]);
+    for (const toolId of favoriteResults.value) {
+        const tool = localToolsById.value[toolId];
+        if (tool) {
+            entries.push([toolId, tool]);
+        }
+    }
+    entries.push([SEARCH_RESULTS_LABEL_ID, buildToolLabel(SEARCH_RESULTS_LABEL_ID, localize("Search results"))]);
+    for (const toolId of nonFavoriteResults.value) {
+        const tool = localToolsById.value[toolId];
+        if (tool) {
+            entries.push([toolId, tool]);
+        }
+    }
+    return Object.fromEntries(entries);
+});
+
+const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> | null>(() => {
+    if (!hasResults.value) {
+        return null;
+    }
+    const basePanel =
+        props.favoritesDefault && defaultSectionsById.value ? defaultSectionsById.value : resultPanel.value;
+    if (!basePanel) {
+        return null;
+    }
+    if (!hasMixedResults.value) {
+        return props.favoritesDefault && defaultSectionsById.value
+            ? filterPanelByToolIds(basePanel, resultsSet.value)
+            : basePanel;
+    }
+    const otherResultsPanel = filterPanelByToolIds(basePanel, nonFavoriteResultsSet.value);
+    const favoritesSection = buildToolSection(
+        FAVORITES_RESULTS_SECTION_ID,
+        localize("Favorites"),
+        favoriteResults.value,
+    );
+    return {
+        [FAVORITES_RESULTS_SECTION_ID]: favoritesSection,
+        ...otherResultsPanel,
+    };
+});
+
 /**
  * If not searching or no results, we show all tools in sections (default)
  *
  * If we have results for search, we show tools in sections or just tools,
  * based on whether `showSections` is true or false
  */
-const localPanel: ComputedRef<Record<string, Tool | ToolSectionType> | null> = computed(() => {
+const localPanel: ComputedRef<Record<string, PanelItem> | null> = computed(() => {
+    if (props.favoritesDefault && !query.value) {
+        return filterTools(localToolsById.value, favoriteToolIds.value) as Record<string, PanelItem>;
+    }
     if (hasResults.value) {
         if (showSections.value) {
-            return resultPanel.value;
+            return sectionedResultsPanel.value || flatResultsPanel.value;
         } else {
-            return filterTools(localToolsById.value, results.value) as Record<string, Tool | ToolSectionType>;
+            return flatResultsPanel.value;
         }
-    } else {
-        return localSectionsById.value;
     }
+    if (props.favoritesDefault) {
+        return {};
+    }
+    return localSectionsById.value;
 });
 
 const buttonIcon = computed(() => (showSections.value ? faEyeSlash : faEye));
@@ -200,7 +354,7 @@ function onToggle() {
                 :current-panel-view="currentPanelView"
                 :placeholder="localize('search tools')"
                 :tools-list="toolsList"
-                :current-panel="localSectionsById"
+                :current-panel="searchPanelSections"
                 :query="query"
                 :query-pending="queryPending"
                 :use-worker="useSearchWorker"
@@ -232,13 +386,30 @@ function onToggle() {
         </div>
         <div class="unified-panel-body">
             <div class="toolMenuContainer">
-                <div v-if="localPanel" class="toolMenu">
+                <div v-if="showEmptyFavorites" class="tool-panel-empty">
+                    <BAlert variant="info" show>
+                        You haven't favorited any tools yet. Search the toolbox or use
+                        <GButton
+                            class="ml-1"
+                            size="small"
+                            color="blue"
+                            :href="toolsListHref"
+                            data-description="discover-tools">
+                            Discover Tools
+                        </GButton>
+                        to explore {{ toolsCount }} community curated tools.
+                    </BAlert>
+                </div>
+                <div v-else-if="localPanel" class="toolMenu">
                     <div v-for="(panel, key) in localPanel" :key="key">
                         <ToolSection
                             v-if="panel"
                             :category="panel || {}"
                             :query-filter="hasResults ? query : undefined"
-                            :has-filter-button="hasResults && currentPanelView === 'default'"
+                            :has-filter-button="
+                                hasResults && currentPanelView === 'default' && panel.id !== FAVORITES_RESULTS_SECTION_ID
+                            "
+                            :search-active="hasResults"
                             @onClick="onToolClick"
                             @onFilter="onSectionFilter" />
                     </div>
@@ -252,4 +423,7 @@ function onToggle() {
 .toolTitle {
     overflow-wrap: anywhere;
 }
+.tool-panel-empty {
+    padding: 0.5rem;
+}
 </style>
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 444fc8ad7b1..0253b501ebb 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { BAlert, BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
@@ -11,6 +11,7 @@ import LoadingSpan from "../LoadingSpan.vue";
 import ActivityPanel from "./ActivityPanel.vue";
 import FavoritesButton from "./Buttons/FavoritesButton.vue";
 import PanelViewMenu from "./Menus/PanelViewMenu.vue";
+import { MY_PANEL_VIEW_ID } from "./panelViews";
 import ToolBox from "./ToolBox.vue";
 
 const toolStore = useToolStore();
@@ -26,6 +27,7 @@ const emit = defineEmits<{
 }>();
 
 const { currentPanelView, currentToolSections, isPanelPopulated, toolSections } = storeToRefs(toolStore);
+const isMyPanel = computed(() => currentPanelView.value === MY_PANEL_VIEW_ID);
 
 const errorMessage = ref("");
 const panelsFetched = ref(false);
@@ -79,12 +81,13 @@ initializePanel();
             <PanelViewMenu />
         </template>
         <template v-slot:header-buttons>
-            <FavoritesButton v-model="showFavorites" />
+            <FavoritesButton v-if="!isMyPanel" v-model="showFavorites" />
         </template>
         <ToolBox
             v-if="isPanelPopulated"
             :workflow="props.workflow"
             :show-favorites.sync="showFavorites"
+            :favorites-default="isMyPanel"
             :use-search-worker="useSearchWorker"
             @onInsertTool="onInsertTool" />
         <div v-else-if="errorMessage" data-description="tool panel error message">
diff --git a/client/src/components/Panels/testData/viewsList.json b/client/src/components/Panels/testData/viewsList.json
index fe156f59cb2..585d2306d50 100644
--- a/client/src/components/Panels/testData/viewsList.json
+++ b/client/src/components/Panels/testData/viewsList.json
@@ -70,5 +70,13 @@
         "description": null,
         "view_type": "generic",
         "searchable": true
+    },
+    "my_panel": {
+        "id": "my_panel",
+        "model_class": "StaticToolPanelView",
+        "name": "My panel",
+        "description": "Search all tools and view your favorite tools.",
+        "view_type": "favorites",
+        "searchable": true
     }
-}
\ No newline at end of file
+}
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index bb2a3bc254b..62ccc32ca99 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -8,6 +8,7 @@ import {
     faNewspaper,
     faProjectDiagram,
     faSitemap,
+    faStar,
     faUndo,
     type IconDefinition,
 } from "@fortawesome/free-solid-svg-icons";
@@ -69,6 +70,7 @@ const TOOL_SECTION_SEARCH_KEYS: SearchCommonKeys = { exact: 4, startsWith: 3, na
 /** Returns icon for tool panel `view_type` */
 export const types_to_icons = {
     default: faUndo,
+    favorites: faStar,
     generic: faFilter,
     ontology: faSitemap,
     activity: faProjectDiagram,
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index 305137f6955..b4369921c98 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -7,6 +7,12 @@ import { defineStore } from "pinia";
 import Vue, { computed, type Ref, ref, shallowRef } from "vue";
 
 import { FAVORITES_KEYS, filterTools, type types_to_icons } from "@/components/Panels/utilities";
+import {
+    MY_PANEL_VIEW_DESCRIPTION,
+    MY_PANEL_VIEW_ID,
+    MY_PANEL_VIEW_NAME,
+    MY_PANEL_VIEW_TYPE,
+} from "@/components/Panels/panelViews";
 import { parseHelpForSummary } from "@/components/ToolsList/utilities";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -86,6 +92,17 @@ export type ToolHelpData = {
     summary?: string;
 };
 
+const MY_PANEL_VIEW_SECTION_ID = "favorites";
+
+const MY_PANEL_VIEW: Panel = {
+    id: MY_PANEL_VIEW_ID,
+    model_class: "StaticToolPanelView",
+    name: MY_PANEL_VIEW_NAME,
+    description: MY_PANEL_VIEW_DESCRIPTION,
+    view_type: MY_PANEL_VIEW_TYPE,
+    searchable: true,
+};
+
 export const useToolStore = defineStore("toolStore", () => {
     const currentPanelView: Ref<string> = useUserLocalStorage("tool-store-view", "");
     const defaultPanelView: Ref<string> = ref("");
@@ -185,12 +202,24 @@ export const useToolStore = defineStore("toolStore", () => {
     });
 
     async function fetchToolSections(panelView: string) {
+        if (!panelView || toolSections.value[panelView]) {
+            return;
+        }
+        if (panelView === MY_PANEL_VIEW_ID) {
+            saveToolSections(panelView, {
+                [MY_PANEL_VIEW_SECTION_ID]: {
+                    model_class: "ToolSection",
+                    id: MY_PANEL_VIEW_SECTION_ID,
+                    name: "Favorites",
+                    tools: [],
+                },
+            });
+            return;
+        }
         try {
-            if (panelView && !toolSections.value[panelView]) {
-                loading.value = true;
-                const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
-                saveToolSections(panelView, data);
-            }
+            loading.value = true;
+            const { data } = await axios.get(`${getAppRoot()}api/tool_panels/${panelView}`);
+            saveToolSections(panelView, data);
         } catch (e) {
             rethrowSimple(e);
         } finally {
@@ -203,7 +232,10 @@ export const useToolStore = defineStore("toolStore", () => {
             if (!defaultPanelView.value || Object.keys(panels.value).length === 0) {
                 const { data } = await axios.get(`${getAppRoot()}api/tool_panels`);
                 defaultPanelView.value = data.default_panel_view;
-                panels.value = data.views;
+                panels.value = {
+                    ...data.views,
+                    ...(data.views[MY_PANEL_VIEW_ID] ? {} : { [MY_PANEL_VIEW_ID]: MY_PANEL_VIEW }),
+                };
             }
         } catch (e) {
             rethrowSimple(e);
@@ -304,6 +336,13 @@ export const useToolStore = defineStore("toolStore", () => {
 
     async function setPanel(panelView: string) {
         try {
+            if (
+                panelView === MY_PANEL_VIEW_ID &&
+                defaultPanelView.value &&
+                panelView !== defaultPanelView.value
+            ) {
+                await fetchToolSections(defaultPanelView.value);
+            }
             await fetchToolSections(panelView);
             currentPanelView.value = panelView;
         } catch (e) {

From 46df97a148e731ca31038beaf761111e5b7b4442 Mon Sep 17 00:00:00 2001
From: Bjoern Gruening <bjoern.gruening@gmail.com>
Date: Mon, 5 Jan 2026 21:27:52 +0100
Subject: [PATCH 02/30] add most-recent-tools, style up the panel

---
 .../src/components/Panels/Common/Tool.test.js |  28 ++++
 client/src/components/Panels/Common/Tool.vue  |  28 +++-
 .../Panels/Common/ToolPanelLabel.vue          | 121 +++++++++++++++--
 .../components/Panels/Common/ToolSection.vue  |  22 ++-
 client/src/components/Panels/ToolBox.vue      | 125 ++++++++++++++----
 client/src/components/Tool/ToolForm.test.js   |  16 ++-
 client/src/components/Tool/ToolForm.vue       |   2 +
 client/src/stores/userStore.ts                |  19 +++
 client/tests/vitest/helpers.js                |   2 +-
 9 files changed, 322 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Panels/Common/Tool.test.js b/client/src/components/Panels/Common/Tool.test.js
index 6d7d857951e..38045bd6fed 100644
--- a/client/src/components/Panels/Common/Tool.test.js
+++ b/client/src/components/Panels/Common/Tool.test.js
@@ -2,6 +2,9 @@ import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import { describe, expect, test, vi } from "vitest";
+import { nextTick } from "vue";
+
+import { useUserStore } from "@/stores/userStore";
 
 import Tool from "./Tool.vue";
 
@@ -70,4 +73,29 @@ describe("Tool", () => {
         const descriptionElement = wrapper.find(".description");
         expect(descriptionElement.text()).toBe("description");
     });
+
+    test("favorite button is focusable for keyboard navigation", async () => {
+        const pinia = createTestingPinia({ createSpy: vi.fn });
+        const wrapper = mount(Tool, {
+            propsData: {
+                tool: {
+                    id: "test_tool",
+                    name: "name",
+                },
+            },
+            localVue,
+            pinia,
+            attachTo: document.body,
+        });
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["test_tool"] } };
+        await nextTick();
+
+        const favoriteButton = wrapper.find('.tool-favorite-button-hover[data-tool-id="test_tool"]');
+        expect(favoriteButton.exists()).toBe(true);
+        favoriteButton.element.focus();
+        expect(document.activeElement).toBe(favoriteButton.element);
+
+        wrapper.destroy();
+    });
 });
diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 2691dfce515..6e79cb8a8e2 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -30,7 +30,7 @@
         </a>
         <ToolFavoriteButton
             v-if="showFavoriteAction"
-            class="tool-favorite-button"
+            :class="['tool-favorite-button', { 'tool-favorite-button-hover': showFavoriteOnHover }]"
             :data-tool-id="tool.id"
             :id="tool.id"
             color="grey" />
@@ -112,7 +112,10 @@ export default {
             }
         },
         showFavoriteAction() {
-            return this.showFavoriteButton && !this.isFavorite;
+            return this.showFavoriteButton || this.isFavorite;
+        },
+        showFavoriteOnHover() {
+            return this.isFavorite;
         },
     },
     methods: {
@@ -140,4 +143,25 @@ export default {
 .tool-favorite-button {
     margin-left: 0.25rem;
 }
+.tool-favorite-button-hover {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    transition-delay: 0s;
+    pointer-events: none;
+}
+.toolTitle:hover .tool-favorite-button-hover {
+    opacity: 1;
+    transition-delay: 0.5s;
+    pointer-events: auto;
+}
+.toolTitle:focus-within .tool-favorite-button-hover {
+    opacity: 1;
+    transition-delay: 0s;
+    pointer-events: auto;
+}
+.tool-favorite-button-hover:focus {
+    opacity: 1;
+    transition-delay: 0s;
+    pointer-events: auto;
+}
 </style>
diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 06fc0bf0386..0752f671cfa 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -1,35 +1,116 @@
 <script setup lang="ts">
-import { faStar } from "@fortawesome/free-solid-svg-icons";
+import { faBroom, faChevronDown, faChevronRight, faStar } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import type { ToolSectionLabel } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 
 import ToolPanelLinks from "./ToolPanelLinks.vue";
+import GButton from "@/components/BaseComponents/GButton.vue";
 
 const props = defineProps<{
     definition: ToolSectionLabel;
+    collapsed?: boolean;
 }>();
 
-const FAVORITES_LABEL_ID = "favorites_results_label";
-const dividerLabelIds = new Set([FAVORITES_LABEL_ID, "search_results_label"]);
+const emit = defineEmits<{
+    (e: "toggle", labelId: string): void;
+}>();
+
+const FAVORITES_RESULTS_LABEL_ID = "favorites_results_label";
+const FAVORITES_LABEL_ID = "favorites_label";
+const RECENT_TOOLS_LABEL_ID = "recent_tools_label";
+const favoritesLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID]);
+const collapsibleLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID, RECENT_TOOLS_LABEL_ID]);
+const dividerLabelIds = new Set([
+    FAVORITES_RESULTS_LABEL_ID,
+    FAVORITES_LABEL_ID,
+    RECENT_TOOLS_LABEL_ID,
+    "search_results_label",
+]);
 
 const description = computed(() => props.definition.description || undefined);
 const isDivider = computed(() => dividerLabelIds.has(props.definition.id));
-const isFavoritesDivider = computed(() => props.definition.id === FAVORITES_LABEL_ID);
+const isFavoritesDivider = computed(() => favoritesLabelIds.has(props.definition.id));
+const isRecentLabel = computed(() => props.definition.id === RECENT_TOOLS_LABEL_ID);
+const isCollapsible = computed(
+    () => collapsibleLabelIds.has(props.definition.id) && props.collapsed !== undefined,
+);
+const isCollapsed = computed(() => props.collapsed ?? false);
+const toggleIcon = computed(() => (isCollapsed.value ? faChevronRight : faChevronDown));
+
+const { clearRecentTools } = useUserStore();
+
+function onToggle() {
+    if (isCollapsible.value) {
+        emit("toggle", props.definition.id);
+    }
+}
+
+function onKeydown(event: KeyboardEvent) {
+    if (!isCollapsible.value) {
+        return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        emit("toggle", props.definition.id);
+    }
+}
 </script>
 
 <template>
     <div
         v-b-tooltip.topright.hover.noninteractive
-        :class="['tool-panel-label', { 'tool-panel-label-divider': isDivider }]"
+        :class="[
+            'tool-panel-label',
+            {
+                'tool-panel-label-divider': isDivider,
+                'tool-panel-label-actionable': isRecentLabel && !isDivider,
+                'tool-panel-label-clickable': isCollapsible,
+            },
+        ]"
         tabindex="0"
-        :title="description">
+        :title="description"
+        :role="isCollapsible ? 'button' : undefined"
+        :aria-expanded="isCollapsible ? !isCollapsed : undefined"
+        @click="onToggle"
+        @keydown="onKeydown">
         <span v-if="isDivider" class="tool-panel-label-divider-text">
+            <FontAwesomeIcon v-if="isCollapsible" :icon="toggleIcon" class="tool-panel-label-toggle" />
             <FontAwesomeIcon v-if="isFavoritesDivider" :icon="faStar" class="tool-panel-label-divider-icon" />
             {{ definition.text }}
+            <GButton
+                v-if="isRecentLabel"
+                class="tool-panel-label-divider-action"
+                size="small"
+                color="grey"
+                icon-only
+                transparent
+                title="Clear recent tools"
+                data-description="clear-recent-tools"
+                @click.stop="clearRecentTools">
+                <FontAwesomeIcon :icon="faBroom" />
+            </GButton>
         </span>
-        <template v-else>{{ definition.text }}</template>
+        <template v-else>
+            <span>
+                <FontAwesomeIcon v-if="isCollapsible" :icon="toggleIcon" class="tool-panel-label-toggle" />
+                {{ definition.text }}
+            </span>
+            <GButton
+                v-if="isRecentLabel"
+                class="tool-panel-label-action"
+                size="small"
+                color="grey"
+                icon-only
+                transparent
+                title="Clear recent tools"
+                data-description="clear-recent-tools"
+                @click.stop="clearRecentTools">
+                <FontAwesomeIcon :icon="faBroom" />
+            </GButton>
+        </template>
         <ToolPanelLinks :links="definition.links || undefined" />
     </div>
 </template>
@@ -70,7 +151,31 @@ const isFavoritesDivider = computed(() => props.definition.id === FAVORITES_LABE
 .tool-panel-label-divider-text {
     align-items: center;
     display: inline-flex;
-    gap: 0.25rem;
+    gap: 0.5rem;
     white-space: nowrap;
 }
+
+.tool-panel-label-actionable {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+}
+
+.tool-panel-label-action {
+    margin-left: auto;
+}
+
+.tool-panel-label-divider-action {
+    margin-left: 0;
+}
+
+.tool-panel-label-toggle {
+    opacity: 0.8;
+}
+
+.tool-panel-label-clickable {
+    cursor: pointer;
+    user-select: none;
+}
 </style>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index b7b8d88589d..3222fd86b1b 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -16,6 +16,7 @@ const emit = defineEmits<{
     (e: "onClick", tool: any, evt: Event): void;
     (e: "onFilter", filter: string): void;
     (e: "onOperation", tool: any, evt: Event): void;
+    (e: "onLabelToggle", labelId: string): void;
 }>();
 
 const eventBus = useEventBus<string>("open-tool-section");
@@ -33,6 +34,8 @@ interface Props {
     sortItems?: boolean;
     hasFilterButton?: boolean;
     searchActive?: boolean;
+    showFavoriteButton?: boolean;
+    collapsedLabels?: Record<string, boolean>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -47,6 +50,8 @@ const props = withDefaults(defineProps<Props>(), {
     sortItems: true,
     hasFilterButton: false,
     searchActive: false,
+    showFavoriteButton: false,
+    collapsedLabels: () => ({}),
 });
 
 const { config, isConfigLoaded } = useConfig();
@@ -149,6 +154,9 @@ function onClick(tool: any, evt: Event) {
 function onOperation(tool: any, evt: Event) {
     emit("onOperation", tool, evt);
 }
+function onLabelToggle(labelId: string) {
+    emit("onLabelToggle", labelId);
+}
 function toggleMenu(nextState = !opened.value) {
     opened.value = nextState;
 }
@@ -186,7 +194,9 @@ function toggleMenu(nextState = !opened.value) {
                     <ToolPanelLabel
                         v-if="toolSectionLabel.text || el.model_class === 'ToolSectionLabel'"
                         :key="key"
-                        :definition="el" />
+                        :definition="el"
+                        :collapsed="props.collapsedLabels[el.id]"
+                        @toggle="onLabelToggle" />
                     <Tool
                         v-else
                         :key="key"
@@ -196,7 +206,7 @@ function toggleMenu(nextState = !opened.value) {
                         :hide-name="hideName"
                         :operation-title="operationTitle"
                         :operation-icon="operationIcon"
-                        :show-favorite-button="searchActive"
+                        :show-favorite-button="props.showFavoriteButton || searchActive"
                         @onOperation="onOperation"
                         @onClick="onClick" />
                 </template>
@@ -204,14 +214,18 @@ function toggleMenu(nextState = !opened.value) {
         </transition>
     </div>
     <div v-else>
-        <ToolPanelLabel v-if="toolSectionLabel.text" :definition="toolSectionLabel" />
+        <ToolPanelLabel
+            v-if="toolSectionLabel.text"
+            :definition="toolSectionLabel"
+            :collapsed="props.collapsedLabels[toolSectionLabel.id]"
+            @toggle="onLabelToggle" />
         <Tool
             v-else
             :tool="category"
             :hide-name="hideName"
             :operation-title="operationTitle"
             :operation-icon="operationIcon"
-            :show-favorite-button="searchActive"
+            :show-favorite-button="props.showFavoriteButton || searchActive"
             @onOperation="onOperation"
             @onClick="onClick" />
     </div>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 40a4d75e656..fe96503d50d 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -7,7 +7,6 @@ import { computed, type ComputedRef, type Ref, ref, watch } from "vue";
 
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
-import { getAppRoot } from "@/onload/loadConfig";
 import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
@@ -57,7 +56,7 @@ const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null
 const closestTerm: Ref<string | null> = ref(null);
 
 const toolStore = useToolStore();
-const { currentFavorites } = storeToRefs(useUserStore());
+const { currentFavorites, recentTools } = storeToRefs(useUserStore());
 
 const { currentPanelView, currentToolSections, defaultPanelView, toolSections } = storeToRefs(toolStore);
 const hasResults = computed(() => results.value.length > 0);
@@ -130,11 +129,20 @@ type PanelItem = Tool | ToolSectionType | ToolSectionLabel;
 
 const favoriteToolIds = computed(() => currentFavorites.value.tools || []);
 const favoriteToolIdSet = computed(() => new Set(favoriteToolIds.value));
+const favoriteToolIdsInPanel = computed(() =>
+    favoriteToolIds.value.filter((toolId) => !!localToolsById.value[toolId]),
+);
+const recentToolIds = computed(() => recentTools.value || []);
+const recentToolIdsInPanel = computed(() => recentToolIds.value.filter((toolId) => !!localToolsById.value[toolId]));
+const recentToolIdsToShow = computed(() =>
+    recentToolIdsInPanel.value.filter((toolId) => !favoriteToolIdSet.value.has(toolId)),
+);
+const recentToolIdsToShowSet = computed(() => new Set(recentToolIdsToShow.value));
 const favoriteResults = computed(() => results.value.filter((id) => favoriteToolIdSet.value.has(id)));
 const nonFavoriteResults = computed(() => results.value.filter((id) => !favoriteToolIdSet.value.has(id)));
 const hasMixedResults = computed(() => favoriteResults.value.length > 0 && nonFavoriteResults.value.length > 0);
 
-const toolsListHref = computed(() => `${getAppRoot()}tools/list`);
+const toolsListRoute = "/tools/list";
 const toolsCount = computed(() => toolsList.value.length);
 const showEmptyFavorites = computed(
     () => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0,
@@ -143,6 +151,12 @@ const showEmptyFavorites = computed(
 const FAVORITES_RESULTS_SECTION_ID = "favorites_results";
 const FAVORITES_RESULTS_LABEL_ID = "favorites_results_label";
 const SEARCH_RESULTS_LABEL_ID = "search_results_label";
+const FAVORITES_LABEL_ID = "favorites_label";
+const RECENT_TOOLS_LABEL_ID = "recent_tools_label";
+const FAVORITES_EMPTY_ALERT_ID = "favorites_empty_alert";
+
+const favoritesCollapsed = ref(false);
+const recentToolsCollapsed = ref(false);
 
 function buildToolSection(id: string, name: string, tools: string[]): ToolSectionType {
     return {
@@ -224,10 +238,12 @@ const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
     }
     const entries: Array<[string, PanelItem]> = [];
     entries.push([FAVORITES_RESULTS_LABEL_ID, buildToolLabel(FAVORITES_RESULTS_LABEL_ID, localize("Favorites"))]);
-    for (const toolId of favoriteResults.value) {
-        const tool = localToolsById.value[toolId];
-        if (tool) {
-            entries.push([toolId, tool]);
+    if (!favoritesCollapsed.value) {
+        for (const toolId of favoriteResults.value) {
+            const tool = localToolsById.value[toolId];
+            if (tool) {
+                entries.push([toolId, tool]);
+            }
         }
     }
     entries.push([SEARCH_RESULTS_LABEL_ID, buildToolLabel(SEARCH_RESULTS_LABEL_ID, localize("Search results"))]);
@@ -240,6 +256,41 @@ const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
     return Object.fromEntries(entries);
 });
 
+const favoritesDefaultPanel = computed<Record<string, PanelItem> | null>(() => {
+    if (!props.favoritesDefault || query.value) {
+        return null;
+    }
+    const entries: Array<[string, PanelItem]> = [];
+    const favorites = favoriteToolIdsInPanel.value;
+    const recents = recentToolIdsToShow.value;
+
+    entries.push([FAVORITES_LABEL_ID, buildToolLabel(FAVORITES_LABEL_ID, localize("Favorites"))]);
+    if (!favoritesCollapsed.value) {
+        if (showEmptyFavorites.value) {
+            entries.push([FAVORITES_EMPTY_ALERT_ID, buildToolLabel(FAVORITES_EMPTY_ALERT_ID, "")]);
+        } else {
+            for (const toolId of favorites) {
+                const tool = localToolsById.value[toolId];
+                if (tool) {
+                    entries.push([toolId, tool]);
+                }
+            }
+        }
+    }
+    if (recents.length > 0) {
+        entries.push([RECENT_TOOLS_LABEL_ID, buildToolLabel(RECENT_TOOLS_LABEL_ID, localize("Recent tools"))]);
+        if (!recentToolsCollapsed.value) {
+            for (const toolId of recents) {
+                const tool = localToolsById.value[toolId];
+                if (tool) {
+                    entries.push([toolId, tool]);
+                }
+            }
+        }
+    }
+    return Object.fromEntries(entries);
+});
+
 const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> | null>(() => {
     if (!hasResults.value) {
         return null;
@@ -274,7 +325,7 @@ const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> |
  */
 const localPanel: ComputedRef<Record<string, PanelItem> | null> = computed(() => {
     if (props.favoritesDefault && !query.value) {
-        return filterTools(localToolsById.value, favoriteToolIds.value) as Record<string, PanelItem>;
+        return favoritesDefaultPanel.value || {};
     }
     if (hasResults.value) {
         if (showSections.value) {
@@ -345,6 +396,27 @@ function onSearchQuery(q: string) {
 function onToggle() {
     showSections.value = !showSections.value;
 }
+
+const collapsedLabels = computed(() =>
+    props.favoritesDefault
+        ? {
+              [FAVORITES_LABEL_ID]: favoritesCollapsed.value,
+              [FAVORITES_RESULTS_LABEL_ID]: favoritesCollapsed.value,
+              [RECENT_TOOLS_LABEL_ID]: recentToolsCollapsed.value,
+          }
+        : {},
+);
+
+function onLabelToggle(labelId: string) {
+    if (!props.favoritesDefault) {
+        return;
+    }
+    if (labelId === FAVORITES_LABEL_ID || labelId === FAVORITES_RESULTS_LABEL_ID) {
+        favoritesCollapsed.value = !favoritesCollapsed.value;
+    } else if (labelId === RECENT_TOOLS_LABEL_ID) {
+        recentToolsCollapsed.value = !recentToolsCollapsed.value;
+    }
+}
 </script>
 
 <template>
@@ -386,32 +458,35 @@ function onToggle() {
         </div>
         <div class="unified-panel-body">
             <div class="toolMenuContainer">
-                <div v-if="showEmptyFavorites" class="tool-panel-empty">
-                    <BAlert variant="info" show>
-                        You haven't favorited any tools yet. Search the toolbox or use
-                        <GButton
-                            class="ml-1"
-                            size="small"
-                            color="blue"
-                            :href="toolsListHref"
-                            data-description="discover-tools">
-                            Discover Tools
-                        </GButton>
-                        to explore {{ toolsCount }} community curated tools.
-                    </BAlert>
-                </div>
-                <div v-else-if="localPanel" class="toolMenu">
+                <div v-if="localPanel" class="toolMenu">
                     <div v-for="(panel, key) in localPanel" :key="key">
+                        <div v-if="panel?.id === FAVORITES_EMPTY_ALERT_ID" class="tool-panel-empty">
+                            <BAlert variant="info" show>
+                                You haven't favorited any tools yet. Search the toolbox or use
+                                <GButton
+                                    class="ml-1"
+                                    size="small"
+                                    color="blue"
+                                    :to="toolsListRoute"
+                                    data-description="discover-tools">
+                                    Discover Tools
+                                </GButton>
+                                to explore {{ toolsCount }} community curated tools.
+                            </BAlert>
+                        </div>
                         <ToolSection
-                            v-if="panel"
+                            v-else-if="panel"
                             :category="panel || {}"
                             :query-filter="hasResults ? query : undefined"
                             :has-filter-button="
                                 hasResults && currentPanelView === 'default' && panel.id !== FAVORITES_RESULTS_SECTION_ID
                             "
                             :search-active="hasResults"
+                            :show-favorite-button="recentToolIdsToShowSet.has(panel.id)"
+                            :collapsed-labels="collapsedLabels"
                             @onClick="onToolClick"
-                            @onFilter="onSectionFilter" />
+                            @onFilter="onSectionFilter"
+                            @onLabelToggle="onLabelToggle" />
                     </div>
                 </div>
             </div>
diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
index 6922efbf376..fea0c8b4d1b 100644
--- a/client/src/components/Tool/ToolForm.test.js
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -1,7 +1,7 @@
 import "@tests/vitest/mockHelpPopovers";
 
 import { getFakeRegisteredUser } from "@tests/test-data";
-import { getLocalVue, suppressBootstrapVueWarnings } from "@tests/vitest/helpers";
+import { getLocalVue, injectTestRouter, suppressBootstrapVueWarnings } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
@@ -17,6 +17,7 @@ import ToolForm from "./ToolForm.vue";
 const { server, http } = useServerMock();
 
 const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
 const pinia = createPinia();
 
 describe("ToolForm", () => {
@@ -72,6 +73,7 @@ describe("ToolForm", () => {
                 version: "version",
             },
             localVue,
+            router,
             stubs: {
                 UserHistories: MockCurrentHistory({ id: "fakeHistory" }),
                 FormDisplay: true,
@@ -84,6 +86,7 @@ describe("ToolForm", () => {
         historyStore = useHistoryStore();
         historyStore.setHistories([{ id: "fakeHistory" }]);
         historyStore.setCurrentHistoryId("fakeHistory");
+        historyStore.startWatchingHistory = () => {};
     });
 
     it("shows props", async () => {
@@ -97,4 +100,15 @@ describe("ToolForm", () => {
         const creator = wrapper.find(".creative-work-creator");
         expect(creator.text()).toContain("FakeName FakeSurname");
     });
+
+    it("adds the executed tool to recent tools", async () => {
+        await flushPromises();
+        await wrapper.setData({ formData: {} });
+
+        const button = wrapper.find("[data-description='run tool button']");
+        await button.trigger("click");
+        await flushPromises();
+
+        expect(userStore.recentTools).toEqual(["tool_id"]);
+    });
 });
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 3f82f9eaf48..05e53c7a8a1 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -309,6 +309,7 @@ export default {
         ...mapActions(useJobStore, ["saveLatestResponse"]),
         ...mapActions(useTourStore, ["setTour"]),
         ...mapActions(useHistoryStore, ["startWatchingHistory"]),
+        ...mapActions(useUserStore, ["addRecentTool"]),
         emailAllowed(config, user) {
             return config.server_mail_configured && !user.isAnonymous;
         },
@@ -388,6 +389,7 @@ export default {
                 return;
             }
             this.showExecuting = true;
+            this.addRecentTool(this.formConfig?.id);
             const jobDef = {
                 history_id: historyId,
                 tool_id: this.formConfig.id,
diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index bc6ecb77e72..9497f89cc32 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -26,6 +26,8 @@ export type ListViewMode = "grid" | "list";
 
 type UserListViewPreferences = Record<string, ListViewMode>;
 
+const RECENT_TOOLS_LIMIT = 20;
+
 export const useUserStore = defineStore("userStore", () => {
     const currentUser = ref<AnyUser>(null);
     const currentPreferences = ref<Preferences | null>(null);
@@ -41,6 +43,8 @@ export const useUserStore = defineStore("userStore", () => {
 
     const historyPanelWidth = useUserLocalStorageFromHashId("user-store-history-panel-width", 300, hashedUserId);
 
+    const recentTools = useUserLocalStorageFromHashId<string[]>("user-store-recent-tools", [], hashedUserId);
+
     let loadPromise: Promise<void> | null = null;
 
     function $reset() {
@@ -144,6 +148,18 @@ export const useUserStore = defineStore("userStore", () => {
         }
     }
 
+    function addRecentTool(toolId: string) {
+        if (!toolId) {
+            return;
+        }
+        const currentTools = recentTools.value || [];
+        recentTools.value = [toolId, ...currentTools.filter((id) => id !== toolId)].slice(0, RECENT_TOOLS_LIMIT);
+    }
+
+    function clearRecentTools() {
+        recentTools.value = [];
+    }
+
     function setListViewPreference(listId: string, view: ListViewMode) {
         currentListViewPreferences.value = {
             ...currentListViewPreferences.value,
@@ -171,6 +187,7 @@ export const useUserStore = defineStore("userStore", () => {
         currentListViewPreferences,
         hasSeenUploadHelp,
         historyPanelWidth,
+        recentTools,
         loadUser,
         matchesCurrentUsername,
         setCurrentUser,
@@ -178,6 +195,8 @@ export const useUserStore = defineStore("userStore", () => {
         setListViewPreference,
         addFavoriteTool,
         removeFavoriteTool,
+        addRecentTool,
+        clearRecentTools,
         $reset,
     };
 });
diff --git a/client/tests/vitest/helpers.js b/client/tests/vitest/helpers.js
index a3e10a8898f..13aa877cd24 100644
--- a/client/tests/vitest/helpers.js
+++ b/client/tests/vitest/helpers.js
@@ -46,7 +46,7 @@ export function suppressBootstrapVueWarnings() {
     const originalWarn = console.warn;
     vi.spyOn(console, "warn").mockImplementation(
         vi.fn((msg) => {
-            if (msg.indexOf("BootstrapVue warn") < 0) {
+            if (typeof msg !== "string" || msg.indexOf("BootstrapVue warn") < 0) {
                 originalWarn(msg);
             }
         }),

From cc48b106cc5339b9a661df8e50166f8b67be4070 Mon Sep 17 00:00:00 2001
From: Bjoern Gruening <bjoern.gruening@gmail.com>
Date: Mon, 5 Jan 2026 22:28:24 +0100
Subject: [PATCH 03/30] add tests, including playwrith tests

---
 .../components/Panels/ToolBoxSearch.test.js   | 323 ++++++++++++++++++
 .../selenium/test_tool_panel_search.py        | 109 ++++++
 2 files changed, 432 insertions(+)
 create mode 100644 client/src/components/Panels/ToolBoxSearch.test.js
 create mode 100644 lib/galaxy_test/selenium/test_tool_panel_search.py

diff --git a/client/src/components/Panels/ToolBoxSearch.test.js b/client/src/components/Panels/ToolBoxSearch.test.js
new file mode 100644
index 00000000000..a35f72cbdfc
--- /dev/null
+++ b/client/src/components/Panels/ToolBoxSearch.test.js
@@ -0,0 +1,323 @@
+import { getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
+import { mount } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { setMockConfig } from "@/composables/__mocks__/config";
+import { useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
+import toolsList from "@/components/ToolsView/testData/toolsList.json";
+import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel.json";
+
+import ToolBox from "./ToolBox.vue";
+
+vi.mock("@/composables/config");
+
+setMockConfig({
+    toolbox_auto_sort: true,
+});
+
+const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
+
+function toToolsById(list) {
+    return list.reduce((acc, tool) => {
+        acc[tool.id] = tool;
+        return acc;
+    }, {});
+}
+
+describe("ToolBox search", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it("searches across toolbox when favorites are the default view", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["liftOver1"] } };
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="liftOver1"]').exists()).toBe(true);
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("Zip");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
+    });
+
+    it("shows empty favorites copy in My panel when no favorites are set", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: [] } };
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        const emptyState = wrapper.find(".tool-panel-empty");
+        expect(emptyState.exists()).toBe(true);
+        expect(emptyState.text()).toContain("You haven't favorited any tools yet.");
+        expect(emptyState.text()).toContain(`${toolsList.length} community curated tools.`);
+        const discoverButton = emptyState.find('[data-description="discover-tools"]');
+        expect(discoverButton.exists()).toBe(true);
+        expect(discoverButton.text()).toBe("Discover Tools");
+
+        const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
+        expect(labels).toEqual(["Favorites"]);
+    });
+
+    it("separates favorite results and shows favorite button for non-favorites during search", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("Filter");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
+        expect(labels).toEqual(["Favorites", "Search results"]);
+
+        const toolIds = wrapper.findAll('a[data-tool-id]').wrappers.map((item) => item.attributes("data-tool-id"));
+        expect(toolIds).toEqual(["__FILTER_FAILED_DATASETS__", "__FILTER_EMPTY_DATASETS__"]);
+
+        expect(wrapper.find('.tool-favorite-button[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(true);
+        expect(
+            wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists(),
+        ).toBe(false);
+        expect(wrapper.find('.tool-favorite-button[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(true);
+        expect(
+            wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists(),
+        ).toBe(true);
+    });
+
+    it("collapses favorite results during search in My panel", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        const input = wrapper.find("input.search-query");
+        await input.setValue("Filter");
+        vi.advanceTimersByTime(250);
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(true);
+        expect(wrapper.find('[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(true);
+
+        const favoritesLabel = wrapper
+            .findAll(".tool-panel-label")
+            .wrappers.find((item) => item.text().includes("Favorites"));
+        expect(favoritesLabel).toBeTruthy();
+        await favoritesLabel.trigger("click");
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(false);
+        expect(wrapper.find('[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(true);
+    });
+
+    it("shows recent tools under favorites and allows clearing", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
+        userStore.recentTools = ["__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__"];
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
+        expect(labels).toEqual(["Favorites", "Recent tools"]);
+
+        const toolIds = wrapper.findAll('a[data-tool-id]').wrappers.map((item) => item.attributes("data-tool-id"));
+        expect(toolIds).toEqual(["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__"]);
+        expect(wrapper.find('.tool-favorite-button[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
+
+        await wrapper.find('[data-description="clear-recent-tools"]').trigger("click");
+        await flushPromises();
+
+        expect(wrapper.find('[data-description="clear-recent-tools"]').exists()).toBe(false);
+        expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(false);
+    });
+
+    it("collapses favorites and recent tools sections on label click", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
+        userStore.recentTools = ["__ZIP_COLLECTION__"];
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(true);
+        expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
+
+        const favoritesLabel = wrapper
+            .findAll(".tool-panel-label")
+            .wrappers.find((item) => item.text().includes("Favorites"));
+        expect(favoritesLabel).toBeTruthy();
+        await favoritesLabel.trigger("click");
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(false);
+        expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
+
+        const recentLabel = wrapper
+            .findAll(".tool-panel-label")
+            .wrappers.find((item) => item.text().includes("Recent tools"));
+        expect(recentLabel).toBeTruthy();
+        await recentLabel.trigger("click");
+        await flushPromises();
+
+        expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(false);
+    });
+
+    it("does not show empty favorites copy when recent tools exist", async () => {
+        const pinia = createPinia();
+        setActivePinia(pinia);
+
+        const toolStore = useToolStore();
+        toolStore.toolsById = toToolsById(toolsList);
+        toolStore.toolSections = { default: toolsListInPanel };
+        toolStore.defaultPanelView = "default";
+        toolStore.currentPanelView = "my_panel";
+
+        const userStore = useUserStore();
+        userStore.currentPreferences = { favorites: { tools: [] } };
+        userStore.recentTools = ["__ZIP_COLLECTION__"];
+
+        const wrapper = mount(ToolBox, {
+            pinia,
+            localVue,
+            router,
+            propsData: {
+                favoritesDefault: true,
+                useSearchWorker: false,
+            },
+        });
+
+        await flushPromises();
+
+        const emptyState = wrapper.find(".tool-panel-empty");
+        expect(emptyState.exists()).toBe(true);
+        expect(emptyState.text()).toContain("You haven't favorited any tools yet.");
+        const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
+        expect(labels).toEqual(["Favorites", "Recent tools"]);
+    });
+});
diff --git a/lib/galaxy_test/selenium/test_tool_panel_search.py b/lib/galaxy_test/selenium/test_tool_panel_search.py
new file mode 100644
index 00000000000..da2141210bc
--- /dev/null
+++ b/lib/galaxy_test/selenium/test_tool_panel_search.py
@@ -0,0 +1,109 @@
+from .framework import (
+    playwright_only,
+    selenium_test,
+    SeleniumTestCase,
+)
+
+
+class TestToolPanelSearchPlaywright(SeleniumTestCase):
+    @playwright_only("Validates tool panel search behavior with Playwright backend.")
+    @selenium_test
+    def test_tool_panel_search_my_panel(self):
+        self.home()
+        self.open_toolbox()
+        self.swap_to_tool_panel("my_panel")
+
+        tool_panel = self.components.tool_panel
+        tool_panel.toolbox.wait_for_visible()
+
+        search = self.components.tools.search
+        search.wait_for_visible()
+        search.wait_for_and_send_keys("filter failed")
+
+        tool_panel.tool_link(tool_id="__FILTER_FAILED_DATASETS__").wait_for_visible()
+
+    @playwright_only("Validates tool panel favorites/recents behavior with Playwright backend.")
+    @selenium_test
+    def test_tool_panel_favorites_and_recents_my_panel(self):
+        self.login()
+
+        self.home()
+        self.open_toolbox()
+        self.swap_to_tool_panel("my_panel")
+
+        tool_panel = self.components.tool_panel
+        tool_panel.toolbox.wait_for_visible()
+
+        favorites_label_selector = ".tool-panel-label:has-text('Favorites')"
+        recents_label_selector = ".tool-panel-label:has-text('Recent tools')"
+        empty_alert_selector = ".tool-panel-empty .alert"
+
+        self.wait_for_selector(favorites_label_selector)
+        empty_alert = self.wait_for_selector(empty_alert_selector)
+        assert "haven't favorited any tools yet" in empty_alert.text
+        self.wait_for_selector_absent_or_hidden(recents_label_selector)
+
+        search = self.components.tools.search
+        search.wait_for_visible()
+        search.wait_for_and_send_keys("create_2")
+        tool_panel.tool_link(tool_id="create_2").wait_for_and_click()
+
+        self.components.tool_form.execute.wait_for_and_click()
+        self.sleep_for(self.wait_types.UX_RENDER)
+
+        self.home()
+        self.open_toolbox()
+        self.swap_to_tool_panel("my_panel")
+        tool_panel.toolbox.wait_for_visible()
+
+        self.wait_for_selector(recents_label_selector)
+        tool_panel.tool_link(tool_id="create_2").wait_for_visible()
+        empty_alert = self.wait_for_selector(empty_alert_selector)
+        assert "haven't favorited any tools yet" in empty_alert.text
+
+        self.wait_for_selector('[data-description="clear-recent-tools"]').click()
+        self.wait_for_selector_absent_or_hidden(recents_label_selector)
+
+        search = self.components.tools.search
+        search.wait_for_visible()
+        search.wait_for_and_send_keys("filter failed")
+        tool_panel.tool_link(tool_id="__FILTER_FAILED_DATASETS__").wait_for_visible()
+
+        favorite_button_selector = '.tool-favorite-button[data-tool-id="__FILTER_FAILED_DATASETS__"]'
+        favorite_button = self.wait_for_selector(favorite_button_selector)
+        favorite_button.click()
+
+        self.components.tools.clear_search.wait_for_and_click()
+
+        tool_panel.tool_link(tool_id="__FILTER_FAILED_DATASETS__").wait_for_visible()
+        self.wait_for_selector_absent_or_hidden(empty_alert_selector)
+
+        self.page.locator(favorite_button_selector).focus()
+        self.page.keyboard.press("Enter")
+
+        self.wait_for_selector_absent_or_hidden('.toolTitle a[data-tool-id="__FILTER_FAILED_DATASETS__"]')
+        empty_alert = self.wait_for_selector(empty_alert_selector)
+        assert "haven't favorited any tools yet" in empty_alert.text
+
+        search.wait_for_visible()
+        search.wait_for_and_send_keys("filter failed")
+        favorite_button = self.wait_for_selector(favorite_button_selector)
+        favorite_button.click()
+        self.components.tools.clear_search.wait_for_and_click()
+
+        tool_panel.tool_link(tool_id="__FILTER_FAILED_DATASETS__").wait_for_visible()
+        self.wait_for_selector_absent_or_hidden(empty_alert_selector)
+
+        search.wait_for_visible()
+        search.wait_for_and_send_keys("filter")
+
+        self.wait_for_selector(favorites_label_selector)
+        self.wait_for_selector(".tool-panel-label:has-text('Search results')")
+
+        tool_panel.tool_link(tool_id="__FILTER_FAILED_DATASETS__").wait_for_visible()
+        tool_panel.tool_link(tool_id="filter_multiple_splitter").wait_for_visible()
+
+        self.wait_for_selector(favorites_label_selector).click()
+        self.wait_for_selector(".tool-panel-label[aria-expanded='false']:has-text('Favorites')")
+        self.wait_for_selector_absent_or_hidden('.toolTitle a[data-tool-id="__FILTER_FAILED_DATASETS__"]')
+        tool_panel.tool_link(tool_id="filter_multiple_splitter").wait_for_visible()

From d2ac43a62bfe918b75d1f635e10472948720e660 Mon Sep 17 00:00:00 2001
From: Bjoern Gruening <bjoern.gruening@gmail.com>
Date: Mon, 5 Jan 2026 22:28:47 +0100
Subject: [PATCH 04/30] missing file

---
 client/src/components/Panels/panelViews.ts | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 client/src/components/Panels/panelViews.ts

diff --git a/client/src/components/Panels/panelViews.ts b/client/src/components/Panels/panelViews.ts
new file mode 100644
index 00000000000..bc47fdc84ad
--- /dev/null
+++ b/client/src/components/Panels/panelViews.ts
@@ -0,0 +1,4 @@
+export const MY_PANEL_VIEW_ID = "my_panel";
+export const MY_PANEL_VIEW_NAME = "My panel";
+export const MY_PANEL_VIEW_DESCRIPTION = "Search all tools and view your favorite tools.";
+export const MY_PANEL_VIEW_TYPE = "favorites";

From 46af28b1f8addd3bd820c8fe8fe7c483cf36f9ec Mon Sep 17 00:00:00 2001
From: Bjoern Gruening <bjoern.gruening@gmail.com>
Date: Tue, 6 Jan 2026 11:26:01 +0100
Subject: [PATCH 05/30] some more adjustments

---
 .../Panels/Common/ToolPanelLabel.vue          | 95 +++----------------
 .../components/Panels/Common/ToolSection.vue  | 44 +++++----
 .../components/Panels/Menus/PanelViewMenu.vue | 23 ++++-
 .../Panels/Menus/PanelViewMenuItem.vue        | 23 ++++-
 .../src/components/Panels/ToolPanel.test.ts   | 14 ++-
 client/src/components/Panels/ToolPanel.vue    | 18 +++-
 client/src/components/Panels/panelViews.ts    |  2 +-
 .../components/Panels/testData/viewsList.json |  2 +-
 client/src/style/scss/unsorted.scss           | 60 +++++++++++-
 9 files changed, 168 insertions(+), 113 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 0752f671cfa..74d58218f33 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -23,15 +23,7 @@ const FAVORITES_LABEL_ID = "favorites_label";
 const RECENT_TOOLS_LABEL_ID = "recent_tools_label";
 const favoritesLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID]);
 const collapsibleLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID, RECENT_TOOLS_LABEL_ID]);
-const dividerLabelIds = new Set([
-    FAVORITES_RESULTS_LABEL_ID,
-    FAVORITES_LABEL_ID,
-    RECENT_TOOLS_LABEL_ID,
-    "search_results_label",
-]);
-
 const description = computed(() => props.definition.description || undefined);
-const isDivider = computed(() => dividerLabelIds.has(props.definition.id));
 const isFavoritesDivider = computed(() => favoritesLabelIds.has(props.definition.id));
 const isRecentLabel = computed(() => props.definition.id === RECENT_TOOLS_LABEL_ID);
 const isCollapsible = computed(
@@ -62,27 +54,26 @@ function onKeydown(event: KeyboardEvent) {
 <template>
     <div
         v-b-tooltip.topright.hover.noninteractive
-        :class="[
-            'tool-panel-label',
-            {
-                'tool-panel-label-divider': isDivider,
-                'tool-panel-label-actionable': isRecentLabel && !isDivider,
-                'tool-panel-label-clickable': isCollapsible,
-            },
-        ]"
+        :class="['tool-panel-label', 'tool-panel-divider', { 'tool-panel-label-clickable': isCollapsible }]"
         tabindex="0"
         :title="description"
         :role="isCollapsible ? 'button' : undefined"
         :aria-expanded="isCollapsible ? !isCollapsed : undefined"
         @click="onToggle"
         @keydown="onKeydown">
-        <span v-if="isDivider" class="tool-panel-label-divider-text">
-            <FontAwesomeIcon v-if="isCollapsible" :icon="toggleIcon" class="tool-panel-label-toggle" />
-            <FontAwesomeIcon v-if="isFavoritesDivider" :icon="faStar" class="tool-panel-label-divider-icon" />
+        <span class="tool-panel-label-divider-text tool-panel-divider-text">
+            <FontAwesomeIcon
+                v-if="isCollapsible"
+                :icon="toggleIcon"
+                class="tool-panel-label-toggle tool-panel-divider-toggle" />
+            <FontAwesomeIcon
+                v-if="isFavoritesDivider"
+                :icon="faStar"
+                class="tool-panel-label-divider-icon tool-panel-divider-icon" />
             {{ definition.text }}
             <GButton
                 v-if="isRecentLabel"
-                class="tool-panel-label-divider-action"
+                class="tool-panel-label-divider-action tool-panel-divider-action"
                 size="small"
                 color="grey"
                 icon-only
@@ -92,26 +83,8 @@ function onKeydown(event: KeyboardEvent) {
                 @click.stop="clearRecentTools">
                 <FontAwesomeIcon :icon="faBroom" />
             </GButton>
+            <ToolPanelLinks :links="definition.links || undefined" />
         </span>
-        <template v-else>
-            <span>
-                <FontAwesomeIcon v-if="isCollapsible" :icon="toggleIcon" class="tool-panel-label-toggle" />
-                {{ definition.text }}
-            </span>
-            <GButton
-                v-if="isRecentLabel"
-                class="tool-panel-label-action"
-                size="small"
-                color="grey"
-                icon-only
-                transparent
-                title="Clear recent tools"
-                data-description="clear-recent-tools"
-                @click.stop="clearRecentTools">
-                <FontAwesomeIcon :icon="faBroom" />
-            </GButton>
-        </template>
-        <ToolPanelLinks :links="definition.links || undefined" />
     </div>
 </template>
 
@@ -130,50 +103,6 @@ function onKeydown(event: KeyboardEvent) {
     }
 }
 
-.tool-panel-label.tool-panel-label-divider {
-    align-items: center;
-    background: transparent;
-    border-left: 0;
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.375rem 0.75rem;
-    text-transform: none;
-
-    &::before,
-    &::after {
-        border-bottom: 1px solid currentColor;
-        content: "";
-        flex: 1;
-        opacity: 0.35;
-    }
-}
-
-.tool-panel-label-divider-text {
-    align-items: center;
-    display: inline-flex;
-    gap: 0.5rem;
-    white-space: nowrap;
-}
-
-.tool-panel-label-actionable {
-    align-items: center;
-    display: flex;
-    gap: 0.5rem;
-    justify-content: space-between;
-}
-
-.tool-panel-label-action {
-    margin-left: auto;
-}
-
-.tool-panel-label-divider-action {
-    margin-left: 0;
-}
-
-.tool-panel-label-toggle {
-    opacity: 0.8;
-}
-
 .tool-panel-label-clickable {
     cursor: pointer;
     user-select: none;
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 3222fd86b1b..45e761105a3 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronRight, faFilter } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
@@ -84,6 +84,7 @@ const title = computed(() => props.category.description || undefined);
 const links = computed(() => toolSection.value.links || {});
 
 const opened = ref(props.expanded || checkFilter());
+const sectionToggleIcon = computed(() => (opened.value ? faChevronDown : faChevronRight));
 
 const sortedElements = computed(() => {
     // If this.config.sortTools is true, sort the tools alphabetically
@@ -166,26 +167,33 @@ function toggleMenu(nextState = !opened.value) {
     <div v-if="isSection && hasElements" class="tool-panel-section">
         <div
             v-b-tooltip.topright.hover.noninteractive
-            :class="['toolSectionTitle', `tool-menu-section-${sectionName}`]"
+            :class="[
+                'toolSectionTitle',
+                `tool-menu-section-${sectionName}`,
+                'tool-panel-divider',
+            ]"
             :title="title">
             <a
-                class="title-link d-flex justify-content-between align-items-center"
+                class="title-link tool-panel-divider-link"
                 href="javascript:void(0)"
+                role="button"
+                :aria-expanded="opened"
                 @click="toggleMenu()">
-                <div>
+                <span class="tool-panel-divider-text">
+                    <FontAwesomeIcon :icon="sectionToggleIcon" class="tool-panel-divider-toggle" />
                     <span class="name">
                         {{ name }}
                     </span>
                     <ToolPanelLinks :links="links" />
-                </div>
-                <button
-                    v-if="isSection && props.hasFilterButton"
-                    v-b-tooltip.hover.noninteractive.bottom
-                    title="Show full section"
-                    class="inline-icon-button"
-                    @click.stop="emit('onFilter', `section:${toolSection.name}`)">
-                    <FontAwesomeIcon :icon="faFilter" />
-                </button>
+                    <button
+                        v-if="isSection && props.hasFilterButton"
+                        v-b-tooltip.hover.noninteractive.bottom
+                        title="Show full section"
+                        class="inline-icon-button"
+                        @click.stop="emit('onFilter', `section:${toolSection.name}`)">
+                        <FontAwesomeIcon :icon="faFilter" />
+                    </button>
+                </span>
             </a>
         </div>
         <transition name="slide">
@@ -238,8 +246,8 @@ function toggleMenu(nextState = !opened.value) {
     font-size: 75%;
     padding: 0em 0.5em;
 }
-.tool-panel-label {
-    background: darken($panel-bg-color, 5%);
+
+.tool-panel-label:not(.tool-panel-divider) {
     border-left: 0.25rem solid darken($panel-bg-color, 25%);
     font-size: $h5-font-size;
     font-weight: 600;
@@ -249,13 +257,17 @@ function toggleMenu(nextState = !opened.value) {
     text-transform: uppercase;
 }
 
-.tool-panel-section .tool-panel-label {
+.tool-panel-section .tool-panel-label:not(.tool-panel-divider) {
     /* labels within subsections */
     margin-left: 1.5rem;
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
 }
 
+.tool-panel-section .tool-panel-label.tool-panel-divider {
+    margin-left: 1.5rem;
+}
+
 .slide-enter-active {
     -moz-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index 40334e01081..6e5899ef1be 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -9,6 +9,7 @@ import { computed, ref } from "vue";
 import { type Panel, useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
+import { MY_PANEL_VIEW_ID, MY_PANEL_VIEW_NAME } from "../panelViews";
 import { types_to_icons } from "../utilities";
 
 import PanelViewMenuItem from "./PanelViewMenuItem.vue";
@@ -36,6 +37,9 @@ const { currentPanelView, loading, panels } = storeToRefs(toolStore);
 const panelName = ref("");
 
 const defaultPanelView = computed(() => panels.value["default"] || Object.values(panels.value)[0]);
+const currentPanel = computed(() => panels.value[currentPanelView.value]);
+const isFavoritesView = computed(() => currentPanel.value?.view_type === "favorites");
+const isMyToolsView = computed(() => currentPanelView.value === MY_PANEL_VIEW_ID);
 
 const panelIcon = computed<IconDefinition | null>(() => {
     if (
@@ -59,13 +63,17 @@ const styleClasses = computed(() => {
 const toolPanelHeader = computed(() => {
     if (loading.value && panelName.value) {
         return localize(panelName.value);
-    } else if (currentPanelView.value !== "default" && panels.value && panels.value[currentPanelView.value]?.name) {
-        return localize(panels.value[currentPanelView.value]?.name);
+    } else if (currentPanelView.value !== "default" && panels.value && currentPanel.value?.name) {
+        const name = currentPanel.value.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : currentPanel.value.name;
+        return localize(name);
     } else {
         return localize("Tools");
     }
 });
 
+const headingClass = computed(() => (currentPanelView.value !== "default" && !isMyToolsView.value ? "font-italic" : ""));
+const showPanelIcon = computed(() => !!panelIcon.value && !loading.value && !isMyToolsView.value);
+
 const groupedPanelViews = computed(() => {
     const groups = [];
     for (const group of groupsDefinitions) {
@@ -105,7 +113,7 @@ function panelViewsOfType(panelViewType: string) {
 }
 
 async function updatePanelView(panel: Panel) {
-    panelName.value = panel.name || "";
+    panelName.value = panel.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : panel.name || "";
     await toolStore.setPanel(panel.id);
     panelName.value = "";
 }
@@ -131,13 +139,13 @@ async function updatePanelView(panel: Panel) {
             <div class="d-flex panel-view-selector justify-content-between flex-gapx-1">
                 <div>
                     <FontAwesomeIcon
-                        v-if="panelIcon && !loading"
+                        v-if="showPanelIcon && !isFavoritesView"
                         class="mr-1"
                         :icon="panelIcon"
                         data-description="panel view header icon" />
                     <Heading
                         id="toolbox-heading"
-                        :class="toolPanelHeader !== 'Tools' && 'font-italic'"
+                        :class="headingClass"
                         h2
                         inline
                         size="sm">
@@ -146,6 +154,11 @@ async function updatePanelView(panel: Panel) {
                         </span>
                         <span v-else>{{ toolPanelHeader }}</span>
                     </Heading>
+                    <FontAwesomeIcon
+                        v-if="showPanelIcon && isFavoritesView"
+                        class="ml-1"
+                        :icon="panelIcon"
+                        data-description="panel view header icon" />
                 </div>
                 <div class="panel-header-buttons">
                     <FontAwesomeIcon :icon="faCaretDown" />
diff --git a/client/src/components/Panels/Menus/PanelViewMenuItem.vue b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
index 5a552e7efb2..1b58cfe51dd 100644
--- a/client/src/components/Panels/Menus/PanelViewMenuItem.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
@@ -6,6 +6,7 @@ import { computed } from "vue";
 
 import type { Panel } from "@/stores/toolStore";
 
+import { MY_PANEL_VIEW_ID, MY_PANEL_VIEW_NAME } from "../panelViews";
 import { types_to_icons } from "../utilities";
 
 const props = defineProps<{
@@ -17,6 +18,13 @@ const emit = defineEmits<{
     (e: "onSelect", panelView: Panel): void;
 }>();
 
+const isFavoritesView = computed(() => props.panelView.view_type === "favorites");
+const isMyToolsView = computed(() => props.panelView.id === MY_PANEL_VIEW_ID);
+const showPanelIcon = computed(() => !isMyToolsView.value || props.currentPanelView === props.panelView.id);
+const panelViewName = computed(() =>
+    props.panelView.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : props.panelView.name,
+);
+
 const icon = computed(() => {
     const viewType = props.panelView.view_type;
     if (props.currentPanelView === props.panelView.id) {
@@ -34,7 +42,18 @@ const icon = computed(() => {
         :data-panel-id="panelView.id"
         :active="props.currentPanelView === props.panelView.id"
         @click="emit('onSelect', props.panelView)">
-        <FontAwesomeIcon :icon="icon" data-description="panel view item icon" fixed-width />
-        <span v-localize>{{ props.panelView.name }}</span>
+        <FontAwesomeIcon
+            v-if="showPanelIcon && !isFavoritesView"
+            :icon="icon"
+            class="mr-1"
+            data-description="panel view item icon"
+            fixed-width />
+        <span v-localize>{{ panelViewName }}</span>
+        <FontAwesomeIcon
+            v-if="showPanelIcon && isFavoritesView"
+            :icon="icon"
+            class="ml-1"
+            data-description="panel view item icon"
+            fixed-width />
     </BDropdownItem>
 </template>
diff --git a/client/src/components/Panels/ToolPanel.test.ts b/client/src/components/Panels/ToolPanel.test.ts
index cf2b0dcf196..87769cd6155 100644
--- a/client/src/components/Panels/ToolPanel.test.ts
+++ b/client/src/components/Panels/ToolPanel.test.ts
@@ -171,7 +171,11 @@ describe("ToolPanel", () => {
                 // Test: check if the panel header now has an icon and a changed name
                 const currentViewType = value.view_type as keyof typeof types_to_icons;
                 const panelViewIcon = wrapper.find("[data-description='panel view header icon']");
-                expect(panelViewIcon.attributes("data-icon")).toEqual(types_to_icons[currentViewType].iconName);
+                if (key === "my_panel") {
+                    expect(panelViewIcon.exists()).toBe(false);
+                } else {
+                    expect(panelViewIcon.attributes("data-icon")).toEqual(types_to_icons[currentViewType].iconName);
+                }
                 expect(wrapper.find("#toolbox-heading").text()).toBe(value!.name);
             } else {
                 // Test: check if the default panel view is already selected, and no icon
@@ -220,4 +224,12 @@ describe("ToolPanel", () => {
 
         expect(wrapper.find('[data-description="Discover Tools button"]').exists()).toBe(false);
     });
+
+    it("shows the tools count on the discover tools button", async () => {
+        const wrapper = await createWrapper();
+        const count = toolsList.length;
+        const formatted = count < 1000 ? `${count}` : `${Math.floor(count / 1000)}k+`;
+        const discoverButton = wrapper.find('[data-description="toolbox discover tools"]');
+        expect(discoverButton.text()).toBe(`Discover ${formatted} Tools`);
+    });
 });
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 0253b501ebb..9fd6d7881a1 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -5,6 +5,7 @@ import { computed, ref, watch } from "vue";
 
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
+import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import LoadingSpan from "../LoadingSpan.vue";
@@ -26,12 +27,25 @@ const emit = defineEmits<{
     (e: "onInsertTool", toolId: string, toolName: string): void;
 }>();
 
-const { currentPanelView, currentToolSections, isPanelPopulated, toolSections } = storeToRefs(toolStore);
+const { currentPanelView, currentToolSections, isPanelPopulated, toolSections, toolsById } = storeToRefs(toolStore);
 const isMyPanel = computed(() => currentPanelView.value === MY_PANEL_VIEW_ID);
 
 const errorMessage = ref("");
 const panelsFetched = ref(false);
 const showFavorites = ref(false);
+const toolsCount = computed(() => Object.keys(toolsById.value || {}).length);
+
+function formatToolsCount(count: number) {
+    if (count < 1000) {
+        return `${count}`;
+    }
+    const thousands = Math.floor(count / 1000);
+    return `${thousands}k+`;
+}
+
+const discoverToolsLabel = computed(() => {
+    return `${localize("Discover")} ${formatToolsCount(toolsCount.value)} ${localize("Tools")}`;
+});
 
 async function initializePanel() {
     try {
@@ -74,7 +88,7 @@ initializePanel();
         title="Tools"
         aria-labelledby="toolbox-heading"
         class="toolbox-panel"
-        go-to-all-title="Discover Tools"
+        :go-to-all-title="discoverToolsLabel"
         go-to-all-data-description="toolbox discover tools"
         :href="!props.workflow ? `/tools/list` : undefined">
         <template v-slot:activity-panel-header-top>
diff --git a/client/src/components/Panels/panelViews.ts b/client/src/components/Panels/panelViews.ts
index bc47fdc84ad..50aaa0fa720 100644
--- a/client/src/components/Panels/panelViews.ts
+++ b/client/src/components/Panels/panelViews.ts
@@ -1,4 +1,4 @@
 export const MY_PANEL_VIEW_ID = "my_panel";
-export const MY_PANEL_VIEW_NAME = "My panel";
+export const MY_PANEL_VIEW_NAME = "My Tools";
 export const MY_PANEL_VIEW_DESCRIPTION = "Search all tools and view your favorite tools.";
 export const MY_PANEL_VIEW_TYPE = "favorites";
diff --git a/client/src/components/Panels/testData/viewsList.json b/client/src/components/Panels/testData/viewsList.json
index 585d2306d50..a2ea5cc4cd8 100644
--- a/client/src/components/Panels/testData/viewsList.json
+++ b/client/src/components/Panels/testData/viewsList.json
@@ -74,7 +74,7 @@
     "my_panel": {
         "id": "my_panel",
         "model_class": "StaticToolPanelView",
-        "name": "My panel",
+        "name": "My Tools",
         "description": "Search all tools and view your favorite tools.",
         "view_type": "favorites",
         "searchable": true
diff --git a/client/src/style/scss/unsorted.scss b/client/src/style/scss/unsorted.scss
index 6cf3ac8a5c6..d192df8cb9c 100644
--- a/client/src/style/scss/unsorted.scss
+++ b/client/src/style/scss/unsorted.scss
@@ -687,13 +687,13 @@ div.permissionContainer {
     min-height: 100%;
 }
 
-div.toolSectionTitle {
+div.toolSectionTitle:not(.tool-panel-divider) {
     font-weight: 500;
     font-size: $h4-font-size;
 }
 
 div.toolTitle,
-div.toolSectionTitle {
+div.toolSectionTitle:not(.tool-panel-divider) {
     display: block;
     .labels {
         float: right;
@@ -714,6 +714,62 @@ div.toolSectionTitle {
     }
 }
 
+.tool-panel-divider {
+    align-items: center;
+    background: transparent;
+    border-left: 0;
+    display: flex;
+    gap: 0.5rem;
+    font-size: $font-size-base;
+    font-weight: 600;
+    padding: 0.375rem 0.75rem;
+    text-transform: none;
+
+    &::before,
+    &::after {
+        border-bottom: 1px solid currentColor;
+        content: "";
+        flex: 1;
+        opacity: 0.35;
+    }
+}
+
+.tool-panel-divider-text {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.tool-panel-divider-toggle {
+    opacity: 0.8;
+}
+
+.tool-panel-divider-icon {
+    opacity: 0.8;
+}
+
+.tool-panel-divider-action {
+    margin-left: 0;
+}
+
+.tool-panel-divider-link {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: 0.5rem;
+    justify-content: center;
+    padding: 0;
+    text-decoration: none;
+}
+
+.tool-panel-divider .title-link,
+.tool-panel-divider .title-link:hover,
+.tool-panel-divider .title-link:focus,
+.tool-panel-divider .title-link:focus-visible {
+    background: transparent;
+}
+
 // ==== Integrated tool form styles
 
 .toolMenuAndView .toolForm {

From 549b77d165e34333bf34ff1be9f6cde19b4a9ac6 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:01:43 +0100
Subject: [PATCH 06/30] Fix imports and formatting

---
 client/src/components/Panels/Common/Tool.vue  |  5 ++---
 .../Panels/Common/ToolPanelLabel.vue          |  4 +---
 .../components/Panels/Common/ToolSection.vue  |  6 +-----
 .../components/Panels/Menus/PanelViewMenu.vue | 11 ++++------
 .../components/Panels/ToolBoxSearch.test.js   | 20 +++++++++----------
 client/src/components/Panels/ToolPanel.vue    |  3 ++-
 client/src/stores/toolStore.ts                |  8 ++------
 7 files changed, 22 insertions(+), 35 deletions(-)

diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 6e79cb8a8e2..3e3a1b5553a 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -30,18 +30,17 @@
         </a>
         <ToolFavoriteButton
             v-if="showFavoriteAction"
+            :id="tool.id"
             :class="['tool-favorite-button', { 'tool-favorite-button-hover': showFavoriteOnHover }]"
             :data-tool-id="tool.id"
-            :id="tool.id"
             color="grey" />
     </div>
 </template>
 
 <script>
 import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-import { computed } from "vue";
 import { storeToRefs } from "pinia";
+import Vue, { computed } from "vue";
 
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 74d58218f33..4268bc4c369 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -26,9 +26,7 @@ const collapsibleLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL
 const description = computed(() => props.definition.description || undefined);
 const isFavoritesDivider = computed(() => favoritesLabelIds.has(props.definition.id));
 const isRecentLabel = computed(() => props.definition.id === RECENT_TOOLS_LABEL_ID);
-const isCollapsible = computed(
-    () => collapsibleLabelIds.has(props.definition.id) && props.collapsed !== undefined,
-);
+const isCollapsible = computed(() => collapsibleLabelIds.has(props.definition.id) && props.collapsed !== undefined);
 const isCollapsed = computed(() => props.collapsed ?? false);
 const toggleIcon = computed(() => (isCollapsed.value ? faChevronRight : faChevronDown));
 
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 45e761105a3..07888017dd6 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -167,11 +167,7 @@ function toggleMenu(nextState = !opened.value) {
     <div v-if="isSection && hasElements" class="tool-panel-section">
         <div
             v-b-tooltip.topright.hover.noninteractive
-            :class="[
-                'toolSectionTitle',
-                `tool-menu-section-${sectionName}`,
-                'tool-panel-divider',
-            ]"
+            :class="['toolSectionTitle', `tool-menu-section-${sectionName}`, 'tool-panel-divider']"
             :title="title">
             <a
                 class="title-link tool-panel-divider-link"
diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index 6e5899ef1be..afb2a4ce9ec 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -71,7 +71,9 @@ const toolPanelHeader = computed(() => {
     }
 });
 
-const headingClass = computed(() => (currentPanelView.value !== "default" && !isMyToolsView.value ? "font-italic" : ""));
+const headingClass = computed(() =>
+    currentPanelView.value !== "default" && !isMyToolsView.value ? "font-italic" : "",
+);
 const showPanelIcon = computed(() => !!panelIcon.value && !loading.value && !isMyToolsView.value);
 
 const groupedPanelViews = computed(() => {
@@ -143,12 +145,7 @@ async function updatePanelView(panel: Panel) {
                         class="mr-1"
                         :icon="panelIcon"
                         data-description="panel view header icon" />
-                    <Heading
-                        id="toolbox-heading"
-                        :class="headingClass"
-                        h2
-                        inline
-                        size="sm">
+                    <Heading id="toolbox-heading" :class="headingClass" h2 inline size="sm">
                         <span v-if="loading && panelName">
                             <LoadingSpan :message="toolPanelHeader" />
                         </span>
diff --git a/client/src/components/Panels/ToolBoxSearch.test.js b/client/src/components/Panels/ToolBoxSearch.test.js
index a35f72cbdfc..69af086ecd7 100644
--- a/client/src/components/Panels/ToolBoxSearch.test.js
+++ b/client/src/components/Panels/ToolBoxSearch.test.js
@@ -4,11 +4,11 @@ import flushPromises from "flush-promises";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import toolsList from "@/components/ToolsView/testData/toolsList.json";
+import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel.json";
 import { setMockConfig } from "@/composables/__mocks__/config";
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
-import toolsList from "@/components/ToolsView/testData/toolsList.json";
-import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel.json";
 
 import ToolBox from "./ToolBox.vue";
 
@@ -142,17 +142,17 @@ describe("ToolBox search", () => {
         const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
         expect(labels).toEqual(["Favorites", "Search results"]);
 
-        const toolIds = wrapper.findAll('a[data-tool-id]').wrappers.map((item) => item.attributes("data-tool-id"));
+        const toolIds = wrapper.findAll("a[data-tool-id]").wrappers.map((item) => item.attributes("data-tool-id"));
         expect(toolIds).toEqual(["__FILTER_FAILED_DATASETS__", "__FILTER_EMPTY_DATASETS__"]);
 
         expect(wrapper.find('.tool-favorite-button[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(true);
-        expect(
-            wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists(),
-        ).toBe(false);
+        expect(wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(
+            false,
+        );
         expect(wrapper.find('.tool-favorite-button[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(true);
-        expect(
-            wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists(),
-        ).toBe(true);
+        expect(wrapper.find('.tool-favorite-button-hover[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(
+            true,
+        );
     });
 
     it("collapses favorite results during search in My panel", async () => {
@@ -228,7 +228,7 @@ describe("ToolBox search", () => {
         const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
         expect(labels).toEqual(["Favorites", "Recent tools"]);
 
-        const toolIds = wrapper.findAll('a[data-tool-id]').wrappers.map((item) => item.attributes("data-tool-id"));
+        const toolIds = wrapper.findAll("a[data-tool-id]").wrappers.map((item) => item.attributes("data-tool-id"));
         expect(toolIds).toEqual(["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__"]);
         expect(wrapper.find('.tool-favorite-button[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
 
diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 9fd6d7881a1..c274dee37e9 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -8,11 +8,12 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import { MY_PANEL_VIEW_ID } from "./panelViews";
+
 import LoadingSpan from "../LoadingSpan.vue";
 import ActivityPanel from "./ActivityPanel.vue";
 import FavoritesButton from "./Buttons/FavoritesButton.vue";
 import PanelViewMenu from "./Menus/PanelViewMenu.vue";
-import { MY_PANEL_VIEW_ID } from "./panelViews";
 import ToolBox from "./ToolBox.vue";
 
 const toolStore = useToolStore();
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index b4369921c98..e4a922d39b3 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -6,13 +6,13 @@ import axios, { type AxiosResponse } from "axios";
 import { defineStore } from "pinia";
 import Vue, { computed, type Ref, ref, shallowRef } from "vue";
 
-import { FAVORITES_KEYS, filterTools, type types_to_icons } from "@/components/Panels/utilities";
 import {
     MY_PANEL_VIEW_DESCRIPTION,
     MY_PANEL_VIEW_ID,
     MY_PANEL_VIEW_NAME,
     MY_PANEL_VIEW_TYPE,
 } from "@/components/Panels/panelViews";
+import { FAVORITES_KEYS, filterTools, type types_to_icons } from "@/components/Panels/utilities";
 import { parseHelpForSummary } from "@/components/ToolsList/utilities";
 import { useUserLocalStorage } from "@/composables/userLocalStorage";
 import { getAppRoot } from "@/onload/loadConfig";
@@ -336,11 +336,7 @@ export const useToolStore = defineStore("toolStore", () => {
 
     async function setPanel(panelView: string) {
         try {
-            if (
-                panelView === MY_PANEL_VIEW_ID &&
-                defaultPanelView.value &&
-                panelView !== defaultPanelView.value
-            ) {
+            if (panelView === MY_PANEL_VIEW_ID && defaultPanelView.value && panelView !== defaultPanelView.value) {
                 await fetchToolSections(defaultPanelView.value);
             }
             await fetchToolSections(panelView);

From 0b9529a6d0d5e355b71e34f3c4f6366ff5a573cc Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:57:12 +0100
Subject: [PATCH 07/30] Moves tool panel divider styles to dedicated SCSS file

Improves maintainability by relocating tool panel divider styles from a general stylesheet to a separate, imported SCSS file.
Facilitates easier updates and, once we agree on a style, we could reuse it in the full tools panel.
---
 .../Panels/Common/ToolPanelLabel.vue          |  3 +
 .../src/style/scss/_tool-panel-divider.scss   | 61 +++++++++++++++++++
 client/src/style/scss/unsorted.scss           | 60 +-----------------
 3 files changed, 66 insertions(+), 58 deletions(-)
 create mode 100644 client/src/style/scss/_tool-panel-divider.scss

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 4268bc4c369..df7414d7c41 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -87,6 +87,9 @@ function onKeydown(event: KeyboardEvent) {
 </template>
 
 <style scoped lang="scss">
+@import "@/style/scss/theme/blue.scss";
+@import "@/style/scss/tool-panel-divider.scss";
+
 .tool-panel-label {
     &:deep(.tool-panel-links) {
         display: none;
diff --git a/client/src/style/scss/_tool-panel-divider.scss b/client/src/style/scss/_tool-panel-divider.scss
new file mode 100644
index 00000000000..22c374d77ea
--- /dev/null
+++ b/client/src/style/scss/_tool-panel-divider.scss
@@ -0,0 +1,61 @@
+/**
+* Styles for tool panel dividers used in tool panel labels.
+* These styles are used for dividers in the new "My Tools" panel, but they
+* can also be used in the "Full Tools" panel for consistency once the new panel is stable.
+*/
+
+.tool-panel-divider {
+    align-items: center;
+    background: transparent;
+    border-left: 0;
+    display: flex;
+    gap: 0.5rem;
+    font-size: $font-size-base;
+    font-weight: 600;
+    padding: 0.375rem 0.75rem;
+    text-transform: none;
+
+    &::before,
+    &::after {
+        border-bottom: 1px solid currentColor;
+        content: "";
+        flex: 1;
+        opacity: 0.35;
+    }
+}
+
+.tool-panel-divider-text {
+    align-items: center;
+    display: inline-flex;
+    gap: 0.5rem;
+    white-space: nowrap;
+}
+
+.tool-panel-divider-toggle {
+    opacity: 0.8;
+}
+
+.tool-panel-divider-icon {
+    opacity: 0.8;
+}
+
+.tool-panel-divider-action {
+    margin-left: 0;
+}
+
+.tool-panel-divider-link {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: 0.5rem;
+    justify-content: center;
+    padding: 0;
+    text-decoration: none;
+}
+
+.tool-panel-divider .title-link,
+.tool-panel-divider .title-link:hover,
+.tool-panel-divider .title-link:focus,
+.tool-panel-divider .title-link:focus-visible {
+    background: transparent;
+}
diff --git a/client/src/style/scss/unsorted.scss b/client/src/style/scss/unsorted.scss
index d192df8cb9c..6cf3ac8a5c6 100644
--- a/client/src/style/scss/unsorted.scss
+++ b/client/src/style/scss/unsorted.scss
@@ -687,13 +687,13 @@ div.permissionContainer {
     min-height: 100%;
 }
 
-div.toolSectionTitle:not(.tool-panel-divider) {
+div.toolSectionTitle {
     font-weight: 500;
     font-size: $h4-font-size;
 }
 
 div.toolTitle,
-div.toolSectionTitle:not(.tool-panel-divider) {
+div.toolSectionTitle {
     display: block;
     .labels {
         float: right;
@@ -714,62 +714,6 @@ div.toolSectionTitle:not(.tool-panel-divider) {
     }
 }
 
-.tool-panel-divider {
-    align-items: center;
-    background: transparent;
-    border-left: 0;
-    display: flex;
-    gap: 0.5rem;
-    font-size: $font-size-base;
-    font-weight: 600;
-    padding: 0.375rem 0.75rem;
-    text-transform: none;
-
-    &::before,
-    &::after {
-        border-bottom: 1px solid currentColor;
-        content: "";
-        flex: 1;
-        opacity: 0.35;
-    }
-}
-
-.tool-panel-divider-text {
-    align-items: center;
-    display: inline-flex;
-    gap: 0.5rem;
-    white-space: nowrap;
-}
-
-.tool-panel-divider-toggle {
-    opacity: 0.8;
-}
-
-.tool-panel-divider-icon {
-    opacity: 0.8;
-}
-
-.tool-panel-divider-action {
-    margin-left: 0;
-}
-
-.tool-panel-divider-link {
-    align-items: center;
-    display: inline-flex;
-    flex: 0 0 auto;
-    gap: 0.5rem;
-    justify-content: center;
-    padding: 0;
-    text-decoration: none;
-}
-
-.tool-panel-divider .title-link,
-.tool-panel-divider .title-link:hover,
-.tool-panel-divider .title-link:focus,
-.tool-panel-divider .title-link:focus-visible {
-    background: transparent;
-}
-
 // ==== Integrated tool form styles
 
 .toolMenuAndView .toolForm {

From 3604226d73d7d742e6d6365b58e7c5a5bab8f7cd Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:59:20 +0100
Subject: [PATCH 08/30] Improves accessibility for non-collapsible panel labels

---
 client/src/components/Panels/Common/ToolPanelLabel.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index df7414d7c41..9741f2a8e04 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -53,12 +53,11 @@ function onKeydown(event: KeyboardEvent) {
     <div
         v-b-tooltip.topright.hover.noninteractive
         :class="['tool-panel-label', 'tool-panel-divider', { 'tool-panel-label-clickable': isCollapsible }]"
-        tabindex="0"
+        :tabindex="isCollapsible ? 0 : undefined"
         :title="description"
         :role="isCollapsible ? 'button' : undefined"
         :aria-expanded="isCollapsible ? !isCollapsed : undefined"
-        @click="onToggle"
-        @keydown="onKeydown">
+        v-on="isCollapsible ? { click: onToggle, keydown: onKeydown } : {}">
         <span class="tool-panel-label-divider-text tool-panel-divider-text">
             <FontAwesomeIcon
                 v-if="isCollapsible"

From 0259915307ee586de6d258199b7b55da73d8156d Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:22:52 +0100
Subject: [PATCH 09/30] Simplifies and unifies panel view menu item rendering

Consolidates conditional logic for menu item display, removes special cases for favorites and personal views, and standardizes icon rendering.
---
 .../Panels/Menus/PanelViewMenuItem.vue        | 34 ++++---------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Panels/Menus/PanelViewMenuItem.vue b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
index 1b58cfe51dd..87e51f71ad1 100644
--- a/client/src/components/Panels/Menus/PanelViewMenuItem.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
@@ -6,7 +6,6 @@ import { computed } from "vue";
 
 import type { Panel } from "@/stores/toolStore";
 
-import { MY_PANEL_VIEW_ID, MY_PANEL_VIEW_NAME } from "../panelViews";
 import { types_to_icons } from "../utilities";
 
 const props = defineProps<{
@@ -18,21 +17,12 @@ const emit = defineEmits<{
     (e: "onSelect", panelView: Panel): void;
 }>();
 
-const isFavoritesView = computed(() => props.panelView.view_type === "favorites");
-const isMyToolsView = computed(() => props.panelView.id === MY_PANEL_VIEW_ID);
-const showPanelIcon = computed(() => !isMyToolsView.value || props.currentPanelView === props.panelView.id);
-const panelViewName = computed(() =>
-    props.panelView.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : props.panelView.name,
-);
-
 const icon = computed(() => {
     const viewType = props.panelView.view_type;
-    if (props.currentPanelView === props.panelView.id) {
-        return faCheck;
-    } else {
-        return types_to_icons[viewType] || faEye;
-    }
+    return types_to_icons[viewType] || faEye;
 });
+
+const isSelected = computed(() => props.currentPanelView === props.panelView.id);
 </script>
 
 <template>
@@ -40,20 +30,10 @@ const icon = computed(() => {
         class="ml-1"
         :title="props.panelView.description"
         :data-panel-id="panelView.id"
-        :active="props.currentPanelView === props.panelView.id"
+        :active="isSelected"
         @click="emit('onSelect', props.panelView)">
-        <FontAwesomeIcon
-            v-if="showPanelIcon && !isFavoritesView"
-            :icon="icon"
-            class="mr-1"
-            data-description="panel view item icon"
-            fixed-width />
-        <span v-localize>{{ panelViewName }}</span>
-        <FontAwesomeIcon
-            v-if="showPanelIcon && isFavoritesView"
-            :icon="icon"
-            class="ml-1"
-            data-description="panel view item icon"
-            fixed-width />
+        <FontAwesomeIcon :icon="icon" class="mr-1" fixed-width />
+        <span v-localize>{{ panelView.name }}</span>
+        <FontAwesomeIcon v-if="isSelected" :icon="faCheck" class="ml-1" fixed-width />
     </BDropdownItem>
 </template>

From a7be2f9f25a7bd7ea4787e42290e7a79790892f4 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:32:37 +0100
Subject: [PATCH 10/30] Simplifies panel view menu logic and removes
 redundancies

Removes special handling for "My Tools" panel view to streamline
logic and reduce unnecessary conditionals. Unifies name display and
panel icon conditions, making the component easier to maintain.
---
 .../components/Panels/Menus/PanelViewMenu.vue    | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index afb2a4ce9ec..6754f8f9bff 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -9,7 +9,6 @@ import { computed, ref } from "vue";
 import { type Panel, useToolStore } from "@/stores/toolStore";
 import localize from "@/utils/localization";
 
-import { MY_PANEL_VIEW_ID, MY_PANEL_VIEW_NAME } from "../panelViews";
 import { types_to_icons } from "../utilities";
 
 import PanelViewMenuItem from "./PanelViewMenuItem.vue";
@@ -39,7 +38,6 @@ const panelName = ref("");
 const defaultPanelView = computed(() => panels.value["default"] || Object.values(panels.value)[0]);
 const currentPanel = computed(() => panels.value[currentPanelView.value]);
 const isFavoritesView = computed(() => currentPanel.value?.view_type === "favorites");
-const isMyToolsView = computed(() => currentPanelView.value === MY_PANEL_VIEW_ID);
 
 const panelIcon = computed<IconDefinition | null>(() => {
     if (
@@ -64,17 +62,16 @@ const toolPanelHeader = computed(() => {
     if (loading.value && panelName.value) {
         return localize(panelName.value);
     } else if (currentPanelView.value !== "default" && panels.value && currentPanel.value?.name) {
-        const name = currentPanel.value.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : currentPanel.value.name;
-        return localize(name);
+        return localize(currentPanel.value.name);
     } else {
         return localize("Tools");
     }
 });
 
 const headingClass = computed(() =>
-    currentPanelView.value !== "default" && !isMyToolsView.value ? "font-italic" : "",
+    currentPanelView.value !== "default" && !isFavoritesView.value ? "font-italic" : "",
 );
-const showPanelIcon = computed(() => !!panelIcon.value && !loading.value && !isMyToolsView.value);
+const showPanelIcon = computed(() => !!panelIcon.value && !loading.value);
 
 const groupedPanelViews = computed(() => {
     const groups = [];
@@ -115,7 +112,7 @@ function panelViewsOfType(panelViewType: string) {
 }
 
 async function updatePanelView(panel: Panel) {
-    panelName.value = panel.id === MY_PANEL_VIEW_ID ? MY_PANEL_VIEW_NAME : panel.name || "";
+    panelName.value = panel.name || "";
     await toolStore.setPanel(panel.id);
     panelName.value = "";
 }
@@ -151,11 +148,6 @@ async function updatePanelView(panel: Panel) {
                         </span>
                         <span v-else>{{ toolPanelHeader }}</span>
                     </Heading>
-                    <FontAwesomeIcon
-                        v-if="showPanelIcon && isFavoritesView"
-                        class="ml-1"
-                        :icon="panelIcon"
-                        data-description="panel view header icon" />
                 </div>
                 <div class="panel-header-buttons">
                     <FontAwesomeIcon :icon="faCaretDown" />

From 3cbcb24e40e571cac487342fd8fbd30482366665 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 17:20:22 +0100
Subject: [PATCH 11/30] Refactors tool panel to modularize favorites logic

---
 .../Panels/Common/ToolPanelLabel.vue          |  15 +-
 client/src/components/Panels/ToolBox.vue      | 176 +++++++-----------
 client/src/components/Panels/panelViews.ts    |  10 +
 client/src/components/Panels/utilities.ts     |  44 +++++
 client/src/composables/toolPanelFavorites.ts  |  76 ++++++++
 5 files changed, 204 insertions(+), 117 deletions(-)
 create mode 100644 client/src/composables/toolPanelFavorites.ts

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 9741f2a8e04..a26f32aeb18 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -6,6 +6,8 @@ import { computed } from "vue";
 import type { ToolSectionLabel } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 
+import { PANEL_LABEL_IDS } from "../panelViews";
+
 import ToolPanelLinks from "./ToolPanelLinks.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
@@ -18,14 +20,15 @@ const emit = defineEmits<{
     (e: "toggle", labelId: string): void;
 }>();
 
-const FAVORITES_RESULTS_LABEL_ID = "favorites_results_label";
-const FAVORITES_LABEL_ID = "favorites_label";
-const RECENT_TOOLS_LABEL_ID = "recent_tools_label";
-const favoritesLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID]);
-const collapsibleLabelIds = new Set([FAVORITES_RESULTS_LABEL_ID, FAVORITES_LABEL_ID, RECENT_TOOLS_LABEL_ID]);
+const favoritesLabelIds = new Set<string>([PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL, PANEL_LABEL_IDS.FAVORITES_LABEL]);
+const collapsibleLabelIds = new Set<string>([
+    PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL,
+    PANEL_LABEL_IDS.FAVORITES_LABEL,
+    PANEL_LABEL_IDS.RECENT_TOOLS_LABEL,
+]);
 const description = computed(() => props.definition.description || undefined);
 const isFavoritesDivider = computed(() => favoritesLabelIds.has(props.definition.id));
-const isRecentLabel = computed(() => props.definition.id === RECENT_TOOLS_LABEL_ID);
+const isRecentLabel = computed(() => props.definition.id === PANEL_LABEL_IDS.RECENT_TOOLS_LABEL);
 const isCollapsible = computed(() => collapsibleLabelIds.has(props.definition.id) && props.collapsed !== undefined);
 const isCollapsed = computed(() => props.collapsed ?? false);
 const toggleIcon = computed(() => (isCollapsed.value ? faChevronRight : faChevronDown));
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index fe96503d50d..77149361ae3 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -7,13 +7,18 @@ import { computed, type ComputedRef, type Ref, ref, watch } from "vue";
 
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
+import { useFavoriteSearchResults, useToolPanelFavorites } from "@/composables/toolPanelFavorites";
 import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
-import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
+import { PANEL_LABEL_IDS } from "./panelViews";
 import {
+    buildToolEntries,
+    buildToolLabel,
+    buildToolSection,
     FAVORITES_KEYS,
+    filterPanelByToolIds,
     filterTools,
     getValidPanelItems,
     getValidToolsInCurrentView,
@@ -56,7 +61,6 @@ const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null
 const closestTerm: Ref<string | null> = ref(null);
 
 const toolStore = useToolStore();
-const { currentFavorites, recentTools } = storeToRefs(useUserStore());
 
 const { currentPanelView, currentToolSections, defaultPanelView, toolSections } = storeToRefs(toolStore);
 const hasResults = computed(() => results.value.length > 0);
@@ -123,73 +127,25 @@ const localSectionsById = computed(() => {
     ) as Record<string, Tool | ToolSectionType>;
 });
 
-const ALL_TOOLS_SECTION_ID = "all_tools";
-
 type PanelItem = Tool | ToolSectionType | ToolSectionLabel;
 
-const favoriteToolIds = computed(() => currentFavorites.value.tools || []);
-const favoriteToolIdSet = computed(() => new Set(favoriteToolIds.value));
-const favoriteToolIdsInPanel = computed(() =>
-    favoriteToolIds.value.filter((toolId) => !!localToolsById.value[toolId]),
-);
-const recentToolIds = computed(() => recentTools.value || []);
-const recentToolIdsInPanel = computed(() => recentToolIds.value.filter((toolId) => !!localToolsById.value[toolId]));
-const recentToolIdsToShow = computed(() =>
-    recentToolIdsInPanel.value.filter((toolId) => !favoriteToolIdSet.value.has(toolId)),
-);
-const recentToolIdsToShowSet = computed(() => new Set(recentToolIdsToShow.value));
-const favoriteResults = computed(() => results.value.filter((id) => favoriteToolIdSet.value.has(id)));
-const nonFavoriteResults = computed(() => results.value.filter((id) => !favoriteToolIdSet.value.has(id)));
-const hasMixedResults = computed(() => favoriteResults.value.length > 0 && nonFavoriteResults.value.length > 0);
+// Use composable for favorites and recent tools management
+const {
+    favoritesCollapsed,
+    recentToolsCollapsed,
+    favoriteToolIds,
+    favoriteToolIdSet,
+    favoriteToolIdsInPanel,
+    recentToolIdsToShow,
+    recentToolIdsToShowSet,
+} = useToolPanelFavorites(localToolsById);
+
+// Use composable for search results filtering
+const { favoriteResults, nonFavoriteResults, hasMixedResults } = useFavoriteSearchResults(results, favoriteToolIdSet);
 
 const toolsListRoute = "/tools/list";
 const toolsCount = computed(() => toolsList.value.length);
-const showEmptyFavorites = computed(
-    () => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0,
-);
-
-const FAVORITES_RESULTS_SECTION_ID = "favorites_results";
-const FAVORITES_RESULTS_LABEL_ID = "favorites_results_label";
-const SEARCH_RESULTS_LABEL_ID = "search_results_label";
-const FAVORITES_LABEL_ID = "favorites_label";
-const RECENT_TOOLS_LABEL_ID = "recent_tools_label";
-const FAVORITES_EMPTY_ALERT_ID = "favorites_empty_alert";
-
-const favoritesCollapsed = ref(false);
-const recentToolsCollapsed = ref(false);
-
-function buildToolSection(id: string, name: string, tools: string[]): ToolSectionType {
-    return {
-        model_class: "ToolSection",
-        id,
-        name,
-        tools,
-    };
-}
-
-function buildToolLabel(id: string, text: string): ToolSectionLabel {
-    return {
-        model_class: "ToolSectionLabel",
-        id,
-        text,
-    };
-}
-
-function filterPanelByToolIds(panel: Record<string, Tool | ToolSectionType>, toolIds: Set<string>) {
-    const filtered: Record<string, Tool | ToolSectionType> = {};
-    for (const [key, item] of Object.entries(panel)) {
-        const section = item as ToolSectionType;
-        if (section.tools) {
-            const tools = section.tools.filter((toolId) => typeof toolId === "string" && toolIds.has(toolId));
-            if (tools.length > 0) {
-                filtered[key] = { ...section, tools };
-            }
-        } else if ((item as Tool).id && toolIds.has((item as Tool).id)) {
-            filtered[key] = item;
-        }
-    }
-    return filtered;
-}
+const showEmptyFavorites = computed(() => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0);
 
 const defaultSectionsById = computed(() => {
     if (!defaultPanelView.value) {
@@ -212,9 +168,9 @@ const resultsSet = computed(() => new Set(results.value));
 const nonFavoriteResultsSet = computed(() => new Set(nonFavoriteResults.value));
 const allToolsPanel = computed(() => {
     return {
-        [ALL_TOOLS_SECTION_ID]: {
+        [PANEL_LABEL_IDS.ALL_TOOLS_SECTION]: {
             model_class: "ToolSection",
-            id: ALL_TOOLS_SECTION_ID,
+            id: PANEL_LABEL_IDS.ALL_TOOLS_SECTION,
             name: localize("All tools"),
             tools: Object.keys(localToolsById.value),
         },
@@ -237,22 +193,18 @@ const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
         return filterTools(localToolsById.value, results.value) as Record<string, PanelItem>;
     }
     const entries: Array<[string, PanelItem]> = [];
-    entries.push([FAVORITES_RESULTS_LABEL_ID, buildToolLabel(FAVORITES_RESULTS_LABEL_ID, localize("Favorites"))]);
+    entries.push([
+        PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL,
+        buildToolLabel(PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL, localize("Favorites")),
+    ]);
     if (!favoritesCollapsed.value) {
-        for (const toolId of favoriteResults.value) {
-            const tool = localToolsById.value[toolId];
-            if (tool) {
-                entries.push([toolId, tool]);
-            }
-        }
-    }
-    entries.push([SEARCH_RESULTS_LABEL_ID, buildToolLabel(SEARCH_RESULTS_LABEL_ID, localize("Search results"))]);
-    for (const toolId of nonFavoriteResults.value) {
-        const tool = localToolsById.value[toolId];
-        if (tool) {
-            entries.push([toolId, tool]);
-        }
+        entries.push(...buildToolEntries(favoriteResults.value, localToolsById.value));
     }
+    entries.push([
+        PANEL_LABEL_IDS.SEARCH_RESULTS_LABEL,
+        buildToolLabel(PANEL_LABEL_IDS.SEARCH_RESULTS_LABEL, localize("Search results")),
+    ]);
+    entries.push(...buildToolEntries(nonFavoriteResults.value, localToolsById.value));
     return Object.fromEntries(entries);
 });
 
@@ -264,28 +216,27 @@ const favoritesDefaultPanel = computed<Record<string, PanelItem> | null>(() => {
     const favorites = favoriteToolIdsInPanel.value;
     const recents = recentToolIdsToShow.value;
 
-    entries.push([FAVORITES_LABEL_ID, buildToolLabel(FAVORITES_LABEL_ID, localize("Favorites"))]);
+    entries.push([
+        PANEL_LABEL_IDS.FAVORITES_LABEL,
+        buildToolLabel(PANEL_LABEL_IDS.FAVORITES_LABEL, localize("Favorites")),
+    ]);
     if (!favoritesCollapsed.value) {
         if (showEmptyFavorites.value) {
-            entries.push([FAVORITES_EMPTY_ALERT_ID, buildToolLabel(FAVORITES_EMPTY_ALERT_ID, "")]);
+            entries.push([
+                PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT,
+                buildToolLabel(PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT, ""),
+            ]);
         } else {
-            for (const toolId of favorites) {
-                const tool = localToolsById.value[toolId];
-                if (tool) {
-                    entries.push([toolId, tool]);
-                }
-            }
+            entries.push(...buildToolEntries(favorites, localToolsById.value));
         }
     }
     if (recents.length > 0) {
-        entries.push([RECENT_TOOLS_LABEL_ID, buildToolLabel(RECENT_TOOLS_LABEL_ID, localize("Recent tools"))]);
+        entries.push([
+            PANEL_LABEL_IDS.RECENT_TOOLS_LABEL,
+            buildToolLabel(PANEL_LABEL_IDS.RECENT_TOOLS_LABEL, localize("Recent tools")),
+        ]);
         if (!recentToolsCollapsed.value) {
-            for (const toolId of recents) {
-                const tool = localToolsById.value[toolId];
-                if (tool) {
-                    entries.push([toolId, tool]);
-                }
-            }
+            entries.push(...buildToolEntries(recents, localToolsById.value));
         }
     }
     return Object.fromEntries(entries);
@@ -307,12 +258,12 @@ const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> |
     }
     const otherResultsPanel = filterPanelByToolIds(basePanel, nonFavoriteResultsSet.value);
     const favoritesSection = buildToolSection(
-        FAVORITES_RESULTS_SECTION_ID,
+        PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION,
         localize("Favorites"),
         favoriteResults.value,
     );
     return {
-        [FAVORITES_RESULTS_SECTION_ID]: favoritesSection,
+        [PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION]: favoritesSection,
         ...otherResultsPanel,
     };
 });
@@ -397,23 +348,24 @@ function onToggle() {
     showSections.value = !showSections.value;
 }
 
-const collapsedLabels = computed(() =>
-    props.favoritesDefault
-        ? {
-              [FAVORITES_LABEL_ID]: favoritesCollapsed.value,
-              [FAVORITES_RESULTS_LABEL_ID]: favoritesCollapsed.value,
-              [RECENT_TOOLS_LABEL_ID]: recentToolsCollapsed.value,
-          }
-        : {},
-);
+const collapsedLabels = computed<Record<string, boolean>>(() => {
+    if (props.favoritesDefault) {
+        return {
+            [PANEL_LABEL_IDS.FAVORITES_LABEL]: favoritesCollapsed.value,
+            [PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL]: favoritesCollapsed.value,
+            [PANEL_LABEL_IDS.RECENT_TOOLS_LABEL]: recentToolsCollapsed.value,
+        };
+    }
+    return {} as Record<string, boolean>;
+});
 
 function onLabelToggle(labelId: string) {
     if (!props.favoritesDefault) {
         return;
     }
-    if (labelId === FAVORITES_LABEL_ID || labelId === FAVORITES_RESULTS_LABEL_ID) {
+    if (labelId === PANEL_LABEL_IDS.FAVORITES_LABEL || labelId === PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL) {
         favoritesCollapsed.value = !favoritesCollapsed.value;
-    } else if (labelId === RECENT_TOOLS_LABEL_ID) {
+    } else if (labelId === PANEL_LABEL_IDS.RECENT_TOOLS_LABEL) {
         recentToolsCollapsed.value = !recentToolsCollapsed.value;
     }
 }
@@ -460,7 +412,7 @@ function onLabelToggle(labelId: string) {
             <div class="toolMenuContainer">
                 <div v-if="localPanel" class="toolMenu">
                     <div v-for="(panel, key) in localPanel" :key="key">
-                        <div v-if="panel?.id === FAVORITES_EMPTY_ALERT_ID" class="tool-panel-empty">
+                        <div v-if="panel?.id === PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT" class="tool-panel-empty">
                             <BAlert variant="info" show>
                                 You haven't favorited any tools yet. Search the toolbox or use
                                 <GButton
@@ -476,10 +428,12 @@ function onLabelToggle(labelId: string) {
                         </div>
                         <ToolSection
                             v-else-if="panel"
-                            :category="panel || {}"
+                            :category="panel"
                             :query-filter="hasResults ? query : undefined"
                             :has-filter-button="
-                                hasResults && currentPanelView === 'default' && panel.id !== FAVORITES_RESULTS_SECTION_ID
+                                hasResults &&
+                                currentPanelView === 'default' &&
+                                panel.id !== PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION
                             "
                             :search-active="hasResults"
                             :show-favorite-button="recentToolIdsToShowSet.has(panel.id)"
diff --git a/client/src/components/Panels/panelViews.ts b/client/src/components/Panels/panelViews.ts
index 50aaa0fa720..d3892a7ee8c 100644
--- a/client/src/components/Panels/panelViews.ts
+++ b/client/src/components/Panels/panelViews.ts
@@ -2,3 +2,13 @@ export const MY_PANEL_VIEW_ID = "my_panel";
 export const MY_PANEL_VIEW_NAME = "My Tools";
 export const MY_PANEL_VIEW_DESCRIPTION = "Search all tools and view your favorite tools.";
 export const MY_PANEL_VIEW_TYPE = "favorites";
+
+export const PANEL_LABEL_IDS = {
+    FAVORITES_RESULTS_SECTION: "favorites_results",
+    FAVORITES_RESULTS_LABEL: "favorites_results_label",
+    SEARCH_RESULTS_LABEL: "search_results_label",
+    FAVORITES_LABEL: "favorites_label",
+    RECENT_TOOLS_LABEL: "recent_tools_label",
+    FAVORITES_EMPTY_ALERT: "favorites_empty_alert",
+    ALL_TOOLS_SECTION: "all_tools",
+} as const;
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 62ccc32ca99..f9d1fd470e1 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -19,6 +19,50 @@ import levenshteinDistance from "@/utils/levenshtein";
 
 export const FAVORITES_KEYS = ["#favs", "#favorites", "#favourites"];
 
+/** Build a ToolSection object */
+export function buildToolSection(id: string, name: string, tools: string[]): ToolSection {
+    return {
+        model_class: "ToolSection",
+        id,
+        name,
+        tools,
+    };
+}
+
+/** Build a ToolSectionLabel object */
+export function buildToolLabel(id: string, text: string): ToolSectionLabel {
+    return {
+        model_class: "ToolSectionLabel",
+        id,
+        text,
+    };
+}
+
+/** Build an array of [toolId, tool] entries from tool IDs and tools by ID map */
+export function buildToolEntries(toolIds: string[], toolsById: Record<string, Tool>): Array<[string, Tool]> {
+    return toolIds.map((id) => [id, toolsById[id]] as [string, Tool]).filter(([, tool]) => tool !== undefined);
+}
+
+/** Filter panel to only include tools matching the provided tool IDs */
+export function filterPanelByToolIds(
+    panel: Record<string, Tool | ToolSection>,
+    toolIds: Set<string>,
+): Record<string, Tool | ToolSection> {
+    const filtered: Record<string, Tool | ToolSection> = {};
+    for (const [key, item] of Object.entries(panel)) {
+        const section = item as ToolSection;
+        if (section.tools) {
+            const tools = section.tools.filter((toolId) => typeof toolId === "string" && toolIds.has(toolId));
+            if (tools.length > 0) {
+                filtered[key] = { ...section, tools };
+            }
+        } else if ((item as Tool).id && toolIds.has((item as Tool).id)) {
+            filtered[key] = item;
+        }
+    }
+    return filtered;
+}
+
 const FILTER_KEYS = {
     id: ["id", "tool_id"],
     panel_section_name: ["section", "panel_section_name"],
diff --git a/client/src/composables/toolPanelFavorites.ts b/client/src/composables/toolPanelFavorites.ts
new file mode 100644
index 00000000000..1993e7adb87
--- /dev/null
+++ b/client/src/composables/toolPanelFavorites.ts
@@ -0,0 +1,76 @@
+import { storeToRefs } from "pinia";
+import { computed, type ComputedRef, type Ref } from "vue";
+
+import type { Tool } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
+
+import { usePersistentToggle } from "./persistentToggle";
+
+/**
+ * Composable for managing favorites and recent tools in the tool panel.
+ * Provides computed properties for favorites/recent tool filtering and persistent collapse state.
+ */
+export function useToolPanelFavorites(localToolsById: Ref<Record<string, Tool>>) {
+    const { currentFavorites, recentTools } = storeToRefs(useUserStore());
+
+    // Collapse state with localStorage persistence (user-specific)
+    const { toggled: favoritesCollapsed, toggle: toggleFavorites } = usePersistentToggle(
+        "tool-panel-favorites-collapsed",
+    );
+    const { toggled: recentToolsCollapsed, toggle: toggleRecent } = usePersistentToggle("tool-panel-recent-collapsed");
+
+    // Derived favorites data
+    const favoriteToolIds = computed(() => currentFavorites.value.tools || []);
+    const favoriteToolIdSet = computed(() => new Set(favoriteToolIds.value));
+    const favoriteToolIdsInPanel = computed(() =>
+        favoriteToolIds.value.filter((toolId) => !!localToolsById.value[toolId]),
+    );
+
+    // Derived recent tools data
+    const recentToolIds = computed(() => recentTools.value || []);
+    const recentToolIdsInPanel = computed(() => recentToolIds.value.filter((toolId) => !!localToolsById.value[toolId]));
+    const recentToolIdsToShow = computed(() =>
+        recentToolIdsInPanel.value.filter((toolId) => !favoriteToolIdSet.value.has(toolId)),
+    );
+    const recentToolIdsToShowSet = computed(() => new Set(recentToolIdsToShow.value));
+
+    return {
+        // Collapse state
+        favoritesCollapsed,
+        recentToolsCollapsed,
+        toggleFavorites,
+        toggleRecent,
+        // Favorites
+        favoriteToolIds,
+        favoriteToolIdSet,
+        favoriteToolIdsInPanel,
+        // Recent tools
+        recentToolIds,
+        recentToolIdsInPanel,
+        recentToolIdsToShow,
+        recentToolIdsToShowSet,
+    };
+}
+
+/**
+ * Composable for computing search results split by favorites vs non-favorites.
+ * Used when displaying search results with favorites prominently.
+ */
+export function useFavoriteSearchResults(
+    results: Ref<string[]>,
+    favoriteToolIdSet: ComputedRef<Set<string>>,
+): {
+    favoriteResults: ComputedRef<string[]>;
+    nonFavoriteResults: ComputedRef<string[]>;
+    hasMixedResults: ComputedRef<boolean>;
+} {
+    const favoriteResults = computed(() => results.value.filter((id) => favoriteToolIdSet.value.has(id)));
+    const nonFavoriteResults = computed(() => results.value.filter((id) => !favoriteToolIdSet.value.has(id)));
+    const hasMixedResults = computed(() => favoriteResults.value.length > 0 && nonFavoriteResults.value.length > 0);
+
+    return {
+        favoriteResults,
+        nonFavoriteResults,
+        hasMixedResults,
+    };
+}

From bbf208d9ea22ab6ac3917133026478edba2832f4 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 21 Jan 2026 17:58:15 +0100
Subject: [PATCH 12/30] Improves panel element filtering and collapsed state
 logic

---
 .../Panels/Common/ToolPanelLabel.vue          | 13 +++++---
 .../components/Panels/Common/ToolSection.vue  | 31 +++++++++++--------
 .../Panels/Menus/PanelViewMenuItem.vue        |  7 ++++-
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index a26f32aeb18..9474ec4958a 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -11,10 +11,15 @@ import { PANEL_LABEL_IDS } from "../panelViews";
 import ToolPanelLinks from "./ToolPanelLinks.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 
-const props = defineProps<{
-    definition: ToolSectionLabel;
-    collapsed?: boolean;
-}>();
+const props = withDefaults(
+    defineProps<{
+        definition: ToolSectionLabel;
+        collapsed?: boolean;
+    }>(),
+    {
+        collapsed: undefined,
+    },
+);
 
 const emit = defineEmits<{
     (e: "toggle", labelId: string): void;
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 07888017dd6..f1e50170ac3 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -59,17 +59,19 @@ const toolStore = useToolStore();
 
 const elems = computed(() => {
     if (toolSection.value.elems !== undefined && toolSection.value.elems.length > 0) {
-        return toolSection.value.elems;
+        return toolSection.value.elems.filter((el) => el !== null && el !== undefined);
     }
     if (toolSection.value.tools !== undefined && toolSection.value.tools.length > 0) {
-        return toolSection.value.tools.map((toolId) => {
-            const tool = toolStore.getToolForId(toolId as string);
-            if (!tool && typeof toolId !== "string") {
-                return toolId as ToolSectionLabel;
-            } else {
-                return tool;
-            }
-        });
+        return toolSection.value.tools
+            .map((toolId) => {
+                const tool = toolStore.getToolForId(toolId as string);
+                if (!tool && typeof toolId !== "string") {
+                    return toolId as ToolSectionLabel;
+                } else {
+                    return tool;
+                }
+            })
+            .filter((el) => el !== null && el !== undefined);
     }
     return [];
 });
@@ -161,6 +163,9 @@ function onLabelToggle(labelId: string) {
 function toggleMenu(nextState = !opened.value) {
     opened.value = nextState;
 }
+function getCollapsedState(id: string): boolean | undefined {
+    return typeof props.collapsedLabels[id] === "boolean" ? props.collapsedLabels[id] : undefined;
+}
 </script>
 
 <template>
@@ -197,13 +202,13 @@ function toggleMenu(nextState = !opened.value) {
                 <template v-for="[key, el] in sortedElements">
                     <ToolPanelLabel
                         v-if="toolSectionLabel.text || el.model_class === 'ToolSectionLabel'"
-                        :key="key"
+                        :key="`label-${key}`"
                         :definition="el"
-                        :collapsed="props.collapsedLabels[el.id]"
+                        :collapsed="getCollapsedState(el.id)"
                         @toggle="onLabelToggle" />
                     <Tool
                         v-else
-                        :key="key"
+                        :key="`tool-${key}`"
                         class="ml-2"
                         :tool="el"
                         :tool-key="toolKey"
@@ -221,7 +226,7 @@ function toggleMenu(nextState = !opened.value) {
         <ToolPanelLabel
             v-if="toolSectionLabel.text"
             :definition="toolSectionLabel"
-            :collapsed="props.collapsedLabels[toolSectionLabel.id]"
+            :collapsed="getCollapsedState(toolSectionLabel.id)"
             @toggle="onLabelToggle" />
         <Tool
             v-else
diff --git a/client/src/components/Panels/Menus/PanelViewMenuItem.vue b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
index 87e51f71ad1..184f52ff367 100644
--- a/client/src/components/Panels/Menus/PanelViewMenuItem.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
@@ -34,6 +34,11 @@ const isSelected = computed(() => props.currentPanelView === props.panelView.id)
         @click="emit('onSelect', props.panelView)">
         <FontAwesomeIcon :icon="icon" class="mr-1" fixed-width />
         <span v-localize>{{ panelView.name }}</span>
-        <FontAwesomeIcon v-if="isSelected" :icon="faCheck" class="ml-1" fixed-width />
+        <FontAwesomeIcon
+            v-if="isSelected"
+            :icon="faCheck"
+            class="ml-1"
+            data-description="panel view item icon"
+            fixed-width />
     </BDropdownItem>
 </template>

From 296e3587dc22901ffbda668406a5a0288ad99b10 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 6 Feb 2026 15:27:06 -0600
Subject: [PATCH 13/30] indicate anon users need to log in to see favorites in
 My Tools

---
 client/src/components/Panels/ToolBox.vue | 40 +++++++++++++++++-------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 77149361ae3..b170a0db8cf 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -10,6 +10,7 @@ import { useToolRouting } from "@/composables/route";
 import { useFavoriteSearchResults, useToolPanelFavorites } from "@/composables/toolPanelFavorites";
 import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
+import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 
 import { PANEL_LABEL_IDS } from "./panelViews";
@@ -29,7 +30,9 @@ import GButton from "../BaseComponents/GButton.vue";
 import ToolSearch from "./Common/ToolSearch.vue";
 import ToolSection from "./Common/ToolSection.vue";
 
+const LOGIN_ROUTE = "/login/start";
 const SECTION_IDS_TO_EXCLUDE = ["expression_tools"]; // if this isn't the Workflow Editor panel
+const TOOLS_LIST_ROUTE = "/tools/list";
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
 const { routeToTool } = useToolRouting();
@@ -53,6 +56,8 @@ const props = withDefaults(defineProps<Props>(), {
     favoritesDefault: false,
 });
 
+const { isAnonymous } = storeToRefs(useUserStore());
+
 const query = ref("");
 const queryPending = ref(false);
 const showSections = ref(props.workflow);
@@ -143,7 +148,6 @@ const {
 // Use composable for search results filtering
 const { favoriteResults, nonFavoriteResults, hasMixedResults } = useFavoriteSearchResults(results, favoriteToolIdSet);
 
-const toolsListRoute = "/tools/list";
 const toolsCount = computed(() => toolsList.value.length);
 const showEmptyFavorites = computed(() => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0);
 
@@ -414,16 +418,30 @@ function onLabelToggle(labelId: string) {
                     <div v-for="(panel, key) in localPanel" :key="key">
                         <div v-if="panel?.id === PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT" class="tool-panel-empty">
                             <BAlert variant="info" show>
-                                You haven't favorited any tools yet. Search the toolbox or use
-                                <GButton
-                                    class="ml-1"
-                                    size="small"
-                                    color="blue"
-                                    :to="toolsListRoute"
-                                    data-description="discover-tools">
-                                    Discover Tools
-                                </GButton>
-                                to explore {{ toolsCount }} community curated tools.
+                                <template v-if="!isAnonymous">
+                                    You haven't favorited any tools yet. Search the toolbox or use
+                                    <GButton
+                                        class="ml-1"
+                                        size="small"
+                                        color="blue"
+                                        :to="TOOLS_LIST_ROUTE"
+                                        data-description="discover-tools">
+                                        Discover Tools
+                                    </GButton>
+                                    to explore {{ toolsCount }} community curated tools.
+                                </template>
+                                <template v-else>
+                                    You need to
+                                    <GButton
+                                        class="ml-1"
+                                        size="small"
+                                        color="blue"
+                                        :to="LOGIN_ROUTE"
+                                        data-description="login button">
+                                        Login
+                                    </GButton>
+                                    to favorite tools and have them appear in this section.
+                                </template>
                             </BAlert>
                         </div>
                         <ToolSection

From 813ba21feb35255baf3b91c36f923aea08223541 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 9 Feb 2026 15:38:56 -0600
Subject: [PATCH 14/30] add top padding to tool search input field

---
 client/src/style/scss/panels.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/style/scss/panels.scss b/client/src/style/scss/panels.scss
index 7e9ac5af102..5df6d416cbb 100644
--- a/client/src/style/scss/panels.scss
+++ b/client/src/style/scss/panels.scss
@@ -41,6 +41,7 @@
 }
 .unified-panel-controls {
     @extend .px-3;
+    @extend .pt-1;
 }
 .unified-panel-body {
     @extend .p-0;

From 2bcb7381a57ade294eab9f4ec504dcf9c043ebcf Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Feb 2026 15:17:45 -0600
Subject: [PATCH 15/30] improve typing and modernize tool panel components to
 TS/composition API

---
 client/src/api/tools.ts                       |  15 ++
 client/src/components/Panels/Common/Tool.vue  | 203 +++++++-----------
 .../Panels/Common/ToolPanelLabel.vue          |   2 +-
 .../Panels/Common/ToolPanelLinks.vue          |  41 ++--
 .../components/Panels/Common/ToolSection.vue  | 123 +++++------
 client/src/components/Panels/ToolBox.vue      |  16 +-
 .../src/components/Panels/utilities.test.ts   |   2 +-
 client/src/components/Panels/utilities.ts     |  72 +++----
 client/src/stores/toolStore.ts                |  10 +-
 client/src/utils/navigation/navigation.yml    |   2 -
 client/src/utils/navigation/schema.ts         |   2 -
 11 files changed, 215 insertions(+), 273 deletions(-)

diff --git a/client/src/api/tools.ts b/client/src/api/tools.ts
index 7ef06925577..16cd60c4591 100644
--- a/client/src/api/tools.ts
+++ b/client/src/api/tools.ts
@@ -1,5 +1,6 @@
 import { type components, GalaxyApi } from "@/api";
 import { ERROR_STATES, type ShowFullJobResponse } from "@/api/jobs";
+import type { Tool, ToolPanelItem, ToolSection, ToolSectionLabel } from "@/stores/toolStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 export type HdcaUploadTarget = components["schemas"]["HdcaDataItemsTarget"];
@@ -130,3 +131,17 @@ export function fetchJobErrorMessage(jobDetails: ShowFullJobResponse): string |
     }
     return errorMessage;
 }
+
+// TODO: Once the backend models are typed, make sure these type guards are correct.
+export function isTool(section: ToolPanelItem): section is Tool {
+    return !isToolSection(section) && !isToolSectionLabel(section);
+}
+export function isToolSection(section: ToolPanelItem): section is ToolSection {
+    return (section as ToolSection).tools !== undefined || (section as ToolSection).elems !== undefined;
+}
+export function isToolSectionLabel(section: ToolPanelItem): section is ToolSectionLabel {
+    return (
+        (section as ToolSectionLabel).text !== undefined &&
+        (section as ToolSectionLabel).model_class === "ToolSectionLabel"
+    );
+}
diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 3e3a1b5553a..f47c2011af3 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -1,135 +1,96 @@
-<template>
-    <div class="toolTitle">
-        <a v-if="tool.disabled" :data-tool-id="tool.id" class="title-link name text-muted tool-link">
-            <span v-if="!hideName">{{ tool.name }}</span>
-            <span class="description">{{ tool.description }}</span>
-        </a>
-        <a
-            v-else
-            :class="targetClass"
-            :data-tool-id="tool.id"
-            :href="toolLink"
-            :target="toolTarget"
-            :title="tool.help"
-            @click="onClick">
-            <span class="labels">
-                <span
-                    v-for="(label, index) in tool.labels"
-                    :key="index"
-                    :class="['badge', 'badge-primary', `badge-${label}`]">
-                    {{ label }}
-                </span>
-            </span>
-            <span v-if="!hideName" class="name font-weight-bold">{{ tool.name }}</span>
-            <span class="description">{{ tool.description }}</span>
-            <span
-                v-b-tooltip.hover
-                :class="['operation', 'float-right', operationIcon]"
-                :title="operationTitle"
-                @click.stop.prevent="onOperation" />
-        </a>
-        <ToolFavoriteButton
-            v-if="showFavoriteAction"
-            :id="tool.id"
-            :class="['tool-favorite-button', { 'tool-favorite-button-hover': showFavoriteOnHover }]"
-            :data-tool-id="tool.id"
-            color="grey" />
-    </div>
-</template>
-
-<script>
-import BootstrapVue from "bootstrap-vue";
+<script setup lang="ts">
 import { storeToRefs } from "pinia";
-import Vue, { computed } from "vue";
+import { computed } from "vue";
 
+import type { Tool as ToolType } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 import ariaAlert from "@/utils/ariaAlert";
 
 import ToolFavoriteButton from "@/components/Tool/Buttons/ToolFavoriteButton.vue";
 
-Vue.use(BootstrapVue);
+interface Props {
+    tool: ToolType;
+    operationTitle?: string;
+    operationIcon?: string;
+    hideName?: boolean;
+    showFavoriteButton?: boolean;
+}
 
-export default {
-    name: "Tool",
-    components: {
-        ToolFavoriteButton,
-    },
-    props: {
-        tool: {
-            type: Object,
-            required: true,
-        },
-        operationTitle: {
-            type: String,
-            default: "",
-        },
-        operationIcon: {
-            type: String,
-            default: "",
-        },
-        hideName: {
-            type: Boolean,
-            default: false,
-        },
-        toolKey: {
-            type: String,
-            default: "",
-        },
-        renderIcon: {
-            type: Boolean,
-            default: false,
-        },
-        showFavoriteButton: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    setup(props) {
-        const toolStore = useToolStore();
-        const userStore = useUserStore();
-        const { currentFavorites } = storeToRefs(userStore);
-        const isFavorite = computed(() => currentFavorites.value.tools?.includes(props.tool.id));
-        return {
-            getLinkById: toolStore.getLinkById,
-            getTargetById: toolStore.getTargetById,
-            isFavorite,
-        };
-    },
-    computed: {
-        toolLink() {
-            return this.getLinkById(this.tool.id);
-        },
-        toolTarget() {
-            return this.getTargetById(this.tool.id);
-        },
-        targetClass() {
-            if (this.toolKey) {
-                return `tool-menu-item-${this.tool[this.toolKey]} title-link cursor-pointer tool-link`;
-            } else {
-                return `title-link cursor-pointer tool-link`;
-            }
-        },
-        showFavoriteAction() {
-            return this.showFavoriteButton || this.isFavorite;
-        },
-        showFavoriteOnHover() {
-            return this.isFavorite;
-        },
-    },
-    methods: {
-        onClick(evt) {
-            ariaAlert(`${this.tool.name} selected from panel`);
-            this.$emit("onClick", this.tool, evt);
-        },
-        onOperation(evt) {
-            ariaAlert(`${this.tool.name} operation selected from panel`);
-            this.$emit("onOperation", this.tool, evt);
-        },
-    },
-};
+const props = withDefaults(defineProps<Props>(), {
+    operationTitle: "",
+    operationIcon: "",
+    hideName: false,
+    showFavoriteButton: false,
+});
+
+const emit = defineEmits<{
+    (e: "onClick", tool: ToolType, evt: MouseEvent): void;
+    (e: "onOperation", tool: ToolType, evt: MouseEvent | KeyboardEvent): void;
+}>();
+
+const toolStore = useToolStore();
+const userStore = useUserStore();
+const { currentFavorites } = storeToRefs(userStore);
+
+const isFavorite = computed(() => currentFavorites.value.tools?.includes(props.tool.id));
+
+const toolLink = computed(() => toolStore.getLinkById(props.tool.id));
+const toolTarget = computed(() => toolStore.getTargetById(props.tool.id));
+
+function onClick(evt: MouseEvent) {
+    ariaAlert(`${props.tool.name} selected from panel`);
+    emit("onClick", props.tool, evt);
+}
+
+function onOperation(evt: MouseEvent | KeyboardEvent) {
+    ariaAlert(`${props.tool.name} operation selected from panel`);
+    emit("onOperation", props.tool, evt);
+}
 </script>
 
+<template>
+    <div class="toolTitle">
+        <a v-if="props.tool.disabled" :data-tool-id="props.tool.id" class="title-link name text-muted tool-link">
+            <span v-if="!props.hideName">{{ props.tool.name }}</span>
+            <span class="description">{{ props.tool.description }}</span>
+        </a>
+        <a
+            v-else
+            class="title-link cursor-pointer tool-link"
+            :data-tool-id="props.tool.id"
+            :href="toolLink"
+            :target="toolTarget"
+            :title="props.tool.help"
+            @click="onClick">
+            <span class="labels">
+                <span
+                    v-for="(label, index) in props.tool.labels"
+                    :key="index"
+                    :class="['badge', 'badge-primary', `badge-${label}`]">
+                    {{ label }}
+                </span>
+            </span>
+            <span v-if="!props.hideName" class="name font-weight-bold">{{ props.tool.name }}</span>
+            <span class="description">{{ props.tool.description }}</span>
+            <span
+                v-b-tooltip.hover
+                :class="['operation', 'float-right', props.operationIcon]"
+                role="button"
+                tabindex="0"
+                :title="props.operationTitle"
+                @keydown.enter.prevent="onOperation"
+                @click.stop.prevent="onOperation" />
+        </a>
+        <ToolFavoriteButton
+            v-if="props.showFavoriteButton || isFavorite"
+            :id="props.tool.id"
+            :class="['tool-favorite-button', { 'tool-favorite-button-hover': isFavorite }]"
+            :data-tool-id="props.tool.id"
+            color="grey" />
+    </div>
+</template>
+
 <style scoped>
 .toolTitle {
     display: flex;
diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 9474ec4958a..4246820fae0 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -88,7 +88,7 @@ function onKeydown(event: KeyboardEvent) {
                 @click.stop="clearRecentTools">
                 <FontAwesomeIcon :icon="faBroom" />
             </GButton>
-            <ToolPanelLinks :links="definition.links || undefined" />
+            <ToolPanelLinks v-if="definition.links" :links="definition.links" />
         </span>
     </div>
 </template>
diff --git a/client/src/components/Panels/Common/ToolPanelLinks.vue b/client/src/components/Panels/Common/ToolPanelLinks.vue
index 4c95bebea58..e48798e95e3 100644
--- a/client/src/components/Panels/Common/ToolPanelLinks.vue
+++ b/client/src/components/Panels/Common/ToolPanelLinks.vue
@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
+
+const props = defineProps<{
+    links: Record<string, string>;
+}>();
+
+const link = computed(() => {
+    const links = Object.values(props.links);
+    return links.length > 0 ? links[0] : null;
+});
+</script>
+
 <template>
     <span v-if="link" class="tool-panel-links">
         <a :href="link" target="_blank" style="display: inline">
@@ -6,29 +21,3 @@
         </a>
     </span>
 </template>
-
-<script>
-import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-export default {
-    components: { FontAwesomeIcon },
-    props: {
-        links: {
-            type: Object,
-            default: () => ({}),
-        },
-    },
-    data() {
-        return {
-            faExternalLinkAlt,
-        };
-    },
-    computed: {
-        link() {
-            const links = Object.values(this.links || {});
-            return links.length > 0 ? links[0] : null;
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index f1e50170ac3..1a8b9a90613 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -4,8 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
+import { isTool, isToolSection, isToolSectionLabel } from "@/api/tools";
 import { useConfig } from "@/composables/config";
-import { type Tool as ToolType, type ToolSection, type ToolSectionLabel, useToolStore } from "@/stores/toolStore";
+import { type Tool as ToolType, type ToolPanelItem, useToolStore } from "@/stores/toolStore";
 import ariaAlert from "@/utils/ariaAlert";
 
 import Tool from "./Tool.vue";
@@ -13,7 +14,7 @@ import ToolPanelLabel from "./ToolPanelLabel.vue";
 import ToolPanelLinks from "./ToolPanelLinks.vue";
 
 const emit = defineEmits<{
-    (e: "onClick", tool: any, evt: Event): void;
+    (e: "onClick", tool: ToolType, evt: Event): void;
     (e: "onFilter", filter: string): void;
     (e: "onOperation", tool: any, evt: Event): void;
     (e: "onLabelToggle", labelId: string): void;
@@ -22,14 +23,12 @@ const emit = defineEmits<{
 const eventBus = useEventBus<string>("open-tool-section");
 
 interface Props {
-    category: ToolSection | ToolType | ToolSectionLabel;
+    category: ToolPanelItem;
     queryFilter?: string;
     disableFilter?: boolean;
     hideName?: boolean;
     operationTitle?: string;
     operationIcon?: string;
-    toolKey?: string;
-    sectionName?: string;
     expanded?: boolean;
     sortItems?: boolean;
     hasFilterButton?: boolean;
@@ -44,8 +43,6 @@ const props = withDefaults(defineProps<Props>(), {
     hideName: false,
     operationTitle: "",
     operationIcon: "",
-    toolKey: "",
-    sectionName: "default",
     expanded: false,
     sortItems: true,
     hasFilterButton: false,
@@ -57,38 +54,39 @@ const props = withDefaults(defineProps<Props>(), {
 const { config, isConfigLoaded } = useConfig();
 const toolStore = useToolStore();
 
+/**
+ * We can have sections of 2 types:
+ * 1. Sections with `elems` property, which is an array of tools and sections.
+ * 2. Sections with `tools` property, which is an array of tool IDs (strings) and section labels.
+ *    In this case, we need to resolve the tool IDs to get the actual tools.
+ */
 const elems = computed(() => {
-    if (toolSection.value.elems !== undefined && toolSection.value.elems.length > 0) {
-        return toolSection.value.elems.filter((el) => el !== null && el !== undefined);
-    }
-    if (toolSection.value.tools !== undefined && toolSection.value.tools.length > 0) {
-        return toolSection.value.tools
-            .map((toolId) => {
-                const tool = toolStore.getToolForId(toolId as string);
-                if (!tool && typeof toolId !== "string") {
-                    return toolId as ToolSectionLabel;
-                } else {
-                    return tool;
-                }
-            })
-            .filter((el) => el !== null && el !== undefined);
+    if (isToolSection(props.category)) {
+        if (props.category.elems !== undefined && props.category.elems.length > 0) {
+            // This section has `elems`, we can return it as is.
+            return props.category.elems;
+        }
+        if (props.category.tools !== undefined && props.category.tools.length > 0) {
+            return props.category.tools
+                .map((toolOrLabel) => {
+                    if (typeof toolOrLabel === "string") {
+                        // This is a tool ID, we need to resolve it to get the actual `Tool`.
+                        return toolStore.getToolForId(toolOrLabel) || null;
+                    } else {
+                        // This is a `ToolSectionLabel`, we can return it as is.
+                        return toolOrLabel;
+                    }
+                })
+                .filter((el) => el !== null);
+        }
     }
     return [];
 });
 
-const toolSection = computed(() => props.category as ToolSection);
-const toolSectionLabel = computed(() => props.category as ToolSectionLabel);
-
-const name = computed(() => toolSection.value.title || toolSection.value.name);
-const isSection = computed(() => toolSection.value.tools !== undefined || toolSection.value.elems !== undefined);
-const hasElements = computed(() => elems.value.length > 0);
-const title = computed(() => props.category.description || undefined);
-const links = computed(() => toolSection.value.links || {});
-
 const opened = ref(props.expanded || checkFilter());
 const sectionToggleIcon = computed(() => (opened.value ? faChevronDown : faChevronRight));
 
-const sortedElements = computed(() => {
+const sortedElements = computed<Array<[string, ToolPanelItem]>>(() => {
     // If this.config.sortTools is true, sort the tools alphabetically
     // When administrators have manually inserted labels we respect
     // the order set and hope for the best from the integrated
@@ -98,12 +96,12 @@ const sortedElements = computed(() => {
         isConfigLoaded.value &&
         config.value.toolbox_auto_sort === true &&
         props.sortItems === true &&
-        !elems.value.some((el) => (el as ToolSectionLabel).text !== undefined && (el as ToolSectionLabel).text !== "")
+        !elems.value.some((el) => isToolSectionLabel(el) && el.text !== "")
     ) {
         const elements = [...elems.value];
         const sorted = elements.sort((a, b) => {
-            const aNameLower = (a as ToolSection).name.toLowerCase();
-            const bNameLower = (b as ToolSection).name.toLowerCase();
+            const aNameLower = "name" in a ? a.name.toLowerCase() : "";
+            const bNameLower = "name" in b ? b.name.toLowerCase() : "";
             if (aNameLower > bNameLower) {
                 return 1;
             } else if (aNameLower < bNameLower) {
@@ -128,9 +126,9 @@ watch(
 watch(
     () => opened.value,
     (newVal: boolean, oldVal: boolean) => {
-        if (newVal !== oldVal) {
+        if (newVal !== oldVal && isToolSection(props.category)) {
             const currentState = newVal ? "opened" : "closed";
-            ariaAlert(`${name.value} tools menu ${currentState}`);
+            ariaAlert(`${props.category.name} tools menu ${currentState}`);
         }
     },
 );
@@ -144,14 +142,14 @@ onUnmounted(() => {
 });
 
 function openToolSection(sectionId: string) {
-    if (isSection.value && sectionId == props.category?.id) {
+    if (isToolSection(props.category) && sectionId == props.category?.id) {
         toggleMenu(true);
     }
 }
 function checkFilter() {
     return !props.disableFilter && !!props.queryFilter;
 }
-function onClick(tool: any, evt: Event) {
+function onClick(tool: ToolType, evt: Event) {
     emit("onClick", tool, evt);
 }
 function onOperation(tool: any, evt: Event) {
@@ -169,11 +167,11 @@ function getCollapsedState(id: string): boolean | undefined {
 </script>
 
 <template>
-    <div v-if="isSection && hasElements" class="tool-panel-section">
+    <div v-if="isToolSection(props.category) && elems.length > 0" class="tool-panel-section">
         <div
             v-b-tooltip.topright.hover.noninteractive
-            :class="['toolSectionTitle', `tool-menu-section-${sectionName}`, 'tool-panel-divider']"
-            :title="title">
+            class="toolSectionTitle tool-panel-divider"
+            :title="props.category.description || undefined">
             <a
                 class="title-link tool-panel-divider-link"
                 href="javascript:void(0)"
@@ -183,15 +181,15 @@ function getCollapsedState(id: string): boolean | undefined {
                 <span class="tool-panel-divider-text">
                     <FontAwesomeIcon :icon="sectionToggleIcon" class="tool-panel-divider-toggle" />
                     <span class="name">
-                        {{ name }}
+                        {{ props.category.title || props.category.name }}
                     </span>
-                    <ToolPanelLinks :links="links" />
+                    <ToolPanelLinks v-if="props.category.links" :links="props.category.links" />
                     <button
-                        v-if="isSection && props.hasFilterButton"
+                        v-if="props.hasFilterButton"
                         v-b-tooltip.hover.noninteractive.bottom
                         title="Show full section"
                         class="inline-icon-button"
-                        @click.stop="emit('onFilter', `section:${toolSection.name}`)">
+                        @click.stop="emit('onFilter', `section:${props.category.name}`)">
                         <FontAwesomeIcon :icon="faFilter" />
                     </button>
                 </span>
@@ -201,17 +199,16 @@ function getCollapsedState(id: string): boolean | undefined {
             <div v-if="opened" data-description="opened tool panel section">
                 <template v-for="[key, el] in sortedElements">
                     <ToolPanelLabel
-                        v-if="toolSectionLabel.text || el.model_class === 'ToolSectionLabel'"
+                        v-if="isToolSectionLabel(el)"
                         :key="`label-${key}`"
                         :definition="el"
                         :collapsed="getCollapsedState(el.id)"
                         @toggle="onLabelToggle" />
                     <Tool
-                        v-else
+                        v-else-if="isTool(el)"
                         :key="`tool-${key}`"
                         class="ml-2"
                         :tool="el"
-                        :tool-key="toolKey"
                         :hide-name="hideName"
                         :operation-title="operationTitle"
                         :operation-icon="operationIcon"
@@ -222,22 +219,20 @@ function getCollapsedState(id: string): boolean | undefined {
             </div>
         </transition>
     </div>
-    <div v-else>
-        <ToolPanelLabel
-            v-if="toolSectionLabel.text"
-            :definition="toolSectionLabel"
-            :collapsed="getCollapsedState(toolSectionLabel.id)"
-            @toggle="onLabelToggle" />
-        <Tool
-            v-else
-            :tool="category"
-            :hide-name="hideName"
-            :operation-title="operationTitle"
-            :operation-icon="operationIcon"
-            :show-favorite-button="props.showFavoriteButton || searchActive"
-            @onOperation="onOperation"
-            @onClick="onClick" />
-    </div>
+    <ToolPanelLabel
+        v-else-if="isToolSectionLabel(props.category)"
+        :definition="props.category"
+        :collapsed="getCollapsedState(props.category.id)"
+        @toggle="onLabelToggle" />
+    <Tool
+        v-else-if="isTool(props.category)"
+        :tool="props.category"
+        :hide-name="hideName"
+        :operation-title="operationTitle"
+        :operation-icon="operationIcon"
+        :show-favorite-button="props.showFavoriteButton || searchActive"
+        @onOperation="onOperation"
+        @onClick="onClick" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index b170a0db8cf..6d0c3e77a63 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -8,7 +8,7 @@ import { computed, type ComputedRef, type Ref, ref, watch } from "vue";
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
 import { useFavoriteSearchResults, useToolPanelFavorites } from "@/composables/toolPanelFavorites";
-import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
+import type { Tool, ToolPanelItem, ToolSection as ToolSectionType } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
@@ -132,8 +132,6 @@ const localSectionsById = computed(() => {
     ) as Record<string, Tool | ToolSectionType>;
 });
 
-type PanelItem = Tool | ToolSectionType | ToolSectionLabel;
-
 // Use composable for favorites and recent tools management
 const {
     favoritesCollapsed,
@@ -189,14 +187,14 @@ const searchPanelSections = computed(() => {
 
 const toolsList = computed(() => Object.values(localToolsById.value));
 
-const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
+const flatResultsPanel = computed<Record<string, ToolPanelItem> | null>(() => {
     if (!hasResults.value) {
         return null;
     }
     if (!hasMixedResults.value) {
-        return filterTools(localToolsById.value, results.value) as Record<string, PanelItem>;
+        return filterTools(localToolsById.value, results.value) as Record<string, ToolPanelItem>;
     }
-    const entries: Array<[string, PanelItem]> = [];
+    const entries: Array<[string, ToolPanelItem]> = [];
     entries.push([
         PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL,
         buildToolLabel(PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL, localize("Favorites")),
@@ -212,11 +210,11 @@ const flatResultsPanel = computed<Record<string, PanelItem> | null>(() => {
     return Object.fromEntries(entries);
 });
 
-const favoritesDefaultPanel = computed<Record<string, PanelItem> | null>(() => {
+const favoritesDefaultPanel = computed<Record<string, ToolPanelItem> | null>(() => {
     if (!props.favoritesDefault || query.value) {
         return null;
     }
-    const entries: Array<[string, PanelItem]> = [];
+    const entries: Array<[string, ToolPanelItem]> = [];
     const favorites = favoriteToolIdsInPanel.value;
     const recents = recentToolIdsToShow.value;
 
@@ -278,7 +276,7 @@ const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> |
  * If we have results for search, we show tools in sections or just tools,
  * based on whether `showSections` is true or false
  */
-const localPanel: ComputedRef<Record<string, PanelItem> | null> = computed(() => {
+const localPanel: ComputedRef<Record<string, ToolPanelItem> | null> = computed(() => {
     if (props.favoritesDefault && !query.value) {
         return favoritesDefaultPanel.value || {};
     }
diff --git a/client/src/components/Panels/utilities.test.ts b/client/src/components/Panels/utilities.test.ts
index 0784b604182..6adade4bcd5 100644
--- a/client/src/components/Panels/utilities.test.ts
+++ b/client/src/components/Panels/utilities.test.ts
@@ -36,7 +36,7 @@ const tempToolPanel = {
             id: "fasta/fastq",
             name: "FASTA/FASTQ",
         },
-    },
+    } as unknown as Record<string, ToolSection>,
 };
 const tempToolsList = {
     tools: {
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index f9d1fd470e1..55121523833 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -14,6 +14,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { orderBy } from "lodash";
 
+import { isTool, isToolSection } from "@/api/tools";
 import type { FilterSettings as ToolFilters, Tool, ToolSection, ToolSectionLabel } from "@/stores/toolStore";
 import levenshteinDistance from "@/utils/levenshtein";
 
@@ -71,7 +72,7 @@ const FILTER_KEYS = {
 const STRING_REPLACEMENTS: string[] = [" ", "-", "\\(", "\\)", "'", ":", `"`];
 const MINIMUM_DL_LENGTH = 5; // for Demerau-Levenshtein distance
 const MINIMUM_WORD_MATCH = 2; // for word match
-const UNSECTIONED_SECTION = {
+const UNSECTIONED_SECTION: ToolSection = {
     // to return a section for unsectioned tools
     model_class: "ToolSection",
     id: "unsectioned",
@@ -243,25 +244,28 @@ export function getValidToolsInCurrentView(
 export function getValidToolsInEachSection(
     validToolIdsInCurrentView: string[],
     currentPanel: Record<string, Tool | ToolSection>,
-) {
+): Array<[string, Tool | ToolSection]> {
     // use a set for fast membership lookup
     const idSet = new Set(validToolIdsInCurrentView);
     return Object.entries(currentPanel).map(([id, section]) => {
-        const validatedSection = { ...section } as ToolSection;
-        // assign sectionTools to avoid repeated getter access
-        const sectionTools = validatedSection.tools;
-        if (sectionTools && Array.isArray(sectionTools)) {
-            // filter on valid tools and panel labels in this section
-            validatedSection.tools = sectionTools.filter((toolId) => {
-                if (typeof toolId === "string" && idSet.has(toolId)) {
-                    return true;
-                } else if (typeof toolId !== "string") {
-                    // is a special case where there is a label within a section
-                    return true;
-                }
-            });
+        if (isToolSection(section)) {
+            const validatedSection = { ...section };
+            // assign sectionTools to avoid repeated getter access
+            const sectionTools = validatedSection.tools;
+            if (sectionTools && Array.isArray(sectionTools)) {
+                // filter on valid tools and panel labels in this section
+                validatedSection.tools = sectionTools.filter((toolId) => {
+                    if (typeof toolId === "string" && idSet.has(toolId)) {
+                        return true;
+                    } else if (typeof toolId !== "string") {
+                        // is a special case where there is a label within a section
+                        return true;
+                    }
+                });
+            }
+            return [id, validatedSection];
         }
-        return [id, validatedSection];
+        return [id, section];
     });
 }
 
@@ -272,20 +276,18 @@ export function getValidToolsInEachSection(
  * @returns a `currentPanel` object containing sections/tools/labels that meet required conditions
  */
 export function getValidPanelItems(
-    items: (string | ToolSection)[][],
+    items: Array<[string, ToolSection | Tool]>,
     validToolIdsInCurrentView: string[],
     excludedSectionIds: string[] = [],
 ) {
     const validEntries = items.filter(([id, item]) => {
-        id = id as string;
-        item = item as Tool | ToolSection;
-        if (isToolObject(item as Tool) && validToolIdsInCurrentView.includes(id)) {
+        if (isTool(item) && validToolIdsInCurrentView.includes(id)) {
             // is a `Tool` and is in `localToolsById`
             return true;
-        } else if (item.tools === undefined) {
+        } else if (!isToolSection(item)) {
             // is neither a `Tool` nor a `ToolSection`, maybe a `ToolSectionLabel`
             return true;
-        } else if (item.tools && item.tools.length > 0 && !excludedSectionIds.includes(id)) {
+        } else if ("tools" in item && item.tools?.length && !excludedSectionIds.includes(id)) {
             // is a `ToolSection` with tools; is not an excluded section
             return true;
         } else {
@@ -483,12 +485,9 @@ export function createSortedResultPanel(matchedTools: SearchMatch[], currentPane
             const sections = Object.keys(currentPanel);
             for (const section of sections) {
                 let toolAdded = false;
-                const existingPanelItem = section ? currentPanel[section] : undefined;
-                if (existingPanelItem && section) {
-                    if (
-                        (existingPanelItem as ToolSection).tools &&
-                        (existingPanelItem as ToolSection).tools?.includes(match.id)
-                    ) {
+                const existingPanelItem = currentPanel[section];
+                if (existingPanelItem) {
+                    if ("tools" in existingPanelItem && existingPanelItem.tools?.includes(match.id)) {
                         // it has tools so is a section, and it has the tool we're looking for
 
                         // if we haven't seen this section yet, create it in the resultPanel
@@ -500,7 +499,7 @@ export function createSortedResultPanel(matchedTools: SearchMatch[], currentPane
                         existingSection.tools?.push(match.id);
                         acc[section] = existingSection;
                         toolAdded = true;
-                    } else if (isToolObject(existingPanelItem as Tool) && existingPanelItem.id === match.id) {
+                    } else if (isTool(existingPanelItem) && existingPanelItem.id === match.id) {
                         // it is a tool, and it is the tool we're looking for
 
                         // put in it the "Unsectioned Tools" section (if it doesn't exist, create it)
@@ -563,21 +562,6 @@ function closestSubstring(query: string, actualStr: string) {
     return null;
 }
 
-export function isToolObject(tool: Tool | ToolSection | ToolSectionLabel) {
-    // toolbox overhaul with typing will simplify this dramatically...
-    // Right now, our shorthand is that tools have no 'text', and don't match
-    // the model_class of the section/label.
-    if (
-        !(tool as ToolSectionLabel).text &&
-        tool.model_class !== "ToolSectionLabel" &&
-        tool.model_class !== "ToolSection" &&
-        (tool as ToolSection).tools === undefined
-    ) {
-        return true;
-    }
-    return false;
-}
-
 // given array and a substring, get the closest matching term for substring
 function matchingTerm(termArray: string[], substring: string) {
     const sanitized = sanitizeString(substring);
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index e4a922d39b3..77a5d78484c 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -37,6 +37,7 @@ export interface Panel {
     searchable: boolean;
 }
 
+// TODO: Once the backend models are typed, we will replace these with the generated types from the schema.
 export interface Tool {
     model_class: string;
     id: string;
@@ -64,10 +65,11 @@ export interface Tool {
         changeset_revision: string;
         tool_shed: string;
     };
+    help?: string;
 }
 
 export interface ToolSection {
-    model_class: string;
+    model_class: "ToolSection";
     id: string;
     name: string;
     title?: string;
@@ -75,11 +77,11 @@ export interface ToolSection {
     description?: string;
     links?: Record<string, string>;
     tools?: (string | ToolSectionLabel)[];
-    elems?: (Tool | ToolSection)[];
+    elems?: (Tool | ToolSection)[]; // TODO: Are we sure that a `ToolSection` can have `ToolSection` children?
 }
 
 export interface ToolSectionLabel {
-    model_class: string;
+    model_class: "ToolSectionLabel";
     id: string;
     text: string;
     version?: string;
@@ -87,6 +89,8 @@ export interface ToolSectionLabel {
     links?: Record<string, string> | null;
 }
 
+export type ToolPanelItem = Tool | ToolSection | ToolSectionLabel;
+
 export type ToolHelpData = {
     help?: string;
     summary?: string;
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 21513da2270..37a88ab1154 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -939,8 +939,6 @@ workflow_editor:
       selector: 'license save'
       type: data-description
     tool_menu: '.toolMenuContainer'
-    tool_menu_section_link: '.tool-menu-section-${section_name} a span'
-    tool_menu_item_link: 'a.tool-menu-item-${item_name}'
     workflow_link:
       type: xpath
       selector: '//a[contains(., "${workflow_title}")]'
diff --git a/client/src/utils/navigation/schema.ts b/client/src/utils/navigation/schema.ts
index b85193eb3f9..cb59d30d7e5 100644
--- a/client/src/utils/navigation/schema.ts
+++ b/client/src/utils/navigation/schema.ts
@@ -447,8 +447,6 @@ interface Rootworkflow_editor extends Component {
     edit_annotation: SelectorTemplate;
     edit_name: SelectorTemplate;
     tool_menu: SelectorTemplate;
-    tool_menu_section_link: SelectorTemplate;
-    tool_menu_item_link: SelectorTemplate;
     workflow_link: SelectorTemplate;
     insert_steps: SelectorTemplate;
     connect_icon: SelectorTemplate;

From aa52d249808fbb475bedbf0cc8bfb93e74caa207 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.6" <noreply@anthropic.com>
Date: Tue, 10 Feb 2026 15:50:30 -0600
Subject: [PATCH 16/30] add tests for getValidToolsInEachSection and
 getValidPanelItems utilities

Co-authored-by: Ahmed Hamid Awan <qe66653@umbc.edu>
---
 .../src/components/Panels/utilities.test.ts   | 196 +++++++++++++++++-
 client/src/components/Panels/utilities.ts     |  14 +-
 client/src/stores/toolStore.ts                |   4 +-
 3 files changed, 207 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Panels/utilities.test.ts b/client/src/components/Panels/utilities.test.ts
index 6adade4bcd5..3c9818a486f 100644
--- a/client/src/components/Panels/utilities.test.ts
+++ b/client/src/components/Panels/utilities.test.ts
@@ -8,10 +8,12 @@ import {
     createWhooshQuery,
     determineWidth,
     filterTools,
+    getValidPanelItems,
+    getValidToolsInEachSection,
     searchObjectsByKeys,
     type SearchCommonKeys,
 } from "./utilities";
-import type { Tool, ToolSection } from "@/stores/toolStore";
+import type { Tool, ToolPanelItem, ToolSection, ToolSectionLabel } from "@/stores/toolStore";
 
 describe("test helpers in tool searching utilities and panel handling", () => {
     it("panel width determination", () => {
@@ -245,3 +247,195 @@ describe("test helpers in tool searching utilities", () => {
         expect(filteredToolIds).toHaveLength(2);
     });
 });
+
+describe("getValidToolsInEachSection", () => {
+    it("filters section tools to only include valid tool IDs", () => {
+        const validIds = ["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "liftOver1"];
+        const entries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const collectionOps = entries.find(([id]) => id === "collection_operations");
+        expect(collectionOps).toBeDefined();
+        const collectionSection = collectionOps![1] as ToolSection;
+        expect(collectionSection.tools).toEqual(["__ZIP_COLLECTION__", "__FILTER_FAILED_DATASETS__"]);
+
+        const liftOver = entries.find(([id]) => id === "liftOver");
+        expect(liftOver).toBeDefined();
+        const liftOverSection = liftOver![1] as ToolSection;
+        expect(liftOverSection.tools).toEqual(["liftOver1"]);
+    });
+
+    it("removes all tools from a section when none are valid", () => {
+        const validIds = ["liftOver1"];
+        const entries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const collectionOps = entries.find(([id]) => id === "collection_operations");
+        expect(collectionOps).toBeDefined();
+        const collectionSection = collectionOps![1] as ToolSection;
+        expect(collectionSection.tools).toEqual([]);
+    });
+
+    it("preserves ToolSectionLabels within a section's tools array", () => {
+        const label: ToolSectionLabel = {
+            model_class: "ToolSectionLabel",
+            id: "inner_label",
+            text: "Inner Label",
+        };
+        const panel: Record<string, Tool | ToolSection> = {
+            test_section: {
+                model_class: "ToolSection",
+                id: "test_section",
+                name: "Test Section",
+                tools: ["tool_a", label as unknown as string, "tool_b"],
+            } as ToolSection,
+        };
+        const validIds = ["tool_a"];
+        const entries = getValidToolsInEachSection(validIds, panel);
+
+        const section = entries.find(([id]) => id === "test_section");
+        expect(section).toBeDefined();
+        const sectionData = section![1] as ToolSection;
+        // "tool_a" is valid, the label (non-string) is kept, "tool_b" is filtered out
+        expect(sectionData.tools).toHaveLength(2);
+        expect(sectionData.tools![0]).toBe("tool_a");
+        expect(sectionData.tools![1]).toBe(label);
+    });
+
+    it("passes through items without a tools array unchanged", () => {
+        const entries = getValidToolsInEachSection([], toolsListInPanel);
+
+        // testlabel1 is a ToolSectionLabel with no tools array
+        const labelEntry = entries.find(([id]) => id === "testlabel1");
+        expect(labelEntry).toBeDefined();
+        const labelData = labelEntry![1] as ToolSectionLabel;
+        expect(labelData.model_class).toBe("ToolSectionLabel");
+        expect(labelData.id).toBe("testlabel1");
+    });
+
+    it("does not mutate the original panel sections", () => {
+        const panel: Record<string, Tool | ToolSection> = {
+            sec: {
+                model_class: "ToolSection",
+                id: "sec",
+                name: "Sec",
+                tools: ["tool_x", "tool_y"],
+            } as ToolSection,
+        };
+        const originalTools = [...(panel["sec"] as ToolSection).tools!];
+        getValidToolsInEachSection(["tool_x"], panel);
+
+        // the original section should not be modified
+        expect((panel["sec"] as ToolSection).tools).toEqual(originalTools);
+    });
+
+    it("returns entries in the same order as the panel", () => {
+        const entries = getValidToolsInEachSection(["__UNZIP_COLLECTION__", "liftOver1"], toolsListInPanel);
+        const ids = entries.map(([id]) => id);
+        expect(ids).toEqual(["collection_operations", "liftOver", "testlabel1"]);
+    });
+});
+
+describe("getValidPanelItems", () => {
+    it("keeps sections with valid tools and removes empty sections", () => {
+        // First pass: filter tools in sections
+        const validIds = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
+        const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const result = getValidPanelItems(sectionEntries, validIds);
+        // collection_operations has 1 valid tool, liftOver has 1 valid tool
+        expect(result["collection_operations"]).toBeDefined();
+        expect(result["liftOver"]).toBeDefined();
+        expect((result["collection_operations"] as ToolSection).tools).toEqual(["__FILTER_FAILED_DATASETS__"]);
+        expect((result["liftOver"] as ToolSection).tools).toEqual(["liftOver1"]);
+    });
+
+    it("removes sections whose tools are all filtered out", () => {
+        const validIds = ["liftOver1"];
+        const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const result = getValidPanelItems(sectionEntries, validIds);
+        // collection_operations has 0 valid tools so should be removed
+        expect(result["collection_operations"]).toBeUndefined();
+        expect(result["liftOver"]).toBeDefined();
+    });
+
+    it("excludes sections by excludedSectionIds", () => {
+        const validIds = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
+        const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const result = getValidPanelItems(sectionEntries, validIds, ["liftOver"]);
+        expect(result["collection_operations"]).toBeDefined();
+        expect(result["liftOver"]).toBeUndefined();
+    });
+
+    it("keeps ToolSectionLabels (items without tools property)", () => {
+        const validIds = ["liftOver1"];
+        const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
+
+        const result = getValidPanelItems(sectionEntries, validIds);
+        // testlabel1 is a ToolSectionLabel and should be kept
+        expect(result["testlabel1"]).toBeDefined();
+        expect((result["testlabel1"] as ToolSectionLabel).model_class).toBe("ToolSectionLabel");
+    });
+
+    it("keeps standalone Tool items when they are in validToolIdsInCurrentView", () => {
+        const standaloneTool = {
+            model_class: "Tool",
+            id: "standalone_tool",
+            name: "Standalone",
+            description: "A standalone tool",
+        } as unknown as Tool;
+
+        const items: [string, ToolPanelItem][] = [
+            ["standalone_tool", standaloneTool as unknown as ToolSection],
+            [
+                "some_section",
+                {
+                    model_class: "ToolSection",
+                    id: "some_section",
+                    name: "Some Section",
+                    tools: ["standalone_tool"],
+                } as ToolSection,
+            ],
+        ];
+
+        const result = getValidPanelItems(items, ["standalone_tool"]);
+        expect(result["standalone_tool"]).toBeDefined();
+        expect(result["some_section"]).toBeDefined();
+    });
+
+    it("pipeline: getValidToolsInEachSection → getValidPanelItems mirrors ToolBox.vue usage", () => {
+        // Simulates the localSectionsById computed in ToolBox.vue
+        const allToolIds = toolsList.map((t) => t.id);
+        const sectionEntries = getValidToolsInEachSection(allToolIds, toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, allToolIds);
+
+        // All sections with tools should be present
+        expect(result["collection_operations"]).toBeDefined();
+        expect(result["liftOver"]).toBeDefined();
+        // Label should be present
+        expect(result["testlabel1"]).toBeDefined();
+        // Tools should be unmodified (all are valid)
+        expect((result["collection_operations"] as ToolSection).tools).toHaveLength(4);
+        expect((result["liftOver"] as ToolSection).tools).toHaveLength(1);
+    });
+
+    it("pipeline with exclusions: excludes specified section ids", () => {
+        const allToolIds = toolsList.map((t) => t.id);
+        const sectionEntries = getValidToolsInEachSection(allToolIds, toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, allToolIds, ["collection_operations"]);
+
+        expect(result["collection_operations"]).toBeUndefined();
+        expect(result["liftOver"]).toBeDefined();
+        expect(result["testlabel1"]).toBeDefined();
+    });
+
+    it("returns empty object when all sections are excluded or empty", () => {
+        const sectionEntries = getValidToolsInEachSection([], toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, []);
+
+        // Only the label should remain (no tools property)
+        expect(result["collection_operations"]).toBeUndefined();
+        expect(result["liftOver"]).toBeUndefined();
+        expect(result["testlabel1"]).toBeDefined();
+    });
+});
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 55121523833..8dca95fe24e 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -15,7 +15,13 @@ import {
 import { orderBy } from "lodash";
 
 import { isTool, isToolSection } from "@/api/tools";
-import type { FilterSettings as ToolFilters, Tool, ToolSection, ToolSectionLabel } from "@/stores/toolStore";
+import type {
+    FilterSettings as ToolFilters,
+    Tool,
+    ToolPanelItem,
+    ToolSection,
+    ToolSectionLabel,
+} from "@/stores/toolStore";
 import levenshteinDistance from "@/utils/levenshtein";
 
 export const FAVORITES_KEYS = ["#favs", "#favorites", "#favourites"];
@@ -243,8 +249,8 @@ export function getValidToolsInCurrentView(
 /** Looks in each section of `currentPanel` and filters `section.tools` on `validToolIdsInCurrentView` */
 export function getValidToolsInEachSection(
     validToolIdsInCurrentView: string[],
-    currentPanel: Record<string, Tool | ToolSection>,
-): Array<[string, Tool | ToolSection]> {
+    currentPanel: Record<string, ToolPanelItem>,
+): Array<[string, ToolPanelItem]> {
     // use a set for fast membership lookup
     const idSet = new Set(validToolIdsInCurrentView);
     return Object.entries(currentPanel).map(([id, section]) => {
@@ -276,7 +282,7 @@ export function getValidToolsInEachSection(
  * @returns a `currentPanel` object containing sections/tools/labels that meet required conditions
  */
 export function getValidPanelItems(
-    items: Array<[string, ToolSection | Tool]>,
+    items: Array<[string, ToolPanelItem]>,
     validToolIdsInCurrentView: string[],
     excludedSectionIds: string[] = [],
 ) {
diff --git a/client/src/stores/toolStore.ts b/client/src/stores/toolStore.ts
index 77a5d78484c..2c6de8be01d 100644
--- a/client/src/stores/toolStore.ts
+++ b/client/src/stores/toolStore.ts
@@ -115,7 +115,7 @@ export const useToolStore = defineStore("toolStore", () => {
     const searchWorker = ref<Worker | undefined>(undefined);
     const toolsById = shallowRef<Record<string, Tool>>({});
     const toolResults = ref<Record<string, string[]>>({});
-    const toolSections = ref<Record<string, Record<string, Tool | ToolSection>>>({});
+    const toolSections = ref<Record<string, Record<string, ToolPanelItem>>>({});
     const fetchedHelpIds = ref<Set<string>>(new Set());
     const helpDataCached = ref<Record<string, ToolHelpData>>({});
 
@@ -326,7 +326,7 @@ export const useToolStore = defineStore("toolStore", () => {
         );
     }
 
-    function saveToolSections(panelView: string, newPanel: { [id: string]: ToolSection | Tool }) {
+    function saveToolSections(panelView: string, newPanel: { [id: string]: ToolPanelItem }) {
         Vue.set(toolSections.value, panelView, newPanel);
     }
 

From 99ff3bee2aa2289051461d90dce88e2354f34fe3 Mon Sep 17 00:00:00 2001
From: "Claude Opus 4.6" <noreply@anthropic.com>
Date: Tue, 10 Feb 2026 15:51:08 -0600
Subject: [PATCH 17/30] add element ordering and sorting tests for ToolSection
 component

---
 ...oolSection.test.js => ToolSection.test.ts} | 80 ++++++++++++++++---
 1 file changed, 69 insertions(+), 11 deletions(-)
 rename client/src/components/Panels/Common/{ToolSection.test.js => ToolSection.test.ts} (54%)

diff --git a/client/src/components/Panels/Common/ToolSection.test.js b/client/src/components/Panels/Common/ToolSection.test.ts
similarity index 54%
rename from client/src/components/Panels/Common/ToolSection.test.js
rename to client/src/components/Panels/Common/ToolSection.test.ts
index c7b3431d011..c523e5946fa 100644
--- a/client/src/components/Panels/Common/ToolSection.test.js
+++ b/client/src/components/Panels/Common/ToolSection.test.ts
@@ -1,28 +1,30 @@
 import { getLocalVue } from "@tests/vitest/helpers";
-import { mount } from "@vue/test-utils";
+import { mount, type Wrapper } from "@vue/test-utils";
 import { createPinia } from "pinia";
 import { describe, expect, test, vi } from "vitest";
+import { ref } from "vue";
 
-import { setMockConfig } from "@/composables/__mocks__/config";
+import type { Tool, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 
 import ToolSection from "./ToolSection.vue";
 
-vi.mock("@/composables/config");
-
-setMockConfig({
-    toolbox_auto_sort: true,
-});
+vi.mock("@/composables/config", () => ({
+    useConfig: vi.fn(() => ({
+        config: ref({ toolbox_auto_sort: true }),
+        isConfigLoaded: ref(true),
+    })),
+}));
 
 const localVue = getLocalVue();
 const pinia = createPinia();
 
-function sectionIsOpened(wrapper) {
+function sectionIsOpened(wrapper: Wrapper<Vue>) {
     return wrapper.find("[data-description='opened tool panel section']").exists();
 }
 
 describe("ToolSection", () => {
     test("test tool section", () => {
-        const wrapper = mount(ToolSection, {
+        const wrapper = mount(ToolSection as object, {
             propsData: {
                 category: {
                     name: "name",
@@ -38,7 +40,7 @@ describe("ToolSection", () => {
     });
 
     test("test tool section title", async () => {
-        const wrapper = mount(ToolSection, {
+        const wrapper = mount(ToolSection as object, {
             propsData: {
                 category: {
                     title: "tool_section",
@@ -47,6 +49,8 @@ describe("ToolSection", () => {
                             name: "name",
                         },
                         {
+                            model_class: "ToolSectionLabel",
+                            id: "label",
                             text: "text",
                         },
                     ],
@@ -68,7 +72,7 @@ describe("ToolSection", () => {
     });
 
     test("test tool slider state", async () => {
-        const wrapper = mount(ToolSection, {
+        const wrapper = mount(ToolSection as object, {
             propsData: {
                 category: {
                     title: "tool_section",
@@ -77,6 +81,8 @@ describe("ToolSection", () => {
                             name: "name",
                         },
                         {
+                            model_class: "ToolSectionLabel",
+                            id: "label",
                             text: "text",
                         },
                     ],
@@ -104,3 +110,55 @@ describe("ToolSection", () => {
         expect(sectionIsOpened(wrapper)).toBe(false);
     });
 });
+
+describe("ToolSection element ordering", () => {
+    function mountSection(
+        elems: (ToolSectionType | ToolSectionLabel | Tool)[],
+        propsOverrides: { sortItems?: boolean } = {},
+    ) {
+        return mount(ToolSection as object, {
+            propsData: {
+                category: {
+                    title: "test_section",
+                    elems,
+                },
+                ...propsOverrides,
+            },
+            localVue,
+            pinia,
+        });
+    }
+
+    const tools = [
+        { id: "z_tool", name: "Zebra" },
+        { id: "a_tool", name: "Apple" },
+        { id: "m_tool", name: "Mango" },
+    ] as Tool[];
+
+    function getRenderedToolIds(wrapper: Wrapper<Vue>) {
+        return wrapper.findAll("[data-tool-id]").wrappers.map((w) => w.attributes("data-tool-id"));
+    }
+
+    test("renders tools alphabetically by default", async () => {
+        const wrapper = mountSection(tools);
+        await wrapper.find(".name").trigger("click");
+        expect(getRenderedToolIds(wrapper)).toEqual(["a_tool", "m_tool", "z_tool"]);
+    });
+
+    test("preserves original order when sortItems is false", async () => {
+        const wrapper = mountSection(tools, { sortItems: false });
+        await wrapper.find(".name").trigger("click");
+        expect(getRenderedToolIds(wrapper)).toEqual(["z_tool", "a_tool", "m_tool"]);
+    });
+
+    test("does not render ToolSectionLabels as tools", async () => {
+        const elemsWithLabel = [
+            { id: "z_tool", name: "Zebra" },
+            { model_class: "ToolSectionLabel", id: "label_1", text: "A Label" },
+            { id: "a_tool", name: "Apple" },
+        ] as (ToolSectionLabel | Tool)[];
+        const wrapper = mountSection(elemsWithLabel);
+        await wrapper.find(".name").trigger("click");
+        expect(getRenderedToolIds(wrapper)).toEqual(["z_tool", "a_tool"]);
+    });
+});

From 9237bd16f4466786df05aee765aa6980ce7e5d1e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Feb 2026 16:57:15 -0600
Subject: [PATCH 18/30] remove tool panel tool "operation" handlers

Existed for the worklfow version of the toolbox which works differently now
---
 .../src/components/Panels/Common/Tool.test.js | 25 -------------------
 client/src/components/Panels/Common/Tool.vue  | 18 -------------
 .../components/Panels/Common/ToolSection.vue  | 14 -----------
 3 files changed, 57 deletions(-)

diff --git a/client/src/components/Panels/Common/Tool.test.js b/client/src/components/Panels/Common/Tool.test.js
index 38045bd6fed..7202102b1f9 100644
--- a/client/src/components/Panels/Common/Tool.test.js
+++ b/client/src/components/Panels/Common/Tool.test.js
@@ -28,31 +28,6 @@ describe("Tool", () => {
         expect(wrapper.emitted().onClick).toBeDefined();
         const labelsElement = wrapper.find(".labels");
         expect(labelsElement.children).toBeUndefined();
-        const operationElement = wrapper.find(".operation");
-        expect(operationElement.classes()).toEqual(expect.arrayContaining(["operation"]));
-        operationElement.trigger("click");
-        expect(wrapper.emitted().onOperation).toBeDefined();
-    });
-    test("test tool operation", () => {
-        const pinia = createTestingPinia({ createSpy: vi.fn });
-        const wrapper = mount(Tool, {
-            propsData: {
-                tool: {
-                    id: "test_tool",
-                    name: "name",
-                },
-                operationIcon: "operationIconClass",
-                operationTitle: "operationTitle",
-            },
-            localVue,
-            pinia,
-        });
-        const nameElement = wrapper.findAll(".name");
-        expect(nameElement.at(0).text()).toBe("name");
-        const operationElement = wrapper.find(".operation");
-        expect(operationElement.classes()).toEqual(expect.arrayContaining(["operationIconClass"]));
-        const title = operationElement.attributes("title");
-        expect(title).toBe("operationTitle");
     });
     test("test tool hide name, test description", () => {
         const pinia = createTestingPinia({ createSpy: vi.fn });
diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index f47c2011af3..630650b54af 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -11,22 +11,17 @@ import ToolFavoriteButton from "@/components/Tool/Buttons/ToolFavoriteButton.vue
 
 interface Props {
     tool: ToolType;
-    operationTitle?: string;
-    operationIcon?: string;
     hideName?: boolean;
     showFavoriteButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    operationTitle: "",
-    operationIcon: "",
     hideName: false,
     showFavoriteButton: false,
 });
 
 const emit = defineEmits<{
     (e: "onClick", tool: ToolType, evt: MouseEvent): void;
-    (e: "onOperation", tool: ToolType, evt: MouseEvent | KeyboardEvent): void;
 }>();
 
 const toolStore = useToolStore();
@@ -42,11 +37,6 @@ function onClick(evt: MouseEvent) {
     ariaAlert(`${props.tool.name} selected from panel`);
     emit("onClick", props.tool, evt);
 }
-
-function onOperation(evt: MouseEvent | KeyboardEvent) {
-    ariaAlert(`${props.tool.name} operation selected from panel`);
-    emit("onOperation", props.tool, evt);
-}
 </script>
 
 <template>
@@ -73,14 +63,6 @@ function onOperation(evt: MouseEvent | KeyboardEvent) {
             </span>
             <span v-if="!props.hideName" class="name font-weight-bold">{{ props.tool.name }}</span>
             <span class="description">{{ props.tool.description }}</span>
-            <span
-                v-b-tooltip.hover
-                :class="['operation', 'float-right', props.operationIcon]"
-                role="button"
-                tabindex="0"
-                :title="props.operationTitle"
-                @keydown.enter.prevent="onOperation"
-                @click.stop.prevent="onOperation" />
         </a>
         <ToolFavoriteButton
             v-if="props.showFavoriteButton || isFavorite"
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 1a8b9a90613..0a4ae54dfc4 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -16,7 +16,6 @@ import ToolPanelLinks from "./ToolPanelLinks.vue";
 const emit = defineEmits<{
     (e: "onClick", tool: ToolType, evt: Event): void;
     (e: "onFilter", filter: string): void;
-    (e: "onOperation", tool: any, evt: Event): void;
     (e: "onLabelToggle", labelId: string): void;
 }>();
 
@@ -27,8 +26,6 @@ interface Props {
     queryFilter?: string;
     disableFilter?: boolean;
     hideName?: boolean;
-    operationTitle?: string;
-    operationIcon?: string;
     expanded?: boolean;
     sortItems?: boolean;
     hasFilterButton?: boolean;
@@ -41,8 +38,6 @@ const props = withDefaults(defineProps<Props>(), {
     queryFilter: "",
     disableFilter: false,
     hideName: false,
-    operationTitle: "",
-    operationIcon: "",
     expanded: false,
     sortItems: true,
     hasFilterButton: false,
@@ -152,9 +147,6 @@ function checkFilter() {
 function onClick(tool: ToolType, evt: Event) {
     emit("onClick", tool, evt);
 }
-function onOperation(tool: any, evt: Event) {
-    emit("onOperation", tool, evt);
-}
 function onLabelToggle(labelId: string) {
     emit("onLabelToggle", labelId);
 }
@@ -210,10 +202,7 @@ function getCollapsedState(id: string): boolean | undefined {
                         class="ml-2"
                         :tool="el"
                         :hide-name="hideName"
-                        :operation-title="operationTitle"
-                        :operation-icon="operationIcon"
                         :show-favorite-button="props.showFavoriteButton || searchActive"
-                        @onOperation="onOperation"
                         @onClick="onClick" />
                 </template>
             </div>
@@ -228,10 +217,7 @@ function getCollapsedState(id: string): boolean | undefined {
         v-else-if="isTool(props.category)"
         :tool="props.category"
         :hide-name="hideName"
-        :operation-title="operationTitle"
-        :operation-icon="operationIcon"
         :show-favorite-button="props.showFavoriteButton || searchActive"
-        @onOperation="onOperation"
         @onClick="onClick" />
 </template>
 

From 7c36513131276131dfa510bbad59af96bb329802 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Feb 2026 16:58:15 -0600
Subject: [PATCH 19/30] center the my tool panel tool favorite button

---
 client/src/components/Panels/Common/Tool.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Panels/Common/Tool.vue b/client/src/components/Panels/Common/Tool.vue
index 630650b54af..f4fa226d7dd 100644
--- a/client/src/components/Panels/Common/Tool.vue
+++ b/client/src/components/Panels/Common/Tool.vue
@@ -76,7 +76,7 @@ function onClick(evt: MouseEvent) {
 <style scoped>
 .toolTitle {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     overflow-wrap: anywhere;
 }
 .tool-link {

From 4153ba95dc98b17c22c815e32a5cb530439cee47 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Feb 2026 16:58:49 -0600
Subject: [PATCH 20/30] convert `Tool.vue`'s vitest to TS

---
 .../Panels/Common/{Tool.test.js => Tool.test.ts}       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)
 rename client/src/components/Panels/Common/{Tool.test.js => Tool.test.ts} (89%)

diff --git a/client/src/components/Panels/Common/Tool.test.js b/client/src/components/Panels/Common/Tool.test.ts
similarity index 89%
rename from client/src/components/Panels/Common/Tool.test.js
rename to client/src/components/Panels/Common/Tool.test.ts
index 7202102b1f9..9ec93d02dcf 100644
--- a/client/src/components/Panels/Common/Tool.test.js
+++ b/client/src/components/Panels/Common/Tool.test.ts
@@ -13,7 +13,7 @@ const localVue = getLocalVue();
 describe("Tool", () => {
     test("test tool", () => {
         const pinia = createTestingPinia({ createSpy: vi.fn });
-        const wrapper = mount(Tool, {
+        const wrapper = mount(Tool as object, {
             propsData: {
                 tool: {
                     id: "test_tool",
@@ -27,11 +27,11 @@ describe("Tool", () => {
         nameElement.trigger("click");
         expect(wrapper.emitted().onClick).toBeDefined();
         const labelsElement = wrapper.find(".labels");
-        expect(labelsElement.children).toBeUndefined();
+        expect(labelsElement.element.children.length).toBe(0);
     });
     test("test tool hide name, test description", () => {
         const pinia = createTestingPinia({ createSpy: vi.fn });
-        const wrapper = mount(Tool, {
+        const wrapper = mount(Tool as object, {
             propsData: {
                 tool: {
                     id: "test_tool",
@@ -51,7 +51,7 @@ describe("Tool", () => {
 
     test("favorite button is focusable for keyboard navigation", async () => {
         const pinia = createTestingPinia({ createSpy: vi.fn });
-        const wrapper = mount(Tool, {
+        const wrapper = mount(Tool as object, {
             propsData: {
                 tool: {
                     id: "test_tool",
@@ -68,7 +68,7 @@ describe("Tool", () => {
 
         const favoriteButton = wrapper.find('.tool-favorite-button-hover[data-tool-id="test_tool"]');
         expect(favoriteButton.exists()).toBe(true);
-        favoriteButton.element.focus();
+        (favoriteButton.element as HTMLElement).focus();
         expect(document.activeElement).toBe(favoriteButton.element);
 
         wrapper.destroy();

From d87894972a8333f9db03f37d41552a703b70bf92 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Feb 2026 18:06:26 -0600
Subject: [PATCH 21/30] correct variable name from `panel` to `panelItem` to
 clear ambiguity

---
 client/src/components/Panels/ToolBox.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 6d0c3e77a63..41ef77af07d 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -413,8 +413,8 @@ function onLabelToggle(labelId: string) {
         <div class="unified-panel-body">
             <div class="toolMenuContainer">
                 <div v-if="localPanel" class="toolMenu">
-                    <div v-for="(panel, key) in localPanel" :key="key">
-                        <div v-if="panel?.id === PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT" class="tool-panel-empty">
+                    <div v-for="(panelItem, key) in localPanel" :key="key">
+                        <div v-if="panelItem?.id === PANEL_LABEL_IDS.FAVORITES_EMPTY_ALERT" class="tool-panel-empty">
                             <BAlert variant="info" show>
                                 <template v-if="!isAnonymous">
                                     You haven't favorited any tools yet. Search the toolbox or use
@@ -443,16 +443,16 @@ function onLabelToggle(labelId: string) {
                             </BAlert>
                         </div>
                         <ToolSection
-                            v-else-if="panel"
-                            :category="panel"
+                            v-else-if="panelItem"
+                            :category="panelItem"
                             :query-filter="hasResults ? query : undefined"
                             :has-filter-button="
                                 hasResults &&
                                 currentPanelView === 'default' &&
-                                panel.id !== PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION
+                                panelItem.id !== PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION
                             "
                             :search-active="hasResults"
-                            :show-favorite-button="recentToolIdsToShowSet.has(panel.id)"
+                            :show-favorite-button="recentToolIdsToShowSet.has(panelItem.id)"
                             :collapsed-labels="collapsedLabels"
                             @onClick="onToolClick"
                             @onFilter="onSectionFilter"

From 647080efacc9be40ddf7e1ad2a8847c0264af17c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 11 Feb 2026 13:01:18 -0600
Subject: [PATCH 22/30] disable "Unsectioned" tool section filter button

---
 client/src/components/Panels/ToolBox.vue  | 4 +++-
 client/src/components/Panels/utilities.ts | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 41ef77af07d..291381f2b7f 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -24,6 +24,7 @@ import {
     getValidPanelItems,
     getValidToolsInCurrentView,
     getValidToolsInEachSection,
+    UNSECTIONED_SECTION,
 } from "./utilities";
 
 import GButton from "../BaseComponents/GButton.vue";
@@ -449,7 +450,8 @@ function onLabelToggle(labelId: string) {
                             :has-filter-button="
                                 hasResults &&
                                 currentPanelView === 'default' &&
-                                panelItem.id !== PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION
+                                panelItem.id !== PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION &&
+                                panelItem.id !== UNSECTIONED_SECTION.id
                             "
                             :search-active="hasResults"
                             :show-favorite-button="recentToolIdsToShowSet.has(panelItem.id)"
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 8dca95fe24e..12d15feed00 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -78,13 +78,13 @@ const FILTER_KEYS = {
 const STRING_REPLACEMENTS: string[] = [" ", "-", "\\(", "\\)", "'", ":", `"`];
 const MINIMUM_DL_LENGTH = 5; // for Demerau-Levenshtein distance
 const MINIMUM_WORD_MATCH = 2; // for word match
-const UNSECTIONED_SECTION: ToolSection = {
+export const UNSECTIONED_SECTION: ToolSection = {
     // to return a section for unsectioned tools
     model_class: "ToolSection",
     id: "unsectioned",
     name: "Unsectioned Tools",
     description: "Tools that don't appear under any section in the unsearched panel",
-};
+} as const;
 
 export interface SearchCommonKeys {
     [key: string]: number | undefined;

From f5a34a17e7eb176264d6f8db7c100db897d6fa48 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 11 Feb 2026 15:13:29 -0600
Subject: [PATCH 23/30] further type and annotate tool panel methods

---
 .../components/Panels/Common/ToolSearch.vue   |   6 +-
 .../components/Panels/Common/ToolSection.vue  |  20 ++-
 client/src/components/Panels/ToolBox.vue      | 157 +++++++++++++-----
 .../src/components/Panels/utilities.test.ts   |  34 ++--
 client/src/components/Panels/utilities.ts     |  49 +++---
 client/src/composables/toolPanelFavorites.ts  |   1 +
 6 files changed, 173 insertions(+), 94 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSearch.vue b/client/src/components/Panels/Common/ToolSearch.vue
index 4401b3e6cc2..a2e124b312b 100644
--- a/client/src/components/Panels/Common/ToolSearch.vue
+++ b/client/src/components/Panels/Common/ToolSearch.vue
@@ -5,7 +5,7 @@ import { nextTick } from "vue";
 import { onMounted, onUnmounted, type PropType, watch } from "vue";
 
 import { FAVORITES_KEYS, searchTools } from "@/components/Panels/utilities";
-import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
+import { type Tool, type ToolPanelItem, type ToolSection, useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 import _l from "@/utils/localization";
 
@@ -36,7 +36,7 @@ const props = defineProps({
         required: true,
     },
     currentPanel: {
-        type: Object as PropType<Record<string, Tool | ToolSection>>,
+        type: Object as PropType<Record<string, ToolPanelItem>>,
         required: true,
     },
     useWorker: {
@@ -62,7 +62,7 @@ const { searchWorker } = storeToRefs(toolStore);
 interface RequestPayload {
     tools: Tool[];
     query: string;
-    currentPanel: Record<string, Tool | ToolSection>;
+    currentPanel: Record<string, ToolPanelItem>;
 }
 
 interface SearchEventQuery {
diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index 0a4ae54dfc4..cea5a1160be 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -9,6 +9,8 @@ import { useConfig } from "@/composables/config";
 import { type Tool as ToolType, type ToolPanelItem, useToolStore } from "@/stores/toolStore";
 import ariaAlert from "@/utils/ariaAlert";
 
+import { PANEL_LABEL_IDS } from "../panelViews";
+
 import Tool from "./Tool.vue";
 import ToolPanelLabel from "./ToolPanelLabel.vue";
 import ToolPanelLinks from "./ToolPanelLinks.vue";
@@ -31,7 +33,11 @@ interface Props {
     hasFilterButton?: boolean;
     searchActive?: boolean;
     showFavoriteButton?: boolean;
-    collapsedLabels?: Record<string, boolean>;
+    collapsedLabels?: {
+        [PANEL_LABEL_IDS.FAVORITES_LABEL]: boolean;
+        [PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL]: boolean;
+        [PANEL_LABEL_IDS.RECENT_TOOLS_LABEL]: boolean;
+    } | null;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,7 +49,7 @@ const props = withDefaults(defineProps<Props>(), {
     hasFilterButton: false,
     searchActive: false,
     showFavoriteButton: false,
-    collapsedLabels: () => ({}),
+    collapsedLabels: null,
 });
 
 const { config, isConfigLoaded } = useConfig();
@@ -154,7 +160,15 @@ function toggleMenu(nextState = !opened.value) {
     opened.value = nextState;
 }
 function getCollapsedState(id: string): boolean | undefined {
-    return typeof props.collapsedLabels[id] === "boolean" ? props.collapsedLabels[id] : undefined;
+    const validStateLabels = [
+        PANEL_LABEL_IDS.FAVORITES_LABEL,
+        PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL,
+        PANEL_LABEL_IDS.RECENT_TOOLS_LABEL,
+    ] as const;
+    if (validStateLabels.includes(id as (typeof validStateLabels)[number])) {
+        return props.collapsedLabels ? props.collapsedLabels[id as (typeof validStateLabels)[number]] : undefined;
+    }
+    return undefined;
 }
 </script>
 
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 291381f2b7f..ac367c82b3c 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,12 +3,12 @@ import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BBadge } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, type ComputedRef, type Ref, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { useGlobalUploadModal } from "@/composables/globalUploadModal";
 import { useToolRouting } from "@/composables/route";
 import { useFavoriteSearchResults, useToolPanelFavorites } from "@/composables/toolPanelFavorites";
-import type { Tool, ToolPanelItem, ToolSection as ToolSectionType } from "@/stores/toolStore";
+import type { Tool, ToolPanelItem, ToolSection as ToolSectionType, ToolSectionLabel } from "@/stores/toolStore";
 import { useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
@@ -22,8 +22,8 @@ import {
     filterPanelByToolIds,
     filterTools,
     getValidPanelItems,
-    getValidToolsInCurrentView,
     getValidToolsInEachSection,
+    getVisibleTools,
     UNSECTIONED_SECTION,
 } from "./utilities";
 
@@ -32,7 +32,8 @@ import ToolSearch from "./Common/ToolSearch.vue";
 import ToolSection from "./Common/ToolSection.vue";
 
 const LOGIN_ROUTE = "/login/start";
-const SECTION_IDS_TO_EXCLUDE = ["expression_tools"]; // if this isn't the Workflow Editor panel
+/** Section IDs that are only valid for the workflow editor toolbox, and should be excluded from the regular toolbox. */
+const WORKFLOW_ONLY_SECTION_IDS = ["expression_tools"];
 const TOOLS_LIST_ROUTE = "/tools/list";
 
 const { openGlobalUploadModal } = useGlobalUploadModal();
@@ -44,9 +45,25 @@ const emit = defineEmits<{
 }>();
 
 interface Props {
+    /** Whether this is the toolbox in the workflow editor
+     * @default false
+     */
     workflow?: boolean;
+
+    /** Whether to use a search worker for searching tools
+     * @default true
+     */
     useSearchWorker?: boolean;
+
+    /** This is used to automatically apply the "#favorites"
+     * filter when this prop is true.
+     * @default false
+     */
     showFavorites?: boolean;
+
+    /** Whether this is the `My Tools` panel
+     * @default false
+     */
     favoritesDefault?: boolean;
 }
 
@@ -62,9 +79,9 @@ const { isAnonymous } = storeToRefs(useUserStore());
 const query = ref("");
 const queryPending = ref(false);
 const showSections = ref(props.workflow);
-const results: Ref<string[]> = ref([]);
-const resultPanel: Ref<Record<string, Tool | ToolSectionType> | null> = ref(null);
-const closestTerm: Ref<string | null> = ref(null);
+const results = ref<string[]>([]);
+const resultPanel = ref<Record<string, Tool | ToolSectionType> | null>(null);
+const closestTerm = ref<string | null>(null);
 
 const toolStore = useToolStore();
 
@@ -106,31 +123,54 @@ watch(
     },
 );
 
-/** `toolsById` from `toolStore`, except it only has valid tools for `props.workflow` value */
+/**
+ * `toolsById` from `toolStore`
+ *
+ * Although, in the case of `props.workflow` (workflow editor toolbox),
+ * it only has tools that are valid for the workflow editor.
+ */
 const localToolsById = computed(() => {
     if (toolStore.toolsById && Object.keys(toolStore.toolsById).length > 0) {
-        return getValidToolsInCurrentView(
-            toolStore.toolsById,
-            props.workflow,
-            !props.workflow ? SECTION_IDS_TO_EXCLUDE : [],
-        );
+        return getVisibleTools(toolStore.toolsById, props.workflow, !props.workflow ? WORKFLOW_ONLY_SECTION_IDS : []);
     }
     return {};
 });
 
-/** `currentPanel` from `toolStore`, except it only has valid tools and sections for `props.workflow` value */
-const localSectionsById = computed(() => {
-    const validToolIdsInCurrentView = Object.keys(localToolsById.value);
+const localToolIds = computed(() => new Set(Object.keys(localToolsById.value)));
 
+/**
+ * `currentToolSections` from `toolStore`
+ *
+ * Although, in the case of `props.workflow` (workflow editor toolbox),
+ * it only has sections that are valid for the workflow editor.
+ */
+const localSectionsById = computed<Record<string, ToolPanelItem>>(() => {
     // Looking within each `ToolSection`, and filtering on child elements
-    const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, currentToolSections.value);
+    const sectionEntries = getValidToolsInEachSection(localToolIds.value, currentToolSections.value);
 
     // Looking at each item in the panel now (not within each child)
-    return getValidPanelItems(
-        sectionEntries,
-        validToolIdsInCurrentView,
-        !props.workflow ? SECTION_IDS_TO_EXCLUDE : [],
-    ) as Record<string, Tool | ToolSectionType>;
+    return getValidPanelItems(sectionEntries, localToolIds.value, !props.workflow ? WORKFLOW_ONLY_SECTION_IDS : []);
+});
+
+/**
+ * Same as `localSectionsById` except for the default panel view.
+ *
+ * This is used mainly to show a sectioned results view in the `My Tools` panel when there is a search query, since the
+ * `My Tools` panel doesn't have sections of it's own; so we use the default view's sections as the section for each result.
+ *
+ * @returns
+ * - `toolSections[defaultPanelView]` from `toolStore` - if the `defaultPanelView` is set
+ * - `null` if the `defaultPanelView` is not set or if it doesn't have sections in `toolSections`
+ */
+const defaultSectionsById = computed<Record<string, ToolPanelItem> | null>(() => {
+    const defaultPanelSections = defaultPanelView.value ? toolSections.value[defaultPanelView.value] : null;
+    if (!defaultPanelSections) {
+        return null;
+    }
+
+    // Looking within each `default` view `ToolSection`, and filtering on child elements
+    const sectionEntries = getValidToolsInEachSection(localToolIds.value, defaultPanelSections);
+    return getValidPanelItems(sectionEntries, localToolIds.value, !props.workflow ? WORKFLOW_ONLY_SECTION_IDS : []);
 });
 
 // Use composable for favorites and recent tools management
@@ -148,27 +188,21 @@ const {
 const { favoriteResults, nonFavoriteResults, hasMixedResults } = useFavoriteSearchResults(results, favoriteToolIdSet);
 
 const toolsCount = computed(() => toolsList.value.length);
-const showEmptyFavorites = computed(() => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0);
 
-const defaultSectionsById = computed(() => {
-    if (!defaultPanelView.value) {
-        return null;
-    }
-    const defaultPanelSections = toolSections.value[defaultPanelView.value];
-    if (!defaultPanelSections) {
-        return null;
-    }
-    const validToolIdsInCurrentView = Object.keys(localToolsById.value);
-    const sectionEntries = getValidToolsInEachSection(validToolIdsInCurrentView, defaultPanelSections);
-    return getValidPanelItems(
-        sectionEntries,
-        validToolIdsInCurrentView,
-        !props.workflow ? SECTION_IDS_TO_EXCLUDE : [],
-    ) as Record<string, Tool | ToolSectionType>;
-});
+/** Whether to show the "empty favorites" alert:
+ *  - If the current panel is the `My Tools` panel
+ *  - There is no search query
+ *  - The user has no favorite tools
+ */
+const showEmptyFavorites = computed(() => props.favoritesDefault && !query.value && favoriteToolIds.value.length === 0);
 
 const resultsSet = computed(() => new Set(results.value));
 const nonFavoriteResultsSet = computed(() => new Set(nonFavoriteResults.value));
+
+/**
+ * A panel with just one section that has all tools in it. Only used in the case that
+ * `defaultSectionsById` is `null` (`default` panel view doesn't exist or doesn't have sections yet)
+ */
 const allToolsPanel = computed(() => {
     return {
         [PANEL_LABEL_IDS.ALL_TOOLS_SECTION]: {
@@ -179,6 +213,8 @@ const allToolsPanel = computed(() => {
         },
     } as Record<string, Tool | ToolSectionType>;
 });
+
+/** The `currentPanel` which will be used by the tool search to search tools */
 const searchPanelSections = computed(() => {
     if (props.favoritesDefault) {
         return defaultSectionsById.value || allToolsPanel.value;
@@ -188,14 +224,21 @@ const searchPanelSections = computed(() => {
 
 const toolsList = computed(() => Object.values(localToolsById.value));
 
-const flatResultsPanel = computed<Record<string, ToolPanelItem> | null>(() => {
+/**
+ * For search results, this creates a panel which - if results are not mixed between favorite
+ * and non-favorite tools - contains just the tools that are in the search results; if
+ * results are mixed, it creates two sections: one for favorite results and one for non-favorite results.
+ */
+const flatResultsPanel = computed<Record<string, Tool | ToolSectionLabel> | null>(() => {
     if (!hasResults.value) {
         return null;
     }
+
     if (!hasMixedResults.value) {
-        return filterTools(localToolsById.value, results.value) as Record<string, ToolPanelItem>;
+        return filterTools(localToolsById.value, results.value);
     }
-    const entries: Array<[string, ToolPanelItem]> = [];
+
+    const entries: Array<[string, Tool | ToolSectionLabel]> = [];
     entries.push([
         PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL,
         buildToolLabel(PANEL_LABEL_IDS.FAVORITES_RESULTS_LABEL, localize("Favorites")),
@@ -211,6 +254,12 @@ const flatResultsPanel = computed<Record<string, ToolPanelItem> | null>(() => {
     return Object.fromEntries(entries);
 });
 
+/**
+ * The custom/client built `My Tools` panel when `props.favoritesDefault` is true.
+ * This panel shows favorite and recent tools when there is no search query.
+ *
+ * Unlike panel views returned by the `toolStore`, this panel is built here on the client side.
+ */
 const favoritesDefaultPanel = computed<Record<string, ToolPanelItem> | null>(() => {
     if (!props.favoritesDefault || query.value) {
         return null;
@@ -245,20 +294,32 @@ const favoritesDefaultPanel = computed<Record<string, ToolPanelItem> | null>(()
     return Object.fromEntries(entries);
 });
 
-const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> | null>(() => {
+/**
+ * For tool search results, this returns a results panel.
+ */
+const sectionedResultsPanel = computed<Record<string, ToolPanelItem> | null>(() => {
     if (!hasResults.value) {
         return null;
     }
+
+    /** The base panel to filter results from.
+     *
+     * If `props.favoritesDefault` is true, we use the `default` panel view's sections
+     * from `toolStore` as the base panel to filter results from.
+     * Otherwise, we use the `resultPanel` returned from the search.
+     */
     const basePanel =
         props.favoritesDefault && defaultSectionsById.value ? defaultSectionsById.value : resultPanel.value;
     if (!basePanel) {
         return null;
     }
+
     if (!hasMixedResults.value) {
         return props.favoritesDefault && defaultSectionsById.value
             ? filterPanelByToolIds(basePanel, resultsSet.value)
             : basePanel;
     }
+
     const otherResultsPanel = filterPanelByToolIds(basePanel, nonFavoriteResultsSet.value);
     const favoritesSection = buildToolSection(
         PANEL_LABEL_IDS.FAVORITES_RESULTS_SECTION,
@@ -277,10 +338,13 @@ const sectionedResultsPanel = computed<Record<string, Tool | ToolSectionType> |
  * If we have results for search, we show tools in sections or just tools,
  * based on whether `showSections` is true or false
  */
-const localPanel: ComputedRef<Record<string, ToolPanelItem> | null> = computed(() => {
+const localPanel = computed<Record<string, ToolPanelItem> | null>(() => {
+    // We are in the `My Tools` panel and there is no search query, show the custom `My Tools` panel with favorites and recents sections
     if (props.favoritesDefault && !query.value) {
         return favoritesDefaultPanel.value || {};
     }
+
+    // There is a search query and results, show the search results panel (sectioned or flat based on `showSections`)
     if (hasResults.value) {
         if (showSections.value) {
             return sectionedResultsPanel.value || flatResultsPanel.value;
@@ -351,7 +415,8 @@ function onToggle() {
     showSections.value = !showSections.value;
 }
 
-const collapsedLabels = computed<Record<string, boolean>>(() => {
+/** Stores the localStorage state of collapsed labels for the favorites and recents sections in the `My Tools` panel. */
+const collapsedLabels = computed(() => {
     if (props.favoritesDefault) {
         return {
             [PANEL_LABEL_IDS.FAVORITES_LABEL]: favoritesCollapsed.value,
@@ -359,7 +424,7 @@ const collapsedLabels = computed<Record<string, boolean>>(() => {
             [PANEL_LABEL_IDS.RECENT_TOOLS_LABEL]: recentToolsCollapsed.value,
         };
     }
-    return {} as Record<string, boolean>;
+    return null;
 });
 
 function onLabelToggle(labelId: string) {
diff --git a/client/src/components/Panels/utilities.test.ts b/client/src/components/Panels/utilities.test.ts
index 3c9818a486f..a88cabf8428 100644
--- a/client/src/components/Panels/utilities.test.ts
+++ b/client/src/components/Panels/utilities.test.ts
@@ -250,7 +250,7 @@ describe("test helpers in tool searching utilities", () => {
 
 describe("getValidToolsInEachSection", () => {
     it("filters section tools to only include valid tool IDs", () => {
-        const validIds = ["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "liftOver1"];
+        const validIds = new Set(["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "liftOver1"]);
         const entries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const collectionOps = entries.find(([id]) => id === "collection_operations");
@@ -265,7 +265,7 @@ describe("getValidToolsInEachSection", () => {
     });
 
     it("removes all tools from a section when none are valid", () => {
-        const validIds = ["liftOver1"];
+        const validIds = new Set(["liftOver1"]);
         const entries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const collectionOps = entries.find(([id]) => id === "collection_operations");
@@ -288,7 +288,7 @@ describe("getValidToolsInEachSection", () => {
                 tools: ["tool_a", label as unknown as string, "tool_b"],
             } as ToolSection,
         };
-        const validIds = ["tool_a"];
+        const validIds = new Set(["tool_a"]);
         const entries = getValidToolsInEachSection(validIds, panel);
 
         const section = entries.find(([id]) => id === "test_section");
@@ -301,7 +301,7 @@ describe("getValidToolsInEachSection", () => {
     });
 
     it("passes through items without a tools array unchanged", () => {
-        const entries = getValidToolsInEachSection([], toolsListInPanel);
+        const entries = getValidToolsInEachSection(new Set(), toolsListInPanel);
 
         // testlabel1 is a ToolSectionLabel with no tools array
         const labelEntry = entries.find(([id]) => id === "testlabel1");
@@ -321,14 +321,14 @@ describe("getValidToolsInEachSection", () => {
             } as ToolSection,
         };
         const originalTools = [...(panel["sec"] as ToolSection).tools!];
-        getValidToolsInEachSection(["tool_x"], panel);
+        getValidToolsInEachSection(new Set(["tool_x"]), panel);
 
         // the original section should not be modified
         expect((panel["sec"] as ToolSection).tools).toEqual(originalTools);
     });
 
     it("returns entries in the same order as the panel", () => {
-        const entries = getValidToolsInEachSection(["__UNZIP_COLLECTION__", "liftOver1"], toolsListInPanel);
+        const entries = getValidToolsInEachSection(new Set(["__UNZIP_COLLECTION__", "liftOver1"]), toolsListInPanel);
         const ids = entries.map(([id]) => id);
         expect(ids).toEqual(["collection_operations", "liftOver", "testlabel1"]);
     });
@@ -337,7 +337,7 @@ describe("getValidToolsInEachSection", () => {
 describe("getValidPanelItems", () => {
     it("keeps sections with valid tools and removes empty sections", () => {
         // First pass: filter tools in sections
-        const validIds = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
+        const validIds = new Set(["__FILTER_FAILED_DATASETS__", "liftOver1"]);
         const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const result = getValidPanelItems(sectionEntries, validIds);
@@ -349,7 +349,7 @@ describe("getValidPanelItems", () => {
     });
 
     it("removes sections whose tools are all filtered out", () => {
-        const validIds = ["liftOver1"];
+        const validIds = new Set(["liftOver1"]);
         const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const result = getValidPanelItems(sectionEntries, validIds);
@@ -359,7 +359,7 @@ describe("getValidPanelItems", () => {
     });
 
     it("excludes sections by excludedSectionIds", () => {
-        const validIds = ["__FILTER_FAILED_DATASETS__", "liftOver1"];
+        const validIds = new Set(["__FILTER_FAILED_DATASETS__", "liftOver1"]);
         const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const result = getValidPanelItems(sectionEntries, validIds, ["liftOver"]);
@@ -368,7 +368,7 @@ describe("getValidPanelItems", () => {
     });
 
     it("keeps ToolSectionLabels (items without tools property)", () => {
-        const validIds = ["liftOver1"];
+        const validIds = new Set(["liftOver1"]);
         const sectionEntries = getValidToolsInEachSection(validIds, toolsListInPanel);
 
         const result = getValidPanelItems(sectionEntries, validIds);
@@ -398,7 +398,7 @@ describe("getValidPanelItems", () => {
             ],
         ];
 
-        const result = getValidPanelItems(items, ["standalone_tool"]);
+        const result = getValidPanelItems(items, new Set(["standalone_tool"]));
         expect(result["standalone_tool"]).toBeDefined();
         expect(result["some_section"]).toBeDefined();
     });
@@ -406,8 +406,8 @@ describe("getValidPanelItems", () => {
     it("pipeline: getValidToolsInEachSection → getValidPanelItems mirrors ToolBox.vue usage", () => {
         // Simulates the localSectionsById computed in ToolBox.vue
         const allToolIds = toolsList.map((t) => t.id);
-        const sectionEntries = getValidToolsInEachSection(allToolIds, toolsListInPanel);
-        const result = getValidPanelItems(sectionEntries, allToolIds);
+        const sectionEntries = getValidToolsInEachSection(new Set(allToolIds), toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, new Set(allToolIds));
 
         // All sections with tools should be present
         expect(result["collection_operations"]).toBeDefined();
@@ -421,8 +421,8 @@ describe("getValidPanelItems", () => {
 
     it("pipeline with exclusions: excludes specified section ids", () => {
         const allToolIds = toolsList.map((t) => t.id);
-        const sectionEntries = getValidToolsInEachSection(allToolIds, toolsListInPanel);
-        const result = getValidPanelItems(sectionEntries, allToolIds, ["collection_operations"]);
+        const sectionEntries = getValidToolsInEachSection(new Set(allToolIds), toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, new Set(allToolIds), ["collection_operations"]);
 
         expect(result["collection_operations"]).toBeUndefined();
         expect(result["liftOver"]).toBeDefined();
@@ -430,8 +430,8 @@ describe("getValidPanelItems", () => {
     });
 
     it("returns empty object when all sections are excluded or empty", () => {
-        const sectionEntries = getValidToolsInEachSection([], toolsListInPanel);
-        const result = getValidPanelItems(sectionEntries, []);
+        const sectionEntries = getValidToolsInEachSection(new Set(), toolsListInPanel);
+        const result = getValidPanelItems(sectionEntries, new Set());
 
         // Only the label should remain (no tools property)
         expect(result["collection_operations"]).toBeUndefined();
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 12d15feed00..15c421f5d54 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -52,18 +52,17 @@ export function buildToolEntries(toolIds: string[], toolsById: Record<string, To
 
 /** Filter panel to only include tools matching the provided tool IDs */
 export function filterPanelByToolIds(
-    panel: Record<string, Tool | ToolSection>,
+    panel: Record<string, ToolPanelItem>,
     toolIds: Set<string>,
 ): Record<string, Tool | ToolSection> {
     const filtered: Record<string, Tool | ToolSection> = {};
     for (const [key, item] of Object.entries(panel)) {
-        const section = item as ToolSection;
-        if (section.tools) {
-            const tools = section.tools.filter((toolId) => typeof toolId === "string" && toolIds.has(toolId));
+        if ("tools" in item && item?.tools) {
+            const tools = item.tools.filter((toolId) => typeof toolId === "string" && toolIds.has(toolId));
             if (tools.length > 0) {
-                filtered[key] = { ...section, tools };
+                filtered[key] = { ...item, tools };
             }
-        } else if ((item as Tool).id && toolIds.has((item as Tool).id)) {
+        } else if (isTool(item) && toolIds.has(item.id)) {
             filtered[key] = item;
         }
     }
@@ -217,13 +216,16 @@ export function filterTools(toolsById: Record<string, Tool>, results: string[])
     return filteredTools;
 }
 
-/** Returns a `toolsById` object containing tools that meet required conditions
- * based on params.
- * @param toolsById - object of tools, keyed by id
- * @param isWorkflowPanel - whether or not the ToolPanel is in Workflow Editor
- * @param excludedSectionIds - ids for sections whose tools will be excluded
+/** Returns a `toolsById` object containing tools that meet required conditions such as:
+ * - Not `hidden`
+ * - Not `disabled`
+ * - If in workflow editor panel, only tools that are `is_workflow_compatible`
+ * - Not in an excluded section (if `excludedSectionIds` provided)
+ * @param toolsById object of tools, keyed by id
+ * @param isWorkflowPanel whether or not the ToolPanel is in Workflow Editor
+ * @param excludedSectionIds ids for sections whose tools will be excluded
  */
-export function getValidToolsInCurrentView(
+export function getVisibleTools(
     toolsById: Record<string, Tool>,
     isWorkflowPanel = false,
     excludedSectionIds: string[] = [],
@@ -248,11 +250,9 @@ export function getValidToolsInCurrentView(
 
 /** Looks in each section of `currentPanel` and filters `section.tools` on `validToolIdsInCurrentView` */
 export function getValidToolsInEachSection(
-    validToolIdsInCurrentView: string[],
+    validToolIdsInCurrentView: Set<string>,
     currentPanel: Record<string, ToolPanelItem>,
 ): Array<[string, ToolPanelItem]> {
-    // use a set for fast membership lookup
-    const idSet = new Set(validToolIdsInCurrentView);
     return Object.entries(currentPanel).map(([id, section]) => {
         if (isToolSection(section)) {
             const validatedSection = { ...section };
@@ -261,7 +261,7 @@ export function getValidToolsInEachSection(
             if (sectionTools && Array.isArray(sectionTools)) {
                 // filter on valid tools and panel labels in this section
                 validatedSection.tools = sectionTools.filter((toolId) => {
-                    if (typeof toolId === "string" && idSet.has(toolId)) {
+                    if (typeof toolId === "string" && validToolIdsInCurrentView.has(toolId)) {
                         return true;
                     } else if (typeof toolId !== "string") {
                         // is a special case where there is a label within a section
@@ -283,11 +283,11 @@ export function getValidToolsInEachSection(
  */
 export function getValidPanelItems(
     items: Array<[string, ToolPanelItem]>,
-    validToolIdsInCurrentView: string[],
+    validToolIdsInCurrentView: Set<string>,
     excludedSectionIds: string[] = [],
 ) {
     const validEntries = items.filter(([id, item]) => {
-        if (isTool(item) && validToolIdsInCurrentView.includes(id)) {
+        if (isTool(item) && validToolIdsInCurrentView.has(id)) {
             // is a `Tool` and is in `localToolsById`
             return true;
         } else if (!isToolSection(item)) {
@@ -321,7 +321,7 @@ export function getValidPanelItems(
 export function searchTools(
     tools: Tool[],
     query: string,
-    currentPanel: Record<string, Tool | ToolSection>,
+    currentPanel: Record<string, ToolPanelItem>,
 ): {
     results: string[];
     resultPanel: Record<string, Tool | ToolSection>;
@@ -481,7 +481,7 @@ export function searchObjectsByKeys<T extends { id: string }>(
  * - idResults: array of tool ids that match the query
  * - resultPanel: a ToolPanel with only the results
  */
-export function createSortedResultPanel(matchedTools: SearchMatch[], currentPanel: Record<string, Tool | ToolSection>) {
+export function createSortedResultPanel(matchedTools: SearchMatch[], currentPanel: Record<string, ToolPanelItem>) {
     const idResults: string[] = [];
     // creating a sectioned results object ({section_id: [tool ids], ...}), keeping
     // track unique ids of each tool, and also sorting by indexed order of keys
@@ -510,11 +510,10 @@ export function createSortedResultPanel(matchedTools: SearchMatch[], currentPane
 
                         // put in it the "Unsectioned Tools" section (if it doesn't exist, create it)
                         const unsectionedId = UNSECTIONED_SECTION.id;
-                        let unsectionedSection = acc[unsectionedId] as ToolSection;
-                        if (!unsectionedSection) {
-                            unsectionedSection = { ...UNSECTIONED_SECTION };
-                            unsectionedSection.tools = [];
-                        }
+                        const unsectionedSection: ToolSection =
+                            acc[unsectionedId] && isToolSection(acc[unsectionedId])
+                                ? acc[unsectionedId]
+                                : buildToolSection(unsectionedId, UNSECTIONED_SECTION.name, []);
                         unsectionedSection.tools?.push(match.id);
                         acc[unsectionedId] = unsectionedSection;
                         toolAdded = true;
diff --git a/client/src/composables/toolPanelFavorites.ts b/client/src/composables/toolPanelFavorites.ts
index 1993e7adb87..4353898c57f 100644
--- a/client/src/composables/toolPanelFavorites.ts
+++ b/client/src/composables/toolPanelFavorites.ts
@@ -62,6 +62,7 @@ export function useFavoriteSearchResults(
 ): {
     favoriteResults: ComputedRef<string[]>;
     nonFavoriteResults: ComputedRef<string[]>;
+    /** `true` if there are both favorite and non-favorite results */
     hasMixedResults: ComputedRef<boolean>;
 } {
     const favoriteResults = computed(() => results.value.filter((id) => favoriteToolIdSet.value.has(id)));

From f0074c2583fd3c416a88518f6846809a3c8ad30c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 11 Feb 2026 15:23:31 -0600
Subject: [PATCH 24/30] fix ToolPanel vitest router logic

---
 client/src/components/Panels/ToolPanel.test.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Panels/ToolPanel.test.ts b/client/src/components/Panels/ToolPanel.test.ts
index 87769cd6155..3f848b73fdc 100644
--- a/client/src/components/Panels/ToolPanel.test.ts
+++ b/client/src/components/Panels/ToolPanel.test.ts
@@ -1,5 +1,5 @@
 import { getFakeRegisteredUser } from "@tests/test-data";
-import { getLocalVue } from "@tests/vitest/helpers";
+import { getLocalVue, injectTestRouter } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
 import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
@@ -27,6 +27,7 @@ interface ToolPanelView {
 }
 
 const localVue = getLocalVue();
+const router = injectTestRouter(localVue);
 const { server, http } = useServerMock();
 
 const TEST_PANELS_URI = "/api/tool_panels";
@@ -36,7 +37,9 @@ const PANEL_VIEW_ERR_MSG = "Error loading panel view";
 vi.mock("@/composables/config");
 
 vi.mock("@/composables/userLocalStorage", () => ({
-    useUserLocalStorage: vi.fn(() => ref(DEFAULT_VIEW_ID)),
+    useUserLocalStorage: vi.fn((_key: string, initialValue: unknown) =>
+        ref(_key === "tool-store-view" ? DEFAULT_VIEW_ID : initialValue),
+    ),
 }));
 
 describe("ToolPanel", () => {
@@ -54,7 +57,9 @@ describe("ToolPanel", () => {
             throw new Error(`View with key ${viewKey} not found in viewsList`);
         }
         // ref and useUserLocalStorage are already imported at the top
-        vi.mocked(useUserLocalStorage).mockImplementation(() => ref(viewKey));
+        vi.mocked(useUserLocalStorage).mockImplementation((_key: string, initialValue: unknown) =>
+            ref(_key === "tool-store-view" ? viewKey : initialValue),
+        );
         return { viewKey, view };
     }
 
@@ -122,9 +127,7 @@ describe("ToolPanel", () => {
                 useSearchWorker: false,
             },
             localVue,
-            stubs: {
-                ToolBox: true,
-            },
+            router,
             pinia,
         });
 

From 1e61fa0ec1205b5cc57d7b1bca455abc31e028bd Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 11 Feb 2026 15:58:18 -0600
Subject: [PATCH 25/30] add vitest for createSortedResultPanel and break out
 functions

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../src/components/Panels/utilities.test.ts   | 30 ++++++++
 client/src/components/Panels/utilities.ts     | 70 +++++++++++--------
 2 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/client/src/components/Panels/utilities.test.ts b/client/src/components/Panels/utilities.test.ts
index a88cabf8428..9cd237a47f0 100644
--- a/client/src/components/Panels/utilities.test.ts
+++ b/client/src/components/Panels/utilities.test.ts
@@ -248,6 +248,36 @@ describe("test helpers in tool searching utilities", () => {
     });
 });
 
+describe("createSortedResultPanel", () => {
+    it("orders results by descending order and groups into sections", () => {
+        const matchedTools = [
+            { id: "__FILTER_FAILED_DATASETS__", order: 1 },
+            { id: "liftOver1", order: 3 },
+            { id: "__ZIP_COLLECTION__", order: 2 },
+        ];
+        const { idResults, resultPanel } = createSortedResultPanel(matchedTools, toolsListInPanel);
+
+        // idResults should be sorted by order descending: liftOver1 (3), __ZIP_COLLECTION__ (2), __FILTER_FAILED_DATASETS__ (1)
+        expect(idResults).toEqual(["liftOver1", "__ZIP_COLLECTION__", "__FILTER_FAILED_DATASETS__"]);
+
+        // tools are grouped into their respective sections
+        const collectionOps = resultPanel["collection_operations"] as ToolSection;
+        expect(collectionOps.tools).toEqual(["__ZIP_COLLECTION__", "__FILTER_FAILED_DATASETS__"]);
+
+        const liftOver = resultPanel["liftOver"] as ToolSection;
+        expect(liftOver.tools).toEqual(["liftOver1"]);
+    });
+
+    it("does not duplicate tool ids when a tool appears in only one section", () => {
+        const matchedTools = [
+            { id: "__FILTER_FAILED_DATASETS__", order: 0 },
+            { id: "__FILTER_FAILED_DATASETS__", order: 0 },
+        ];
+        const { idResults } = createSortedResultPanel(matchedTools, toolsListInPanel);
+        expect(idResults).toEqual(["__FILTER_FAILED_DATASETS__"]);
+    });
+});
+
 describe("getValidToolsInEachSection", () => {
     it("filters section tools to only include valid tool IDs", () => {
         const validIds = new Set(["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "liftOver1"]);
diff --git a/client/src/components/Panels/utilities.ts b/client/src/components/Panels/utilities.ts
index 15c421f5d54..255dcd5b05d 100644
--- a/client/src/components/Panels/utilities.ts
+++ b/client/src/components/Panels/utilities.ts
@@ -473,6 +473,28 @@ export function searchObjectsByKeys<T extends { id: string }>(
     };
 }
 
+function getOrCreateSection(
+    acc: Record<string, Tool | ToolSection>,
+    sectionId: string,
+    sectionName: string,
+): ToolSection {
+    return acc[sectionId] && isToolSection(acc[sectionId])
+        ? (acc[sectionId] as ToolSection)
+        : buildToolSection(sectionId, sectionName, []);
+}
+
+function addToolToSection(
+    acc: Record<string, Tool | ToolSection>,
+    sectionId: string,
+    sectionName: string,
+    toolId: string,
+): boolean {
+    const section = getOrCreateSection(acc, sectionId, sectionName);
+    section.tools?.push(toolId);
+    acc[sectionId] = section;
+    return true;
+}
+
 /**
  * Orders the matchedTools by order of keys that are being searched, and creates a resultPanel
  * @param matchedTools containing { id: tool id, order: order }
@@ -483,44 +505,32 @@ export function searchObjectsByKeys<T extends { id: string }>(
  */
 export function createSortedResultPanel(matchedTools: SearchMatch[], currentPanel: Record<string, ToolPanelItem>) {
     const idResults: string[] = [];
+
     // creating a sectioned results object ({section_id: [tool ids], ...}), keeping
     // track unique ids of each tool, and also sorting by indexed order of keys
     const resultPanel = orderBy(matchedTools, ["order"], ["desc"]).reduce(
         (acc: Record<string, Tool | ToolSection>, match: SearchMatch) => {
             // we need to search all sections in panel for this tool id
-            const sections = Object.keys(currentPanel);
-            for (const section of sections) {
+            const panelItems = Object.keys(currentPanel);
+            for (const itemId of panelItems) {
+                const existingPanelItem = currentPanel[itemId];
+                if (!existingPanelItem) {
+                    continue;
+                }
+
                 let toolAdded = false;
-                const existingPanelItem = currentPanel[section];
-                if (existingPanelItem) {
-                    if ("tools" in existingPanelItem && existingPanelItem.tools?.includes(match.id)) {
-                        // it has tools so is a section, and it has the tool we're looking for
 
-                        // if we haven't seen this section yet, create it in the resultPanel
-                        let existingSection = acc[section] as ToolSection;
-                        if (!existingSection) {
-                            existingSection = { ...existingPanelItem };
-                            existingSection.tools = [];
-                        }
-                        existingSection.tools?.push(match.id);
-                        acc[section] = existingSection;
-                        toolAdded = true;
-                    } else if (isTool(existingPanelItem) && existingPanelItem.id === match.id) {
-                        // it is a tool, and it is the tool we're looking for
+                if ("tools" in existingPanelItem && existingPanelItem.tools?.includes(match.id)) {
+                    // it has tools so is a section, and it has the tool we're looking for
+                    toolAdded = addToolToSection(acc, itemId, existingPanelItem.name, match.id);
+                } else if (isTool(existingPanelItem) && existingPanelItem.id === match.id) {
+                    // it is a tool, and it is the tool we're looking for
+                    // put it in the "Unsectioned Tools" section
+                    toolAdded = addToolToSection(acc, UNSECTIONED_SECTION.id, UNSECTIONED_SECTION.name, match.id);
+                }
 
-                        // put in it the "Unsectioned Tools" section (if it doesn't exist, create it)
-                        const unsectionedId = UNSECTIONED_SECTION.id;
-                        const unsectionedSection: ToolSection =
-                            acc[unsectionedId] && isToolSection(acc[unsectionedId])
-                                ? acc[unsectionedId]
-                                : buildToolSection(unsectionedId, UNSECTIONED_SECTION.name, []);
-                        unsectionedSection.tools?.push(match.id);
-                        acc[unsectionedId] = unsectionedSection;
-                        toolAdded = true;
-                    }
-                    if (toolAdded && !idResults.includes(match.id)) {
-                        idResults.push(match.id);
-                    }
+                if (toolAdded && !idResults.includes(match.id)) {
+                    idResults.push(match.id);
                 }
             }
             return acc;

From efdf42856edce12e93e3466773ec418443233fe0 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 12 Feb 2026 10:58:56 -0600
Subject: [PATCH 26/30] fix aria-expanded value in tool panel labels

---
 client/src/components/Panels/Common/ToolPanelLabel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Panels/Common/ToolPanelLabel.vue b/client/src/components/Panels/Common/ToolPanelLabel.vue
index 4246820fae0..f1c5829aded 100644
--- a/client/src/components/Panels/Common/ToolPanelLabel.vue
+++ b/client/src/components/Panels/Common/ToolPanelLabel.vue
@@ -64,7 +64,7 @@ function onKeydown(event: KeyboardEvent) {
         :tabindex="isCollapsible ? 0 : undefined"
         :title="description"
         :role="isCollapsible ? 'button' : undefined"
-        :aria-expanded="isCollapsible ? !isCollapsed : undefined"
+        :aria-expanded="isCollapsible ? (!isCollapsed ? 'true' : 'false') : undefined"
         v-on="isCollapsible ? { click: onToggle, keydown: onKeydown } : {}">
         <span class="tool-panel-label-divider-text tool-panel-divider-text">
             <FontAwesomeIcon

From 38ed1dc04b1a2e2f13894572ea3674fd933669ce Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 12 Feb 2026 12:11:20 -0600
Subject: [PATCH 27/30] reorder Recent tools to come before Favorites in My
 Tools panel

Also, convert `ToolBoxSearch` test to TS
---
 client/src/components/Panels/ToolBox.vue      | 20 ++++----
 ...oxSearch.test.js => ToolBoxSearch.test.ts} | 51 +++++++++++--------
 2 files changed, 39 insertions(+), 32 deletions(-)
 rename client/src/components/Panels/{ToolBoxSearch.test.js => ToolBoxSearch.test.ts} (88%)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index ac367c82b3c..fe34a4055c2 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -265,9 +265,18 @@ const favoritesDefaultPanel = computed<Record<string, ToolPanelItem> | null>(()
         return null;
     }
     const entries: Array<[string, ToolPanelItem]> = [];
-    const favorites = favoriteToolIdsInPanel.value;
     const recents = recentToolIdsToShow.value;
+    const favorites = favoriteToolIdsInPanel.value;
 
+    if (recents.length > 0) {
+        entries.push([
+            PANEL_LABEL_IDS.RECENT_TOOLS_LABEL,
+            buildToolLabel(PANEL_LABEL_IDS.RECENT_TOOLS_LABEL, localize("Recent tools")),
+        ]);
+        if (!recentToolsCollapsed.value) {
+            entries.push(...buildToolEntries(recents, localToolsById.value));
+        }
+    }
     entries.push([
         PANEL_LABEL_IDS.FAVORITES_LABEL,
         buildToolLabel(PANEL_LABEL_IDS.FAVORITES_LABEL, localize("Favorites")),
@@ -282,15 +291,6 @@ const favoritesDefaultPanel = computed<Record<string, ToolPanelItem> | null>(()
             entries.push(...buildToolEntries(favorites, localToolsById.value));
         }
     }
-    if (recents.length > 0) {
-        entries.push([
-            PANEL_LABEL_IDS.RECENT_TOOLS_LABEL,
-            buildToolLabel(PANEL_LABEL_IDS.RECENT_TOOLS_LABEL, localize("Recent tools")),
-        ]);
-        if (!recentToolsCollapsed.value) {
-            entries.push(...buildToolEntries(recents, localToolsById.value));
-        }
-    }
     return Object.fromEntries(entries);
 });
 
diff --git a/client/src/components/Panels/ToolBoxSearch.test.js b/client/src/components/Panels/ToolBoxSearch.test.ts
similarity index 88%
rename from client/src/components/Panels/ToolBoxSearch.test.js
rename to client/src/components/Panels/ToolBoxSearch.test.ts
index 69af086ecd7..6df7813d874 100644
--- a/client/src/components/Panels/ToolBoxSearch.test.js
+++ b/client/src/components/Panels/ToolBoxSearch.test.ts
@@ -4,10 +4,10 @@ import flushPromises from "flush-promises";
 import { createPinia, setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import toolsList from "@/components/ToolsView/testData/toolsList.json";
-import toolsListInPanel from "@/components/ToolsView/testData/toolsListInPanel.json";
+import toolsListUntyped from "@/components/ToolsView/testData/toolsList.json";
+import toolsListInPanelUntyped from "@/components/ToolsView/testData/toolsListInPanel.json";
 import { setMockConfig } from "@/composables/__mocks__/config";
-import { useToolStore } from "@/stores/toolStore";
+import { type Tool, type ToolSection, useToolStore } from "@/stores/toolStore";
 import { useUserStore } from "@/stores/userStore";
 
 import ToolBox from "./ToolBox.vue";
@@ -18,14 +18,21 @@ setMockConfig({
     toolbox_auto_sort: true,
 });
 
+const toolsList = toolsListUntyped as unknown as Tool[];
+const toolsListInPanel = toolsListInPanelUntyped as unknown as Record<string, Tool | ToolSection>;
+const EXPECTED_LABELS = ["Recent tools", "Favorites"];
+
 const localVue = getLocalVue();
 const router = injectTestRouter(localVue);
 
-function toToolsById(list) {
-    return list.reduce((acc, tool) => {
-        acc[tool.id] = tool;
-        return acc;
-    }, {});
+function toToolsById(list: Tool[]) {
+    return list.reduce(
+        (acc, tool) => {
+            acc[tool.id] = tool;
+            return acc;
+        },
+        {} as Record<string, Tool>,
+    );
 }
 
 describe("ToolBox search", () => {
@@ -50,7 +57,7 @@ describe("ToolBox search", () => {
         const userStore = useUserStore();
         userStore.currentPreferences = { favorites: { tools: ["liftOver1"] } };
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -85,7 +92,7 @@ describe("ToolBox search", () => {
         const userStore = useUserStore();
         userStore.currentPreferences = { favorites: { tools: [] } };
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -122,7 +129,7 @@ describe("ToolBox search", () => {
         const userStore = useUserStore();
         userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -168,7 +175,7 @@ describe("ToolBox search", () => {
         const userStore = useUserStore();
         userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -192,14 +199,14 @@ describe("ToolBox search", () => {
             .findAll(".tool-panel-label")
             .wrappers.find((item) => item.text().includes("Favorites"));
         expect(favoritesLabel).toBeTruthy();
-        await favoritesLabel.trigger("click");
+        await favoritesLabel?.trigger("click");
         await flushPromises();
 
         expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(false);
         expect(wrapper.find('[data-tool-id="__FILTER_EMPTY_DATASETS__"]').exists()).toBe(true);
     });
 
-    it("shows recent tools under favorites and allows clearing", async () => {
+    it("shows recent tools before favorites and allows clearing", async () => {
         const pinia = createPinia();
         setActivePinia(pinia);
 
@@ -213,7 +220,7 @@ describe("ToolBox search", () => {
         userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
         userStore.recentTools = ["__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__"];
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -226,10 +233,10 @@ describe("ToolBox search", () => {
         await flushPromises();
 
         const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
-        expect(labels).toEqual(["Favorites", "Recent tools"]);
+        expect(labels).toEqual(EXPECTED_LABELS);
 
         const toolIds = wrapper.findAll("a[data-tool-id]").wrappers.map((item) => item.attributes("data-tool-id"));
-        expect(toolIds).toEqual(["__FILTER_FAILED_DATASETS__", "__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__"]);
+        expect(toolIds).toEqual(["__ZIP_COLLECTION__", "__FILTER_EMPTY_DATASETS__", "__FILTER_FAILED_DATASETS__"]);
         expect(wrapper.find('.tool-favorite-button[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(true);
 
         await wrapper.find('[data-description="clear-recent-tools"]').trigger("click");
@@ -253,7 +260,7 @@ describe("ToolBox search", () => {
         userStore.currentPreferences = { favorites: { tools: ["__FILTER_FAILED_DATASETS__"] } };
         userStore.recentTools = ["__ZIP_COLLECTION__"];
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -272,7 +279,7 @@ describe("ToolBox search", () => {
             .findAll(".tool-panel-label")
             .wrappers.find((item) => item.text().includes("Favorites"));
         expect(favoritesLabel).toBeTruthy();
-        await favoritesLabel.trigger("click");
+        await favoritesLabel?.trigger("click");
         await flushPromises();
 
         expect(wrapper.find('[data-tool-id="__FILTER_FAILED_DATASETS__"]').exists()).toBe(false);
@@ -282,7 +289,7 @@ describe("ToolBox search", () => {
             .findAll(".tool-panel-label")
             .wrappers.find((item) => item.text().includes("Recent tools"));
         expect(recentLabel).toBeTruthy();
-        await recentLabel.trigger("click");
+        await recentLabel?.trigger("click");
         await flushPromises();
 
         expect(wrapper.find('[data-tool-id="__ZIP_COLLECTION__"]').exists()).toBe(false);
@@ -302,7 +309,7 @@ describe("ToolBox search", () => {
         userStore.currentPreferences = { favorites: { tools: [] } };
         userStore.recentTools = ["__ZIP_COLLECTION__"];
 
-        const wrapper = mount(ToolBox, {
+        const wrapper = mount(ToolBox as object, {
             pinia,
             localVue,
             router,
@@ -318,6 +325,6 @@ describe("ToolBox search", () => {
         expect(emptyState.exists()).toBe(true);
         expect(emptyState.text()).toContain("You haven't favorited any tools yet.");
         const labels = wrapper.findAll(".tool-panel-label").wrappers.map((item) => item.text());
-        expect(labels).toEqual(["Favorites", "Recent tools"]);
+        expect(labels).toEqual(EXPECTED_LABELS);
     });
 });

From 3646330b34dc02cef09051e8dd06cc9715e0af42 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 12 Feb 2026 12:11:42 -0600
Subject: [PATCH 28/30] reduce recent tools limit to 10, and reset recent tools
 in store reset

---
 client/src/stores/userStore.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/stores/userStore.ts b/client/src/stores/userStore.ts
index 9497f89cc32..ee42af144ec 100644
--- a/client/src/stores/userStore.ts
+++ b/client/src/stores/userStore.ts
@@ -26,7 +26,7 @@ export type ListViewMode = "grid" | "list";
 
 type UserListViewPreferences = Record<string, ListViewMode>;
 
-const RECENT_TOOLS_LIMIT = 20;
+const RECENT_TOOLS_LIMIT = 10;
 
 export const useUserStore = defineStore("userStore", () => {
     const currentUser = ref<AnyUser>(null);
@@ -50,6 +50,7 @@ export const useUserStore = defineStore("userStore", () => {
     function $reset() {
         currentUser.value = null;
         currentPreferences.value = null;
+        recentTools.value = [];
         loadPromise = null;
     }
 

From c6f3e5db38860b3ea80f8c8a048110853e865af9 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 12 Feb 2026 12:13:43 -0600
Subject: [PATCH 29/30] add vitest for userStore addRecentTool and
 clearRecentTools

---
 client/src/stores/userStore.test.ts | 59 +++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 client/src/stores/userStore.test.ts

diff --git a/client/src/stores/userStore.test.ts b/client/src/stores/userStore.test.ts
new file mode 100644
index 00000000000..d886a92eb08
--- /dev/null
+++ b/client/src/stores/userStore.test.ts
@@ -0,0 +1,59 @@
+import { createPinia, setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import { useUserStore } from "@/stores/userStore";
+
+describe("userStore", () => {
+    beforeEach(() => {
+        setActivePinia(createPinia());
+    });
+    afterEach(() => {
+        const userStore = useUserStore();
+        userStore.$reset();
+    });
+
+    describe("addRecentTool", () => {
+        it("adds tools to the front, deduplicates, and ignores empty ids", () => {
+            const userStore = useUserStore();
+
+            userStore.addRecentTool("");
+            expect(userStore.recentTools).toEqual([]);
+
+            userStore.addRecentTool("tool_a");
+            userStore.addRecentTool("tool_b");
+            userStore.addRecentTool("tool_c");
+            expect(userStore.recentTools).toEqual(["tool_c", "tool_b", "tool_a"]);
+
+            // re-adding an existing tool moves it to front without duplicating
+            userStore.addRecentTool("tool_a");
+            expect(userStore.recentTools).toEqual(["tool_a", "tool_c", "tool_b"]);
+        });
+
+        it("drops the oldest tool when the limit is reached", () => {
+            const userStore = useUserStore();
+            for (let i = 0; i < 10; i++) {
+                userStore.addRecentTool(`tool_${i}`);
+            }
+            expect(userStore.recentTools).toHaveLength(10);
+            expect(userStore.recentTools[0]).toBe("tool_9");
+            expect(userStore.recentTools[9]).toBe("tool_0");
+
+            userStore.addRecentTool("tool_new");
+            expect(userStore.recentTools).toHaveLength(10);
+            expect(userStore.recentTools[0]).toBe("tool_new");
+            expect(userStore.recentTools).not.toContain("tool_0");
+        });
+    });
+
+    describe("clearRecentTools", () => {
+        it("clears all recent tools", () => {
+            const userStore = useUserStore();
+            userStore.addRecentTool("tool_a");
+            userStore.addRecentTool("tool_b");
+            expect(userStore.recentTools).toHaveLength(2);
+
+            userStore.clearRecentTools();
+            expect(userStore.recentTools).toEqual([]);
+        });
+    });
+});

From d5e77879adc374cb6ffd2796345b158932f83954 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 12 Feb 2026 12:15:50 -0600
Subject: [PATCH 30/30] remove section toggle icons in tool panel

---
 client/src/components/Panels/Common/ToolSection.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/Panels/Common/ToolSection.vue b/client/src/components/Panels/Common/ToolSection.vue
index cea5a1160be..365fce73b25 100644
--- a/client/src/components/Panels/Common/ToolSection.vue
+++ b/client/src/components/Panels/Common/ToolSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faChevronDown, faChevronRight, faFilter } from "@fortawesome/free-solid-svg-icons";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useEventBus } from "@vueuse/core";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
@@ -85,7 +85,6 @@ const elems = computed(() => {
 });
 
 const opened = ref(props.expanded || checkFilter());
-const sectionToggleIcon = computed(() => (opened.value ? faChevronDown : faChevronRight));
 
 const sortedElements = computed<Array<[string, ToolPanelItem]>>(() => {
     // If this.config.sortTools is true, sort the tools alphabetically
@@ -185,7 +184,6 @@ function getCollapsedState(id: string): boolean | undefined {
                 :aria-expanded="opened"
                 @click="toggleMenu()">
                 <span class="tool-panel-divider-text">
-                    <FontAwesomeIcon :icon="sectionToggleIcon" class="tool-panel-divider-toggle" />
                     <span class="name">
                         {{ props.category.title || props.category.name }}
                     </span>