From 548835609655b0a823af5ab0c540f76a8ff3d228 Mon Sep 17 00:00:00 2001
From: Josh Snyder <joshua@posthog.com>
Date: Thu, 7 May 2026 12:20:27 +0000
Subject: [PATCH] fix(mcp): disable opening detail for uninstalled servers in
 marketplace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The detail page for a non-connected MCP server has nothing to configure,
so clicking the card just opened an empty page. Make non-installed cards
non-clickable and remove their hover affordance — connecting still works
via the "Connect" button.

Generated-By: PostHog Code
Task-Id: 938aa952-562b-4752-a7a8-3a700ade3c76
---
 .../components/parts/ServerCard.tsx           | 106 ++++++++++--------
 1 file changed, 59 insertions(+), 47 deletions(-)

diff --git a/apps/code/src/renderer/features/mcp-servers/components/parts/ServerCard.tsx b/apps/code/src/renderer/features/mcp-servers/components/parts/ServerCard.tsx
index 05ed5f31c..944819963 100644
--- a/apps/code/src/renderer/features/mcp-servers/components/parts/ServerCard.tsx
+++ b/apps/code/src/renderer/features/mcp-servers/components/parts/ServerCard.tsx
@@ -25,58 +25,70 @@ export function ServerCard({
     (c) => c.id === server.category,
   )?.label;
 
-  return (
-    <div className="group relative rounded-md border border-gray-5 bg-gray-2 transition-colors hover:border-gray-7 hover:bg-gray-3">
-      <button
-        type="button"
-        onClick={onOpen}
-        className="flex w-full flex-col gap-3 rounded-md p-4 text-left"
-      >
-        <Flex align="start" gap="3" width="100%">
-          <ServerIcon iconKey={server.icon_key} size={40} />
-          <Flex direction="column" gap="1" className="min-w-0 flex-1">
-            <Flex align="center" gap="2">
-              <Text truncate className="font-medium text-base">
-                {server.name}
-              </Text>
-              {installed && (
-                <CheckCircle
-                  size={14}
-                  weight="fill"
-                  className="shrink-0 text-green-10"
-                />
-              )}
-            </Flex>
-            {server.description && (
-              <Text
-                color="gray"
-                style={{
-                  display: "-webkit-box",
-                  WebkitLineClamp: 2,
-                  WebkitBoxOrient: "vertical",
-                }}
-                className="overflow-hidden text-[13px]"
-              >
-                {server.description}
-              </Text>
+  const wrapperClassName = `group relative rounded-md border border-gray-5 bg-gray-2 transition-colors${
+    installed ? " hover:border-gray-7 hover:bg-gray-3" : ""
+  }`;
+
+  const innerClassName = "flex w-full flex-col gap-3 rounded-md p-4 text-left";
+
+  const cardBody = (
+    <>
+      <Flex align="start" gap="3" width="100%">
+        <ServerIcon iconKey={server.icon_key} size={40} />
+        <Flex direction="column" gap="1" className="min-w-0 flex-1">
+          <Flex align="center" gap="2">
+            <Text truncate className="font-medium text-base">
+              {server.name}
+            </Text>
+            {installed && (
+              <CheckCircle
+                size={14}
+                weight="fill"
+                className="shrink-0 text-green-10"
+              />
             )}
           </Flex>
-          {/* Spacer to reserve room for the action button overlay */}
-          <div style={{ width: installed ? 100 : 84 }} />
+          {server.description && (
+            <Text
+              color="gray"
+              style={{
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+              }}
+              className="overflow-hidden text-[13px]"
+            >
+              {server.description}
+            </Text>
+          )}
         </Flex>
-        <Flex align="center" gap="2" justify="between" width="100%">
-          <Flex gap="2" align="center">
-            {categoryLabel && (
-              <Badge color="gray" variant="soft" size="1">
-                {categoryLabel}
-              </Badge>
-            )}
-            <Badge color="gray" variant="outline" size="1">
-              {server.auth_type === "oauth" ? "OAuth" : "API key"}
+        {/* Spacer to reserve room for the action button overlay */}
+        <div style={{ width: installed ? 100 : 84 }} />
+      </Flex>
+      <Flex align="center" gap="2" justify="between" width="100%">
+        <Flex gap="2" align="center">
+          {categoryLabel && (
+            <Badge color="gray" variant="soft" size="1">
+              {categoryLabel}
             </Badge>
-          </Flex>
+          )}
+          <Badge color="gray" variant="outline" size="1">
+            {server.auth_type === "oauth" ? "OAuth" : "API key"}
+          </Badge>
         </Flex>
-      </button>
+      </Flex>
+    </>
+  );
+
+  return (
+    <div className={wrapperClassName}>
+      {installed ? (
+        <button type="button" onClick={onOpen} className={innerClassName}>
+          {cardBody}
+        </button>
+      ) : (
+        <div className={innerClassName}>{cardBody}</div>
+      )}
       <div className="absolute top-4 right-4">
         {installed ? (
           <Button variant="soft" color="gray" size="1" onClick={onOpen}>