From 2f92936f03c81a009c959fe83a045255b4583e8b Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Mon, 12 Oct 2026 21:47:17 +0900
Subject: [PATCH] fix(chat): closing the start screen's MCP video closes the
 whole card (#991)

---
 components/chat/mcp-notice.tsx | 21 ++++-----------------
 lib/storage.ts                 |  2 +-
 tests/e2e/workspace.spec.ts    | 11 +++++------
 3 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/components/chat/mcp-notice.tsx b/components/chat/mcp-notice.tsx
index a2c3b654..fc7d7add 100644
--- a/components/chat/mcp-notice.tsx
+++ b/components/chat/mcp-notice.tsx
@@ -11,7 +11,7 @@ const MCP_URL =
     "https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
 
 /**
- * Whether the user closed the MCP video once. Starts as closed so the server
+ * Whether the user closed the MCP notice once. Starts as closed so the server
  * render and the first client render agree; the stored choice is read after
  * mount.
  */
@@ -90,25 +90,12 @@ const cardClass =
     "w-full rounded-xl border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-blue-500/10"
 
 /**
- * MCP server notice on the start screen. Until the user closes it, the card
- * also plays the promo video; after that it is the plain card for good.
+ * MCP server notice on the start screen: the card with the promo video. Once
+ * the user closes it, it does not come back.
  */
 export function McpNotice({ className }: { className?: string }) {
     const [closed, close] = useVideoClosed()
-    if (closed) {
-        return (
-            <div
-                className={cn(
-                    cardClass,
-                    "px-4 py-3 transition-colors hover:border-purple-500/40",
-                    className,
-                )}
-                data-testid="mcp-notice"
-            >
-                <NoticeLink />
-            </div>
-        )
-    }
+    if (closed) return null
     return (
         <div
             className={cn(cardClass, "p-3", className)}
diff --git a/lib/storage.ts b/lib/storage.ts
index fbf6ca44..394b15a5 100644
--- a/lib/storage.ts
+++ b/lib/storage.ts
@@ -30,6 +30,6 @@ export const STORAGE_KEYS = {
     // Langfuse session id
     sessionId: "next-ai-draw-io-session-id",
 
-    // The start screen's MCP video was closed (it does not come back)
+    // The start screen's MCP card with its video was closed (it does not come back)
     mcpVideoClosed: "next-ai-draw-io-mcp-video-closed",
 } as const
diff --git a/tests/e2e/workspace.spec.ts b/tests/e2e/workspace.spec.ts
index 262cc7cd..a9132279 100644
--- a/tests/e2e/workspace.spec.ts
+++ b/tests/e2e/workspace.spec.ts
@@ -170,18 +170,17 @@ test.describe("Workspace", () => {
         await expect(getChatInput(page)).toHaveValue("Draw a cat for me")
     })
 
-    test("the MCP card's video stays away once closed", async ({ page }) => {
+    test("the MCP card and its video stay away once closed", async ({
+        page,
+    }) => {
         await openApp(page)
         const card = page.locator('[data-testid="mcp-notice"]')
-        const video = page.locator('[data-testid="mcp-video"]')
         await expect(card.locator('[data-testid="mcp-video"]')).toBeVisible()
         await page.locator('[data-testid="mcp-video-close"]').click()
-        await expect(video).toHaveCount(0)
-        await expect(card).toBeVisible()
+        await expect(card).toHaveCount(0)
         await page.reload({ waitUntil: "networkidle" })
         await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
-        await expect(card).toBeVisible()
-        await expect(video).toHaveCount(0)
+        await expect(card).toHaveCount(0)
     })
 
     test("each AI change becomes a version card; the latest undoes and redoes it", async ({