fix(chat): closing the start screen's MCP video closes the whole card (#991)

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)}

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

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 ({