fix(connections): use canonical app_name for connection display titles

apps/mesh/src/shared/utils/group-connections.ts

@@ -1,6 +1,27 @@
 import type { ConnectionEntity } from "@decocms/mesh-sdk";
 import { getConnectionSlug } from "./connection-slug";
 
+/**
+ * Returns the canonical display title for a connection in catalog/card/header contexts.
+ * For registry-installed connections (those with app_name set), the canonical name is
+ * derived from the stable app_name slug so that user-renamed instances don't pollute
+ * the group title. For custom connections (no app_name), the user-set title is used.
+ *
+ * Use the raw connection.title only when showing the specific instance matters
+ * (e.g., the instance list inside a connection detail, or the binding selector).
+ */
+export function getConnectionDisplayTitle(
+  connection: ConnectionEntity,
+): string {
+  if (connection.app_name) {
+    // Convert slug → display title: "google-gmail" → "Google Gmail"
+    // Strip optional scope prefix like "@scope/name" first.
+    const slug = connection.app_name.replace(/^@[^/]+\//, "");
+    return slug.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+  return connection.title;
+}
+
 export interface ConnectionGroup {
   type: "group";
   key: string;
@@ -47,9 +68,7 @@ export function groupConnections(
         type: "group",
         key,
         icon: first.icon,
-        title: first.app_name
-          ? first.title.replace(/\s*\(\d+\)\s*$/, "")
-          : first.title,
+        title: getConnectionDisplayTitle(first),
         connections: bucket,
       });
     }

apps/mesh/src/web/components/details/connection/index.tsx

@@ -1,4 +1,5 @@
 import { generatePrefixedId } from "@/shared/utils/generate-id";
+import { getConnectionDisplayTitle } from "@/shared/utils/group-connections";
 import { EmptyState } from "@/web/components/empty-state.tsx";
 import { ErrorBoundary } from "@/web/components/error-boundary";
 import { recordToEnvVars } from "@/web/components/env-vars-editor";
@@ -424,12 +425,7 @@ function ConnectionInspectorViewWithConnection({
         <BreadcrumbSeparator />
         <BreadcrumbItem>
           <BreadcrumbPage>
-            {(() => {
-              const first = siblings[0] ?? connection;
-              return first.app_name
-                ? first.title.replace(/\s*\(\d+\)\s*$/, "")
-                : first.title;
-            })()}
+            {getConnectionDisplayTitle(siblings[0] ?? connection)}
           </BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
@@ -562,12 +558,7 @@ function ConnectionInspectorViewWithConnection({
         <div className="flex flex-col h-full overflow-hidden">
           <ConnectionDetailHeader
             connection={connection}
-            displayTitle={(() => {
-              const first = siblings[0] ?? connection;
-              return first.app_name
-                ? first.title.replace(/\s*\(\d+\)\s*$/, "")
-                : first.title;
-            })()}
+            displayTitle={getConnectionDisplayTitle(siblings[0] ?? connection)}
           />
           <div className="flex-1 overflow-auto @container">
             <div className="grid grid-cols-1 @3xl:grid-cols-2 gap-5 p-6">
@@ -585,7 +576,7 @@ function ConnectionInspectorViewWithConnection({
                     setIsAddingInstance(true);
                     try {
                       const base = siblings[0] ?? connection;
-                      const baseName = base.title.replace(/\s*\(\d+\)\s*$/, "");
+                      const baseName = getConnectionDisplayTitle(base);
                       const nextNumber = siblings.length + 1;
                       const newTitle = `${baseName} (${nextNumber})`;
                       const newId = generatePrefixedId("conn");

apps/mesh/src/web/routes/orgs/connections.tsx

@@ -136,6 +136,7 @@ import {
 
 import {
   groupConnections,
+  getConnectionDisplayTitle,
   type ConnectionGroup,
 } from "@/shared/utils/group-connections";
 
@@ -552,6 +553,9 @@ function CatalogItemCard({
   const icon =
     item.server?.icons?.[0]?.src ||
     getGitHubAvatarUrl(item.server?.repository) ||
+    item.icon ||
+    item.image ||
+    item.logo ||
     null;
   const appInstances = allConnections.filter(
     (c) => c.connection_type !== "VIRTUAL" && c.app_name === appName,
@@ -1054,7 +1058,10 @@ function ConnectionResults({
                 return (
                   <ConnectionCard
                     key={connection.id}
-                    connection={connection}
+                    connection={{
+                      ...connection,
+                      title: getConnectionDisplayTitle(connection),
+                    }}
                     fallbackIcon={<Container />}
                     onClick={() =>
                       selectionMode

apps/mesh/src/web/views/virtual-mcp/add-connection-dialog.tsx

@@ -1,4 +1,7 @@
-import { groupConnections } from "@/shared/utils/group-connections";
+import {
+  groupConnections,
+  getConnectionDisplayTitle,
+} from "@/shared/utils/group-connections";
 import { CollectionSearch } from "@/web/components/collections/collection-search.tsx";
 import { CollectionTabs } from "@/web/components/collections/collection-tabs.tsx";
 import { CreateConnectionDialog } from "@/web/components/connections/create-connection-dialog.tsx";
@@ -296,6 +299,9 @@ function AddConnectionDialogContent({
     const icon =
       item.server?.icons?.[0]?.src ||
       getGitHubAvatarUrl(item.server?.repository) ||
+      item.icon ||
+      item.image ||
+      item.logo ||
       null;
 
     return (
@@ -373,7 +379,7 @@ function AddConnectionDialogContent({
             const c = item.connection;
             return renderConnectedApp(
               c.id,
-              c.title,
+              getConnectionDisplayTitle(c),
               c.icon,
               c.description ?? null,
               [c],
@@ -471,7 +477,7 @@ export function AddConnectionDialog({
   const handleCloneAndAdd = async (base: ConnectionEntity) => {
     setConnectingItemId(base.app_name ?? base.id);
     try {
-      const baseName = base.title.replace(/\s*\(\d+\)\s*$/, "");
+      const baseName = getConnectionDisplayTitle(base);
       const newTitle = `${baseName} (${Date.now().toString(36).slice(-4)})`;
 
       const created = await connectionActions.create.mutateAsync({

apps/mesh/src/web/views/virtual-mcp/index.tsx

@@ -1,4 +1,5 @@
 import { generatePrefixedId } from "@/shared/utils/generate-id";
+import { getConnectionDisplayTitle } from "@/shared/utils/group-connections";
 import type { VirtualMCPEntity } from "@/tools/virtual/schema";
 import { getUIResourceUri } from "@/mcp-apps/types.ts";
 import { useChatTask } from "@/web/components/chat/context";
@@ -1185,7 +1186,7 @@ function VirtualMcpDetailViewWithData({
       };
       if (!base) return;
 
-      const baseName = base.title.replace(/\s*\(.*?\)\s*$/, "");
+      const baseName = getConnectionDisplayTitle(base);
       const newId = generatePrefixedId("conn");
       // Temporary title — will be updated with email suffix after OAuth if available
       const tempTitle = `${baseName} (${Date.now().toString(36).slice(-4)})`;