feat: add notebooks onboarding modal and in-notebook MCP promo

e2e/commands.js

@@ -2,7 +2,7 @@ require("cypress-real-events")
 
 require("@4tw/cypress-drag-drop")
 
-const { ctrlOrCmd, escapeRegExp } = require("./utils")
+const { ctrlOrCmd, escapeRegExp, seedNotebookOnboarding } = require("./utils")
 
 const contextPath = process.env.QDB_HTTP_CONTEXT_WEB_CONSOLE || ""
 const baseUrl = `http://localhost:9999${contextPath}`
@@ -52,6 +52,8 @@ Cypress.on("uncaught:exception", (err) => {
 })
 
 Cypress.on("window:before:load", (win) => {
+  seedNotebookOnboarding(win)
+
   const OriginalRO = win.ResizeObserver
   win.ResizeObserver = class extends OriginalRO {
     constructor(cb) {
@@ -534,7 +536,7 @@ Cypress.Commands.add(
 
 Cypress.Commands.add(
   "handleStorageAndVisit",
-  (url, clearLocalStorage = true, localStorageItems = {}) => {
+  (url, clearLocalStorage = true, localStorageItems = {}, onBeforeLoad) => {
     cy.visit(url, {
       onBeforeLoad: (win) => {
         if (clearLocalStorage) {
@@ -543,7 +545,9 @@ Cypress.Commands.add(
         for (const [key, value] of Object.entries(localStorageItems)) {
           win.localStorage.setItem(key, value)
         }
+        seedNotebookOnboarding(win)
         win.indexedDB.deleteDatabase("web-console")
+        onBeforeLoad?.(win)
       },
     })
   },

e2e/tests/console/mcpBridgePermissions.spec.js

@@ -123,17 +123,15 @@ const deepLinkSuffix = () =>
 
 // Visit with deep-link params before login so they survive into the SPA boot.
 const loginAndVisitDeepLink = (seedLocalStorage = {}) => {
-  cy.visit(`${baseUrl}/${deepLinkSuffix()}`, {
-    onBeforeLoad: (win) => {
-      win.localStorage.clear()
+  cy.handleStorageAndVisit(
+    `${baseUrl}/${deepLinkSuffix()}`,
+    true,
+    seedLocalStorage,
+    (win) => {
       win.sessionStorage.clear()
-      win.indexedDB.deleteDatabase("web-console")
-      for (const [k, v] of Object.entries(seedLocalStorage)) {
-        win.localStorage.setItem(k, v)
-      }
       installFakeWebSocket(win)
     },
-  })
+  )
   cy.loginWithUserAndPassword()
 }
 

e2e/utils/index.js

@@ -4,7 +4,24 @@ const escapeRegExp = (string) => {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
 }
 
+const NOTEBOOK_ONBOARDING_KEY = "notebook.onboarding"
+
+const NOTEBOOK_ONBOARDING_SUPPRESSED = JSON.stringify({
+  mcpEverConnected: true,
+})
+
+const seedNotebookOnboarding = (win) => {
+  if (!win.localStorage.getItem(NOTEBOOK_ONBOARDING_KEY)) {
+    win.localStorage.setItem(
+      NOTEBOOK_ONBOARDING_KEY,
+      NOTEBOOK_ONBOARDING_SUPPRESSED,
+    )
+  }
+}
+
 module.exports = {
   ctrlOrCmd,
   escapeRegExp,
+  NOTEBOOK_ONBOARDING_KEY,
+  seedNotebookOnboarding,
 }

src/components/CopyButton/index.tsx

@@ -21,18 +21,24 @@ const StyledCheckboxCircle = styled(CheckboxCircle)`
 export const CopyButton = ({
   text,
   iconOnly,
+  icon,
   size = "md",
   onCopy,
   ...props
 }: {
   text: string
   iconOnly?: boolean
+  icon?: React.ReactNode
   size?: ButtonProps["size"]
   onCopy?: () => void
 } & ButtonProps) => {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  const displayIcon = icon ?? (
+    <FileCopy size={size === "sm" ? "12px" : "16px"} />
+  )
+
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -55,9 +61,7 @@ export const CopyButton = ({
         timeoutRef.current = setTimeout(() => setCopied(false), 2000)
         onCopy?.()
       }}
-      {...(!iconOnly && {
-        prefixIcon: <FileCopy size={size === "sm" ? "12px" : "16px"} />,
-      })}
+      {...(!iconOnly && { prefixIcon: displayIcon })}
       {...props}
     >
       {copied && (
@@ -66,7 +70,7 @@ export const CopyButton = ({
           size={size === "sm" ? "8px" : "14px"}
         />
       )}
-      {iconOnly ? <FileCopy size={size === "sm" ? "12px" : "16px"} /> : "Copy"}
+      {iconOnly ? displayIcon : "Copy"}
     </StyledButton>
   )
 }

src/components/McpSetupCommand/index.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import styled from "styled-components"
+import { CopyButton } from "../CopyButton"
+import { CopyCommand } from "../icons/copy-command"
+import { EXPECTED_BRIDGE_VERSION } from "../../utils/mcp/protocolVersion"
+import { color } from "../../utils"
+
+export const SETUP_COMMAND = `npx @questdb/mcp-bridge@${EXPECTED_BRIDGE_VERSION} setup`
+
+const Code = styled.span`
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  font-family: ${({ theme }) => theme.fontMonospace};
+  font-size: 1.3rem;
+  color: ${color("offWhite2")};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+const Package = styled.span`
+  color: ${color("cyan")};
+`
+
+const CopyCommandButton = styled(CopyButton)`
+  && {
+    height: auto;
+    min-width: 0;
+    padding: 0.4rem;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    color: ${color("mutedLabel")};
+  }
+
+  &&:hover:not([disabled]) {
+    background: transparent;
+    color: ${color("foreground")};
+  }
+
+  &[data-copied] > svg:first-child {
+    top: 0.1rem;
+    right: 0.1rem;
+    transform: none;
+  }
+`
+
+export const McpSetupCommand = ({ iconSize = 16 }: { iconSize?: number }) => (
+  <>
+    <Code>
+      npx <Package>@questdb/mcp-bridge@{EXPECTED_BRIDGE_VERSION}</Package> setup
+    </Code>
+    <CopyCommandButton
+      iconOnly
+      skin="transparent"
+      size="sm"
+      text={SETUP_COMMAND}
+      icon={<CopyCommand size={iconSize} />}
+    />
+  </>
+)