feat: Display server name above tool name in cards

- Swift host: Add serverName to ToolCallInfo and display it in ToolCallCard header
- JS host: Pass toolInfo with tool definition to hostContext when creating AppBridge

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: ochafik

examples/basic-host-swift/Sources/BasicHostApp/ContentView.swift

@@ -188,9 +188,14 @@ struct ToolCallCard: View {
         VStack(alignment: .leading, spacing: 8) {
             // Header
             HStack {
-                Text(toolCallInfo.tool.name)
-                    .font(.subheadline.bold())
-                    .foregroundColor(.primary)
+                VStack(alignment: .leading, spacing: 2) {
+                    Text(toolCallInfo.serverName)
+                        .font(.caption)
+                        .foregroundColor(.secondary)
+                    Text(toolCallInfo.tool.name)
+                        .font(.subheadline.bold())
+                        .foregroundColor(.primary)
+                }
 
                 Spacer()
 

examples/basic-host-swift/Sources/BasicHostApp/McpHostViewModel.swift

@@ -134,7 +134,12 @@ class McpHostViewModel: ObservableObject {
                 throw ToolCallError.invalidJson
             }
 
+            let serverName = selectedServerIndex >= 0 && selectedServerIndex < Self.knownServers.count
+                ? Self.knownServers[selectedServerIndex].0
+                : "Custom Server"
+
             let toolCallInfo = ToolCallInfo(
+                serverName: serverName,
                 tool: tool,
                 input: inputDict,
                 client: client,
@@ -268,6 +273,7 @@ struct ToolResult {
 @MainActor
 class ToolCallInfo: ObservableObject, Identifiable {
     let id = UUID()
+    let serverName: String
     let tool: Tool
     let input: [String: Any]
     let client: Client
@@ -283,12 +289,14 @@ class ToolCallInfo: ObservableObject, Identifiable {
     @Published var error: String?
 
     init(
+        serverName: String,
         tool: Tool,
         input: [String: Any],
         client: Client,
         hostInfo: Implementation,
         hostCapabilities: McpUiHostCapabilities
     ) {
+        self.serverName = serverName
         self.tool = tool
         self.input = input
         self.client = client

examples/basic-host/src/implementation.ts

@@ -209,12 +209,19 @@ function hookInitializedCallback(appBridge: AppBridge): Promise<void> {
 }
 
 
-export function newAppBridge(serverInfo: ServerInfo, iframe: HTMLIFrameElement): AppBridge {
+export function newAppBridge(serverInfo: ServerInfo, toolCallInfo: ToolCallInfo, iframe: HTMLIFrameElement): AppBridge {
   const serverCapabilities = serverInfo.client.getServerCapabilities();
   const appBridge = new AppBridge(serverInfo.client, IMPLEMENTATION, {
     openLinks: {},
     serverTools: serverCapabilities?.tools,
     serverResources: serverCapabilities?.resources,
+  }, {
+    hostContext: {
+      toolInfo: {
+        id: crypto.randomUUID(),  // We don't have the actual request ID, use a random one
+        tool: toolCallInfo.tool,
+      },
+    },
   });
 
   // Register all handlers before calling connect(). The Guest UI can start

examples/basic-host/src/index.tsx

@@ -185,7 +185,7 @@ function AppIFramePanel({ toolCallInfo }: AppIFramePanelProps) {
       // Outside of Strict Mode, this `useEffect` runs only once per
       // `toolCallInfo`.
       if (firstTime) {
-        const appBridge = newAppBridge(toolCallInfo.serverInfo, iframe);
+        const appBridge = newAppBridge(toolCallInfo.serverInfo, toolCallInfo, iframe);
         initializeApp(iframe, appBridge, toolCallInfo);
       }
     });