From 3da8c6902877a29197ced390df2ee9c09149910d Mon Sep 17 00:00:00 2001
From: SubhasmitaSw <subhasmitaswain232@gmail.com>
Date: Tue, 7 Apr 2026 01:25:13 +0530
Subject: [PATCH] fix(ui): restore tool selection feedback in onboarding and
 render selected tool names in review

Signed-off-by: SubhasmitaSw <subhasmitaswain232@gmail.com>
---
 .../onboarding/steps/ReviewStep.tsx           | 34 +++++++++++++++----
 .../onboarding/steps/ToolSelectionStep.tsx    |  8 +++--
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/onboarding/steps/ReviewStep.tsx b/ui/src/components/onboarding/steps/ReviewStep.tsx
index facb7e484..be8053512 100644
--- a/ui/src/components/onboarding/steps/ReviewStep.tsx
+++ b/ui/src/components/onboarding/steps/ReviewStep.tsx
@@ -74,12 +74,34 @@ export function ReviewStep({ onboardingData, isLoading, onBack, onSubmit }: Revi
                     {onboardingData.selectedTools && onboardingData.selectedTools.length > 0 ? (
                         <ScrollArea className="h-[100px] w-full rounded-md border p-3 bg-muted/50">
                             <div className="flex flex-wrap gap-2">
-                                {onboardingData.selectedTools.map(tool => (
-                                    <Badge variant="secondary" key={tool.mcpServer?.name} className="flex items-center gap-1">
-                                        <FunctionSquare className="h-3 w-3" />
-                                        {tool.mcpServer?.name}
-                                    </Badge>
-                                ))}
+                                {onboardingData.selectedTools.flatMap((tool, toolIndex) => {
+                                    const serverName = tool.mcpServer?.name || "unknown-server";
+                                    const toolNames = tool.mcpServer?.toolNames || [];
+
+                                    if (toolNames.length === 0) {
+                                        return (
+                                            <Badge
+                                                variant="secondary"
+                                                key={`${serverName}-${toolIndex}-no-tool-name`}
+                                                className="flex items-center gap-1"
+                                            >
+                                                <FunctionSquare className="h-3 w-3" />
+                                                {serverName}
+                                            </Badge>
+                                        );
+                                    }
+
+                                    return toolNames.map((toolName) => (
+                                        <Badge
+                                            variant="secondary"
+                                            key={`${serverName}-${toolName}-${toolIndex}`}
+                                            className="flex items-center gap-1"
+                                        >
+                                            <FunctionSquare className="h-3 w-3" />
+                                            {toolName}
+                                        </Badge>
+                                    ));
+                                })}
                             </div>
                         </ScrollArea>
                     ) : (
diff --git a/ui/src/components/onboarding/steps/ToolSelectionStep.tsx b/ui/src/components/onboarding/steps/ToolSelectionStep.tsx
index 0ccebc47e..1fc51b975 100644
--- a/ui/src/components/onboarding/steps/ToolSelectionStep.tsx
+++ b/ui/src/components/onboarding/steps/ToolSelectionStep.tsx
@@ -7,7 +7,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Info, ChevronDown, ChevronRight, FunctionSquare, Search } from 'lucide-react';
 import { LoadingState } from "@/components/LoadingState";
 import { ErrorState } from "@/components/ErrorState";
-import { getToolResponseDisplayName, getToolResponseDescription, getToolResponseIdentifier, getToolResponseCategory, toolResponseToAgentTool } from "@/lib/toolUtils";
+import { getToolResponseDisplayName, getToolResponseDescription, getToolResponseIdentifier, getToolResponseCategory, toolResponseToAgentTool, serverNamesMatch } from "@/lib/toolUtils";
 import type { Tool, ToolsResponse } from "@/types";
 import { Input } from "@/components/ui/input";
 
@@ -39,8 +39,10 @@ export function ToolSelectionStep({
         if (tool.type === "Agent" && tool.agent) {
             return false; // Agents don't match ToolResponse objects
         } else if (tool.type === "McpServer" && tool.mcpServer) {
-            return tool.mcpServer.name === toolResponse.server_name && 
-                   tool.mcpServer.toolNames.includes(toolResponse.id);
+            // server_name may be "namespace/name" while saved name can be just "name"
+            // (or vice versa), so normalize before comparing.
+            return serverNamesMatch(tool.mcpServer.name, toolResponse.server_name) &&
+                tool.mcpServer.toolNames.includes(toolResponse.id);
         }
         return false;
     };