diff --git a/frontend/src/components/tools/automate/ToolSelector.tsx b/frontend/src/components/tools/automate/ToolSelector.tsx
index 4fb87548f..3526ff4e6 100644
--- a/frontend/src/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/components/tools/automate/ToolSelector.tsx
@@ -93,7 +93,7 @@ export default function ToolSelector({
const renderedTools = useMemo(() =>
displayGroups.map((subcategory) =>
- renderToolButtons(t, subcategory, null, handleToolSelect, !isSearching)
+ renderToolButtons(t, subcategory, null, handleToolSelect, !isSearching, true)
), [displayGroups, handleToolSelect, isSearching, t]
);
@@ -150,7 +150,7 @@ export default function ToolSelector({
{}} rounded={true}>
+ onSelect={()=>{}} rounded={true} disableNavigation={true}>
) : (
// Show search input when no tool selected OR when dropdown is opened
diff --git a/frontend/src/components/tools/shared/renderToolButtons.tsx b/frontend/src/components/tools/shared/renderToolButtons.tsx
index 4d92d4798..340ad559d 100644
--- a/frontend/src/components/tools/shared/renderToolButtons.tsx
+++ b/frontend/src/components/tools/shared/renderToolButtons.tsx
@@ -12,7 +12,8 @@ export const renderToolButtons = (
subcategory: SubcategoryGroup,
selectedToolKey: string | null,
onSelect: (id: string) => void,
- showSubcategoryHeader: boolean = true
+ showSubcategoryHeader: boolean = true,
+ disableNavigation: boolean = false
) => (
{showSubcategoryHeader && (
@@ -26,6 +27,7 @@ export const renderToolButtons = (
tool={tool}
isSelected={selectedToolKey === id}
onSelect={onSelect}
+ disableNavigation={disableNavigation}
/>
))}
diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx
index ee9c6062c..f84fa9189 100644
--- a/frontend/src/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -12,9 +12,10 @@ interface ToolButtonProps {
isSelected: boolean;
onSelect: (id: string) => void;
rounded?: boolean;
+ disableNavigation?: boolean;
}
-const ToolButton: React.FC = ({ id, tool, isSelected, onSelect }) => {
+const ToolButton: React.FC = ({ id, tool, isSelected, onSelect, disableNavigation = false }) => {
const isUnavailable = !tool.component && !tool.link;
const { getToolNavigation } = useToolNavigation();
@@ -29,8 +30,8 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect
onSelect(id);
};
- // Get navigation props for URL support
- const navProps = !isUnavailable && !tool.link ? getToolNavigation(id, tool) : null;
+ // Get navigation props for URL support (only if navigation is not disabled)
+ const navProps = !isUnavailable && !tool.link && !disableNavigation ? getToolNavigation(id, tool) : null;
const tooltipContent = isUnavailable
? (Coming soon: {tool.description})