refactor(web): use area instead of wrench icons for functionCalling nodes

131 move tool selection in a dedicated space between the header and the properties

Author: leonardcser

apps/web/src/components/docs/node-card.tsx

@@ -4,6 +4,7 @@ import { DynamicIcon } from "lucide-react/dynamic.mjs";
 import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
+import { NodeTags } from "@/components/workflow/node-tags";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -40,15 +41,10 @@ function NodeDetailsDialog({
             <div className="flex-1">
               <div className="flex items-center gap-2">
                 {nodeType.name}
-                {nodeType.tags.map((tag, index) => (
-                  <Badge
-                    key={index}
-                    variant="secondary"
-                    className={getTagColor([tag])}
-                  >
-                    {tag}
-                  </Badge>
-                ))}
+                <NodeTags
+                  tags={nodeType.tags}
+                  functionCalling={nodeType.functionCalling}
+                />
               </div>
             </div>
           </DialogTitle>
@@ -218,7 +214,7 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <DynamicIcon
                   name={nodeType.icon as any}
-                  className="h-4 w-4 text-blue-600 shrink-0"
+                  className="h-4 w-4 text-blue-500 shrink-0"
                 />
                 <CardTitle className="text-base font-semibold leading-tight truncate">
                   {nodeType.name}
@@ -278,23 +274,16 @@ export function NodeCard({ nodeType, variant = "card" }: NodeCardProps) {
             <div className="flex items-center gap-3 min-w-0 flex-1">
               <DynamicIcon
                 name={nodeType.icon as any}
-                className="h-4 w-4 text-blue-600 shrink-0"
+                className="h-4 w-4 text-blue-500 shrink-0"
               />
               <CardTitle className="text-base font-semibold leading-tight truncate">
                 {nodeType.name}
               </CardTitle>
             </div>
-            <div className="flex gap-1 shrink-0">
-              {nodeType.tags.map((tag, index) => (
-                <Badge
-                  key={index}
-                  variant="secondary"
-                  className={`${getTagColor([tag])} text-xs`}
-                >
-                  {tag}
-                </Badge>
-              ))}
-            </div>
+            <NodeTags
+              tags={nodeType.tags}
+              functionCalling={nodeType.functionCalling}
+            />
           </div>
         </CardHeader>
         <CardContent className="pt-0">

apps/web/src/components/docs/nodes-browser.tsx

@@ -40,9 +40,12 @@ export function NodesBrowser() {
 
     // Filter by tag (check if any tag matches)
     if (selectedTag) {
-      filtered = filtered.filter((nodeType) =>
-        nodeType.tags.includes(selectedTag)
-      );
+      filtered = filtered.filter((nodeType) => {
+        if (selectedTag === "Tools") {
+          return !!nodeType.functionCalling;
+        }
+        return nodeType.tags.includes(selectedTag);
+      });
     }
 
     return filtered.sort((a, b) => a.name.localeCompare(b.name));

apps/web/src/components/workflow/node-tags.tsx

@@ -0,0 +1,38 @@
+import { Badge } from "@/components/ui/badge";
+import { getTagColor } from "@/utils/tag-colors";
+import { cn } from "@/utils/utils";
+
+export interface NodeTagsProps {
+  tags: string[];
+  functionCalling?: boolean;
+  className?: string;
+  size?: "sm" | "xs";
+}
+
+export function NodeTags({
+  tags,
+  functionCalling,
+  className,
+  size = "xs",
+}: NodeTagsProps) {
+  const allTags = [...tags, ...(functionCalling ? ["Tools"] : [])];
+
+  if (allTags.length === 0) return null;
+
+  return (
+    <div className={cn("flex gap-1 flex-wrap", className)}>
+      {allTags.map((tag, index) => (
+        <Badge
+          key={`${tag}-${index}`}
+          variant="secondary"
+          className={cn(
+            getTagColor(tag),
+            size === "xs" ? "text-xs" : "text-sm"
+          )}
+        >
+          {tag}
+        </Badge>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/workflow/workflow-node-selector.tsx

@@ -3,7 +3,7 @@ import { Search } from "lucide-react";
 import { DynamicIcon } from "lucide-react/dynamic.mjs";
 import { useState } from "react";
 
-import { Badge } from "@/components/ui/badge";
+import { NodeTags } from "./node-tags";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,6 @@ import { TagFilterButtons } from "@/components/ui/tag-filter-buttons";
 import { useKeyboardNavigation } from "@/hooks/use-keyboard-navigation";
 import { useSearch } from "@/hooks/use-search";
 import { useTagCounts } from "@/hooks/use-tag-counts";
-import { getTagColor } from "@/utils/tag-colors";
 import { cn } from "@/utils/utils";
 
 import type { NodeTemplate } from "./workflow-types";
@@ -53,6 +52,9 @@ export function WorkflowNodeSelector({
 
   // Filter templates based on search results and selected tag
   const filteredTemplates = searchResults.filter((template) => {
+    if (selectedTag === "Tools") {
+      return !!template.functionCalling;
+    }
     const matchesTag = !selectedTag || template.tags.includes(selectedTag);
     return matchesTag;
   });
@@ -160,22 +162,15 @@ export function WorkflowNodeSelector({
                       <div className="flex items-center gap-3 mb-2">
                         <DynamicIcon
                           name={template.icon as any}
-                          className="h-4 w-4 text-blue-600 shrink-0 [&svg>path]:stroke-2"
+                          className="h-4 w-4 text-blue-500 shrink-0 [&svg>path]:stroke-2"
                         />
                         <h3 className="font-semibold text-base leading-tight truncate">
                           {template.name}
                         </h3>
-                        <div className="flex gap-1 shrink-0">
-                          {template.tags.map((tag, index) => (
-                            <Badge
-                              key={index}
-                              variant="secondary"
-                              className={`${getTagColor([tag])} text-xs`}
-                            >
-                              {tag}
-                            </Badge>
-                          ))}
-                        </div>
+                        <NodeTags
+                          tags={template.tags}
+                          functionCalling={template.functionCalling}
+                        />
                       </div>
                       {template.description && (
                         <p className="text-sm text-muted-foreground leading-relaxed">

apps/web/src/components/workflow/workflow-node.tsx

@@ -22,7 +22,6 @@ import {
   StickyNoteIcon,
   TriangleIcon,
   TypeIcon,
-  WrenchIcon,
 } from "lucide-react";
 // @ts-ignore - https://github.com/lucide-icons/lucide/issues/2867#issuecomment-2847105863
 import { DynamicIcon } from "lucide-react/dynamic.mjs";
@@ -273,12 +272,6 @@ export const WorkflowNode = memo(
       setSelectedInput(null);
     };
 
-    const handleToolIconClick = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (readonly) return;
-      setIsToolSelectorOpen(true);
-    };
-
     const handleToolSelectorClose = () => {
       setIsToolSelectorOpen(false);
     };
@@ -327,18 +320,62 @@ export const WorkflowNode = memo(
             <div className="flex items-center gap-1 flex-1 min-w-0">
               <DynamicIcon
                 name={data.icon as any}
-                className="mx-1 h-3 w-3 text-blue-600 shrink-0"
+                className="mx-1 h-3 w-3 text-blue-500 shrink-0"
               />
               <h3 className="text-xs font-medium truncate">{data.name}</h3>
-              {data.functionCalling && (
-                <WrenchIcon
-                  className="h-3 w-3 text-blue-600 shrink-0 cursor-pointer hover:text-blue-700 transition-colors"
-                  onClick={handleToolIconClick}
-                />
-              )}
             </div>
           </div>
 
+          {/* Tools bar (between header and body) */}
+          {data.functionCalling && (
+            <div
+              className="px-1 py-1 border-b nodrag flex flex-wrap items-start gap-1"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (readonly) return;
+                setIsToolSelectorOpen(true);
+              }}
+            >
+              {(() => {
+                const selectedTools = getCurrentSelectedTools();
+                if (!selectedTools.length) {
+                  return (
+                    <span className="text-[10px] text-neutral-500">
+                      Click to select tools
+                    </span>
+                  );
+                }
+
+                return (
+                  <div className="flex flex-wrap items-center gap-1">
+                    {selectedTools.map((tool, idx) => {
+                      const tpl = (data.nodeTemplates || []).find(
+                        (t) => t.id === tool.identifier
+                      );
+                      return (
+                        <span
+                          key={`${tool.identifier}-${idx}`}
+                          className="inline-flex items-center gap-1 px-1 py-[2px] rounded bg-neutral-100 text-[10px] text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"
+                        >
+                          {tpl?.icon ? (
+                            <DynamicIcon
+                              name={tpl.icon as any}
+                              className="h-3 w-3"
+                            />
+                          ) : null}
+                          <span className="truncate max-w-[84px]">
+                            {tpl?.name || tool.identifier}
+                          </span>
+                        </span>
+                      );
+                    })}
+                    <span className="text-[10px] text-blue-500 ml-1">Edit</span>
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+
           {/* Widget */}
           {!readonly &&
             widgetConfig &&

apps/web/src/components/workflow/workflow-tool-selector.tsx

@@ -197,7 +197,7 @@ export function WorkflowToolSelector({
                       ? "bg-accent border-primary/50"
                       : "hover:bg-accent/50",
                     isSelected &&
-                      "bg-blue-50 border-blue-300 dark:bg-blue-950/20 dark:border-blue-700"
+                      "bg-blue-50 border-blue-500 dark:bg-blue-950/20"
                   )}
                   onClick={() => handleTemplateToggle(template.id)}
                   onMouseEnter={() => {
@@ -223,7 +223,7 @@ export function WorkflowToolSelector({
                       <div className="flex items-center gap-3 mb-2">
                         <DynamicIcon
                           name={template.icon as any}
-                          className="h-4 w-4 text-blue-600 shrink-0"
+                          className="h-4 w-4 text-blue-500 shrink-0"
                         />
                         <h3 className="font-semibold text-base leading-tight truncate">
                           {template.name}

apps/web/src/hooks/use-tag-counts.ts

@@ -13,7 +13,9 @@ export interface ItemWithCategory {
   category: string;
 }
 
-export function useTagCounts<T extends ItemWithTags>(items: T[]): TagCount[] {
+export function useTagCounts<
+  T extends ItemWithTags & { functionCalling?: boolean },
+>(items: T[]): TagCount[] {
   return useMemo(() => {
     const counts: Record<string, number> = {};
 
@@ -24,6 +26,11 @@ export function useTagCounts<T extends ItemWithTags>(items: T[]): TagCount[] {
           counts[tag] = (counts[tag] || 0) + 1;
         }
       });
+
+      // Add synthetic tag for function calling support
+      if ((item as any).functionCalling) {
+        counts["Tools"] = (counts["Tools"] || 0) + 1;
+      }
     });
 
     return Object.entries(counts)

apps/web/src/utils/tag-colors.ts

@@ -16,6 +16,7 @@ export function getTagColor(tagOrTags: string | string[]): string {
     parameter: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200",
     document: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200",
     email: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200",
+    tools: "bg-transparent text-blue-500 border-blue-500",
   };
 
   return (