fix(basic-host): use tool display-name precedence in headers

examples/basic-host/src/index.tsx

@@ -4,6 +4,7 @@ import { Component, type ErrorInfo, type ReactNode, StrictMode, Suspense, use, u
 import { createRoot } from "react-dom/client";
 import { callTool, connectToServer, hasAppHtml, initializeApp, loadSandboxProxy, log, newAppBridge, type ServerInfo, type ToolCallInfo, type ModelContext, type AppMessage } from "./implementation";
 import { getTheme, toggleTheme, onThemeChange, type Theme } from "./theme";
+import { getToolDisplayName } from "./tool-display-name";
 import styles from "./index.module.css";
 
 /**
@@ -341,7 +342,7 @@ function ToolCallInfoPanel({ toolCallInfo, isDestroying, onRequestClose, onClose
     >
       {/* Row 1: Header with server:tool name and close button */}
       <div className={styles.appHeader}>
-        <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{toolCallInfo.tool.name}</span></span>
+        <span>{toolCallInfo.serverInfo.name}:<span className={styles.toolName}>{getToolDisplayName(toolCallInfo.tool)}</span></span>
         {onRequestClose && !isDestroying && (
           <button
             className={styles.closeButton}

examples/basic-host/src/tool-display-name.test.ts

@@ -0,0 +1,30 @@
+/// <reference types="bun" />
+
+import { describe, expect, test } from "bun:test";
+import type { Tool } from "@modelcontextprotocol/client";
+import { getToolDisplayName } from "./tool-display-name";
+
+const tool = (overrides: Partial<Tool> = {}): Tool => ({
+  name: "list_design_systems",
+  inputSchema: { type: "object" },
+  ...overrides,
+});
+
+describe("getToolDisplayName", () => {
+  test("prefers title over annotations.title and name", () => {
+    expect(getToolDisplayName(tool({
+      title: "Listing design systems",
+      annotations: { title: "Annotated title" },
+    }))).toBe("Listing design systems");
+  });
+
+  test("falls back to annotations.title", () => {
+    expect(getToolDisplayName(tool({
+      annotations: { title: "Annotated title" },
+    }))).toBe("Annotated title");
+  });
+
+  test("falls back to name", () => {
+    expect(getToolDisplayName(tool())).toBe("list_design_systems");
+  });
+});

examples/basic-host/src/tool-display-name.ts

@@ -0,0 +1,5 @@
+import type { Tool } from "@modelcontextprotocol/client";
+
+export function getToolDisplayName(tool: Tool): string {
+  return tool.title ?? tool.annotations?.title ?? tool.name;
+}