Merge branch 'main' into ochafik/say-server

Author: ochafik

examples/basic-host/src/implementation.ts

@@ -1,5 +1,6 @@
 import { RESOURCE_MIME_TYPE, getToolUiResourceUri, type McpUiSandboxProxyReadyNotification, AppBridge, PostMessageTransport, type McpUiResourceCsp, type McpUiResourcePermissions, buildAllowAttribute, type McpUiUpdateModelContextRequest, type McpUiMessageRequest } from "@modelcontextprotocol/ext-apps/app-bridge";
 import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
 import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
 import type { CallToolResult, Tool } from "@modelcontextprotocol/sdk/types.js";
 
@@ -24,11 +25,8 @@ export interface ServerInfo {
 
 
 export async function connectToServer(serverUrl: URL): Promise<ServerInfo> {
-  const client = new Client(IMPLEMENTATION);
-
   log.info("Connecting to server:", serverUrl.href);
-  await client.connect(new StreamableHTTPClientTransport(serverUrl));
-  log.info("Connection successful");
+  const client = await connectWithFallback(serverUrl);
 
   const name = client.getServerVersion()?.name ?? serverUrl.href;
 
@@ -39,6 +37,28 @@ export async function connectToServer(serverUrl: URL): Promise<ServerInfo> {
   return { name, client, tools, appHtmlCache: new Map() };
 }
 
+async function connectWithFallback(serverUrl: URL): Promise<Client> {
+  // Try Streamable HTTP first (modern transport)
+  try {
+    const client = new Client(IMPLEMENTATION);
+    await client.connect(new StreamableHTTPClientTransport(serverUrl));
+    log.info("Connected via Streamable HTTP transport");
+    return client;
+  } catch (streamableError) {
+    log.info("Streamable HTTP failed:", streamableError);
+  }
+
+  // Fall back to SSE (deprecated but needed for older servers)
+  try {
+    const client = new Client(IMPLEMENTATION);
+    await client.connect(new SSEClientTransport(serverUrl));
+    log.info("Connected via SSE transport");
+    return client;
+  } catch (sseError) {
+    throw new Error(`Could not connect with any transport. SSE error: ${sseError}`);
+  }
+}
+
 
 interface UiResourceData {
   html: string;

examples/basic-server-preact/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-preact/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-react/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-react/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-solid/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-solid/src/mcp-app.module.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {

examples/basic-server-svelte/src/App.svelte

@@ -162,6 +162,13 @@ async function handleOpenLink() {
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   textarea,
   input {
     font-family: inherit;
@@ -196,4 +203,10 @@ async function handleOpenLink() {
     font-style: normal;
   }
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+:global(#server-time) {
+  flex: 1;
+  min-width: 0;
+}
 </style>

examples/basic-server-vanillajs/src/global.css

@@ -10,3 +10,9 @@ html, body {
 code {
   font-size: 1em;
 }
+
+/* Server time fills remaining width for consistent E2E screenshot masking */
+#server-time {
+  flex: 1;
+  min-width: 0;
+}

examples/basic-server-vanillajs/src/mcp-app.css

@@ -28,6 +28,13 @@
     margin-top: 0.5rem;
   }
 
+  /* Server time row: flex layout for consistent mask width in E2E tests */
+  > p {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25em;
+  }
+
   /* Consistent font for form inputs (inherits from global.css) */
   textarea,
   input {