Simplify AI Chat

- Add new `note` field
- Always clear `messages` when posting a message
- Remove follow-up questions

.changeset/bright-ladybugs-march.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Simplify AI Chat

.changeset/cuddly-eels-live.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Fix robots.txt preventing favicon from being indexed.

.changeset/late-mangos-draw.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Show a toolbar for authenticated users with access to the current site.

.changeset/wicked-hornets-crash.md

@@ -0,0 +1,5 @@
+---
+"gitbook": minor
+---
+
+Scope search across sections and variants

.github/workflows/deploy-preview.yaml

@@ -182,9 +182,9 @@ jobs:
                   SITE_BASE_URL: ${{ needs.deploy-v2-cloudflare.outputs.deployment-url }}/url/
                   ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
                   ARGOS_BUILD_NAME: 'customers-v2'
-    pagespeed-testing-v2:
+    browserless-testing-v2-vercel:
         runs-on: ubuntu-latest
-        name: PageSpeed Testing v1
+        name: Browserless Testing v2 (Vercel)
         needs: deploy-v2-vercel
         steps:
             - name: Checkout
@@ -195,8 +195,26 @@ jobs:
               run: bun install --frozen-lockfile
               env:
                   PUPPETEER_SKIP_DOWNLOAD: 1
-            - name: Run pagespeed tests
-              run: bun ./packages/gitbook/tests/pagespeed-testing.ts
+            - name: Run tests
+              run: cd ./packages/gitbook && bun e2e-browserless
               env:
                   BASE_URL: ${{needs.deploy-v2-vercel.outputs.deployment-url}}
-                  PAGESPEED_API_KEY: ${{ secrets.PAGESPEED_API_KEY }}
+                  SITE_BASE_URL: ${{ needs.deploy-v2-vercel.outputs.deployment-url }}/url/
+    # browserless-testing-v2-cloudflare:
+    #     runs-on: ubuntu-latest
+    #     name: Browserless Testing v2 (Cloudflare)
+    #     needs: deploy-v2-cloudflare
+    #     steps:
+    #         - name: Checkout
+    #           uses: actions/checkout@v4
+    #         - name: Setup Bun
+    #           uses: ./.github/composite/setup-bun
+    #         - name: Install dependencies
+    #           run: bun install --frozen-lockfile
+    #           env:
+    #               PUPPETEER_SKIP_DOWNLOAD: 1
+    #         - name: Run tests
+    #           run: cd ./packages/gitbook && bun e2e-browserless
+    #           env:
+    #               BASE_URL: ${{needs.deploy-v2-cloudflare.outputs.deployment-url}}
+    #               SITE_BASE_URL: ${{ needs.deploy-v2-cloudflare.outputs.deployment-url }}/url/

package.json

@@ -34,7 +34,7 @@
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@gitbook/api": "^0.140.0",
+            "@gitbook/api": "^0.141.0",
             "bidc": "^0.0.2"
         }
     },

packages/expr/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @gitbook/expr
 
+## 1.2.0
+
+### Minor Changes
+
+- 6da3655: Fix exports in gitbook/expr package.json
+
+## 1.1.1
+
+### Patch Changes
+
+- 3548fa6: Fix eval-estree-expr named import
+
 ## 1.1.0
 
 ### Minor Changes

packages/expr/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@gitbook/expr",
     "description": "Safely evaluate & parse user-defined GitBook expressions.",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "type": "module",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
-            "development": "./src/index.ts",
+            "import": "./dist/index.js",
             "default": "./dist/index.js"
         }
     },

packages/expr/src/runtime.ts

@@ -10,7 +10,8 @@ import {
 } from 'acorn';
 import { parse as parseLoose } from 'acorn-loose';
 import escodegen from 'escodegen';
-import { evaluate } from 'eval-estree-expression';
+import evalESTreeExpr from 'eval-estree-expression';
+const { evaluate } = evalESTreeExpr;
 
 import { AutoComplete } from './autocomplete';
 import { ExpressionError } from './errors';

packages/gitbook/CHANGELOG.md

@@ -1,5 +1,24 @@
 # gitbook
 
+## 0.18.0
+
+### Minor Changes
+
+- 262afa3: Expose a MCP server for the docs site under /~gitbook/mcp
+
+### Patch Changes
+
+- Updated dependencies [262afa3]
+  - @gitbook/icons@0.3.1
+  - @gitbook/react-openapi@1.4.3
+  - @gitbook/react-contentkit@0.7.5
+
+## 0.17.2
+
+### Patch Changes
+
+- @gitbook/react-openapi@1.4.2
+
 ## 0.17.1
 
 ### Patch Changes

packages/gitbook/e2e/util.ts

@@ -336,6 +336,7 @@ export function getCustomizationURL(partial: DeepPartial<SiteCustomizationSettin
         pageActions: {
             externalAI: true,
             markdown: true,
+            mcp: true,
         },
         trademark: {
             enabled: true,

packages/gitbook/openNext/customWorkers/defaultWrangler.jsonc

@@ -17,7 +17,8 @@
         "dev": {
             "vars": {
                 "STAGE": "dev",
-                "OPEN_NEXT_REQUEST_ID_HEADER": "true"
+                "OPEN_NEXT_REQUEST_ID_HEADER": "true",
+                "GITBOOK_URL": "http://localhost:8771"
             },
             "r2_buckets": [
                 {

packages/gitbook/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gitbook",
-    "version": "0.17.1",
+    "version": "0.18.0",
     "private": true,
     "dependencies": {
         "@gitbook/api": "catalog:",
@@ -46,7 +46,8 @@
         "memoizee": "^0.4.17",
         "micromark-extension-frontmatter": "^2.0.0",
         "micromark-extension-gfm": "^3.0.0",
-        "next": "15.3.5",
+        "motion": "^12.23.12",
+        "next": "15.4.0",
         "next-themes": "^0.2.1",
         "nuqs": "^2.2.3",
         "object-hash": "^3.0.0",
@@ -71,7 +72,10 @@
         "url-join": "^5.0.0",
         "usehooks-ts": "^3.1.0",
         "warn-once": "^0.1.1",
-        "zustand": "^5.0.3"
+        "zustand": "^5.0.3",
+        "mcp-handler": "^1.0.2",
+        "@modelcontextprotocol/sdk": "^1.17.5",
+        "zod": "^3"
     },
     "devDependencies": {
         "@argos-ci/playwright": "^5.0.9",
@@ -84,7 +88,6 @@
         "@types/node": "^20",
         "@types/object-hash": "^3.0.6",
         "@types/parse-cache-control": "^1.0.4",
-        "@types/psi": "^4.1.6",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",
         "@types/rison": "^0.0.9",
@@ -92,7 +95,6 @@
         "env-cmd": "^10.1.0",
         "jsonwebtoken": "^9.0.2",
         "postcss": "^8",
-        "psi": "^4.1.0",
         "stylelint": "^16.16.0",
         "tailwindcss": "^4.1.11",
         "ts-essentials": "^10.0.1",
@@ -113,6 +115,7 @@
         "e2e": "playwright test e2e/internal.spec.ts e2e/pdf.spec.ts --project=chromium",
         "e2e-customers": "playwright test e2e/customers.spec.ts --project=chromium",
         "unit": "bun test {src,packages} --preload ./tests/preload-bun.ts",
+        "e2e-browserless": "bun test ./tests/",
         "typecheck": "tsc --noEmit"
     },
     "browserslist": [

packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/~gitbook/mcp/route.ts

@@ -0,0 +1,92 @@
+import { type RouteLayoutParams, getStaticSiteContext } from '@/app/utils';
+import { throwIfDataError } from '@/lib/data';
+import { joinPathWithBaseURL } from '@/lib/paths';
+import { findSiteSpaceBy } from '@/lib/sites';
+import { createMcpHandler } from 'mcp-handler';
+import type { NextRequest } from 'next/server';
+import { z } from 'zod';
+
+async function handler(
+    nextRequest: NextRequest,
+    { params }: { params: Promise<RouteLayoutParams> }
+) {
+    const { context } = await getStaticSiteContext(await params);
+    const { dataFetcher, linker, site } = context;
+
+    const mcpHandler = createMcpHandler(
+        (server) => {
+            server.tool(
+                'searchDocumentation',
+                `Search across the documentation to find relevant information, code examples, API references, and guides. Use this tool when you need to answer questions about ${site.title}, find specific documentation, understand how features work, or locate implementation details. The search returns contextual content with titles and direct links to the documentation pages.`,
+                {
+                    query: z.string(),
+                },
+                async ({ query }) => {
+                    const results = await throwIfDataError(
+                        dataFetcher.searchSiteContent({
+                            organizationId: context.organizationId,
+                            siteId: site.id,
+                            query,
+                            scope: { mode: 'all' },
+                        })
+                    );
+
+                    return {
+                        content: results.flatMap((spaceResult) => {
+                            const found = findSiteSpaceBy(
+                                context.structure,
+                                (siteSpace) => siteSpace.space.id === spaceResult.id
+                            );
+                            const spaceURL = found?.siteSpace.urls.published;
+                            if (!spaceURL) {
+                                return [];
+                            }
+
+                            return spaceResult.pages.map((pageResult) => {
+                                const pageURL = linker.toAbsoluteURL(
+                                    linker.toLinkForContent(
+                                        joinPathWithBaseURL(spaceURL, pageResult.path)
+                                    )
+                                );
+
+                                const body = pageResult.sections
+                                    ?.map((section) => section.body)
+                                    .join('\n');
+
+                                return {
+                                    type: 'text',
+                                    text: [
+                                        `Title: ${pageResult.title}`,
+                                        `Link: ${pageURL}`,
+                                        body ? `Content: ${body}` : '',
+                                    ]
+                                        .filter(Boolean)
+                                        .join('\n'),
+                                };
+                            });
+                        }),
+                    };
+                }
+            );
+        },
+        {},
+        {
+            basePath: context.linker.toPathInSite('~gitbook/'),
+            streamableHttpEndpoint: '/mcp',
+            maxDuration: 60,
+            verboseLogs: true,
+            disableSse: true,
+        }
+    );
+
+    // Next.js request.url is the original URL and not the rewritten one from the middleware
+    const requestURL = new URL(
+        context.linker.toAbsoluteURL(context.linker.toPathInSite('~gitbook/mcp'))
+    );
+    requestURL.search = nextRequest.nextUrl.search;
+
+    const request = new Request(requestURL, nextRequest);
+    return mcpHandler(request);
+}
+
+export { handler as GET, handler as POST };

packages/gitbook/src/components/AI/useAI.tsx

@@ -137,7 +137,7 @@ export function useAI(): AIContext {
                     setSearchState((prev) => ({
                         ask: null, // Reset ask as we assume the assistant will handle it
                         query: prev?.query ?? null,
-                        global: prev?.global ?? false,
+                        scope: prev?.scope ?? 'default',
                         open: false,
                     }));
                     assistant.open(query);

packages/gitbook/src/components/AI/useAIChat.tsx

@@ -21,6 +21,7 @@ export type AIChatMessage = {
     role: AIMessageRole;
     content: React.ReactNode;
     query?: string;
+    note?: string;
 };
 
 export type AIChatPendingTool = {
@@ -146,7 +147,7 @@ export function AIChatProvider(props: {
         setSearchState((prev) => ({
             ask: prev?.ask ?? initialQuery ?? '',
             query: prev?.query ?? null,
-            global: prev?.global ?? false,
+            scope: prev?.scope ?? 'default',
             open: false, // Close search popover when opening chat
         }));
     }, [setSearchState]);
@@ -159,7 +160,7 @@ export function AIChatProvider(props: {
         setSearchState((prev) => ({
             ask: null,
             query: prev?.query ?? null,
-            global: prev?.global ?? false,
+            scope: prev?.scope ?? 'default',
             open: false,
         }));
     }, [setSearchState]);
@@ -374,7 +375,7 @@ export function AIChatProvider(props: {
                 setSearchState((prev) => ({
                     ask: input.message,
                     query: prev?.query ?? null,
-                    global: prev?.global ?? false,
+                    scope: prev?.scope ?? 'default',
                     open: false,
                 }));
             }
@@ -391,11 +392,11 @@ export function AIChatProvider(props: {
                 return {
                     ...state,
                     messages: [
-                        ...state.messages,
                         {
                             role: AIMessageRole.User,
                             content: input.message,
                             query: input.message,
+                            note: state.messages.length > 0 ? 'Starting a new chat' : undefined,
                         },
                     ],
                     query: input.message,
@@ -435,7 +436,7 @@ export function AIChatProvider(props: {
         setSearchState((prev) => ({
             ask: '',
             query: prev?.query ?? null,
-            global: prev?.global ?? false,
+            scope: prev?.scope ?? 'default',
             open: false,
         }));
     }, [setSearchState]);

packages/gitbook/src/components/AIChat/AIChatMessages.tsx

@@ -6,14 +6,13 @@ import type React from 'react';
 import type { AIChatController, AIChatState } from '../AI';
 import { AIChatToolConfirmations } from './AIChatToolConfirmations';
 import { AIResponseFeedback } from './AIResponseFeedback';
-import { AIChatFollowupSuggestions } from './AiChatFollowupSuggestions';
 
 export function AIChatMessages(props: {
     chat: AIChatState;
     chatController: AIChatController;
     lastUserMessageRef?: React.RefObject<HTMLDivElement>;
 }) {
-    const { chat, chatController, lastUserMessageRef } = props;
+    const { chat, lastUserMessageRef } = props;
 
     return (
         <>
@@ -24,57 +23,63 @@ export function AIChatMessages(props: {
                     index === chat.messages.map((m) => m.role).lastIndexOf(AIMessageRole.User);
 
                 return (
-                    <div
-                        ref={isLastUserMessage ? lastUserMessageRef : undefined}
-                        data-testid="ai-chat-message"
-                        className={tcls(
-                            message.content ? 'animate-fade-in-slow' : '',
-                            'shrink-0',
-                            'last:min-h-[calc(100%-5rem)]',
-                            'scroll-mt-36',
-                            'lg:scroll-mt-0',
-                            'flex flex-col gap-6',
-                            'break-words',
-                            'group/message',
-                            message.role === AIMessageRole.User
-                                ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'
-                                : 'text-tint-strong'
-                        )}
-                        style={{
-                            animationDelay: `${Math.min(index * 0.05, 0.5)}s`,
-                        }}
-                        key={index}
-                    >
-                        {message.content ? message.content : null}
-
-                        {isLastMessage && chat.loading ? (
-                            <div className="flex w-full animate-fade-in-slow flex-col gap-2">
-                                {!message.content ? <HoldMessage /> : null}
-                                <LoadingSkeleton />
+                    <>
+                        {message.note ? (
+                            <div
+                                key={`${index}-note`}
+                                className="self-center text-tint-subtle text-xs"
+                            >
+                                {message.note}
                             </div>
                         ) : null}
+                        <div
+                            ref={isLastUserMessage ? lastUserMessageRef : undefined}
+                            data-testid="ai-chat-message"
+                            className={tcls(
+                                message.content ? 'animate-fade-in-slow' : '',
+                                'shrink-0',
+                                'last:min-h-[calc(100%-5rem)]',
+                                'scroll-mt-36',
+                                'lg:scroll-mt-0',
+                                'flex flex-col gap-6',
+                                'break-words',
+                                'group/message',
+                                message.role === AIMessageRole.User
+                                    ? 'max-w-[80%] self-end circular-corners:rounded-2xl rounded-corners:rounded-md bg-tint px-4 py-2'
+                                    : 'text-tint-strong'
+                            )}
+                            style={{
+                                animationDelay: `${Math.min(index * 0.05, 0.5)}s`,
+                            }}
+                            key={index}
+                        >
+                            {message.content ? message.content : null}
 
-                        {isLastMessage ? (
-                            <>
-                                {!chat.loading &&
-                                !chat.error &&
-                                chat.query &&
-                                chat.responseId &&
-                                chat.pendingTools.length === 0 ? (
-                                    <AIResponseFeedback
-                                        responseId={chat.responseId}
-                                        query={chat.query}
-                                        className="-ml-1 -mt-4"
-                                    />
-                                ) : null}
-                                <AIChatToolConfirmations chat={chat} />
-                                <AIChatFollowupSuggestions
-                                    chat={chat}
-                                    chatController={chatController}
-                                />
-                            </>
-                        ) : null}
-                    </div>
+                            {isLastMessage && chat.loading ? (
+                                <div className="flex w-full animate-fade-in-slow flex-col gap-2">
+                                    {!message.content ? <HoldMessage /> : null}
+                                    <LoadingSkeleton />
+                                </div>
+                            ) : null}
+
+                            {isLastMessage ? (
+                                <>
+                                    {!chat.loading &&
+                                    !chat.error &&
+                                    chat.query &&
+                                    chat.responseId &&
+                                    chat.pendingTools.length === 0 ? (
+                                        <AIResponseFeedback
+                                            responseId={chat.responseId}
+                                            query={chat.query}
+                                            className="-ml-1 -mt-4"
+                                        />
+                                    ) : null}
+                                    <AIChatToolConfirmations chat={chat} />
+                                </>
+                            ) : null}
+                        </div>
+                    </>
                 );
             })}
         </>

packages/gitbook/src/components/AdminToolbar/AdminToolbar.tsx

@@ -1,143 +1,63 @@
 import type { GitBookSiteContext } from '@/lib/context';
-import { Icon } from '@gitbook/icons';
-import React from 'react';
+import { AdminToolbarClient } from './AdminToolbarClient';
+import type { AdminToolbarContext } from './types';
 
-import { tcls } from '@/lib/tailwind';
-import { DateRelative } from '../primitives';
-import { IframeWrapper } from './IframeWrapper';
-import { RefreshChangeRequestButton } from './RefreshChangeRequestButton';
-import { Toolbar, ToolbarBody, ToolbarButton, ToolbarButtonGroups } from './Toolbar';
-
-interface AdminToolbarProps {
+export interface AdminToolbarProps {
     context: GitBookSiteContext;
 }
 
-function ToolbarLayout(props: { children: React.ReactNode }) {
-    return (
-        <div
-            className={tcls(
-                'fixed',
-                'bottom-5',
-                'left-1/2',
-                'z-50',
-                'transform',
-                '-translate-x-1/2',
-                'rounded-full',
-
-                'bg-tint-12/9',
-                'dark:bg-tint-1/9',
-
-                'shadow-lg',
-                'min-h-10',
-                'min-w-40',
-                'p-2',
-                'max-w-md',
-                'border-tint-12/1',
-                'backdrop-blur-md'
-            )}
-        >
-            <React.Suspense fallback={null}>{props.children}</React.Suspense>
-        </div>
-    );
-}
-
 /**
- * Toolbar with information for the content admin when previewing a revision or change-request.
+ * Server component that determines what type of toolbar to show and passes data to client component
  */
 export async function AdminToolbar(props: AdminToolbarProps) {
     const { context } = props;
 
-    if (context.changeRequest) {
-        return (
-            <IframeWrapper>
-                <ChangeRequestToolbar context={context} />
-            </IframeWrapper>
-        );
-    }
+    // Create a minimal context to avoid serializing and passing too many data to the client
+    const minimalContext: AdminToolbarContext = {
+        organizationId: context.organizationId,
+        revisionId: context.revisionId,
+        space: {
+            id: context.space.id,
+            revision: context.space.revision,
+            urls: {
+                app: context.space.urls.app,
+            },
+        },
+        changeRequest: context.changeRequest
+            ? {
+                  id: context.changeRequest.id,
+                  number: context.changeRequest.number,
+                  subject: context.changeRequest.subject,
+                  revision: context.changeRequest.revision,
+                  updatedAt: context.changeRequest.updatedAt,
+                  createdBy: {
+                      displayName: context.changeRequest.createdBy.displayName,
+                  },
+                  urls: {
+                      app: context.changeRequest.urls.app,
+                  },
+              }
+            : null,
+        revision: {
+            createdAt: context.revision.createdAt,
+            urls: {
+                app: context.revision.urls.app,
+            },
+            git: context.revision.git
+                ? {
+                      url: context.revision.git.url,
+                  }
+                : null,
+        },
+        site: {
+            id: context.site.id,
+            title: context.site.title,
+            urls: {
+                app: context.site.urls.app,
+                published: context.site.urls.published,
+            },
+        },
+    };
 
-    if (context.revisionId !== context.space.revision) {
-        return (
-            <IframeWrapper>
-                <RevisionToolbar context={context} />
-            </IframeWrapper>
-        );
-    }
-
-    return null;
-}
-
-async function ChangeRequestToolbar(props: { context: GitBookSiteContext }) {
-    const { context } = props;
-    const { space, changeRequest } = context;
-
-    if (!changeRequest) {
-        return null;
-    }
-
-    return (
-        <ToolbarLayout>
-            <Toolbar>
-                <ToolbarButton title="Open in application" href={changeRequest.urls.app}>
-                    <Icon icon="code-branch" className="size-4" />
-                </ToolbarButton>
-                <ToolbarBody>
-                    <p>
-                        #{changeRequest.number}: {changeRequest.subject ?? 'No subject'}
-                    </p>
-                    <p className="text-tint-2 text-xs dark:text-tint-11">
-                        Change request updated <DateRelative value={changeRequest.updatedAt} />
-                    </p>
-                </ToolbarBody>
-                <ToolbarButtonGroups>
-                    <ToolbarButton title="Open in application" href={changeRequest.urls.app}>
-                        <Icon icon="arrow-up-right-from-square" className="size-4" />
-                    </ToolbarButton>
-                    <RefreshChangeRequestButton
-                        spaceId={space.id}
-                        changeRequestId={changeRequest.id}
-                        revisionId={changeRequest.revision}
-                        updatedAt={new Date(changeRequest.updatedAt).getTime()}
-                    />
-                </ToolbarButtonGroups>
-            </Toolbar>
-        </ToolbarLayout>
-    );
-}
-
-async function RevisionToolbar(props: { context: GitBookSiteContext }) {
-    const { context } = props;
-    const { revision } = context;
-
-    return (
-        <ToolbarLayout>
-            <Toolbar>
-                <ToolbarButton title="Open in application" href={revision.urls.app}>
-                    <Icon icon="code-commit" className="size-4" />
-                </ToolbarButton>
-                <ToolbarBody>
-                    <p>
-                        Revision created <DateRelative value={revision.createdAt} />
-                    </p>
-                    {revision.git ? (
-                        <p className="text-tint-2 text-xs dark:text-tint-11">
-                            {revision.git.message}
-                        </p>
-                    ) : null}
-                </ToolbarBody>
-                <ToolbarButtonGroups>
-                    <ToolbarButton title="Open in application" href={revision.urls.app}>
-                        <Icon icon="arrow-up-right-from-square" className="size-4" />
-                    </ToolbarButton>
-                    {revision.git?.url ? (
-                        <ToolbarButton title="Open git commit" href={revision.git.url}>
-                            <Icon
-                                icon={revision.git.url.includes('github.com') ? 'github' : 'gitlab'}
-                                className="size-4"
-                            />
-                        </ToolbarButton>
-                    ) : null}
-                </ToolbarButtonGroups>
-            </Toolbar>
-        </ToolbarLayout>
-    );
+    return <AdminToolbarClient context={minimalContext} />;
 }

packages/gitbook/src/components/AdminToolbar/AdminToolbarClient.tsx

@@ -0,0 +1,306 @@
+'use client';
+import { Icon } from '@gitbook/icons';
+import { MotionConfig } from 'motion/react';
+import { useCheckForContentUpdate } from '../AutoRefreshContent';
+import { useVisitorSession } from '../Insights';
+import { useCurrentPagePath } from '../hooks';
+import { DateRelative } from '../primitives';
+import { IframeWrapper } from './IframeWrapper';
+import { RefreshContentButton } from './RefreshContentButton';
+import {
+    Toolbar,
+    ToolbarBody,
+    ToolbarButton,
+    ToolbarButtonGroup,
+    type ToolbarButtonProps,
+    ToolbarSeparator,
+    ToolbarSubtitle,
+    ToolbarTitle,
+} from './Toolbar';
+import type { AdminToolbarClientProps } from './types';
+
+export function AdminToolbarClient(props: AdminToolbarClientProps) {
+    const { context } = props;
+    const visitorSession = useVisitorSession();
+
+    // If there is a change request, show the change request toolbar
+    if (context.changeRequest) {
+        return (
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <ChangeRequestToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
+        );
+    }
+
+    // If the revision is not the current revision, the user is looking at a previous version of the site, so show the revision toolbar
+    if (context.revisionId !== context.space.revision) {
+        return (
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <RevisionToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
+        );
+    }
+
+    // If the user is authenticated and part of the organization owning this site, show the authenticated user toolbar
+    if (visitorSession?.organizationId === context.organizationId) {
+        return (
+            <IframeWrapper>
+                <MotionConfig reducedMotion="user">
+                    <AuthenticatedUserToolbar context={context} />
+                </MotionConfig>
+            </IframeWrapper>
+        );
+    }
+}
+
+function ChangeRequestToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
+    const { changeRequest, site } = context;
+    if (!changeRequest) {
+        throw new Error('Change request is not set');
+    }
+
+    const author = changeRequest.createdBy.displayName;
+
+    const { refreshForUpdates, updated } = useCheckForContentUpdate({
+        revisionId: changeRequest.revision,
+    });
+
+    return (
+        <Toolbar>
+            <ToolbarBody>
+                <ToolbarTitle
+                    prefix="Change request"
+                    suffix={`#${changeRequest.number} ${changeRequest.subject || 'Untitled'}`}
+                />
+                <ToolbarSubtitle
+                    subtitle={
+                        <>
+                            <DateRelative value={changeRequest.updatedAt} /> by {author}
+                        </>
+                    }
+                />
+            </ToolbarBody>
+
+            <ToolbarSeparator />
+
+            <ToolbarButtonGroup>
+                {/* Refresh to retrieve latest changes */}
+                {updated ? <RefreshContentButton refreshForUpdates={refreshForUpdates} /> : null}
+                {/* Comment in app */}
+                <ToolbarButton
+                    title="Comment in a GitBook"
+                    href={getToolbarHref({
+                        href: `${changeRequest.urls.app}~/comments`,
+                        siteId: site.id,
+                        buttonId: 'comment',
+                    })}
+                    icon="comment"
+                />
+
+                {/* Open production site */}
+                {site.urls.published ? (
+                    <ToolbarButton
+                        title="Open production site"
+                        href={getToolbarHref({
+                            href: site.urls.published,
+                            siteId: site.id,
+                            buttonId: 'production-site',
+                        })}
+                        icon="globe"
+                    />
+                ) : null}
+
+                {/* Open CR in GitBook */}
+                <ToolbarButton
+                    title="View change request in GitBook"
+                    href={getToolbarHref({
+                        href: changeRequest.urls.app,
+                        siteId: site.id,
+                        buttonId: 'change-request',
+                    })}
+                    icon="code-pull-request"
+                />
+
+                {/* Edit in GitBook */}
+                <EditPageButton href={changeRequest.urls.app} siteId={site.id} />
+            </ToolbarButtonGroup>
+        </Toolbar>
+    );
+}
+
+function RevisionToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
+    const { revision, site } = context;
+    if (!revision) {
+        throw new Error('Revision is not set');
+    }
+
+    const gitURL = revision.git?.url;
+    const isGitHub = gitURL?.includes('github.com');
+    const gitProvider = isGitHub ? 'GitHub' : 'GitLab';
+
+    return (
+        <Toolbar>
+            <ToolbarBody>
+                <ToolbarTitle prefix="Site version" suffix={context.site.title} />
+                <ToolbarSubtitle
+                    subtitle={
+                        <>
+                            Created <DateRelative value={revision.createdAt} />
+                        </>
+                    }
+                />
+            </ToolbarBody>
+            <ToolbarSeparator />
+            <ToolbarButtonGroup>
+                {/* Open commit in Git client */}
+                <ToolbarButton
+                    title={
+                        gitURL ? (
+                            `Open commit in ${gitProvider}`
+                        ) : (
+                            <div className="flex items-center gap-2">
+                                Setup GitSync to edit using Git{' '}
+                                <div className="flex items-center gap-1 text-neutral-8 text-xs hover:text-neutral-6 hover:underline dark:text-neutral-3">
+                                    <a
+                                        href="https://gitbook.com/docs/getting-started/git-sync"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className=""
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        Learn more
+                                    </a>
+                                    <Icon icon="arrow-up-right" className="size-3" />
+                                </div>
+                            </div>
+                        )
+                    }
+                    href={gitURL}
+                    disabled={!gitURL}
+                    icon={gitURL ? (isGitHub ? 'github' : 'gitlab') : 'github'}
+                />
+                {site.urls.published ? (
+                    <ToolbarButton
+                        title="Open production site"
+                        href={getToolbarHref({
+                            href: site.urls.published,
+                            siteId: site.id,
+                            buttonId: 'production-site',
+                        })}
+                        icon="globe"
+                    />
+                ) : null}
+                <ToolbarButton
+                    title="View this revision in GitBook"
+                    href={getToolbarHref({
+                        href: revision.urls.app,
+                        siteId: site.id,
+                        buttonId: 'revision',
+                    })}
+                    icon="code-commit"
+                />
+            </ToolbarButtonGroup>
+        </Toolbar>
+    );
+}
+
+function AuthenticatedUserToolbar(props: AdminToolbarClientProps) {
+    const { context } = props;
+    const { revision, space, site } = context;
+    const { refreshForUpdates, updated } = useCheckForContentUpdate({
+        revisionId: space.revision,
+    });
+
+    return (
+        <Toolbar>
+            <ToolbarBody>
+                <ToolbarTitle prefix="Site" suffix={context.site.title} />
+                <ToolbarSubtitle
+                    subtitle={
+                        <>
+                            Updated <DateRelative value={revision.createdAt} />
+                        </>
+                    }
+                />
+            </ToolbarBody>
+            <ToolbarSeparator />
+            <ToolbarButtonGroup>
+                {/* Refresh to retrieve latest changes */}
+                {updated ? <RefreshContentButton refreshForUpdates={refreshForUpdates} /> : null}
+                <ToolbarButton
+                    title="Open site in GitBook"
+                    href={getToolbarHref({
+                        href: site.urls.app,
+                        siteId: site.id,
+                        buttonId: 'site',
+                    })}
+                    icon="gear"
+                />
+                <ToolbarButton
+                    title="Customize in GitBook"
+                    href={getToolbarHref({
+                        href: `${site.urls.app}/customization/general`,
+                        siteId: site.id,
+                        buttonId: 'customize',
+                    })}
+                    icon="palette"
+                />
+                <ToolbarButton
+                    title="Open insights in GitBook"
+                    href={getToolbarHref({
+                        href: `${site.urls.app}/insights`,
+                        siteId: site.id,
+                        buttonId: 'insights',
+                    })}
+                    icon="chart-simple"
+                />
+                <EditPageButton href={space.urls.app} siteId={site.id} />
+            </ToolbarButtonGroup>
+        </Toolbar>
+    );
+}
+
+function EditPageButton(props: {
+    href: string;
+    siteId: string;
+    motionValues?: ToolbarButtonProps['motionValues'];
+}) {
+    const { href, motionValues, siteId } = props;
+    const pagePath = useCurrentPagePath();
+
+    return (
+        <ToolbarButton
+            title="Edit in GitBook"
+            href={getToolbarHref({
+                href: `${href}${pagePath.startsWith('/') ? pagePath.slice(1) : pagePath}`,
+                siteId,
+                buttonId: 'edit',
+            })}
+            icon="pencil"
+            motionValues={motionValues}
+        />
+    );
+}
+
+/**
+ * Append utm parameters to a URL to track usage of the toolbar.
+ */
+function getToolbarHref({
+    href,
+    siteId,
+    buttonId,
+}: { href: string; siteId: string; buttonId: string }) {
+    const url = new URL(href);
+    url.searchParams.set('utm_source', 'content');
+    url.searchParams.set('utm_medium', 'toolbar');
+    url.searchParams.set('utm_campaign', siteId);
+    url.searchParams.set('utm_content', buttonId);
+
+    return url.toString();
+}

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.module.css

@@ -0,0 +1,180 @@
+.svgLogo {
+  --logo-fill: var(--color-neutral-100);
+  --seg-A-color: #2782c4;
+  --seg-B-color: #43b7f2;
+  --seg-C-color: #8be2ff;
+
+  --T: 2s;
+  shape-rendering: geometricPrecision;
+  vector-effect: non-scaling-stroke;
+}
+
+:global(html.dark) .svgLogo {
+  --logo-fill: var(--color-neutral-800);
+  --seg-A-color: #19537d;
+  --seg-B-color: #2782c4;
+  --seg-C-color: #43b7f2;
+  --trace-color: #46474c;
+}
+
+/* Base segment animation */
+.seg {
+  opacity: 0;
+  animation: segFade var(--T) ease both 0.06s, segAMove var(--T) linear,
+    segALen var(--T) linear;
+    animation-delay: 0.06s;
+  animation-fill-mode: forwards;
+}
+
+.segA {
+  animation-name: segFade, segAMove, segALen;
+}
+
+.segB {
+  animation-name: segFade, segBMove, segBLen;
+}
+
+.segC {
+  animation-name: segFade, segCMove, segCLen;
+}
+
+.trace {
+  animation: traceFill var(--T) ease both 0.06s;
+  animation-fill-mode: forwards;
+}
+
+@keyframes traceFill {
+  0% {
+    fill: transparent;
+    stroke:var(--trace-color);
+  }
+  95% {
+    fill: transparent;
+    stroke:var(--trace-color);
+  }
+  100% {
+    fill: var(--logo-fill);
+    stroke:none;
+  }
+}
+
+
+/* Segment A animation */
+@keyframes segAMove {
+  0% {
+    stroke-dashoffset: 0;
+    stroke: var(--seg-A-color);
+  }
+  50% {
+    stroke-dashoffset: -0.5;
+    stroke: var(--seg-A-color);
+  }
+  95% {
+    stroke-dashoffset: -1;
+  }
+  100% {
+    stroke-dashoffset: 0;
+    stroke: none;
+  }
+}
+
+@keyframes segALen {
+  0% {
+    stroke-dasharray: 0.18 0.82;
+  }
+  95% {
+    stroke-dasharray: 0.22 0.78;
+  }
+  100% {
+    stroke-dasharray: 1;
+  }
+}
+
+/* Segment B animation */
+@keyframes segBMove {
+  0% {
+    stroke-dashoffset: -0.18;
+    stroke: var(--seg-B-color);
+  }
+  50% {
+    stroke-dashoffset: -0.72;
+    stroke: var(--seg-B-color);
+  }
+  95% {
+    stroke-dashoffset: -1.18;
+    stroke: var(--seg-B-color);
+  }
+  100% {
+    stroke-dashoffset: 0;
+    stroke: none;
+  }
+}
+
+@keyframes segBLen {
+  0%,
+  50%,
+  95% {
+    stroke-dasharray: 0.2 0.8;
+  }
+  100% {
+    stroke-dasharray: 1;
+  }
+}
+
+/* Segment C animation */
+@keyframes segCMove {
+  0% {
+    stroke-dashoffset: -0.38;
+    stroke: var(--seg-C-color);
+  }
+  50% {
+    stroke-dashoffset: -0.92;
+    stroke: var(--seg-C-color);
+  }
+  95% {
+    stroke-dashoffset: -1.38;
+    stroke: var(--seg-C-color);
+  }
+  100% {
+    stroke-dashoffset: 0;
+    stroke: none;
+  }
+}
+
+@keyframes segCLen {
+  0% {
+    stroke-dasharray: 0.22 0.78;
+  }
+  95% {
+    stroke-dasharray: 0.18 0.82;
+  }
+  100% {
+    stroke-dasharray: 1;
+  }
+}
+
+/* Segment fade animation - stays visible at end */
+@keyframes segFade {
+  0% {
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seg {
+    animation: none;
+    opacity: 0;
+  }
+  .trace {
+    animation: none;
+    fill: var(--logo-fill);
+    stroke:none;
+  }
+}

packages/gitbook/src/components/AdminToolbar/AnimatedLogo.tsx

@@ -0,0 +1,62 @@
+import { tcls } from '@/lib/tailwind';
+import type React from 'react';
+import styles from './AnimatedLogo.module.css';
+
+export const AnimatedLogo: React.FC = () => {
+    return (
+        <svg
+            className={styles.svgLogo}
+            width="28"
+            height="28"
+            viewBox="0 0 28 28"
+            aria-hidden="true"
+        >
+            {/* Background trace */}
+            <path
+                d={dPath}
+                transform="translate(14,14) scale(0.4)"
+                strokeWidth={3}
+                pathLength={1}
+                strokeLinecap="round"
+                className={styles.trace}
+            />
+            {/* Three individual paths to create the 'chasing' segmented stroke effect */}
+            <path
+                className={tcls(styles.seg, styles.segA)}
+                d={dPath}
+                transform="translate(14,14) scale(0.4)"
+                fill="none"
+                strokeWidth={3}
+                pathLength={1}
+                strokeLinecap="round"
+                strokeDasharray="0.18 0.82"
+                strokeDashoffset={0}
+            />
+            <path
+                className={tcls(styles.seg, styles.segB)}
+                d={dPath}
+                transform="translate(14,14) scale(0.4)"
+                fill="none"
+                strokeWidth={3}
+                pathLength={1}
+                strokeLinecap="round"
+                strokeDasharray="0.20 0.80"
+                strokeDashoffset={-0.18}
+            />
+            <path
+                className={tcls(styles.seg, styles.segC)}
+                d={dPath}
+                transform="translate(14,14) scale(0.4)"
+                fill="none"
+                strokeWidth={3}
+                pathLength={1}
+                strokeLinecap="round"
+                strokeDasharray="0.22 0.78"
+                strokeDashoffset={-0.38}
+            />
+        </svg>
+    );
+};
+
+const dPath =
+    'M-5.07306 1.64898C-1.92626 3.46518 -0.352865 4.37328 1.37504 4.37477C3.10303 4.37628 4.67794 3.47098 7.82794 1.66027C7.82794 1.66027 27.9071 -9.88183 27.9071 -9.88183C28.8136 -10.4029 29.3724 -11.3687 29.3724 -12.4143C29.3724 -13.4598 28.8136 -14.4257 27.9071 -14.9467C27.9071 -14.9467 7.82063 -26.4931 7.82063 -26.4931C4.67414 -28.3018 3.10083 -29.2062 1.37453 -29.2055C-0.351665 -29.2048 -1.92427 -28.2992 -5.06947 -26.488C-5.06947 -26.488 -22.3372 -16.5441 -22.3372 -16.5441C-22.4651 -16.4704 -22.5291 -16.4336 -22.5888 -16.3986C-28.4872 -12.9457 -32.1315 -6.64173 -32.1802 0.192975C-32.1807 0.262075 -32.1807 0.335975 -32.1807 0.483575C-32.1807 0.631075 -32.1807 0.704875 -32.1802 0.773875C-32.1316 7.60087 -28.4955 13.899 -22.6075 17.3547C-22.548 17.3897 -22.4841 17.4266 -22.3564 17.5003C-22.3564 17.5003 -11.5399 23.7454 -11.5399 23.7454C-5.23716 27.3844 -2.08587 29.2039 1.37484 29.2051C4.83554 29.2062 7.98813 27.3889 14.2932 23.7541C14.2932 23.7541 25.7115 17.1718 25.7115 17.1718C28.8686 15.3518 30.4471 14.4418 31.3139 12.9416C32.1807 11.4414 32.1807 9.61938 32.1807 5.97517C32.1807 5.97517 32.1807 -1.06463 32.1807 -1.06463C32.1807 -2.07553 31.6332 -3.00723 30.75 -3.49913C29.8953 -3.97513 28.8536 -3.96802 28.0054 -3.48053C28.0054 -3.48053 4.59224 9.97808 4.59224 9.97808C3.02144 10.8811 2.23593 11.3326 1.37404 11.3329C0.512135 11.3331 -0.273565 10.8821 -1.84506 9.98007C-1.84506 9.98007 -17.6916 0.883775 -17.6916 0.883775C-18.4854 0.428075 -18.8823 0.200275 -19.2011 0.159175C-19.9279 0.065375 -20.6267 0.472475 -20.9036 1.15108C-21.025 1.44858 -21.0225 1.90628 -21.0176 2.82148C-21.014 3.49528 -21.0122 3.83218 -20.9492 4.14208C-20.8082 4.83607 -20.4431 5.46448 -19.91 5.93068C-19.672 6.13888 -19.3802 6.30727 -18.7966 6.64407C-18.7966 6.64407 -1.85397 16.4227 -1.85397 16.4227C-0.278465 17.332 0.509335 17.7867 1.37434 17.7869C2.23934 17.7872 3.02734 17.3329 4.60333 16.4245C4.60333 16.4245 25.3699 4.45377 25.3699 4.45377C25.9083 4.14348 26.1774 3.98828 26.3792 4.10488C26.5811 4.22148 26.5811 4.53218 26.5811 5.15357C26.5811 5.15357 26.5811 8.34667 26.5811 8.34667C26.5811 9.25768 26.5811 9.71317 26.3643 10.0883C26.1476 10.4634 25.753 10.6908 24.9637 11.1458C24.9637 11.1458 7.83524 21.0193 7.83524 21.0193C4.68194 22.837 3.10533 23.7458 1.37463 23.7451C-0.356065 23.7443 -1.93186 22.834 -5.08347 21.0134C-5.08347 21.0134 -21.1086 11.7563 -21.1086 11.7563C-21.1595 11.7269 -21.1849 11.7122 -21.2087 11.6984C-24.5687 9.73487 -26.642 6.14287 -26.6614 2.25128C-26.6616 2.22378 -26.6616 2.19438 -26.6616 2.13567C-26.6616 2.13567 -26.6616 -0.795425 -26.6616 -0.795425C-26.6616 -2.94372 -25.5174 -4.92953 -23.6587 -6.00682C-22.0163 -6.95883 -19.9905 -6.96072 -18.3463 -6.01183C-18.3463 -6.01183 -5.07306 1.64898 -5.07306 1.64898Z';

packages/gitbook/src/components/AdminToolbar/RefreshChangeRequestButton.tsx

@@ -1,70 +0,0 @@
-'use client';
-import { Icon } from '@gitbook/icons';
-import React from 'react';
-
-import { useCheckForContentUpdate } from '@/components/AutoRefreshContent';
-import { tcls } from '@/lib/tailwind';
-
-import { ToolbarButton } from './Toolbar';
-
-// We don't show the button if the content has been updated 30s ago or less.
-const minInterval = 1000 * 30; // 5 minutes
-
-/**
- * Button to refresh the page if the content has been updated.
- */
-export function RefreshChangeRequestButton(props: {
-    spaceId: string;
-    changeRequestId: string;
-    revisionId: string;
-    updatedAt: number;
-}) {
-    const { updatedAt } = props;
-
-    const [visible, setVisible] = React.useState(false);
-    const [loading, setLoading] = React.useState(false);
-    const checkForUpdates = useCheckForContentUpdate(props);
-
-    const refresh = React.useCallback(async () => {
-        setLoading(true);
-        try {
-            await checkForUpdates();
-        } finally {
-            setLoading(false);
-            setVisible(false);
-        }
-    }, [checkForUpdates]);
-
-    // Show the button if the content has been updated more than 30s ago.
-    React.useEffect(() => {
-        if (updatedAt < Date.now() - minInterval) {
-            setVisible(true);
-        }
-    }, [updatedAt]);
-
-    // 30sec after being hidden, we show the button again
-    React.useEffect(() => {
-        if (!visible) {
-            const timeout = setTimeout(() => {
-                setVisible(true);
-            }, minInterval);
-            return () => clearTimeout(timeout);
-        }
-    }, [visible]);
-
-    if (!visible) {
-        return null;
-    }
-
-    return (
-        <ToolbarButton
-            title="Refresh"
-            onClick={(event) => {
-                event.preventDefault();
-                refresh();
-            }}
-        >
-            <Icon icon="rotate" className={tcls('size-4', loading ? 'animate-spin' : null)} />
-        </ToolbarButton>
-    );
-}

packages/gitbook/src/components/AdminToolbar/RefreshContentButton.tsx

@@ -0,0 +1,42 @@
+'use client';
+import React from 'react';
+
+import { ToolbarButton, type ToolbarButtonProps } from './Toolbar';
+
+/**
+ * Button to refresh the page if the content has been updated.
+ */
+export function RefreshContentButton(props: {
+    refreshForUpdates: () => Promise<void>;
+    motionValues?: ToolbarButtonProps['motionValues'];
+}) {
+    const { refreshForUpdates, motionValues } = props;
+
+    const [loading, setLoading] = React.useState(false);
+
+    const refresh = React.useCallback(async () => {
+        setLoading(true);
+        try {
+            await refreshForUpdates();
+        } finally {
+            setLoading(false);
+        }
+    }, [refreshForUpdates]);
+
+    return (
+        <ToolbarButton
+            title="Refresh for latest changes"
+            onClick={(event) => {
+                if (loading) {
+                    return;
+                }
+                event.preventDefault();
+                refresh();
+            }}
+            disabled={loading}
+            motionValues={motionValues}
+            icon="rotate"
+            iconClassName={loading ? 'animate-spin' : undefined}
+        />
+    );
+}

packages/gitbook/src/components/AdminToolbar/Toolbar.tsx

@@ -1,65 +1,288 @@
 'use client';
-
-import type * as React from 'react';
+import { AnimatePresence, type MotionValue, motion, useReducedMotion } from 'motion/react';
+import React from 'react';
+import { AnimatedLogo } from './AnimatedLogo';
 
 import { tcls } from '@/lib/tailwind';
+import { Icon, type IconName } from '@gitbook/icons';
+import { Tooltip } from '../primitives';
+import { getCopyVariants, minifyButtonAnimation, toolbarEasings } from './transitions';
+import { useMagnificationEffect } from './useMagnificationEffect';
+
+const DURATION_LOGO_APPEARANCE = 2000;
+const DELAY_BETWEEN_LOGO_AND_CONTENT = 100;
 
 export function Toolbar(props: { children: React.ReactNode }) {
-    const { children } = props;
+    const [minified, setMinified] = React.useState(true);
+    const [showToolbarControls, setShowToolbarControls] = React.useState(false);
+    const [isReady, setIsReady] = React.useState(false);
+
+    // Wait for page to be ready, then show the toolbar
+    React.useEffect(() => {
+        const handleLoad = () => {
+            setIsReady(true);
+        };
+
+        if (document.readyState === 'complete') {
+            handleLoad();
+        } else {
+            window.addEventListener('load', handleLoad);
+            return () => window.removeEventListener('load', handleLoad);
+        }
+    }, []);
+
+    // After toolbar appears, wait then show the full content
+    React.useEffect(() => {
+        if (isReady) {
+            const expandAfterTimeout = setTimeout(() => {
+                setMinified(false);
+            }, DURATION_LOGO_APPEARANCE + DELAY_BETWEEN_LOGO_AND_CONTENT);
+
+            return () => clearTimeout(expandAfterTimeout);
+        }
+    }, [isReady]);
+
+    // Don't render anything until page is ready
+    if (!isReady) {
+        return null;
+    }
 
     return (
-        <div
-            className={tcls(
-                'flex',
-                'flex-row',
-                'items-center',
-                'gap-4',
-                'text-sm',
-                'px-4',
-                'py-1',
-                'rounded-full',
-                'truncate',
-                'text-tint-1',
-                'dark:text-tint-12'
-            )}
+        <motion.div
+            onMouseEnter={() => setShowToolbarControls(true)}
+            onMouseLeave={() => setShowToolbarControls(false)}
+            className="-translate-x-1/2 fixed bottom-5 left-1/2 z-40 w-auto max-w-xl transform px-4"
         >
-            {children}
-        </div>
+            <AnimatePresence mode="wait">
+                <motion.div
+                    onClick={() => {
+                        if (minified) {
+                            setMinified((prev) => !prev);
+                        }
+                    }}
+                    layout
+                    transition={toolbarEasings.spring}
+                    className={tcls(
+                        minified ? 'cursor-pointer px-2' : 'pr-2 pl-3.5',
+                        'flex',
+                        'items-center',
+                        'justify-center',
+                        'min-h-11',
+                        'min-w-12',
+                        'h-12',
+                        'py-2',
+                        'border-tint-1/3',
+                        'backdrop-blur-sm',
+                        'origin-center',
+                        'bg-[linear-gradient(110deg,rgba(20,23,28,0.90)_0%,rgba(20,23,28,0.80)_100%)]',
+                        'dark:bg-[linear-gradient(110deg,rgba(256,256,256,0.90)_0%,rgba(256,256,256,0.80)_100%)]'
+                    )}
+                    initial={{
+                        scale: 1,
+                        opacity: 1,
+                    }}
+                    animate={{
+                        scale: 1,
+                        opacity: 1,
+                        boxShadow: minified
+                            ? '0 4px 40px 8px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .4), inset 0 .5px 0 0 hsla(0, 0%, 100%, .15)'
+                            : '0 4px 40px 8px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(0, 0, 0, .8), inset 0 .5px 0 0 hsla(0, 0%, 100%, .3)',
+                    }}
+                    style={{
+                        borderRadius: '100px', // This is set on `style` so Framer Motion can correct for distortions
+                    }}
+                >
+                    {/* Logo with stroke segments animation in blue-tints */}
+                    <motion.div layout>
+                        <AnimatedLogo />
+                    </motion.div>
+
+                    {!minified ? props.children : null}
+
+                    {!minified && showToolbarControls && <MinifyButton setMinified={setMinified} />}
+                </motion.div>
+            </AnimatePresence>
+        </motion.div>
     );
 }
 
 export function ToolbarBody(props: { children: React.ReactNode }) {
-    return <div className="flex flex-col gap-1">{props.children}</div>;
+    return <div className="flex flex-col items-start px-3">{props.children}</div>;
 }
 
-export function ToolbarButtonGroups(props: { children: React.ReactNode }) {
-    return <div className="flex flex-row gap-2">{props.children}</div>;
-}
+export function ToolbarButtonGroup(props: { children: React.ReactNode }) {
+    const { children } = props;
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    const buttonChildren = React.Children.toArray(children).filter((child) => !!child);
+    const { buttonMotionValues } = useMagnificationEffect({
+        childrenCount: buttonChildren.length,
+        containerRef,
+    });
 
-export function ToolbarButton(props: React.HTMLProps<HTMLAnchorElement>) {
-    const { children, ...rest } = props;
     return (
-        <a
-            {...rest}
-            className={tcls(
-                'flex',
-                'flex-col',
-                'items-center',
-                'justify-center',
-                'size-11',
-                'gap-1',
-                'text-sm',
-                'rounded-full',
-                'truncate',
-                'text-tint-1', // Equal to text-tint-strong in dark mode
-                'dark:text-tint-12', // Equal to text-tint-strong in dark mode
-                'hover:bg-tint-12',
-                'dark:hover:bg-tint-1',
-                'hover:shadow-lg',
-                'cursor-pointer'
-            )}
+        <motion.div
+            ref={containerRef}
+            variants={toolbarEasings.parent}
+            initial="hidden"
+            animate="show"
+            className="flex items-center gap-1 overflow-visible pr-2 pl-4"
         >
-            {children}
-        </a>
+            {buttonChildren.map((child, index) => {
+                const motionValues = buttonMotionValues[index];
+                const childEl = child as React.ReactElement;
+                return React.cloneElement(childEl, {
+                    key: index,
+                    motionValues,
+                });
+            })}
+        </motion.div>
+    );
+}
+
+export interface ToolbarButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement>, 'title'> {
+    motionValues?: {
+        scale: MotionValue<number>;
+        x: MotionValue<number>;
+    };
+    icon: IconName;
+    iconClassName?: string;
+    title?: React.ReactNode;
+}
+
+export function ToolbarButton(props: ToolbarButtonProps) {
+    const { title, disabled, motionValues, className, style, href, onClick, icon, iconClassName } =
+        props;
+    const reduceMotion = useReducedMotion();
+
+    return (
+        <motion.div variants={toolbarEasings.staggeringChild}>
+            <Tooltip label={title}>
+                <motion.a
+                    href={href}
+                    onClick={onClick}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={
+                        reduceMotion
+                            ? undefined
+                            : {
+                                  scale: motionValues?.scale,
+                                  x: motionValues?.x,
+                                  transformOrigin: 'bottom center',
+                                  zIndex: motionValues?.scale ? 10 : 'auto',
+                                  ...style,
+                              }
+                    }
+                    transition={{
+                        type: 'spring',
+                        stiffness: 400,
+                        damping: 30,
+                    }}
+                    className={tcls(
+                        'toolbar-button',
+                        className,
+                        'flex',
+                        'relative',
+                        'items-center',
+                        'justify-center',
+                        'gap-1',
+                        'text-sm',
+                        'rounded-full',
+                        'border-neutral-500',
+                        'outline-neutral-800',
+                        'outline-1',
+                        'border',
+                        'truncate',
+                        'text-tint-1',
+                        'dark:text-tint-12',
+                        'cursor-pointer',
+                        'transition-colors',
+                        'size-8',
+                        'bg-tint-1/3',
+                        'hover:bg-tint-1/4',
+                        'dark:bg-tint-3',
+                        'dark:hover:bg-tint-1',
+                        disabled ? 'cursor-not-allowed opacity-50' : '',
+                        'shadow-1xs'
+                    )}
+                >
+                    <Icon icon={icon} className={tcls('size-4', iconClassName)} />
+                </motion.a>
+            </Tooltip>
+        </motion.div>
+    );
+}
+
+export function ToolbarSeparator() {
+    return <div className="h-5 w-px bg-tint-1/3" />;
+}
+
+export function ToolbarTitle(props: { prefix: string; suffix: string }) {
+    return (
+        <div className="flex items-center gap-1 text-xs ">
+            <ToolbarTitlePrefix title={props.prefix} />
+            <ToolbarTitleSuffix title={props.suffix} />
+        </div>
+    );
+}
+
+function ToolbarTitlePrefix(props: { title: string }) {
+    return (
+        <motion.span
+            {...getCopyVariants(0)}
+            className="font-light text-neutral-7 dark:text-neutral-3"
+        >
+            {props.title}
+        </motion.span>
+    );
+}
+
+function ToolbarTitleSuffix(props: { title: string }) {
+    return (
+        <motion.span
+            {...getCopyVariants(1)}
+            className="max-w-[24ch] truncate font-semibold text-neutral-3 dark:text-neutral-2"
+        >
+            {props.title}
+        </motion.span>
+    );
+}
+
+export function ToolbarSubtitle(props: { subtitle: React.ReactNode }) {
+    return (
+        <motion.span
+            {...getCopyVariants(1)}
+            className="text-neutral-7 text-xxs dark:text-neutral-2"
+        >
+            {props.subtitle}
+        </motion.span>
+    );
+}
+
+function MinifyButton(props: { setMinified: (minified: boolean) => void }) {
+    return (
+        <Tooltip label="Minify">
+            <motion.div
+                {...minifyButtonAnimation}
+                transition={{
+                    duration: 0.2,
+                }}
+                whileHover={{
+                    scale: 1.05,
+                }}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    props.setMinified(true);
+                }}
+                className={tcls(
+                    '-top-2 -right-4 absolute flex size-4 cursor-pointer items-center justify-center rounded-full border',
+                    'border-neutral-500 bg-neutral-700 hover:border-neutral-400 hover:bg-neutral-600',
+                    'dark:border-neutral-400 dark:bg-neutral-200 dark:hover:border-neutral-200 dark:hover:bg-neutral-100'
+                )}
+            >
+                <Icon icon="minus" className="size-2 text-neutral-1 dark:text-neutral-9" />
+            </motion.div>
+        </Tooltip>
     );
 }

packages/gitbook/src/components/AdminToolbar/index.ts

@@ -1,2 +1,5 @@
 export * from './AdminToolbar';
+export * from './AdminToolbarClient';
 export * from './IframeWrapper';
+export * from './Toolbar';
+export * from './transitions';

packages/gitbook/src/components/AdminToolbar/transitions.ts

@@ -0,0 +1,73 @@
+import type { Transition } from 'motion/react';
+
+// Slight bounce but minimal overshoot esp. at the minimized state.
+const spring = {
+    type: 'spring' as const,
+    stiffness: 130,
+    damping: 19,
+    mass: 1,
+};
+
+const parent = {
+    hidden: { opacity: 0 },
+    show: {
+        opacity: 1,
+        transition: {
+            delayChildren: 0.4,
+            staggerChildren: 0.1,
+        },
+    },
+};
+
+const staggeringChild = {
+    hidden: {
+        opacity: 0,
+        scale: 0.7,
+    },
+    show: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+            duration: 0.3,
+            type: 'spring',
+        } as Transition,
+    },
+};
+
+export const minifyButtonAnimation = {
+    initial: {
+        scale: 0.5,
+        opacity: 0,
+    },
+    animate: {
+        scale: 1,
+        opacity: 1,
+    },
+    exit: {
+        scale: 0.5,
+        opacity: 0,
+    },
+};
+
+export const getCopyVariants = (position: number) => {
+    return {
+        initial: {
+            opacity: 0,
+            x: -10,
+        },
+        animate: {
+            opacity: 1,
+            x: 0,
+        },
+        transition: {
+            duration: 0.1,
+            delay: position / 10 + 0.3,
+        } as Transition,
+    };
+};
+
+export const toolbarEasings = {
+    spring,
+    parent,
+    staggeringChild,
+};

packages/gitbook/src/components/AdminToolbar/types.ts

@@ -0,0 +1,57 @@
+/*
+ * Minimal types containing only the fields needed for AdminToolbar to restrict what gets serialized
+ */
+
+export type MinimalChangeRequest = {
+    id: string;
+    number: number;
+    subject: string | null;
+    revision: string;
+    updatedAt: string;
+    createdBy: {
+        displayName: string;
+    };
+    urls: {
+        app: string;
+    };
+};
+
+export type MinimalRevision = {
+    createdAt: string;
+    urls: {
+        app: string;
+    };
+    git?: {
+        url: string | undefined;
+    } | null;
+};
+
+export type MinimalSpace = {
+    id: string;
+    revision: string;
+    urls: {
+        app: string;
+    };
+};
+
+export type MinimalSite = {
+    id: string;
+    title: string;
+    urls: {
+        app: string;
+        published: string | undefined;
+    };
+};
+
+export type AdminToolbarContext = {
+    organizationId: string;
+    revisionId: string;
+    space: MinimalSpace;
+    changeRequest: MinimalChangeRequest | null;
+    revision: MinimalRevision;
+    site: MinimalSite;
+};
+
+export interface AdminToolbarClientProps {
+    context: AdminToolbarContext;
+}

packages/gitbook/src/components/AdminToolbar/useMagnificationEffect.ts

@@ -0,0 +1,226 @@
+import { type MotionValue, motionValue } from 'framer-motion';
+import React from 'react';
+
+interface ButtonMotionValues {
+    scale: MotionValue<number>;
+    x: MotionValue<number>;
+}
+
+interface MagnificationConfig {
+    /** Size of each button in pixels - used for spacing calculations */
+    buttonSize?: number;
+    /** Maximum scale factor for buttons when mouse is directly over them */
+    maxScale?: number;
+    /** Distance in pixels from mouse where buttons start scaling */
+    influenceRadius?: number;
+    /** Multiplier for spacing between buttons - higher values create more space */
+    spacingMultiplier?: number;
+    /** Controls scaling curve - higher values make scaling more dramatic near mouse */
+    scaleExponent?: number;
+    /** Padding around container for mouse detection in pixels */
+    padding?: number;
+}
+
+const defaultConfig: Required<MagnificationConfig> = {
+    buttonSize: 32, // Standard button size for 32px (size-8) buttons
+    maxScale: 1.3, // 30% scale increase - noticeable but not overwhelming
+    influenceRadius: 80, // ~2.5 button widths of influence
+    spacingMultiplier: 1.3, // Creates proportional spacing to scale increase
+    scaleExponent: 2.5, // Exponential curve for dramatic close-range scaling
+    padding: 10, // Small buffer zone around container edges
+};
+
+// Helper functions for cleaner code
+const createMotionValues = (count: number): ButtonMotionValues[] =>
+    Array.from({ length: count }, () => ({
+        scale: motionValue(1),
+        x: motionValue(0),
+    }));
+
+const resetMotionValues = (motionValues: ButtonMotionValues[]) => {
+    motionValues.forEach(({ scale, x }) => {
+        scale.set(1);
+        x.set(0);
+    });
+};
+
+const captureButtonPositions = (buttons: HTMLElement[]) => {
+    // Reset transforms to get original positions
+    buttons.forEach((button) => (button.style.transform = ''));
+    return buttons.map((button) => {
+        const rect = button.getBoundingClientRect();
+        return { left: rect.left, width: rect.width };
+    });
+};
+
+const calculateScale = (
+    mouseX: number,
+    buttonCenterX: number,
+    containerRect: DOMRect,
+    config: Required<MagnificationConfig>
+) => {
+    const distance = Math.abs(mouseX - buttonCenterX);
+
+    if (distance > config.influenceRadius) return 1;
+
+    // Edge influence to reduce scaling near container edges
+    const distanceFromEdge = Math.min(mouseX - containerRect.left, containerRect.right - mouseX);
+    const edgeInfluence = Math.min(distanceFromEdge / 20, 1);
+
+    // Exponential scaling curve
+    const progress = distance / config.influenceRadius;
+    const exponentialProgress = (1 - progress) ** config.scaleExponent;
+    const baseScale = 1 + (config.maxScale - 1) * exponentialProgress;
+
+    return 1 + (baseScale - 1) * edgeInfluence;
+};
+
+const calculateSpacing = (
+    buttonIndex: number,
+    buttonEffects: Array<{ scale: number; translateX: number }>,
+    positions: Array<{ left: number; width: number }>,
+    config: Required<MagnificationConfig>
+) => {
+    const currentPos = positions[buttonIndex];
+    if (!currentPos) return 0;
+
+    const buttonCenterX = currentPos.left + currentPos.width / 2;
+    let leftPush = 0;
+    let rightPush = 0;
+
+    buttonEffects.forEach((otherEffect, otherIndex) => {
+        if (otherIndex === buttonIndex) return;
+
+        const otherPos = positions[otherIndex];
+        if (!otherPos) return;
+
+        const otherCenterX = otherPos.left + otherPos.width / 2;
+        const distanceBetween = Math.abs(buttonCenterX - otherCenterX);
+
+        // Only apply influence if close enough
+        if (distanceBetween < config.influenceRadius * 1.5) {
+            const influenceStrength = Math.max(
+                0,
+                1 - distanceBetween / (config.influenceRadius * 1.5)
+            );
+            const extraSpace = (otherEffect.scale - 1) * config.buttonSize;
+            const pushAmount = (extraSpace / 2) * config.spacingMultiplier * influenceStrength;
+
+            if (otherCenterX < buttonCenterX) {
+                rightPush += pushAmount;
+            } else {
+                leftPush += pushAmount;
+            }
+        }
+    });
+
+    return rightPush - leftPush;
+};
+
+export function useMagnificationEffect(props: {
+    childrenCount: number;
+    containerRef: React.RefObject<HTMLElement>;
+    config?: MagnificationConfig;
+}) {
+    const { childrenCount, containerRef, config } = props;
+    const [buttonMotionValues, setButtonMotionValues] = React.useState<ButtonMotionValues[]>([]);
+    const originalPositionsRef = React.useRef<Array<{ left: number; width: number }>>([]);
+
+    const finalConfig = { ...defaultConfig, ...config };
+
+    React.useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const buttons = Array.from(container.querySelectorAll('.toolbar-button')) as HTMLElement[];
+
+        if (buttons.length !== childrenCount) {
+            console.error(
+                `Button count (${buttons.length}) does not match children count (${childrenCount})`
+            );
+            return;
+        }
+
+        // Initialize motion values if button count changed
+        if (buttonMotionValues.length !== buttons.length) {
+            setButtonMotionValues(createMotionValues(buttons.length));
+        }
+
+        const handleMouseMove = (event: MouseEvent) => {
+            const buttons = Array.from(
+                container.querySelectorAll('.toolbar-button')
+            ) as HTMLElement[];
+
+            // Capture positions if needed
+            if (originalPositionsRef.current.length !== buttons.length) {
+                originalPositionsRef.current = captureButtonPositions(buttons);
+            }
+
+            const containerRect = container.getBoundingClientRect();
+            const { clientX: mouseX, clientY: mouseY } = event;
+
+            // Check if mouse is in range
+            const isInRange =
+                mouseX >= containerRect.left - finalConfig.padding &&
+                mouseX <= containerRect.right + finalConfig.padding &&
+                mouseY >= containerRect.top - finalConfig.padding &&
+                mouseY <= containerRect.bottom + finalConfig.padding;
+
+            if (!isInRange) {
+                resetMotionValues(buttonMotionValues);
+                return;
+            }
+
+            // Calculate scales for all buttons
+            const buttonEffects = buttons.map((_, index) => {
+                const pos = originalPositionsRef.current[index];
+                if (!pos) return { scale: 1, translateX: 0 };
+
+                const buttonCenterX = pos.left + pos.width / 2;
+                const scale = calculateScale(mouseX, buttonCenterX, containerRect, finalConfig);
+                return { scale, translateX: 0 };
+            });
+
+            // Calculate spacing for all buttons
+            buttonEffects.forEach((effect, index) => {
+                effect.translateX = calculateSpacing(
+                    index,
+                    buttonEffects,
+                    originalPositionsRef.current,
+                    finalConfig
+                );
+            });
+
+            // Update motion values
+            buttonEffects.forEach((effect, index) => {
+                const motionValue = buttonMotionValues[index];
+                if (motionValue) {
+                    motionValue.scale.set(effect.scale);
+                    motionValue.x.set(effect.translateX);
+                }
+            });
+        };
+
+        const handleMouseLeave = () => resetMotionValues(buttonMotionValues);
+
+        container.addEventListener('mousemove', handleMouseMove);
+        container.addEventListener('mouseleave', handleMouseLeave);
+
+        return () => {
+            container.removeEventListener('mousemove', handleMouseMove);
+            container.removeEventListener('mouseleave', handleMouseLeave);
+        };
+    }, [
+        finalConfig.buttonSize,
+        finalConfig.maxScale,
+        finalConfig.influenceRadius,
+        finalConfig.spacingMultiplier,
+        finalConfig.scaleExponent,
+        finalConfig.padding,
+        containerRef,
+        buttonMotionValues,
+        childrenCount,
+    ]);
+
+    return { buttonMotionValues };
+}

packages/gitbook/src/components/AutoRefreshContent/server-actions.ts

@@ -1,28 +1,43 @@
 'use server';
 
 import { getDataOrNull } from '@/lib/data';
+import { getSiteURLDataFromMiddleware } from '@/lib/middleware';
 import { getServerActionBaseContext } from '@/lib/server-actions';
 import { traceErrorOnly } from '@/lib/tracing';
 
 /**
- * Return true if a change-request has been updated.
+ * Return true if the content has been updated.
+ * It compares the revision ID displayed on the client side with the latest revision ID from the server/cache.
  */
 export async function hasContentBeenUpdated(props: {
-    spaceId: string;
-    changeRequestId: string;
     revisionId: string;
 }) {
     return traceErrorOnly('AutoRefreshContent.hasContentBeenUpdated', async () => {
         const context = await getServerActionBaseContext();
-        const changeRequest = await getDataOrNull(
-            context.dataFetcher.getChangeRequest({
-                spaceId: props.spaceId,
-                changeRequestId: props.changeRequestId,
+        const siteURLData = await getSiteURLDataFromMiddleware();
+
+        if (siteURLData.changeRequest) {
+            const changeRequest = await getDataOrNull(
+                context.dataFetcher.getChangeRequest({
+                    spaceId: siteURLData.space,
+                    changeRequestId: siteURLData.changeRequest,
+                })
+            );
+            if (!changeRequest) {
+                return false;
+            }
+            return changeRequest.revision !== props.revisionId;
+        }
+
+        const space = await getDataOrNull(
+            context.dataFetcher.getSpace({
+                spaceId: siteURLData.space,
+                shareKey: siteURLData.shareKey,
             })
         );
-        if (!changeRequest) {
+        if (!space) {
             return false;
         }
-        return changeRequest.revision !== props.revisionId;
+        return space.revision !== props.revisionId;
     });
 }

packages/gitbook/src/components/AutoRefreshContent/useCheckForContentUpdate.ts

@@ -5,20 +5,71 @@ import React from 'react';
 import { hasContentBeenUpdated } from './server-actions';
 
 /**
- * Return a callback to check if a change request has been updated and to refresh the page if it has.
+ * Return a callback to check if a content has been updated and to refresh the page if it has.
  */
 export function useCheckForContentUpdate(props: {
-    spaceId: string;
-    changeRequestId: string;
+    /**
+     * ID of the revision of the content currently being displayed.
+     */
     revisionId: string;
+    /**
+     * How long after page load to check for updates.
+     * @default 5min
+     */
+    checkAfterLoad?: number;
 }) {
-    const { spaceId, changeRequestId, revisionId } = props;
-
-    return React.useCallback(async () => {
-        const updated = await hasContentBeenUpdated({ spaceId, changeRequestId, revisionId });
+    const { revisionId, checkAfterLoad = 5 * 60 * 1000 } = props;
+    const [updated, setUpdated] = React.useState(false);
 
+    const checkForUpdates = React.useCallback(async () => {
         if (updated) {
+            // No need to check for updates if we already know the content has been updated
+            return true;
+        }
+
+        const result = await hasContentBeenUpdated({ revisionId });
+        setUpdated(result);
+        return result;
+    }, [revisionId, updated]);
+
+    const refreshForUpdates = React.useCallback(async () => {
+        if (await checkForUpdates()) {
             window.location.reload();
         }
-    }, [spaceId, changeRequestId, revisionId]);
+    }, [checkForUpdates]);
+
+    // Check for updates after the page has loaded
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (document.visibilityState === 'visible') {
+                // We check only if the tab is visible; otherwise we'll check when the tab is focus again
+                checkForUpdates();
+            }
+        }, checkAfterLoad);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [checkForUpdates, checkAfterLoad]);
+
+    // Check for updates when the tab is becoming visible
+    React.useEffect(() => {
+        if (updated) {
+            // No need to check for updates if we already know the content has been updated
+            return;
+        }
+
+        const callback = () => {
+            if (document.visibilityState === 'visible') {
+                checkForUpdates();
+            }
+        };
+
+        document.addEventListener('visibilitychange', callback);
+        return () => {
+            document.removeEventListener('visibilitychange', callback);
+        };
+    }, [checkForUpdates, updated]);
+
+    return { refreshForUpdates, updated };
 }

packages/gitbook/src/components/Header/Header.tsx

@@ -120,9 +120,28 @@ export function Header(props: {
                         >
                             <SearchContainer
                                 style={customization.styling.search}
-                                isMultiVariants={siteSpaces.length > 1}
+                                withVariants={withVariants === 'generic'}
+                                withSiteVariants={
+                                    sections?.list.some(
+                                        (s) =>
+                                            s.object === 'site-section' &&
+                                            s.siteSpaces.filter(
+                                                (s) => s.space.language === siteSpace.space.language
+                                            ).length > 1
+                                    ) ?? false
+                                }
+                                withSections={!!sections}
+                                section={
+                                    sections
+                                        ? // Client-encode to avoid a serialisation issue that was causing the language selector to disappear
+                                          encodeClientSiteSections(context, sections).current
+                                        : undefined
+                                }
                                 spaceTitle={siteSpace.title}
                                 siteSpaceId={siteSpace.id}
+                                siteSpaceIds={siteSpaces
+                                    .filter((s) => s.space.language === siteSpace.space.language)
+                                    .map((s) => s.id)}
                                 viewport={!withTopHeader ? 'mobile' : undefined}
                             />
                         </div>

packages/gitbook/src/components/Insights/InsightsProvider.tsx

@@ -8,7 +8,7 @@ import { useDebounceCallback, useEventCallback } from 'usehooks-ts';
 import { getAllBrowserCookiesMap } from '@/lib/browser';
 import { type CurrentContentContext, useCurrentContent } from '../hooks';
 import { getSession } from './sessions';
-import { getVisitorId } from './visitorId';
+import { type SessionResponse, useVisitorSession } from './visitorId';
 
 export type InsightsEventName = api.SiteInsightsEvent['type'];
 
@@ -55,12 +55,6 @@ interface InsightsProviderProps {
     /** If true, the events will be sent to the server. */
     enabled: boolean;
 
-    /** If true, the visitor cookie tracking will be used */
-    visitorCookieTrackingEnabled: boolean;
-
-    /** The application URL. */
-    appURL: string;
-
     /** The url of the endpoint to send events to */
     eventUrl: string;
 
@@ -72,10 +66,10 @@ interface InsightsProviderProps {
  * Wrap the content of the app with the InsightsProvider to track events.
  */
 export function InsightsProvider(props: InsightsProviderProps) {
-    const { enabled, children, visitorCookieTrackingEnabled, eventUrl, appURL } = props;
+    const { enabled, children, eventUrl } = props;
 
+    const visitorSession = useVisitorSession();
     const currentContent = useCurrentContent();
-    const visitorIdRef = React.useRef<string | null>(null);
     const eventsRef = React.useRef<{
         [pathname: string]:
             | {
@@ -92,9 +86,8 @@ export function InsightsProvider(props: InsightsProviderProps) {
      */
     const flushEventsSync = useEventCallback(() => {
         const session = getSession();
-        const visitorId = visitorIdRef.current;
-        if (!visitorId) {
-            throw new Error('Visitor ID should be set before flushing events');
+        if (!visitorSession) {
+            return;
         }
 
         const allEvents: api.SiteInsightsEvent[] = [];
@@ -114,7 +107,7 @@ export function InsightsProvider(props: InsightsProviderProps) {
                     events: eventsForPathname.events,
                     context: currentContent,
                     pageContext: eventsForPathname.pageContext,
-                    visitorId,
+                    visitorSession,
                     sessionId: session.id,
                 })
             );
@@ -126,25 +119,25 @@ export function InsightsProvider(props: InsightsProviderProps) {
             };
         }
 
-        if (allEvents.length > 0) {
-            if (enabled) {
-                sendEvents({
-                    eventUrl,
-                    events: allEvents,
-                });
-            } else {
-            }
+        if (allEvents.length > 0 && enabled) {
+            sendEvents({
+                eventUrl,
+                events: allEvents,
+            });
         }
     });
 
-    const flushBatchedEvents = useDebounceCallback(async () => {
-        const visitorId =
-            visitorIdRef.current ?? (await getVisitorId(appURL, visitorCookieTrackingEnabled));
-        visitorIdRef.current = visitorId;
-
+    const flushBatchedEvents = useDebounceCallback(() => {
         flushEventsSync();
     }, 1500);
 
+    // Flush pending events once the visitor session has been fetched
+    React.useEffect(() => {
+        if (visitorSession) {
+            flushEventsSync();
+        }
+    }, [visitorSession, flushEventsSync]);
+
     const trackEvent: TrackEventCallback = useEventCallback(
         (
             event: TrackEventInput<InsightsEventName>,
@@ -169,7 +162,7 @@ export function InsightsProvider(props: InsightsProviderProps) {
             if (eventsRef.current[pathname].pageContext !== undefined) {
                 // If the pageId is set, we know that the page_view event has been tracked
                 // and we can flush the events
-                if (options?.immediate && visitorIdRef.current) {
+                if (options?.immediate) {
                     flushBatchedEvents.cancel();
                     flushEventsSync();
                 } else {
@@ -180,18 +173,14 @@ export function InsightsProvider(props: InsightsProviderProps) {
     );
 
     /**
-     * Get the visitor ID and store it in a ref.
+     * When the page is unloaded, flush all events.
      */
     React.useEffect(() => {
-        getVisitorId(appURL, visitorCookieTrackingEnabled).then((visitorId) => {
-            visitorIdRef.current = visitorId;
-            // When the page is unloaded, flush all events, but only if the visitor ID is set
-            window.addEventListener('beforeunload', flushEventsSync);
-        });
+        window.addEventListener('beforeunload', flushEventsSync);
         return () => {
             window.removeEventListener('beforeunload', flushEventsSync);
         };
-    }, [flushEventsSync, visitorCookieTrackingEnabled, appURL]);
+    }, [flushEventsSync]);
 
     return (
         <InsightsContext.Provider value={trackEvent}>
@@ -245,12 +234,12 @@ function transformEvents(input: {
     events: TrackEventInput<InsightsEventName>[];
     context: CurrentContentContext;
     pageContext: InsightsEventPageContext;
-    visitorId: string;
+    visitorSession: SessionResponse;
     sessionId: string;
 }): api.SiteInsightsEvent[] {
     const session: api.SiteInsightsEventSession = {
         sessionId: input.sessionId,
-        visitorId: input.visitorId,
+        visitorId: input.visitorSession.deviceId,
         userAgent: window.navigator.userAgent,
         language: window.navigator.language,
         cookies: getAllBrowserCookiesMap(),

packages/gitbook/src/components/Insights/visitorId.ts

@@ -1,73 +0,0 @@
-'use client';
-
-import { getBrowserCookie } from '@/lib/browser';
-
-import { isCookiesTrackingDisabled } from './cookies';
-import { generateRandomId } from './utils';
-
-const VISITORID_COOKIE = '__session';
-
-let visitorId: string | null = null;
-let pendingVisitorId: Promise<string> | null = null;
-
-/**
- * Return the current visitor identifier.
- */
-export async function getVisitorId(
-    appURL: string,
-    visitorCookieTrackingEnabled: boolean
-): Promise<string> {
-    if (!visitorId) {
-        if (!pendingVisitorId) {
-            pendingVisitorId = fetchVisitorID(appURL, visitorCookieTrackingEnabled).finally(() => {
-                pendingVisitorId = null;
-            });
-        }
-
-        visitorId = await pendingVisitorId;
-    }
-
-    return visitorId;
-}
-
-/**
- * Propose a visitor identifier to the GitBook.com server and get the devideId back.
- */
-async function fetchVisitorID(
-    appURL: string,
-    visitorCookieTrackingEnabled: boolean
-): Promise<string> {
-    const withoutCookies = isCookiesTrackingDisabled();
-
-    if (withoutCookies || !visitorCookieTrackingEnabled) {
-        return generateRandomId();
-    }
-
-    const existingTrackingCookie = getBrowserCookie(VISITORID_COOKIE);
-
-    if (existingTrackingCookie) {
-        // If the cookie already exists, we'll just use that. Avoids a server request.
-        return existingTrackingCookie;
-    }
-    // No tracking deviceId set, we'll need to consolidate with the server.
-    const proposed = generateRandomId();
-
-    const url = new URL(appURL);
-    url.pathname = '/__session/2/';
-    url.searchParams.set('proposed', proposed);
-
-    try {
-        const resp = await fetch(url, {
-            method: 'GET', // Use GET to play nicely with SameSite cookies.
-            credentials: 'include', // Make sure to send/receive cookies.
-            cache: 'no-cache',
-            mode: 'cors', // Need to use cors as we are on a different domain.
-        });
-
-        const { deviceId } = (await resp.json()) as { deviceId: string };
-        return deviceId;
-    } catch (error) {
-        console.error('Failed to fetch visitor session ID', error);
-        return proposed;
-    }
-}

packages/gitbook/src/components/Insights/visitorId.tsx

@@ -0,0 +1,130 @@
+'use client';
+
+import { createStore, useStore } from 'zustand';
+
+import { getBrowserCookie } from '@/lib/browser';
+
+import React from 'react';
+import { isCookiesTrackingDisabled } from './cookies';
+import { generateRandomId } from './utils';
+
+const VISITORID_COOKIE = '__session';
+
+type SessionVisitorResponse = {
+    deviceId: string;
+    userId?: undefined;
+    organizationId?: undefined;
+};
+
+type SessionUserResponse = SessionVisitorResponse & {
+    userId: string;
+    organizationId: string;
+};
+
+export type SessionResponse = SessionVisitorResponse | SessionUserResponse;
+
+const visitorSessionStore = createStore<{
+    session: SessionResponse | null;
+    pendingSession: Promise<SessionResponse> | null;
+}>(() => ({
+    session: null,
+    pendingSession: null,
+}));
+
+/**
+ * Fetch, synchronize the visitor sesion with GitBook.
+ */
+export function VisitorSessionProvider(
+    props: React.PropsWithChildren<{
+        appURL: string;
+        visitorCookieTrackingEnabled: boolean;
+    }>
+) {
+    const { appURL, visitorCookieTrackingEnabled, children } = props;
+
+    React.useEffect(() => {
+        const state = visitorSessionStore.getState();
+        if (state.pendingSession || state.session) {
+            return;
+        }
+
+        const pendingSession = fetchSession({ appURL, visitorCookieTrackingEnabled });
+        visitorSessionStore.setState({ pendingSession, session: null });
+        pendingSession.then((session) => {
+            visitorSessionStore.setState({ pendingSession: null, session });
+        });
+    }, [appURL, visitorCookieTrackingEnabled]);
+
+    return <>{children}</>;
+}
+
+/**
+ * Hook to get the current visitor session.
+ */
+export function useVisitorSession() {
+    return useStore(visitorSessionStore, (state) => state.session);
+}
+
+/**
+ * Propose a visitor identifier to the GitBook.com server and get the devideId back.
+ */
+async function fetchSession({
+    appURL,
+    visitorCookieTrackingEnabled,
+}: {
+    appURL: string;
+    visitorCookieTrackingEnabled: boolean;
+}): Promise<SessionResponse> {
+    const withoutCookies = isCookiesTrackingDisabled();
+
+    if (withoutCookies || !visitorCookieTrackingEnabled) {
+        return {
+            deviceId: generateRandomId(),
+        };
+    }
+
+    const { existing, proposedId } = getSessionCookie();
+
+    if (existing) {
+        // If the cookie already exists, we'll just use that. Avoids a server request.
+        return existing;
+    }
+
+    const url = new URL(appURL);
+    url.pathname = '/__session/2/';
+    url.searchParams.set('proposed', proposedId);
+
+    try {
+        const resp = await fetch(url, {
+            method: 'GET', // Use GET to play nicely with SameSite cookies.
+            credentials: 'include', // Make sure to send/receive cookies.
+            cache: 'no-cache',
+            mode: 'cors', // Need to use cors as we are on a different domain.
+        });
+
+        const session = (await resp.json()) as SessionResponse;
+        return session;
+    } catch (error) {
+        console.error('Failed to fetch visitor session ID', error);
+        return {
+            deviceId: proposedId,
+        };
+    }
+}
+
+function getSessionCookie(): { existing: SessionResponse | null; proposedId: string } {
+    const proposed = generateRandomId();
+    const value = getBrowserCookie(VISITORID_COOKIE);
+    if (!(value && typeof value === 'string')) {
+        return { existing: null, proposedId: proposed };
+    }
+
+    try {
+        const parsed = JSON.parse(value) as SessionResponse;
+        return { existing: parsed, proposedId: proposed };
+    } catch {
+        // Ignore legacy __session cookie format
+        // and we'll renew it with the server using the previous one as a proposed ID
+        return { existing: null, proposedId: proposed };
+    }
+}

packages/gitbook/src/components/PageActions/PageActions.tsx

@@ -2,9 +2,6 @@
 
 import { useAIChatState } from '@/components/AI';
 import type { Assistant } from '@/components/AI';
-import { ChatGPTIcon } from '@/components/PageActions/assets/ChatGPTIcon';
-import { ClaudeIcon } from '@/components/PageActions/assets/ClaudeIcon';
-import { MarkdownIcon } from '@/components/PageActions/assets/MarkdownIcon';
 import { Button } from '@/components/primitives/Button';
 import { DropdownMenuItem, useDropdownMenuClose } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
@@ -13,15 +10,15 @@ import type { GitSyncState } from '@gitbook/api';
 import { Icon, type IconName, IconStyle } from '@gitbook/icons';
 import assertNever from 'assert-never';
 import QuickLRU from 'quick-lru';
-import type React from 'react';
+import React from 'react';
 import { create } from 'zustand';
 
 type PageActionType = 'button' | 'dropdown-menu-item';
 
 /**
- * Opens our AI Docs Assistant.
+ * Action to open the GitBook Assistant.
  */
-export function OpenAIAssistant(props: { assistant: Assistant; type: PageActionType }) {
+export function ActionOpenAssistant(props: { assistant: Assistant; type: PageActionType }) {
     const { assistant, type } = props;
     const chat = useAIChatState();
     const language = useLanguage();
@@ -87,14 +84,14 @@ const useCopiedStore = create<
 const markdownCache = new QuickLRU<string, string>({ maxSize: 10 });
 
 /**
- * Copies the markdown version of the page to the clipboard.
+ * Action to copy the markdown version of the page to the clipboard.
  */
-export function CopyMarkdown(props: {
-    markdownPageUrl: string;
+export function ActionCopyMarkdown(props: {
+    markdownPageURL: string;
     type: PageActionType;
     isDefaultAction?: boolean;
 }) {
-    const { markdownPageUrl, type, isDefaultAction } = props;
+    const { markdownPageURL, type, isDefaultAction } = props;
     const language = useLanguage();
 
     const closeDropdown = useDropdownMenuClose();
@@ -105,8 +102,8 @@ export function CopyMarkdown(props: {
     const fetchMarkdown = async () => {
         setLoading(true);
 
-        const result = await fetch(markdownPageUrl).then((res) => res.text());
-        markdownCache.set(markdownPageUrl, result);
+        const result = await fetch(markdownPageURL).then((res) => res.text());
+        markdownCache.set(markdownPageURL, result);
 
         setLoading(false);
 
@@ -120,7 +117,7 @@ export function CopyMarkdown(props: {
             e.preventDefault();
         }
 
-        copy(markdownCache.get(markdownPageUrl) || (await fetchMarkdown()), {
+        copy(markdownCache.get(markdownPageURL) || (await fetchMarkdown()), {
             onSuccess: () => {
                 // We close the dropdown menu if the action is a dropdown menu item and not the default action.
                 if (type === 'dropdown-menu-item' && !isDefaultAction) {
@@ -146,17 +143,17 @@ export function CopyMarkdown(props: {
 /**
  * Redirects to the markdown version of the page.
  */
-export function ViewAsMarkdown(props: { markdownPageUrl: string; type: PageActionType }) {
-    const { markdownPageUrl, type } = props;
+export function ActionViewAsMarkdown(props: { markdownPageURL: string; type: PageActionType }) {
+    const { markdownPageURL, type } = props;
     const language = useLanguage();
 
     return (
         <PageActionWrapper
             type={type}
-            icon={<MarkdownIcon className="size-4 fill-current" />}
+            icon="markdown"
             label={tString(language, 'view_page_markdown')}
             description={tString(language, 'view_page_plaintext')}
-            href={markdownPageUrl}
+            href={markdownPageURL}
         />
     );
 }
@@ -164,7 +161,7 @@ export function ViewAsMarkdown(props: { markdownPageUrl: string; type: PageActio
 /**
  * Open the page in a LLM with a pre-filled prompt. Either ChatGPT or Claude.
  */
-export function OpenInLLM(props: {
+export function ActionOpenInLLM(props: {
     provider: 'chatgpt' | 'claude';
     url: string;
     type: PageActionType;
@@ -177,13 +174,7 @@ export function OpenInLLM(props: {
     return (
         <PageActionWrapper
             type={type}
-            icon={
-                provider === 'chatgpt' ? (
-                    <ChatGPTIcon className="size-3.5 fill-current" />
-                ) : (
-                    <ClaudeIcon className="size-3.5 fill-current" />
-                )
-            }
+            icon={provider}
             label={tString(language, 'open_in', providerLabel)}
             shortLabel={providerLabel}
             description={tString(language, 'ai_chat_ask_about_page', providerLabel)}
@@ -192,7 +183,10 @@ export function OpenInLLM(props: {
     );
 }
 
-export function GitEditLink(props: {
+/**
+ * Action to open the page in the associated Git repository.
+ */
+export function ActionOpenEditOnGit(props: {
     type: PageActionType;
     provider: GitSyncState['installationProvider'];
     url: string;
@@ -214,7 +208,66 @@ export function GitEditLink(props: {
     );
 }
 
-export function ViewAsPDF(props: { url: string; type: PageActionType }) {
+/**
+ * Action to copy the MCP URL to the clipboard.
+ */
+export function ActionCopyMCPURL(props: { mcpURL: string; type: PageActionType }) {
+    const { mcpURL, type } = props;
+    const language = useLanguage();
+
+    return (
+        <CopyToClipboard
+            type={type}
+            data={mcpURL}
+            label={tString(language, 'connect_with_mcp')}
+            description={tString(language, 'copy_mcp_url')}
+            icon="mcp"
+        />
+    );
+}
+
+/**
+ * Action to open the MCP server in a specific editor.
+ */
+export function ActionOpenMCP(props: {
+    siteTitle: string;
+    mcpURL: string;
+    provider: 'vscode';
+    type: PageActionType;
+}) {
+    const { siteTitle, provider, mcpURL, type } = props;
+    const language = useLanguage();
+
+    const providerInfo = React.useMemo<{ label: string; icon: IconName; url: string }>(() => {
+        switch (provider) {
+            case 'vscode': {
+                const vscodeConfig = { name: siteTitle, url: mcpURL };
+                return {
+                    label: 'VSCode',
+                    icon: 'vscode',
+                    url: `vscode:mcp/install?${encodeURIComponent(JSON.stringify(vscodeConfig))}`,
+                };
+            }
+            default:
+                assertNever(provider);
+        }
+    }, [provider, mcpURL, siteTitle]);
+
+    return (
+        <PageActionWrapper
+            type={type}
+            href={providerInfo.url}
+            label={tString(language, 'connect_mcp_to', providerInfo.label)}
+            description={tString(language, 'install_mcp_on', providerInfo.label)}
+            icon={providerInfo.icon}
+        />
+    );
+}
+
+/**
+ * Action to view the page as a PDF.
+ */
+export function ActionViewAsPDF(props: { url: string; type: PageActionType }) {
     const { url, type } = props;
     const language = useLanguage();
 
@@ -229,6 +282,30 @@ export function ViewAsPDF(props: { url: string; type: PageActionType }) {
     );
 }
 
+/**
+ * Action to copy a string to the clipboard.
+ */
+export function CopyToClipboard(props: {
+    type: PageActionType;
+    data: string;
+    label: string;
+    description: string;
+    icon: IconName;
+}) {
+    const { type, data, label, description, icon } = props;
+    return (
+        <PageActionWrapper
+            type={type}
+            icon={icon}
+            label={label}
+            description={description}
+            onClick={() => {
+                navigator.clipboard.writeText(data);
+            }}
+        />
+    );
+}
+
 /**
  * Wraps an action in a button (for the default action) or dropdown menu item.
  */

packages/gitbook/src/components/PageActions/PageActionsDropdown.tsx

@@ -1,30 +1,34 @@
 'use client';
 
-import {
-    CopyMarkdown,
-    GitEditLink,
-    OpenAIAssistant,
-    OpenInLLM,
-    ViewAsMarkdown,
-    ViewAsPDF,
-} from '@/components/PageActions/PageActions';
 import { Button, ButtonGroup } from '@/components/primitives/Button';
 import { DropdownMenu, DropdownMenuSeparator } from '@/components/primitives/DropdownMenu';
 import { tString, useLanguage } from '@/intl/client';
 import type { GitSyncState, SiteCustomizationSettings } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { useAI } from '../AI';
+import {
+    ActionCopyMCPURL,
+    ActionCopyMarkdown,
+    ActionOpenAssistant,
+    ActionOpenEditOnGit,
+    ActionOpenInLLM,
+    ActionOpenMCP,
+    ActionViewAsMarkdown,
+    ActionViewAsPDF,
+} from './PageActions';
 
 interface PageActionsDropdownProps {
-    markdownPageUrl: string;
+    siteTitle: string;
+    markdownPageURL: string;
+    mcpURL?: string;
+    pdfURL?: string;
     className?: string;
     actions: SiteCustomizationSettings['pageActions'];
     editOnGit?: {
         provider: GitSyncState['installationProvider'];
         url: string;
     };
-    pdfUrl?: string;
 }
 
 /**
@@ -32,19 +36,14 @@ interface PageActionsDropdownProps {
  */
 export function PageActionsDropdown(props: PageActionsDropdownProps) {
     const ref = useRef<HTMLDivElement>(null);
-    const assistants = useAI().assistants.filter(
-        (assistant) => assistant.ui === true && assistant.pageAction
-    );
     const language = useLanguage();
 
-    const defaultActions = [assistants.length > 0, props.actions.markdown, props.editOnGit].filter(
-        Boolean
-    );
-    const dropdownActions = [props.actions.externalAI, props.pdfUrl].filter(Boolean);
+    const defaultAction = getPageDefaultAction(props);
+    const dropdownActions = getPageDropdownActions(props);
 
-    return [...defaultActions, ...dropdownActions].length > 0 ? (
+    return defaultAction || dropdownActions.length > 0 ? (
         <ButtonGroup ref={ref} className={props.className}>
-            {defaultActions.length > 0 ? <DefaultAction {...props} /> : null}
+            {defaultAction}
             {dropdownActions.length > 0 ? (
                 <DropdownMenu
                     align="end"
@@ -57,18 +56,15 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) {
                                     className="size-3 transition-transform group-data-[state=open]/button:rotate-180"
                                 />
                             }
-                            label={tString(
-                                language,
-                                defaultActions.some(Boolean) ? 'more' : 'actions'
-                            )}
-                            iconOnly={defaultActions.some(Boolean)}
+                            label={tString(language, defaultAction ? 'more' : 'actions')}
+                            iconOnly={!!defaultAction}
                             size="xsmall"
                             variant="secondary"
                             className="bg-tint-base text-sm"
                         />
                     }
                 >
-                    <PageActionsDropdownMenuContent {...props} />
+                    {dropdownActions}
                 </DropdownMenu>
             ) : null}
         </ButtonGroup>
@@ -76,80 +72,99 @@ export function PageActionsDropdown(props: PageActionsDropdownProps) {
 }
 
 /**
- * The content of the dropdown menu.
+ * Return the list of actions to show in the dropdown menu.
  */
-function PageActionsDropdownMenuContent(props: PageActionsDropdownProps) {
-    const { markdownPageUrl, actions } = props;
+function getPageDropdownActions(props: PageActionsDropdownProps): React.ReactNode[] {
+    const { siteTitle, markdownPageURL, mcpURL, actions } = props;
     const assistants = useAI().assistants.filter(
         (assistant) => assistant.ui === true && assistant.pageAction
     );
 
-    return (
-        <>
-            {assistants.map((assistant) => (
-                <OpenAIAssistant
-                    key={assistant.label}
-                    assistant={assistant}
+    return [
+        ...assistants.map((assistant) => (
+            <ActionOpenAssistant
+                key={assistant.label}
+                assistant={assistant}
+                type="dropdown-menu-item"
+            />
+        )),
+
+        actions.markdown ? (
+            <React.Fragment key="markdown">
+                <DropdownMenuSeparator className="first:hidden" />
+                <ActionCopyMarkdown
+                    isDefaultAction={!assistants.length}
+                    markdownPageURL={markdownPageURL}
                     type="dropdown-menu-item"
                 />
-            ))}
+                <ActionViewAsMarkdown markdownPageURL={markdownPageURL} type="dropdown-menu-item" />
+            </React.Fragment>
+        ) : null,
 
-            {actions.markdown ? (
-                <>
-                    <DropdownMenuSeparator className="first:hidden" />
-                    <CopyMarkdown
-                        isDefaultAction={!assistants.length}
-                        markdownPageUrl={markdownPageUrl}
+        actions.externalAI ? (
+            <React.Fragment key="externalAI">
+                <DropdownMenuSeparator className="first:hidden" />
+                <ActionOpenInLLM
+                    provider="chatgpt"
+                    url={markdownPageURL}
+                    type="dropdown-menu-item"
+                />
+                <ActionOpenInLLM
+                    provider="claude"
+                    url={markdownPageURL}
+                    type="dropdown-menu-item"
+                />
+            </React.Fragment>
+        ) : null,
+
+        actions.mcp && mcpURL ? (
+            <React.Fragment key="mcp">
+                <DropdownMenuSeparator className="first:hidden" />
+                <ActionCopyMCPURL mcpURL={mcpURL} type="dropdown-menu-item" />
+                <ActionOpenMCP
+                    provider="vscode"
+                    mcpURL={mcpURL}
+                    siteTitle={siteTitle}
+                    type="dropdown-menu-item"
+                />
+            </React.Fragment>
+        ) : null,
+
+        props.editOnGit || props.pdfURL ? (
+            <React.Fragment key="editOnGit">
+                <DropdownMenuSeparator className="first:hidden" />
+                {props.editOnGit ? (
+                    <ActionOpenEditOnGit
                         type="dropdown-menu-item"
+                        provider={props.editOnGit.provider}
+                        url={props.editOnGit.url}
                     />
-                    <ViewAsMarkdown markdownPageUrl={markdownPageUrl} type="dropdown-menu-item" />
-                </>
-            ) : null}
-
-            {actions.externalAI ? (
-                <>
-                    <DropdownMenuSeparator className="first:hidden" />
-                    <OpenInLLM provider="chatgpt" url={markdownPageUrl} type="dropdown-menu-item" />
-                    <OpenInLLM provider="claude" url={markdownPageUrl} type="dropdown-menu-item" />
-                </>
-            ) : null}
-
-            {props.editOnGit || props.pdfUrl ? (
-                <>
-                    <DropdownMenuSeparator className="first:hidden" />
-                    {props.editOnGit ? (
-                        <GitEditLink
-                            type="dropdown-menu-item"
-                            provider={props.editOnGit.provider}
-                            url={props.editOnGit.url}
-                        />
-                    ) : null}
-                    {props.pdfUrl ? (
-                        <ViewAsPDF url={props.pdfUrl} type="dropdown-menu-item" />
-                    ) : null}
-                </>
-            ) : null}
-        </>
-    );
+                ) : null}
+                {props.pdfURL ? (
+                    <ActionViewAsPDF url={props.pdfURL} type="dropdown-menu-item" />
+                ) : null}
+            </React.Fragment>
+        ) : null,
+    ].filter(Boolean);
 }
 
 /**
  * A default action shown as a quick-access button beside the dropdown menu
  */
-function DefaultAction(props: PageActionsDropdownProps) {
-    const { markdownPageUrl, actions } = props;
+function getPageDefaultAction(props: PageActionsDropdownProps) {
+    const { markdownPageURL, actions } = props;
     const assistants = useAI().assistants.filter(
         (assistant) => assistant.ui === true && assistant.pageAction
     );
 
     const assistant = assistants[0];
     if (assistant) {
-        return <OpenAIAssistant assistant={assistant} type="button" />;
+        return <ActionOpenAssistant assistant={assistant} type="button" />;
     }
 
     if (props.editOnGit) {
         return (
-            <GitEditLink
+            <ActionOpenEditOnGit
                 type="button"
                 provider={props.editOnGit.provider}
                 url={props.editOnGit.url}
@@ -159,11 +174,13 @@ function DefaultAction(props: PageActionsDropdownProps) {
 
     if (actions.markdown) {
         return (
-            <CopyMarkdown
+            <ActionCopyMarkdown
                 isDefaultAction={!assistant}
-                markdownPageUrl={markdownPageUrl}
+                markdownPageURL={markdownPageURL}
                 type="button"
             />
         );
     }
+
+    return null;
 }

packages/gitbook/src/components/PageActions/assets/ChatGPTIcon.tsx

@@ -1,8 +0,0 @@
-export function ChatGPTIcon(props: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" {...props}>
-            <title>ChatGPT</title>
-            <path d="m297.06 130.97c7.26-21.79 4.76-45.66-6.85-65.48-17.46-30.4-52.56-46.04-86.84-38.68-15.25-17.18-37.16-26.95-60.13-26.81-35.04-.08-66.13 22.48-76.91 55.82-22.51 4.61-41.94 18.7-53.31 38.67-17.59 30.32-13.58 68.54 9.92 94.54-7.26 21.79-4.76 45.66 6.85 65.48 17.46 30.4 52.56 46.04 86.84 38.68 15.24 17.18 37.16 26.95 60.13 26.8 35.06.09 66.16-22.49 76.94-55.86 22.51-4.61 41.94-18.7 53.31-38.67 17.57-30.32 13.55-68.51-9.94-94.51zm-120.28 168.11c-14.03.02-27.62-4.89-38.39-13.88.49-.26 1.34-.73 1.89-1.07l63.72-36.8c3.26-1.85 5.26-5.32 5.24-9.07v-89.83l26.93 15.55c.29.14.48.42.52.74v74.39c-.04 33.08-26.83 59.9-59.91 59.97zm-128.84-55.03c-7.03-12.14-9.56-26.37-7.15-40.18.47.28 1.3.79 1.89 1.13l63.72 36.8c3.23 1.89 7.23 1.89 10.47 0l77.79-44.92v31.1c.02.32-.13.63-.38.83l-64.41 37.19c-28.69 16.52-65.33 6.7-81.92-21.95zm-16.77-139.09c7-12.16 18.05-21.46 31.21-26.29 0 .55-.03 1.52-.03 2.2v73.61c-.02 3.74 1.98 7.21 5.23 9.06l77.79 44.91-26.93 15.55c-.27.18-.61.21-.91.08l-64.42-37.22c-28.63-16.58-38.45-53.21-21.95-81.89zm221.26 51.49-77.79-44.92 26.93-15.54c.27-.18.61-.21.91-.08l64.42 37.19c28.68 16.57 38.51 53.26 21.94 81.94-7.01 12.14-18.05 21.44-31.2 26.28v-75.81c.03-3.74-1.96-7.2-5.2-9.06zm26.8-40.34c-.47-.29-1.3-.79-1.89-1.13l-63.72-36.8c-3.23-1.89-7.23-1.89-10.47 0l-77.79 44.92v-31.1c-.02-.32.13-.63.38-.83l64.41-37.16c28.69-16.55 65.37-6.7 81.91 22 6.99 12.12 9.52 26.31 7.15 40.1zm-168.51 55.43-26.94-15.55c-.29-.14-.48-.42-.52-.74v-74.39c.02-33.12 26.89-59.96 60.01-59.94 14.01 0 27.57 4.92 38.34 13.88-.49.26-1.33.73-1.89 1.07l-63.72 36.8c-3.26 1.85-5.26 5.31-5.24 9.06l-.04 89.79zm14.63-31.54 34.65-20.01 34.65 20v40.01l-34.65 20-34.65-20z" />
-        </svg>
-    );
-}

packages/gitbook/src/components/PageActions/assets/ClaudeIcon.tsx

@@ -1,19 +0,0 @@
-export function ClaudeIcon(props: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg
-            viewBox="0 0 256 257"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="xMidYMid"
-            {...props}
-        >
-            <title>Claude</title>
-            <g>
-                <path
-                    d="M50.2278481,170.321013 L100.585316,142.063797 L101.427848,139.601013 L100.585316,138.24 L98.1225316,138.24 L89.6972152,137.721519 L60.921519,136.943797 L35.9696203,135.906835 L11.795443,134.610633 L5.70329114,133.31443 L0,125.796456 L0.583291139,122.037468 L5.70329114,118.602532 L13.0268354,119.250633 L29.2293671,120.352405 L53.5331646,122.037468 L71.161519,123.07443 L97.28,125.796456 L101.427848,125.796456 L102.011139,124.111392 L100.585316,123.07443 L99.4835443,122.037468 L74.3372152,104.992405 L47.116962,86.9751899 L32.8587342,76.6055696 L25.1463291,71.3559494 L21.2577215,66.4303797 L19.5726582,55.6718987 L26.5721519,47.9594937 L35.9696203,48.6075949 L38.3675949,49.2556962 L47.8946835,56.5792405 L68.2450633,72.3281013 L94.8172152,91.9007595 L98.7058228,95.1412658 L100.261266,94.0394937 L100.455696,93.2617722 L98.7058228,90.3453165 L84.2531646,64.2268354 L68.8283544,37.6546835 L61.958481,26.636962 L60.1437975,20.0263291 C59.4956962,17.3043038 59.0420253,15.0359494 59.0420253,12.2491139 L67.0136709,1.42582278 L71.4207595,-1.42108547e-14 L82.0496203,1.42582278 L86.521519,5.31443038 L93.1321519,20.4151899 L103.825823,44.2005063 L120.417215,76.5407595 L125.277975,86.1326582 L127.87038,95.0116456 L128.842532,97.7336709 L130.527595,97.7336709 L130.527595,96.1782278 L131.888608,77.9665823 L134.416203,55.6070886 L136.878987,26.8313924 L137.721519,18.7301266 L141.739747,9.00860759 L149.711392,3.75898734 L155.933165,6.74025316 L161.053165,14.0637975 L160.340253,18.7949367 L157.294177,38.5620253 L151.331646,69.5412658 L147.443038,90.2805063 L149.711392,90.2805063 L152.303797,87.6881013 L162.803038,73.7539241 L180.431392,51.718481 L188.208608,42.9691139 L197.282025,33.3124051 L203.114937,28.7108861 L214.132658,28.7108861 L222.233924,40.7655696 L218.604557,53.2091139 L207.262785,67.596962 L197.865316,79.7812658 L184.38481,97.9281013 L175.959494,112.44557 L176.737215,113.612152 L178.746329,113.417722 L209.207089,106.936709 L225.668861,103.955443 L245.306329,100.585316 L254.185316,104.733165 L255.157468,108.945823 L251.657722,117.56557 L230.659241,122.75038 L206.031392,127.675949 L169.348861,136.360506 L168.89519,136.684557 L169.413671,137.332658 L185.940253,138.888101 L193.004557,139.276962 L210.308861,139.276962 L242.519494,141.674937 L250.94481,147.248608 L256,154.053671 L255.157468,159.238481 L242.195443,165.849114 L224.696709,161.701266 L183.866329,151.979747 L169.867342,148.48 L167.923038,148.48 L167.923038,149.646582 L179.588861,161.053165 L200.976203,180.366582 L227.742785,205.253671 L229.103797,211.410633 L225.668861,216.271392 L222.039494,215.752911 L198.513418,198.059747 L189.44,190.088101 L168.89519,172.783797 L167.534177,172.783797 L167.534177,174.598481 L172.265316,181.533165 L197.282025,219.123038 L198.578228,230.659241 L196.763544,234.418228 L190.282532,236.686582 L183.153418,235.39038 L168.506329,214.84557 L153.40557,191.708354 L141.221266,170.969114 L139.730633,171.811646 L132.536709,249.259747 L129.166582,253.213165 L121.389367,256.19443 L114.908354,251.268861 L111.473418,243.297215 L114.908354,227.548354 L119.056203,207.003544 L122.426329,190.671392 L125.472405,170.385823 L127.287089,163.64557 L127.157468,163.191899 L125.666835,163.386329 L110.371646,184.38481 L87.1048101,215.817722 L68.6987342,235.52 L64.2916456,237.269873 L56.6440506,233.316456 L57.356962,226.252152 L61.6344304,219.96557 L87.1048101,187.560506 L102.46481,167.469367 L112.380759,155.868354 L112.315949,154.183291 L111.732658,154.183291 L44.0708861,198.124557 L32.0162025,199.68 L26.8313924,194.819241 L27.4794937,186.847595 L29.9422785,184.25519 L50.2926582,170.256203 L50.2278481,170.321013 Z"
-                    fill="currentColor"
-                />
-            </g>
-        </svg>
-    );
-}

packages/gitbook/src/components/PageActions/assets/MarkdownIcon.tsx

@@ -1,9 +0,0 @@
-export function MarkdownIcon(props: React.SVGProps<SVGSVGElement>) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 471 289.85" {...props}>
-            <title>Markdown</title>
-            <path d="M437,289.85H34a34,34,0,0,1-34-34V34A34,34,0,0,1,34,0H437a34,34,0,0,1,34,34V255.88A34,34,0,0,1,437,289.85ZM34,22.64A11.34,11.34,0,0,0,22.64,34V255.88A11.34,11.34,0,0,0,34,267.2H437a11.34,11.34,0,0,0,11.33-11.32V34A11.34,11.34,0,0,0,437,22.64Z" />
-            <path d="M67.93,221.91v-154h45.29l45.29,56.61L203.8,67.93h45.29v154H203.8V133.6l-45.29,56.61L113.22,133.6v88.31Zm283.06,0-67.94-74.72h45.29V67.93h45.29v79.26h45.29Z" />
-        </svg>
-    );
-}

packages/gitbook/src/components/PageBody/PageHeader.tsx

@@ -1,7 +1,7 @@
 import type { GitBookSiteContext } from '@/lib/context';
 import type { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
-import type { RevisionPageDocument } from '@gitbook/api';
+import { type RevisionPageDocument, SiteVisibility } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 import urlJoin from 'url-join';
 import { getPDFURLSearchParams } from '../PDF';
@@ -39,7 +39,8 @@ export async function PageHeader(props: {
             {page.layout.tableOfContents ? (
                 // Show page actions if *any* of the actions are enabled
                 <PageActionsDropdown
-                    markdownPageUrl={`${context.linker.toAbsoluteURL(context.linker.toPathInSpace(page.path))}.md`}
+                    siteTitle={context.site.title}
+                    markdownPageURL={`${context.linker.toAbsoluteURL(context.linker.toPathInSpace(page.path))}.md`}
                     editOnGit={
                         context.customization.git.showEditLink &&
                         context.space.gitSync?.url &&
@@ -50,7 +51,7 @@ export async function PageHeader(props: {
                               }
                             : undefined
                     }
-                    pdfUrl={
+                    pdfURL={
                         context.customization.pdf.enabled
                             ? context.linker.toPathInSpace(
                                   `~gitbook/pdf?${getPDFURLSearchParams({
@@ -61,6 +62,13 @@ export async function PageHeader(props: {
                               )
                             : undefined
                     }
+                    mcpURL={
+                        context.site.visibility !== SiteVisibility.VisitorAuth
+                            ? context.linker.toAbsoluteURL(
+                                  context.linker.toPathInSpace('~gitbook/mcp')
+                              )
+                            : undefined
+                    }
                     actions={context.customization.pageActions}
                     className={tcls(
                         'float-right ml-4 xl:max-2xl:page-api-block:mr-62',

packages/gitbook/src/components/Search/SearchContainer.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { CustomizationSearchStyle } from '@gitbook/api';
+import { CustomizationSearchStyle, type SiteSection } from '@gitbook/api';
 import { useRouter } from 'next/navigation';
 import React, { useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -18,9 +18,27 @@ import { SearchScopeToggle } from './SearchScopeToggle';
 import { useSearch } from './useSearch';
 
 interface SearchContainerProps {
+    /** The current site space id. */
     siteSpaceId: string;
+
+    /** The title of the current space. */
     spaceTitle: string;
-    isMultiVariants: boolean;
+
+    /** The ids of all spaces in the current section. */
+    siteSpaceIds: string[];
+
+    /** Whether there are sections on the site. */
+    withSections: boolean;
+
+    /** The current section, displayed in search scope toggle. */
+    section?: Pick<SiteSection, 'title' | 'icon'>;
+
+    /** Whether the current section has variants. */
+    withVariants: boolean;
+
+    /** Whether any section on the site has variants. */
+    withSiteVariants: boolean;
+
     style: CustomizationSearchStyle;
     className?: string;
     viewport?: 'desktop' | 'mobile';
@@ -30,7 +48,18 @@ interface SearchContainerProps {
  * Client component to render the search input and results.
  */
 export function SearchContainer(props: SearchContainerProps) {
-    const { siteSpaceId, spaceTitle, isMultiVariants, style, className, viewport } = props;
+    const {
+        siteSpaceId,
+        spaceTitle,
+        section,
+        withVariants,
+        withSiteVariants,
+        withSections,
+        style,
+        className,
+        viewport,
+        siteSpaceIds,
+    } = props;
 
     const { assistants } = useAI();
 
@@ -108,7 +137,7 @@ export function SearchContainer(props: SearchContainerProps) {
         }
         setSearchState((prev) => ({
             ask: withAI ? (prev?.ask ?? null) : null,
-            global: prev?.global ?? false,
+            scope: prev?.scope ?? 'default',
             query: prev?.query ?? (withSearchAI || !withAI ? prev?.ask : null) ?? '',
             open: true,
         }));
@@ -148,7 +177,7 @@ export function SearchContainer(props: SearchContainerProps) {
         setSearchState((prev) => ({
             ask: withAI && !withSearchAI ? (prev?.ask ?? null) : null, // When typing, we reset ask to get back to normal search (unless non-search assistants are defined)
             query: value,
-            global: prev?.global ?? false,
+            scope: prev?.scope ?? 'default',
             open: true,
         }));
     };
@@ -168,15 +197,22 @@ export function SearchContainer(props: SearchContainerProps) {
                     // Only show content if there's a query or Ask is enabled
                     state?.query || withAI ? (
                         <React.Suspense fallback={null}>
-                            {isMultiVariants && !showAsk ? (
-                                <SearchScopeToggle spaceTitle={spaceTitle} />
+                            {(withVariants || withSections) && !showAsk ? (
+                                <SearchScopeToggle
+                                    section={section}
+                                    spaceTitle={spaceTitle}
+                                    withVariants={withVariants}
+                                    withSiteVariants={withSiteVariants}
+                                    withSections={withSections}
+                                />
                             ) : null}
                             {state !== null && !showAsk ? (
                                 <SearchResults
                                     ref={resultsRef}
                                     query={normalizedQuery}
-                                    global={state?.global ?? false}
+                                    scope={state?.scope ?? 'default'}
                                     siteSpaceId={siteSpaceId}
+                                    siteSpaceIds={siteSpaceIds}
                                 />
                             ) : null}
                             {showAsk ? <SearchAskAnswer query={normalizedAsk} /> : null}
@@ -194,7 +230,7 @@ export function SearchContainer(props: SearchContainerProps) {
                     onOpenAutoFocus: (event) => event.preventDefault(),
                     align: 'start',
                     className:
-                        'bg-tint-base has-[.empty]:hidden gutter-stable scroll-py-2 w-128 p-2 pr-1 max-h-[min(32rem,var(--radix-popover-content-available-height))] max-w-[min(var(--radix-popover-content-available-width),32rem)]',
+                        '@container bg-tint-base has-[.empty]:hidden scroll-py-2 w-128 p-2 max-h-[min(32rem,var(--radix-popover-content-available-height))] max-w-[min(var(--radix-popover-content-available-width),32rem)]',
                     onInteractOutside: (event) => {
                         // Don't close if clicking on the search input itself
                         if (searchInputRef.current?.contains(event.target as Node)) {

packages/gitbook/src/components/Search/SearchResults.tsx

@@ -17,9 +17,11 @@ import { SearchSectionResultItem } from './SearchSectionResultItem';
 import {
     type OrderedComputedResult,
     searchAllSiteContent,
-    searchSiteSpaceContent,
+    searchCurrentSiteSpaceContent,
+    searchSpecificSiteSpaceContent,
     streamRecommendedQuestions,
 } from './server-actions';
+import type { SearchScope } from './useSearch';
 
 export interface SearchResultsRef {
     moveUp(): void;
@@ -50,12 +52,13 @@ export const SearchResults = React.forwardRef(function SearchResults(
     props: {
         children?: React.ReactNode;
         query: string;
-        global: boolean;
+        scope: SearchScope;
         siteSpaceId: string;
+        siteSpaceIds: string[];
     },
     ref: React.Ref<SearchResultsRef>
 ) {
-    const { children, query, global, siteSpaceId } = props;
+    const { children, query, scope, siteSpaceId, siteSpaceIds } = props;
 
     const language = useLanguage();
     const trackEvent = useTrackEvent();
@@ -133,9 +136,25 @@ export const SearchResults = React.forwardRef(function SearchResults(
         setResultsState((prev) => ({ results: prev.results, fetching: true }));
         let cancelled = false;
         const timeout = setTimeout(async () => {
-            const results = await (global
-                ? searchAllSiteContent(query)
-                : searchSiteSpaceContent(query));
+            const results = await (() => {
+                if (scope === 'all') {
+                    // Search all content on the site
+                    return searchAllSiteContent(query);
+                }
+                if (scope === 'default') {
+                    // Search the current section's variant + matched/default variant for other sections
+                    return searchCurrentSiteSpaceContent(query, siteSpaceId);
+                }
+                if (scope === 'extended') {
+                    // Search all variants of the current section
+                    return searchSpecificSiteSpaceContent(query, siteSpaceIds);
+                }
+                if (scope === 'current') {
+                    // Search only the current section's current variant
+                    return searchSpecificSiteSpaceContent(query, [siteSpaceId]);
+                }
+                throw new Error(`Unhandled search scope: ${scope}`);
+            })();
 
             if (cancelled) {
                 return;
@@ -158,7 +177,7 @@ export const SearchResults = React.forwardRef(function SearchResults(
             cancelled = true;
             clearTimeout(timeout);
         };
-    }, [query, global, trackEvent, withAI, siteSpaceId]);
+    }, [query, scope, trackEvent, withAI, siteSpaceId, siteSpaceIds]);
 
     const results: ResultType[] = React.useMemo(() => {
         if (!withAI) {

packages/gitbook/src/components/Search/SearchScopeToggle.tsx

@@ -1,13 +1,22 @@
+'use client';
+
 import { tString, useLanguage } from '@/intl/client';
-import { Button } from '../primitives';
+import type { SiteSection } from '@gitbook/api';
+import { SegmentedControl, SegmentedControlItem } from '../primitives/SegmentedControl';
 import { useSearch } from './useSearch';
 
 /**
  * Toolbar to toggle between search modes (global or scoped to a space).
  * Only visible when the space is in a collection.
  */
-export function SearchScopeToggle(props: { spaceTitle: string }) {
-    const { spaceTitle } = props;
+export function SearchScopeToggle(props: {
+    spaceTitle: string;
+    section?: Pick<SiteSection, 'title' | 'icon'>;
+    withVariants: boolean;
+    withSiteVariants: boolean;
+    withSections: boolean;
+}) {
+    const { spaceTitle, section, withVariants, withSections, withSiteVariants } = props;
     const [state, setSearchState] = useSearch();
     const language = useLanguage();
 
@@ -16,37 +25,82 @@ export function SearchScopeToggle(props: { spaceTitle: string }) {
     }
 
     return (
-        <div
-            role="toolbar"
-            aria-orientation="horizontal"
-            className="mb-2 flex flex-row flex-wrap gap-1 circular-corners:rounded-3xl rounded-corners:rounded-lg bg-tint-subtle p-1"
-        >
-            <Button
-                variant="blank"
-                size="medium"
-                className="shrink grow justify-center whitespace-normal"
-                active={!state.global}
-                label={tString(language, 'search_scope_space', spaceTitle)}
-                onClick={() => {
-                    setSearchState({
-                        ...state,
-                        global: false,
-                    });
-                }}
-            />
-            <Button
-                variant="blank"
-                size="medium"
-                className="shrink grow justify-center whitespace-normal"
-                active={state.global}
-                label={tString(language, 'search_scope_all')}
-                onClick={() => {
-                    setSearchState({
-                        ...state,
-                        global: true,
-                    });
-                }}
-            />
-        </div>
+        <>
+            {withSections ? (
+                <SegmentedControl className="animate-scale-in">
+                    {/* `Default` scope = current section's current variant + best match in other sections */}
+                    <SegmentedControlItem
+                        active={
+                            withSiteVariants
+                                ? state.scope === 'default'
+                                : ['default', 'all'].includes(state.scope)
+                        }
+                        label={
+                            withSiteVariants
+                                ? tString(language, 'search_scope_default')
+                                : tString(language, 'search_scope_all')
+                        }
+                        className={withSiteVariants ? '@max-md:basis-full' : ''}
+                        icon={withSiteVariants ? 'bullseye-arrow' : 'infinity'}
+                        onClick={() => setSearchState({ ...state, scope: 'default' })}
+                    />
+
+                    {/* `Current` scope = current section's current variant (with further variant scope selection if necessary) */}
+                    <SegmentedControlItem
+                        active={state.scope === 'current' || state.scope === 'extended'}
+                        icon={section?.icon ?? 'crosshairs'}
+                        label={tString(language, 'search_scope_current', section?.title)}
+                        onClick={() => setSearchState({ ...state, scope: 'current' })}
+                    />
+
+                    {/* `All` scope = all content on the site. Only visible if site has variants, otherwise it's the same as default */}
+                    {withSiteVariants ? (
+                        <SegmentedControlItem
+                            active={state.scope === 'all'}
+                            label={tString(language, 'search_scope_all')}
+                            icon="infinity"
+                            onClick={() => setSearchState({ ...state, scope: 'all' })}
+                        />
+                    ) : null}
+                </SegmentedControl>
+            ) : null}
+            {withVariants &&
+            (!withSections || state.scope === 'current' || state.scope === 'extended') ? (
+                <SegmentedControl className="animate-scale-in">
+                    {/* `Current` scope = current section's current variant. `Default` on sites without sections. */}
+                    <SegmentedControlItem
+                        size={withSections ? 'small' : 'medium'}
+                        active={
+                            withSections
+                                ? state.scope === 'current'
+                                : ['default', 'current'].includes(state.scope)
+                        }
+                        className="py-1"
+                        label={tString(language, 'search_scope_current', spaceTitle)}
+                        onClick={() =>
+                            setSearchState({
+                                ...state,
+                                scope: withSections ? 'current' : 'default',
+                            })
+                        }
+                    />
+
+                    {/* `Extended` scope = all variants of the current section. `All` on sites without sections. */}
+                    <SegmentedControlItem
+                        size={withSections ? 'small' : 'medium'}
+                        active={
+                            withSections
+                                ? state.scope === 'extended'
+                                : ['extended', 'all'].includes(state.scope)
+                        }
+                        className="py-1"
+                        label={tString(language, 'search_scope_extended')}
+                        onClick={() =>
+                            setSearchState({ ...state, scope: withSections ? 'extended' : 'all' })
+                        }
+                    />
+                </SegmentedControl>
+            ) : null}
+        </>
     );
 }

packages/gitbook/src/components/Search/server-actions.tsx

@@ -81,18 +81,33 @@ export async function searchAllSiteContent(query: string): Promise<OrderedComput
 /**
  * Server action to search content in a space.
  */
-export async function searchSiteSpaceContent(query: string): Promise<OrderedComputedResult[]> {
+export async function searchCurrentSiteSpaceContent(
+    query: string,
+    siteSpaceId: string
+): Promise<OrderedComputedResult[]> {
     return traceErrorOnly('Search.searchSiteSpaceContent', async () => {
         const context = await getServerActionBaseContext();
-        const siteURLData = await getSiteURLDataFromMiddleware();
 
         return await searchSiteContent(context, {
             query,
-            // If we have a siteSectionId that means its a sections site use `current` mode
-            // which searches in the current space + all default spaces of sections
-            scope: siteURLData.siteSection
-                ? { mode: 'current', siteSpaceId: siteURLData.siteSpace }
-                : { mode: 'specific', siteSpaceIds: [siteURLData.siteSpace] },
+            scope: { mode: 'current', siteSpaceId },
+        });
+    });
+}
+
+/**
+ * Server action to search content in a specific space.
+ */
+export async function searchSpecificSiteSpaceContent(
+    query: string,
+    siteSpaceIds: string[]
+): Promise<OrderedComputedResult[]> {
+    return traceErrorOnly('Search.searchSiteSpaceContent', async () => {
+        const context = await getServerActionBaseContext();
+
+        return await searchSiteContent(context, {
+            query,
+            scope: { mode: 'specific', siteSpaceIds },
         });
     });
 }

packages/gitbook/src/components/Search/useSearch.tsx

@@ -1,14 +1,24 @@
 'use client';
 
-import { parseAsBoolean, parseAsString, useQueryStates } from 'nuqs';
+import { parseAsBoolean, parseAsString, parseAsStringLiteral, useQueryStates } from 'nuqs';
 import React from 'react';
 import type { LinkProps } from '../primitives';
 
+export type SearchScope =
+    /** Search all content on the site */
+    | 'all'
+    /** Search the current section's variant + matched/default variant for other sections */
+    | 'default'
+    /** Search all variants of the current section */
+    | 'extended'
+    /** Search only the current section's current variant */
+    | 'current';
+
 export interface SearchState {
     // URL-backed state
     query: string | null;
     ask: string | null;
-    global: boolean;
+    scope: SearchScope;
 
     // Local UI state
     open: boolean;
@@ -18,7 +28,8 @@ export interface SearchState {
 const keyMap = {
     q: parseAsString,
     ask: parseAsString,
-    global: parseAsBoolean,
+    scope: parseAsStringLiteral(['all', 'default', 'extended', 'current']).withDefault('default'),
+    global: parseAsBoolean, // Legacy support for global=true
 };
 
 export type UpdateSearchState = (
@@ -41,14 +52,21 @@ export function SearchContextProvider(props: React.PropsWithChildren): React.Rea
         history: 'replace',
     });
 
-    // Handle legacy ask=true format by converting it to the new format
     React.useEffect(() => {
+        // Handle legacy ask=true format by converting it to the new format
         if (rawState?.ask === 'true' && rawState?.q) {
             // Convert legacy format: q=query&ask=true -> ask=query&q=null
             setRawState({
                 q: null,
                 ask: rawState.q,
-                global: rawState.global,
+            });
+        }
+
+        // Handle legacy global=true
+        if (rawState?.global === true) {
+            setRawState({
+                scope: 'all',
+                global: null, // Remove the legacy parameter
             });
         }
     }, [rawState, setRawState]);
@@ -65,7 +83,7 @@ export function SearchContextProvider(props: React.PropsWithChildren): React.Rea
         return {
             query: rawState.q,
             ask: rawState.ask,
-            global: !!rawState.global,
+            scope: rawState.scope,
             open,
         };
     }, [rawState, open]);
@@ -85,14 +103,14 @@ export function SearchContextProvider(props: React.PropsWithChildren): React.Rea
 
             if (update === null) {
                 setIsOpen(false);
-                return setRawState({ q: null, ask: null, global: null });
+                return setRawState({ q: null, ask: null, scope: 'default' });
             }
 
             setIsOpen(update.open);
             return setRawState({
                 q: update.query,
                 ask: update.ask,
-                global: update.global ? true : null,
+                scope: update.scope,
             });
         },
         [setRawState]
@@ -126,7 +144,7 @@ export function useSearchLink(): (
             const searchParams = new URLSearchParams();
             params.query ? searchParams.set('q', params.query) : searchParams.delete('q');
             params.ask ? searchParams.set('ask', params.ask) : searchParams.delete('ask');
-            params.global ? searchParams.set('global', 'true') : searchParams.delete('global');
+            params.scope ? searchParams.set('scope', params.scope) : searchParams.delete('scope');
             return {
                 href: `?${searchParams.toString()}`,
                 prefetch: false,
@@ -137,7 +155,7 @@ export function useSearchLink(): (
                         ...prev,
                         query: params.query !== undefined ? params.query : null,
                         ask: params.ask !== undefined ? params.ask : null,
-                        global: params.global !== undefined ? params.global : false,
+                        scope: params.scope !== undefined ? params.scope : 'default',
                         open: params.open !== undefined ? params.open : false,
                     }));
                 },

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -21,7 +21,7 @@ import { AIChat } from '../AIChat';
 import { AdaptiveVisitorContextProvider } from '../Adaptive';
 import { Announcement } from '../Announcement';
 import { SpacesDropdown, TranslationsDropdown } from '../Header/SpacesDropdown';
-import { InsightsProvider } from '../Insights';
+import { InsightsProvider, VisitorSessionProvider } from '../Insights';
 import { SearchContainer } from '../Search';
 import { SiteSectionList, encodeClientSiteSections } from '../SiteSections';
 import { CurrentContentProvider } from '../hooks';
@@ -78,16 +78,16 @@ export function SpaceLayoutServerContext(props: SpaceLayoutProps) {
                     revisionId={context.revisionId}
                     visitorAuthClaims={visitorAuthClaims}
                 >
-                    <InsightsProvider
-                        enabled={withTracking}
+                    <VisitorSessionProvider
                         appURL={GITBOOK_APP_URL}
-                        eventUrl={eventUrl.toString()}
                         visitorCookieTrackingEnabled={customization.insights?.trackingCookie}
                     >
-                        <AIChatProvider renderMessageOptions={aiChatRenderMessageOptions}>
-                            {children}
-                        </AIChatProvider>
-                    </InsightsProvider>
+                        <InsightsProvider enabled={withTracking} eventUrl={eventUrl.toString()}>
+                            <AIChatProvider renderMessageOptions={aiChatRenderMessageOptions}>
+                                {children}
+                            </AIChatProvider>
+                        </InsightsProvider>
+                    </VisitorSessionProvider>
                 </CurrentContentProvider>
             </AdaptiveVisitorContextProvider>
         </SpaceLayoutContextProvider>
@@ -180,9 +180,29 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                                     <div className="flex gap-2">
                                         <SearchContainer
                                             style={CustomizationSearchStyle.Subtle}
-                                            isMultiVariants={siteSpaces.length > 1}
+                                            withVariants={withVariants === 'generic'}
+                                            withSiteVariants={
+                                                sections?.list.some(
+                                                    (s) =>
+                                                        s.object === 'site-section' &&
+                                                        s.siteSpaces.filter(
+                                                            (s) =>
+                                                                s.space.language ===
+                                                                siteSpace.space.language
+                                                        ).length > 1
+                                                ) ?? false
+                                            }
+                                            withSections={withSections}
+                                            section={sections?.current}
                                             spaceTitle={siteSpace.title}
                                             siteSpaceId={siteSpace.id}
+                                            siteSpaceIds={siteSpaces
+                                                .filter(
+                                                    (s) =>
+                                                        s.space.language ===
+                                                        siteSpace.space.language
+                                                )
+                                                .map((s) => s.id)}
                                             className="max-lg:hidden"
                                             viewport="desktop"
                                         />

packages/gitbook/src/components/primitives/Button.tsx

@@ -40,6 +40,7 @@ export const variantClasses = {
         'bg-transparent',
         'text-tint',
         'border-0',
+        'contrast-more:border',
         'shadow-none!',
         'hover:bg-tint-hover',
         'hover:text-tint-strong',
@@ -80,9 +81,9 @@ export const variantClasses = {
     ],
 };
 
-const activeClasses = {
+export const activeClasses = {
     primary: 'bg-primary-solid-hover',
-    blank: 'bg-primary-active disabled:bg-primary-active text-primary-strong font-medium hover:text-primary-strong disabled:text-primary-strong hover:bg-primary-active',
+    blank: 'bg-primary-active contrast-more:bg-primary-12 contrast-more:text-contrast-primary-12 disabled:bg-primary-active text-primary-strong font-medium hover:text-primary-strong disabled:text-primary-strong hover:bg-primary-active',
     secondary: 'bg-tint-active disabled:bg-tint-active',
     header: 'bg-header-link/3',
 };
@@ -134,7 +135,7 @@ export const Button = React.forwardRef<
                     typeof icon === 'string' ? (
                         <Icon
                             icon={icon as IconName}
-                            className={tcls('button-leading-icon size-[1em]')}
+                            className={tcls('button-leading-icon size-[1em] shrink-0')}
                         />
                     ) : (
                         icon
@@ -154,6 +155,7 @@ export const Button = React.forwardRef<
                 aria-label={label?.toString()}
                 aria-pressed={active}
                 target={target}
+                data-active={active}
                 {...rest}
             >
                 {content}
@@ -166,6 +168,7 @@ export const Button = React.forwardRef<
                 aria-label={label?.toString()}
                 aria-pressed={active}
                 disabled={disabled}
+                data-active={active}
                 {...rest}
             >
                 {content}

packages/gitbook/src/components/primitives/DateRelative.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { useLanguage } from '@/intl/client';
+import { Tooltip } from './Tooltip';
 
 /**
  * Display a date as a relative time.
@@ -28,14 +29,11 @@ export function DateRelative(props: { value: string }) {
     const date = new Date(value);
     const diff = now - date.getTime();
     return (
-        <time
-            data-visual-test="transparent"
-            suppressHydrationWarning={true}
-            dateTime={value}
-            title={date.toLocaleString()}
-        >
-            {formatDiff(language.locale, diff)}
-        </time>
+        <Tooltip label={date.toLocaleString()}>
+            <time data-visual-test="transparent" suppressHydrationWarning={true} dateTime={value}>
+                {formatDiff(language.locale, diff)}
+            </time>
+        </Tooltip>
     );
 }
 

packages/gitbook/src/components/primitives/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Icon } from '@gitbook/icons';
+import { Icon, type IconName } from '@gitbook/icons';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { createContext, useCallback, useContext, useState } from 'react';
 
@@ -146,10 +146,20 @@ export function DropdownMenuItem(
         active?: boolean;
         className?: ClassValue;
         children: React.ReactNode;
+        leadingIcon?: IconName | React.ReactNode;
     } & LinkInsightsProps &
         RadixDropdownMenu.DropdownMenuItemProps
 ) {
-    const { children, active = false, href, className, insights, target, ...rest } = props;
+    const {
+        children,
+        active = false,
+        href,
+        className,
+        insights,
+        target,
+        leadingIcon,
+        ...rest
+    } = props;
 
     const itemClassName = tcls(
         'rounded-xs straight-corners:rounded-xs circular-corners:rounded-lg px-3 py-1 text-sm flex gap-2 items-center',
@@ -161,10 +171,22 @@ export function DropdownMenuItem(
         className
     );
 
+    const icon = leadingIcon ? (
+        typeof leadingIcon === 'string' ? (
+            <Icon
+                icon={leadingIcon as IconName}
+                className={tcls('size-4 shrink-0', active ? 'text-primary' : 'text-tint-subtle')}
+            />
+        ) : (
+            leadingIcon
+        )
+    ) : null;
+
     if (href) {
         return (
             <RadixDropdownMenu.Item {...rest} asChild>
                 <Link href={href} insights={insights} className={itemClassName} target={target}>
+                    {icon}
                     {children}
                 </Link>
             </RadixDropdownMenu.Item>
@@ -173,6 +195,7 @@ export function DropdownMenuItem(
 
     return (
         <RadixDropdownMenu.Item {...rest} className={tcls('px-3 py-1', itemClassName, className)}>
+            {icon}
             {children}
         </RadixDropdownMenu.Item>
     );

packages/gitbook/src/components/primitives/SegmentedControl.tsx

@@ -0,0 +1,35 @@
+import { type ClassValue, tcls } from '@/lib/tailwind';
+import { Button, type ButtonProps } from './Button';
+
+export function SegmentedControl(props: { children: React.ReactNode; className?: ClassValue }) {
+    const { children, className } = props;
+
+    return (
+        <div
+            role="toolbar"
+            aria-orientation="horizontal"
+            className={tcls(
+                'mb-2 flex flex-wrap gap-1 circular-corners:rounded-3xl rounded-corners:rounded-lg bg-tint p-1',
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+export function SegmentedControlItem(props: ButtonProps) {
+    const { size = 'medium', className, ...rest } = props;
+
+    return (
+        <Button
+            variant="blank"
+            size={size}
+            className={tcls(
+                'shrink grow justify-center whitespace-normal not-contrast-more:data-[active=true]:bg-tint-base',
+                className
+            )}
+            {...rest}
+        />
+    );
+}

packages/gitbook/src/intl/translations/de.ts

@@ -12,8 +12,10 @@ export const de = {
     search_no_results_for: 'Keine Ergebnisse für "${1}".',
     search_no_results: 'Keine Ergebnisse',
     search_results_count: '${1} Ergebnisse',
-    search_scope_space: '${1}',
-    search_scope_all: 'Alle Inhalte',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Alle Inhalte',
+    search_scope_default: 'Beste Match',
+    search_scope_all: 'Alles',
     ask: 'Fragen',
     search_ask: 'Fragen "${1}"',
     search_ask_description: 'Finden Sie die Antwort mit ${1}',
@@ -112,6 +114,10 @@ export const de = {
     view_page_plaintext: 'Diese Seite als Klartext anzeigen',
     open_in: 'Öffnen in ${1}',
     open_in_llms_pre_prompt: 'Lies ${1} und beantworte Fragen zum Inhalt.',
+    connect_mcp_to: 'Mit ${1} verbinden',
+    install_mcp_on: 'MCP-Server auf ${1} installieren',
+    connect_with_mcp: 'Mit MCP verbinden',
+    copy_mcp_url: 'MCP-Server-URL kopieren',
     press_to_confirm: 'Drücke ${1} zum Bestätigen',
     tool_call_skipped: 'Übersprungen "${1}"',
 };

packages/gitbook/src/intl/translations/en.ts

@@ -12,8 +12,10 @@ export const en = {
     search_no_results_for: 'No results for "${1}".',
     search_no_results: 'No results',
     search_results_count: '${1} results',
-    search_scope_space: '${1}',
-    search_scope_all: 'All content',
+    search_scope_current: '${1}',
+    search_scope_extended: 'All content',
+    search_scope_default: 'Best match',
+    search_scope_all: 'Everything',
     ask: 'Ask',
     search_ask: 'Ask "${1}"',
     search_ask_description: 'Find the answer with ${1}',
@@ -109,6 +111,10 @@ export const en = {
     view_page_plaintext: 'View this page as plain text',
     open_in: 'Open in ${1}',
     open_in_llms_pre_prompt: 'Read ${1} and answer questions about the content.',
+    connect_mcp_to: 'Connect to ${1}',
+    install_mcp_on: 'Install MCP Server on ${1}',
+    connect_with_mcp: 'Connect with MCP',
+    copy_mcp_url: 'Copy the MCP Server URL',
     press_to_confirm: 'Press ${1} to confirm',
     tool_call_skipped: 'Skipped "${1}"',
 };

packages/gitbook/src/intl/translations/es.ts

@@ -14,8 +14,10 @@ export const es: TranslationLanguage = {
     search_no_results_for: 'No hay resultados para "${1}".',
     search_no_results: 'No hay resultados',
     search_results_count: '${1} resultados',
-    search_scope_space: '${1}',
-    search_scope_all: 'Todo el contenido',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Todo el contenido',
+    search_scope_default: 'Mejor match',
+    search_scope_all: 'Todo',
     ask: 'Preguntar',
     search_ask: 'Preguntar "${1}"',
     search_ask_description: 'Encuentra la respuesta con ${1}',
@@ -113,6 +115,10 @@ export const es: TranslationLanguage = {
     view_page_plaintext: 'Ver esta página como texto plano',
     open_in: 'Abrir en ${1}',
     open_in_llms_pre_prompt: 'Lee ${1} y responde preguntas sobre el contenido.',
+    connect_mcp_to: 'Conectar a ${1}',
+    install_mcp_on: 'Instalar servidor MCP en ${1}',
+    connect_with_mcp: 'Conectar con MCP',
+    copy_mcp_url: 'Copiar URL del servidor MCP',
     press_to_confirm: 'Presiona ${1} para confirmar',
     tool_call_skipped: 'Omitido "${1}"',
 };

packages/gitbook/src/intl/translations/fr.ts

@@ -12,8 +12,10 @@ export const fr = {
     search_no_results_for: 'Aucun résultat pour « ${1} ».',
     search_no_results: 'Aucun résultat',
     search_results_count: '${1} résultats',
-    search_scope_space: '${1}',
-    search_scope_all: 'Tous les contenus',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Tous les contenus',
+    search_scope_default: 'Meilleur match',
+    search_scope_all: 'Tout',
     ask: 'Poser une question',
     search_ask: 'Demander « ${1} »',
     search_ask_description: 'Trouvez la réponse avec ${1}',
@@ -108,6 +110,10 @@ export const fr = {
     view_page_plaintext: 'Voir en texte brut',
     open_in: 'Ouvrir dans ${1}',
     open_in_llms_pre_prompt: 'Lire ${1} et répondre aux questions sur le contenu.',
+    connect_mcp_to: 'Se connecter à ${1}',
+    install_mcp_on: 'Installer le serveur MCP sur ${1}',
+    connect_with_mcp: 'Se connecter avec MCP',
+    copy_mcp_url: "Copier l'URL du serveur MCP",
     press_to_confirm: 'Appuyez sur ${1} pour confirmer',
     tool_call_skipped: 'Ignoré "${1}"',
 };

packages/gitbook/src/intl/translations/ja.ts

@@ -14,8 +14,10 @@ export const ja: TranslationLanguage = {
     search_no_results_for: '"${1}" の結果はありません。',
     search_no_results: '結果がありません',
     search_results_count: '${1}件の結果',
-    search_scope_space: '${1}',
-    search_scope_all: '全てのコンテンツ',
+    search_scope_current: '${1}',
+    search_scope_extended: '全てのコンテンツ',
+    search_scope_default: '最適なマッチ',
+    search_scope_all: 'すべて',
     ask: '質問する',
     search_ask: '"${1}" を質問する',
     search_ask_description: '${1}で答えを見つける',
@@ -111,6 +113,10 @@ export const ja: TranslationLanguage = {
     view_page_plaintext: 'このページをプレーンテキストで表示',
     open_in: '${1} で開く',
     open_in_llms_pre_prompt: '${1} を読んで内容に関する質問に答えてください。',
+    connect_mcp_to: '${1} に接続',
+    install_mcp_on: '${1} にMCPサーバーをインストール',
+    connect_with_mcp: 'MCPに接続',
+    copy_mcp_url: 'MCPサーバーのURLをコピー',
     press_to_confirm: '確認するには${1}を押してください',
     tool_call_skipped: '"${1}" をスキップしました',
 };

packages/gitbook/src/intl/translations/nl.ts

@@ -14,8 +14,10 @@ export const nl: TranslationLanguage = {
     search_no_results_for: 'Geen resultaten voor "${1}".',
     search_no_results: 'Geen resultaten',
     search_results_count: '${1} resultaten',
-    search_scope_space: '${1}',
-    search_scope_all: 'Alle inhoud',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Alle inhoud',
+    search_scope_default: 'Beste match',
+    search_scope_all: 'Alles',
     ask: 'Vragen',
     search_ask: 'Vraag "${1}"',
     search_ask_description: 'Vind het antwoord met ${1}',
@@ -111,6 +113,10 @@ export const nl: TranslationLanguage = {
     view_page_plaintext: 'Bekijk deze pagina als platte tekst',
     open_in: 'Open in ${1}',
     open_in_llms_pre_prompt: 'Lees ${1} en beantwoord vragen over de inhoud.',
+    connect_mcp_to: 'Verbind met ${1}',
+    install_mcp_on: 'Installeer MCP-server op ${1}',
+    connect_with_mcp: 'Verbind met MCP',
+    copy_mcp_url: 'Kopieer MCP-server URL',
     press_to_confirm: 'Druk op ${1} om te bevestigen',
     tool_call_skipped: '"${1}" overgeslagen',
 };

packages/gitbook/src/intl/translations/no.ts

@@ -14,8 +14,10 @@ export const no: TranslationLanguage = {
     search_no_results_for: 'Ingen resultater for "${1}".',
     search_no_results: 'Ingen resultater',
     search_results_count: '${1} resultater',
-    search_scope_space: '${1}',
-    search_scope_all: 'Alt innhold',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Alt innhold',
+    search_scope_default: 'Beste treff',
+    search_scope_all: 'Alt',
     ask: 'Spør',
     search_ask: 'Spør "${1}"',
     search_ask_description: 'Finn svaret med ${1}',
@@ -112,6 +114,10 @@ export const no: TranslationLanguage = {
     view_page_plaintext: 'Vis denne siden som ren tekst',
     open_in: 'Åpne i ${1}',
     open_in_llms_pre_prompt: 'Les ${1} og besvar spørsmål om innholdet.',
+    connect_mcp_to: 'Koble til ${1}',
+    install_mcp_on: 'Installer MCP-server på ${1}',
+    connect_with_mcp: 'Koble til MCP',
+    copy_mcp_url: 'Kopier MCP-server URL',
     press_to_confirm: 'Trykk ${1} for å bekrefte',
     tool_call_skipped: 'Hoppet over "${1}"',
 };

packages/gitbook/src/intl/translations/pt-br.ts

@@ -12,8 +12,10 @@ export const pt_br = {
     search_no_results_for: 'Sem resultados para "${1}".',
     search_no_results: 'Sem resultados',
     search_results_count: '${1} resultados',
-    search_scope_space: '${1}',
-    search_scope_all: 'Todo o conteúdo',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Todo o conteúdo',
+    search_scope_default: 'Melhor match',
+    search_scope_all: 'Tudo',
     ask: 'Perguntar',
     search_ask: 'Perguntar "${1}"',
     search_ask_description: 'Encontre a resposta com ${1}',
@@ -111,6 +113,10 @@ export const pt_br = {
     view_page_plaintext: 'Ver esta página em texto simples',
     open_in: 'Abrir no ${1}',
     open_in_llms_pre_prompt: 'Leia ${1} e responda perguntas sobre o conteúdo.',
+    connect_mcp_to: 'Conectar a ${1}',
+    install_mcp_on: 'Instalar servidor MCP em ${1}',
+    connect_with_mcp: 'Conectar com MCP',
+    copy_mcp_url: 'Copiar URL do servidor MCP',
     press_to_confirm: 'Pressione ${1} para confirmar',
     tool_call_skipped: 'Pulado "${1}"',
 };

packages/gitbook/src/intl/translations/ru.ts

@@ -12,8 +12,10 @@ export const ru = {
     search_no_results_for: 'Нет результатов для "${1}".',
     search_no_results: 'Нет результатов',
     search_results_count: '${1} — число результатов',
-    search_scope_space: '${1}',
-    search_scope_all: 'Все материалы',
+    search_scope_current: '${1}',
+    search_scope_extended: 'Все материалы',
+    search_scope_default: 'Лучший матч',
+    search_scope_all: 'Всё',
     ask: 'Спросить',
     search_ask: 'Спросить "${1}"',
     search_ask_description: 'Найти ответ с помощью ${1}',
@@ -110,6 +112,10 @@ export const ru = {
     view_page_plaintext: 'Посмотреть как текст без форматирования',
     open_in: 'Открыть в ${1}',
     open_in_llms_pre_prompt: 'Прочитай ${1} и ответь на вопросы о содержимом.',
+    connect_mcp_to: 'Подключиться к ${1}',
+    install_mcp_on: 'Установить MCP-сервер на ${1}',
+    connect_with_mcp: 'Подключиться к MCP',
+    copy_mcp_url: 'Скопировать URL MCP-сервера',
     press_to_confirm: 'Нажмите ${1} для подтверждения',
     tool_call_skipped: 'Пропущен "${1}"',
 };

packages/gitbook/src/intl/translations/zh.ts

@@ -14,8 +14,10 @@ export const zh: TranslationLanguage = {
     search_no_results_for: '没有找到"${1}"的结果。',
     search_no_results: '没有找到结果',
     search_results_count: '${1} 个结果',
-    search_scope_space: '${1}',
-    search_scope_all: '所有内容',
+    search_scope_current: '${1}',
+    search_scope_extended: '所有内容',
+    search_scope_default: '最佳匹配',
+    search_scope_all: '全部',
     ask: '询问',
     search_ask: '询问"${1}"',
     search_ask_description: '利用${1}找到答案',
@@ -108,6 +110,10 @@ export const zh: TranslationLanguage = {
     view_page_plaintext: '以纯文本查看此页面',
     open_in: '在 ${1} 中打开',
     open_in_llms_pre_prompt: '阅读 ${1} 并回答内容相关的问题。',
+    connect_mcp_to: '连接到 ${1}',
+    install_mcp_on: '在 ${1} 上安装 MCP 服务器',
+    connect_with_mcp: '连接 MCP',
+    copy_mcp_url: '复制 MCP 服务器 URL',
     press_to_confirm: '按 ${1} 确认',
     tool_call_skipped: '已跳过 "${1}"',
 };

packages/gitbook/src/lib/utils.ts

@@ -67,6 +67,7 @@ export function defaultCustomization(): api.SiteCustomizationSettings {
         pageActions: {
             externalAI: true,
             markdown: true,
+            mcp: true,
         },
         trademark: {
             enabled: true,

packages/gitbook/src/middleware.ts

@@ -557,6 +557,7 @@ function encodePathInSiteContent(rawPathname: string): {
         case '~gitbook/embed/assistant':
         case '~gitbook/icon':
             return { pathname };
+        case '~gitbook/mcp':
         case 'llms.txt':
         case 'sitemap.xml':
         case 'sitemap-pages.xml':

packages/gitbook/src/routes/robots.ts

@@ -10,23 +10,23 @@ export async function serveRobotsTxt(context: GitBookSiteContext) {
     const isRoot = checkIsRootSiteContext(context);
     const isIndexable = await isSiteIndexable(context);
 
+    const sitemapPath = linker.toPathInSpace(isRoot ? '/sitemap.xml' : '/sitemap-pages.xml');
+    const sitemapUrl = linker.toAbsoluteURL(sitemapPath);
+
     const lines = isIndexable
         ? [
               'User-agent: *',
-              // Disallow other dynamic routes / search queries
-              'Disallow: /*?',
-              // Allow image resizing and icon generation routes for favicons and search results
+              // Disallow only internal search
+              'Disallow: /*?*q=*',
+              'Disallow: /*?*ask=*',
+              // Allow dynamic assets (may include ?)
               'Allow: /~gitbook/image?*',
               'Allow: /~gitbook/icon?*',
+              'Allow: /favicon.ico',
               'Allow: /',
-              `Sitemap: ${linker.toAbsoluteURL(linker.toPathInSpace(isRoot ? '/sitemap.xml' : '/sitemap-pages.xml'))}`,
+              `Sitemap: ${sitemapUrl}`,
           ]
         : ['User-agent: *', 'Disallow: /'];
 
-    const robotsTxt = lines.join('\n');
-    return new Response(robotsTxt, {
-        headers: {
-            'Content-Type': 'text/plain',
-        },
-    });
+    return new Response(lines.join('\n'), { headers: { 'Content-Type': 'text/plain' } });
 }

packages/gitbook/tailwind.config.ts

@@ -81,6 +81,9 @@ const config: Config = {
                 ],
                 var: ['var(--font-family)'],
             },
+            fontSize: {
+                xxs: ['0.625rem', { lineHeight: '0.75rem' }],
+            },
             colors: {
                 // Dynamic colors matching the customization settings
 

packages/gitbook/tests/mcp.test.ts

@@ -0,0 +1,30 @@
+import { expect, it } from 'bun:test';
+import { Client } from '@modelcontextprotocol/sdk/client';
+import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
+import { getContentTestURL } from './utils';
+
+it('should expose a MCP server', async () => {
+    const client = new Client({
+        name: 'test',
+        version: '1.0.0',
+    });
+
+    await client.connect(
+        new StreamableHTTPClientTransport(
+            new URL(getContentTestURL('https://gitbook.com/docs/~gitbook/mcp'))
+        )
+    );
+
+    const tools = await client.listTools();
+    expect(tools.tools[0]?.name).toBe('searchDocumentation');
+
+    const response = await client.callTool({
+        name: 'searchDocumentation',
+        arguments: {
+            query: 'git',
+        },
+    });
+
+    // @ts-expect-error - response.content is of type unknown
+    expect(response.content[0]?.text).toContain('Title:');
+});

packages/gitbook/tests/pagespeed-testing.ts

@@ -1,34 +0,0 @@
-import psi from 'psi';
-
-import { getContentTestURL } from './utils';
-
-interface Test {
-    url: string;
-    strategy: 'mobile' | 'desktop';
-    threshold: number;
-}
-
-// We use low values for now to avoid failing the tests
-// and to be able to see the results, and only catch major regressions.
-const tests: Array<Test> = [
-    {
-        url: 'https://gitbook.com/docs',
-        strategy: 'desktop',
-        threshold: 60,
-    },
-
-    {
-        url: 'https://gitbook.com/docs',
-        strategy: 'mobile',
-        threshold: 30,
-    },
-];
-
-for (const test of tests) {
-    const url = getContentTestURL(test.url);
-    await psi.output(url, {
-        strategy: test.strategy,
-        threshold: test.threshold,
-        key: process.env.PAGESPEED_API_KEY,
-    });
-}

packages/icons/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gitbook/icons
 
+## 0.3.1
+
+### Patch Changes
+
+- 262afa3: Fix types for custom icons and update list of icons
+
 ## 0.3.0
 
 ### Minor Changes

packages/icons/package.json

@@ -16,13 +16,13 @@
             "default": "./src/style.css"
         }
     },
-    "version": "0.3.0",
+    "version": "0.3.1",
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
         "@fortawesome/fontawesome-free": "^6.6.0"
     },
     "optionalDependencies": {
-        "@gitbook/fontawesome-pro": "1.0.11"
+        "@gitbook/fontawesome-pro": "1.0.15"
     },
     "devDependencies": {
         "typescript": "^5.5.3"

packages/icons/src/types.ts

@@ -18,6 +18,13 @@ export enum IconStyle {
     SharpThin = 'sharp-thin',
 }
 
-type CustomIconName = 'gitbook';
+type CustomIconName =
+    | 'gitbook'
+    | 'gitbook-assistant'
+    | 'cursor'
+    | 'vscode'
+    | 'mcp'
+    | 'chatgpt'
+    | 'claude';
 
 export type IconName = BasicIconName | CustomIconName;

packages/react-contentkit/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @gitbook/react-contentkit
 
+## 0.7.5
+
+### Patch Changes
+
+- Updated dependencies [262afa3]
+  - @gitbook/icons@0.3.1
+
 ## 0.7.4
 
 ### Patch Changes

packages/react-contentkit/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gitbook/react-contentkit",
-    "version": "0.7.4",
+    "version": "0.7.5",
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",

packages/react-openapi/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gitbook/react-openapi
 
+## 1.4.3
+
+### Patch Changes
+
+- Updated dependencies [6da3655]
+  - @gitbook/expr@1.2.0
+
+## 1.4.2
+
+### Patch Changes
+
+- Updated dependencies [3548fa6]
+  - @gitbook/expr@1.1.1
+
 ## 1.4.1
 
 ### Patch Changes

packages/react-openapi/package.json

@@ -8,7 +8,7 @@
             "default": "./dist/index.js"
         }
     },
-    "version": "1.4.1",
+    "version": "1.4.3",
     "sideEffects": false,
     "dependencies": {
         "@gitbook/expr": "workspace:*",