feat: improve mcp install card layout

apps/cloud/src/mcp-session.e2e.node.test.ts

@@ -124,8 +124,6 @@ const buildScopedExecutor = (
     return yield* createExecutor({ scope, adapter, blobs, plugins });
   });
 
-type McpSession = { readonly client: Client };
-
 // Builds a scope, wires a real execution engine + MCP server, and yields
 // them connected to an in-memory MCP client. Shaped as an acquireRelease so
 // the transport teardown is guaranteed when the test scope closes.

packages/plugins/openapi/src/sdk/presets.ts

@@ -53,14 +53,15 @@ export const openApiPresets: readonly OpenApiPreset[] = [
     name: "OpenAI",
     summary: "Models, files, responses, and fine-tuning.",
     url: "https://app.stainless.com/api/spec/documented/openai/openapi.documented.yml",
+    icon: "https://openai.com/favicon.ico",
     featured: true,
   },
   {
     id: "sentry",
     name: "Sentry",
     summary: "Error tracking, performance monitoring, and releases.",
     url: "https://raw.githubusercontent.com/getsentry/sentry-api-schema/main/openapi-derefed.json",
-    icon: "https://sentry.io/favicon.ico",
+    icon: "https://sentry-brand.storage.googleapis.com/sentry-glyph-black.png",
     featured: true,
   },
   {

packages/react/src/components/code-block.tsx

@@ -138,7 +138,11 @@ export function CodeBlock(props: {
         )}
 
         <div
-          className="overflow-auto text-sm leading-relaxed [&_pre]:!bg-transparent [&_pre]:p-3 [&_code]:font-mono"
+          className={cn(
+            "text-sm leading-relaxed [&_pre]:!bg-transparent [&_pre]:p-3 [&_code]:font-mono",
+            "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            maxH ? "overflow-auto" : "overflow-x-auto overflow-y-hidden",
+          )}
           style={maxH ? { maxHeight: maxH } : undefined}
         >
           {highlighted ?? (

packages/react/src/components/mcp-install-card.tsx

@@ -4,6 +4,7 @@ import ClaudeIcon from "@lobehub/icons/es/Claude/components/Color";
 import OpenCodeIcon from "@lobehub/icons/es/OpenCode/components/Mono";
 import { CodeBlock } from "./code-block";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+import { CardStack, CardStackHeader, CardStackContent } from "./card-stack";
 import { cn } from "../lib/utils";
 import { useScopeInfo } from "../api/scope-context";
 
@@ -43,60 +44,78 @@ export function McpInstallCard(props: { className?: string }) {
         ? `npx add-mcp "${origin}/mcp" --transport http --name "executor"`
         : 'npx add-mcp "<this-server>/mcp" --transport http --name "executor"';
 
-  const description =
+  const subtitle =
     mode === "stdio"
-      ? "Starts executor as a local stdio MCP server. Best for CLI agents like Claude Code."
+      ? isDev
+        ? "Uses the repo-local dev CLI. Run from the repository root."
+        : "Requires the executor CLI on your PATH."
       : "Connect to executor as a remote MCP server over streamable HTTP.";
 
-  return (
-    <section className={props.className ?? "rounded-2xl border border-border bg-card/80 p-5"}>
-      <div className="mb-3 flex items-start justify-between gap-3">
-        <div className="space-y-1">
-          <h2 className="text-sm font-semibold text-foreground">Connect an agent</h2>
-          <p className="text-sm text-muted-foreground">{description}</p>
-        </div>
-        <div className="flex shrink-0 items-center gap-2 text-muted-foreground">
-          <div className="group/agents flex items-center">
-            {SUPPORTED_AGENTS.map(({ key, label, Icon }, index) => (
-              <span
-                key={key}
-                title={label}
-                aria-label={label}
-                style={{ zIndex: SUPPORTED_AGENTS.length - index }}
-                className={cn(
-                  "flex h-6 items-center justify-center rounded-md border border-border/60 bg-background px-1.5 transition-[margin] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]",
-                  index > 0 && "-ml-2 group-hover/agents:ml-1",
-                )}
-              >
-                <Icon size={14} />
-              </span>
-            ))}
-          </div>
-          <span className="text-sm text-muted-foreground">and more</span>
-        </div>
+  const agentLogos = (
+    <div className="flex shrink-0 items-center gap-2 text-muted-foreground">
+      <span className="text-xs text-muted-foreground">Work with your agent</span>
+      <div className="group/agents flex items-center">
+        {SUPPORTED_AGENTS.map(({ key, label, Icon }, index) => (
+          <span
+            key={key}
+            title={label}
+            aria-label={label}
+            style={{ zIndex: SUPPORTED_AGENTS.length - index }}
+            className={cn(
+              "flex h-6 items-center justify-center rounded-md border border-border/60 bg-background px-1.5 transition-[margin] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]",
+              index > 0 && "-ml-2 group-hover/agents:ml-1",
+            )}
+          >
+            <Icon size={14} />
+          </span>
+        ))}
       </div>
+      <span className="text-xs text-muted-foreground">and more</span>
+    </div>
+  );
 
-      {showStdio ? (
-        <Tabs value={mode} onValueChange={(v) => setMode(v as TransportMode)}>
+  const header = (
+    <CardStackHeader
+      className="items-start pt-3 pb-1"
+      rightSlot={
+        showStdio ? (
           <TabsList>
             <TabsTrigger value="http">Remote HTTP</TabsTrigger>
             <TabsTrigger value="stdio">Standard I/O</TabsTrigger>
           </TabsList>
-          <TabsContent value="http">
-            <CodeBlock code={command} lang="bash" />
-          </TabsContent>
-          <TabsContent value="stdio">
-            <CodeBlock code={command} lang="bash" />
-            <p className="mt-3 text-xs text-muted-foreground">
-              {isDev
-                ? "Uses the repo-local dev CLI. Run from the repository root."
-                : "Requires the executor CLI on your PATH."}
-            </p>
-          </TabsContent>
+        ) : undefined
+      }
+    >
+      <div className="flex min-w-0 flex-col gap-0.5">
+        <span className="text-sm font-semibold text-foreground">Connect an agent</span>
+        <span className="text-xs font-normal text-muted-foreground">{subtitle}</span>
+      </div>
+    </CardStackHeader>
+  );
+
+  const body = (
+    <CardStackContent>
+      <div className="px-4 pt-1 pb-3">
+        <CodeBlock code={command} lang="bash" />
+      </div>
+      <div className="flex items-center px-4 py-3">{agentLogos}</div>
+    </CardStackContent>
+  );
+
+  return (
+    <CardStack className={props.className}>
+      {showStdio ? (
+        <Tabs value={mode} onValueChange={(v) => setMode(v as TransportMode)}>
+          {header}
+          <TabsContent value="http">{body}</TabsContent>
+          <TabsContent value="stdio">{body}</TabsContent>
         </Tabs>
       ) : (
-        <CodeBlock code={command} lang="bash" />
+        <>
+          {header}
+          {body}
+        </>
       )}
-    </section>
+    </CardStack>
   );
 }