New translations translation.json (Portuguese, Brazilian)

[ci skip]

.dockerignore

@@ -1,5 +1,6 @@
 node_modules
 .git
-.gitignore
 dist
-data
+/data
+.env*
+.nx

.env.example

@@ -43,7 +43,23 @@ POSTMARK_TOKEN=
 # for custom drawio server
 DRAWIO_URL=
 
+# Gotenberg URL for server-side PDF export
+GOTENBERG_URL=
+
 DISABLE_TELEMETRY=false
 
+# Allow other sites to embed Docmost in an iframe.
+IFRAME_EMBED_ALLOWED=false
+
+# Only used when IFRAME_EMBED_ALLOWED=true. When empty, any origin is allowed.
+# Example: https://intranet.example.com,https://portal.example.com
+IFRAME_ALLOWED_ORIGINS=
+
 # Enable debug logging in production (default: false)
 DEBUG_MODE=false
+
+# Log database queries
+DEBUG_DB=false
+
+# Log http requests
+LOG_HTTP=false

.github/workflows/release.yml

@@ -0,0 +1,154 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version tag (e.g. v0.25.3)'
+        required: true
+
+permissions:
+  contents: write
+
+env:
+  VERSION: ${{ inputs.version || github.ref_name }}
+
+jobs:
+  build:
+    strategy:
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+            suffix: amd64
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+            suffix: arm64
+    runs-on: ${{ matrix.runner }}
+    steps:
+      - name: Generate token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.BUILD_APP_ID }}
+          private-key: ${{ secrets.BUILD_APP_PRIVATE_KEY }}
+          owner: ${{ github.repository_owner }}
+
+      - name: Checkout with submodules
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ steps.app-token.outputs.token }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          outputs: type=image,name=docmost/docmost,push-by-digest=true,name-canonical=true,push=true
+          cache-from: type=gha,scope=${{ matrix.suffix }}
+          cache-to: type=gha,scope=${{ matrix.suffix }},mode=max
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digest-${{ matrix.suffix }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+
+      - name: Strip v prefix
+        id: strip-v
+        run: echo "version=${VERSION#v}" >> "$GITHUB_OUTPUT"
+        
+      - name: Export Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          push: false
+          tags: |
+            docmost/docmost:latest
+            docmost/docmost:${{ steps.strip-v.outputs.version }}
+          outputs: type=docker,dest=docmost-${{ matrix.suffix }}.docker.tar
+          cache-from: type=gha,scope=${{ matrix.suffix }}
+
+      - name: Compress image
+        run: gzip docmost-${{ matrix.suffix }}.docker.tar
+
+      - name: Upload image archive
+        uses: actions/upload-artifact@v4
+        with:
+          name: docker-image-${{ matrix.suffix }}
+          path: docmost-${{ matrix.suffix }}.docker.tar.gz
+          if-no-files-found: error
+
+  release:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v4
+        with:
+          pattern: digest-*
+          path: /tmp/digests
+          merge-multiple: true
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract metadata for tags
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: docmost/docmost
+          tags: |
+            type=semver,pattern={{version}},value=${{ env.VERSION }}
+            type=semver,pattern={{major}}.{{minor}},value=${{ env.VERSION }},enable=${{ !contains(env.VERSION, '-') }}
+            type=raw,value=latest,enable=${{ !contains(env.VERSION, '-') }}
+
+      - name: Create manifest list and push
+        working-directory: /tmp/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'docmost/docmost@sha256:%s ' *)
+
+      - name: Download image archives
+        uses: actions/download-artifact@v4
+        with:
+          pattern: docker-image-*
+          path: /tmp/images
+          merge-multiple: true
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ env.VERSION }}
+          files: |
+            /tmp/images/docmost-amd64.docker.tar.gz
+            /tmp/images/docmost-arm64.docker.tar.gz
+          draft: true

Dockerfile

@@ -1,13 +1,14 @@
 FROM node:22-slim AS base
 LABEL org.opencontainers.image.source="https://github.com/docmost/docmost"
 
+RUN npm install -g pnpm@10.4.0
+
 FROM base AS builder
 
 WORKDIR /app
 
 COPY . .
 
-RUN npm install -g pnpm@10.4.0
 RUN pnpm install --frozen-lockfile
 RUN pnpm build
 
@@ -31,12 +32,11 @@ COPY --from=builder /app/packages/editor-ext/package.json /app/packages/editor-e
 # Copy root package files
 COPY --from=builder /app/package.json /app/package.json
 COPY --from=builder /app/pnpm*.yaml /app/
+COPY --from=builder /app/.npmrc /app/.npmrc
 
 # Copy patches
 COPY --from=builder /app/patches /app/patches
 
-RUN npm install -g pnpm@10.4.0
-
 RUN chown -R node:node /app
 
 USER node

apps/client/package.json

@@ -1,86 +1,95 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.24.1",
+  "version": "0.90.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
-    "@casl/ability": "^6.7.2",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
-    "@casl/react": "^4.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
+    "@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
+    "@casl/react": "5.0.1",
     "@docmost/editor-ext": "workspace:*",
-    "@emoji-mart/data": "^1.2.1",
+    "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@emoji-mart/react": "^1.1.1",
+    "@mantine/core": "8.3.18",
-    "@excalidraw/excalidraw": "0.18.0-864353b",
+    "@mantine/dates": "8.3.18",
-    "@mantine/core": "^8.1.3",
+    "@mantine/form": "8.3.18",
-    "@mantine/dates": "^8.3.2",
+    "@mantine/hooks": "8.3.18",
-    "@mantine/form": "^8.1.3",
+    "@mantine/modals": "8.3.18",
-    "@mantine/hooks": "^8.1.3",
+    "@mantine/notifications": "8.3.18",
-    "@mantine/modals": "^8.1.3",
+    "@mantine/spotlight": "8.3.18",
-    "@mantine/notifications": "^8.1.3",
+    "@slidoapp/emoji-mart": "5.8.7",
-    "@mantine/spotlight": "^8.1.3",
+    "@slidoapp/emoji-mart-data": "1.2.4",
-    "@tabler/icons-react": "^3.34.0",
+    "@slidoapp/emoji-mart-react": "1.1.5",
-    "@tanstack/react-query": "^5.80.6",
+    "@tabler/icons-react": "3.40.0",
-    "@tiptap/extension-character-count": "^2.10.3",
+    "@tanstack/react-query": "5.90.17",
-    "alfaaz": "^1.1.0",
+    "@tanstack/react-virtual": "3.13.24",
-    "axios": "^1.13.2",
+    "alfaaz": "1.1.0",
-    "clsx": "^2.1.1",
+    "axios": "1.16.0",
-    "emoji-mart": "^5.6.0",
+    "blueimp-load-image": "5.16.0",
-    "file-saver": "^2.0.5",
+    "clsx": "2.1.1",
-    "highlightjs-sap-abap": "^0.3.0",
+    "file-saver": "2.0.5",
-    "i18next": "^23.14.0",
+    "highlightjs-sap-abap": "0.3.0",
-    "i18next-http-backend": "^2.6.1",
+    "i18next": "25.10.1",
-    "jotai": "^2.12.5",
+    "i18next-http-backend": "3.0.6",
-    "jotai-optics": "^0.4.0",
+    "jotai": "2.18.1",
-    "js-cookie": "^3.0.5",
+    "jotai-optics": "0.4.0",
-    "jwt-decode": "^4.0.0",
+    "js-cookie": "3.0.5",
-    "katex": "0.16.22",
+    "jwt-decode": "4.0.0",
-    "lowlight": "^3.3.0",
+    "katex": "0.16.40",
-    "mantine-form-zod-resolver": "^1.3.0",
+    "lowlight": "3.3.0",
-    "mermaid": "^11.11.0",
+    "mantine-form-zod-resolver": "1.3.0",
-    "mitt": "^3.0.1",
+    "mermaid": "11.15.0",
-    "posthog-js": "^1.255.1",
+    "mitt": "3.0.1",
-    "react": "^18.3.1",
+    "posthog-js": "1.372.2",
-    "react-arborist": "3.4.0",
+    "react": "18.3.1",
-    "react-clear-modal": "^2.0.15",
+    "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.1",
+    "react-drawio": "1.0.7",
-    "react-error-boundary": "^4.1.2",
+    "react-error-boundary": "6.1.1",
-    "react-helmet-async": "^2.0.5",
+    "react-helmet-async": "3.0.0",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "16.5.8",
-    "react-router-dom": "^7.0.1",
+    "react-router-dom": "7.13.1",
-    "semver": "^7.7.2",
+    "semver": "7.7.4",
-    "socket.io-client": "^4.8.1",
+    "socket.io-client": "4.8.3",
-    "tippy.js": "^6.3.7",
+    "zod": "4.3.6"
-    "tiptap-extension-global-drag-handle": "^0.1.18",
-    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "9.28.0",
-    "@tanstack/eslint-plugin-query": "^5.62.1",
+    "@tanstack/eslint-plugin-query": "5.94.4",
-    "@types/file-saver": "^2.0.7",
+    "@testing-library/jest-dom": "6.6.0",
-    "@types/js-cookie": "^3.0.6",
+    "@testing-library/react": "16.1.0",
-    "@types/katex": "^0.16.7",
+    "@types/blueimp-load-image": "5.16.6",
+    "@types/file-saver": "2.0.7",
+    "@types/js-cookie": "3.0.6",
+    "@types/katex": "0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "^18.3.12",
+    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "6.0.1",
-    "eslint": "^9.15.0",
+    "eslint": "9.28.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-react-refresh": "0.5.2",
-    "globals": "^15.13.0",
+    "globals": "15.13.0",
-    "optics-ts": "^2.4.1",
+    "jsdom": "25.0.0",
-    "postcss": "^8.4.49",
+    "optics-ts": "2.4.1",
-    "postcss-preset-mantine": "^1.17.0",
+    "postcss": "8.5.14",
-    "postcss-simple-vars": "^7.0.1",
+    "postcss-preset-mantine": "1.18.0",
-    "prettier": "^3.4.1",
+    "postcss-simple-vars": "7.0.1",
-    "typescript": "^5.7.2",
+    "prettier": "3.8.1",
-    "typescript-eslint": "^8.17.0",
+    "typescript": "5.9.3",
-    "vite": "^7.2.4"
+    "typescript-eslint": "8.57.1",
+    "vite": "8.0.5",
+    "vitest": "4.1.6"
   }
 }

apps/client/public/locales/en-US/translation.json

@@ -7,6 +7,7 @@
   "Add members": "Add members",
   "Add to groups": "Add to groups",
   "Add space members": "Add space members",
+  "Add to favorites": "Add to favorites",
   "Admin": "Admin",
   "Are you sure you want to delete this group? Members will lose access to resources this group has access to.": "Are you sure you want to delete this group? Members will lose access to resources this group has access to.",
   "Are you sure you want to delete this page?": "Are you sure you want to delete this page?",
@@ -29,6 +30,7 @@
   "Choose your preferred interface language.": "Choose your preferred interface language.",
   "Choose your preferred page width.": "Choose your preferred page width.",
   "Confirm": "Confirm",
+  "Copy as Markdown": "Copy as Markdown",
   "Copy link": "Copy link",
   "Create": "Create",
   "Create group": "Create group",
@@ -69,10 +71,14 @@
   "Export": "Export",
   "Failed to create page": "Failed to create page",
   "Failed to delete page": "Failed to delete page",
+  "Failed to restore page": "Failed to restore page",
   "Failed to fetch recent pages": "Failed to fetch recent pages",
   "Failed to import pages": "Failed to import pages",
   "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
   "Failed to update data": "Failed to update data",
+  "Favorite spaces": "Favorite spaces",
+  "Favorite spaces appear here": "Favorite spaces appear here",
+  "Favorites": "Favorites",
   "Full access": "Full access",
   "Full page width": "Full page width",
   "Full width": "Full width",
@@ -91,6 +97,7 @@
   "Invite by email": "Invite by email",
   "Invite members": "Invite members",
   "Invite new members": "Invite new members",
+  "Invite People": "Invite People",
   "Invited members who are yet to accept their invitation will appear here.": "Invited members who are yet to accept their invitation will appear here.",
   "Invited members will be granted access to spaces the groups can access": "Invited members will be granted access to spaces the groups can access",
   "Join the workspace": "Join the workspace",
@@ -115,6 +122,7 @@
   "No group found": "No group found",
   "No page history saved yet.": "No page history saved yet.",
   "No pages yet": "No pages yet",
+  "No shared pages": "No shared pages",
   "No results found...": "No results found...",
   "No user found": "No user found",
   "Overview": "Overview",
@@ -122,11 +130,14 @@
   "page": "page",
   "Page deleted successfully": "Page deleted successfully",
   "Page history": "Page history",
+  "Select version": "Select version",
+  "Highlight changes": "Highlight changes",
   "Page import is in progress. Please do not close this tab.": "Page import is in progress. Please do not close this tab.",
   "Pages": "Pages",
   "pages": "pages",
   "Password": "Password",
   "Password changed successfully": "Password changed successfully",
+  "People": "People",
   "Pending": "Pending",
   "Please confirm your action": "Please confirm your action",
   "Preferences": "Preferences",
@@ -134,6 +145,7 @@
   "Profile": "Profile",
   "Recently updated": "Recently updated",
   "Remove": "Remove",
+  "Remove from favorites": "Remove from favorites",
   "Remove group member": "Remove group member",
   "Remove space member": "Remove space member",
   "Restore": "Restore",
@@ -170,6 +182,7 @@
   "Successfully imported": "Successfully imported",
   "Successfully restored": "Successfully restored",
   "System settings": "System settings",
+  "Templates": "Templates",
   "Theme": "Theme",
   "To change your email, you have to enter your password and new email.": "To change your email, you have to enter your password and new email.",
   "Toggle full page width": "Toggle full page width",
@@ -204,9 +217,14 @@
   "Reply...": "Reply...",
   "Error loading comments.": "Error loading comments.",
   "No comments yet.": "No comments yet.",
+  "No open comments.": "No open comments.",
+  "No resolved comments.": "No resolved comments.",
+  "Add a comment...": "Add a comment...",
   "Edit comment": "Edit comment",
   "Delete comment": "Delete comment",
   "Are you sure you want to delete this comment?": "Are you sure you want to delete this comment?",
+  "Delete chat": "Delete chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Are you sure you want to delete '{{title}}'? This action cannot be undone.",
   "Comment created successfully": "Comment created successfully",
   "Error creating comment": "Error creating comment",
   "Comment updated successfully": "Comment updated successfully",
@@ -225,7 +243,6 @@
   "Are you sure you want to unresolve this comment thread?": "Are you sure you want to unresolve this comment thread?",
   "Resolved": "Resolved",
   "No active comments.": "No active comments.",
-  "No resolved comments.": "No resolved comments.",
   "Revoke invitation": "Revoke invitation",
   "Revoke": "Revoke",
   "Don't": "Don't",
@@ -253,12 +270,16 @@
   "Export failed:": "Export failed:",
   "export error": "export error",
   "Export page": "Export page",
+  "Export successful": "Export successful",
   "Export space": "Export space",
   "Export {{type}}": "Export {{type}}",
   "File exceeds the {{limit}} attachment limit": "File exceeds the {{limit}} attachment limit",
   "Align left": "Align left",
   "Align right": "Align right",
   "Align center": "Align center",
+  "Alt text": "Alt text",
+  "Describe this for accessibility.": "Describe this for accessibility.",
+  "Add a description": "Add a description",
   "Justify": "Justify",
   "Merge cells": "Merge cells",
   "Split cell": "Split cell",
@@ -269,7 +290,21 @@
   "Add row above": "Add row above",
   "Add row below": "Add row below",
   "Delete table": "Delete table",
+  "Add column left": "Add column left",
+  "Add column right": "Add column right",
+  "Clear cell": "Clear cell",
+  "Clear cells": "Clear cells",
+  "Toggle header cell": "Toggle header cell",
+  "Toggle header column": "Toggle header column",
+  "Toggle header row": "Toggle header row",
+  "Move column left": "Move column left",
+  "Move column right": "Move column right",
+  "Move row down": "Move row down",
+  "Move row up": "Move row up",
+  "Sort A → Z": "Sort A → Z",
+  "Sort Z → A": "Sort Z → A",
   "Info": "Info",
+  "Note": "Note",
   "Success": "Success",
   "Warning": "Warning",
   "Danger": "Danger",
@@ -280,6 +315,11 @@
   "Save & Exit": "Save & Exit",
   "Double-click to edit Excalidraw diagram": "Double-click to edit Excalidraw diagram",
   "Paste link": "Paste link",
+  "Paste link or search pages": "Paste link or search pages",
+  "Link to web page": "Link to web page",
+  "Recents": "Recents",
+  "Page or URL": "Page or URL",
+  "Link title": "Link title",
   "Edit link": "Edit link",
   "Remove link": "Remove link",
   "Add link": "Add link",
@@ -325,9 +365,14 @@
   "Create block quote.": "Create block quote.",
   "Insert code snippet.": "Insert code snippet.",
   "Insert horizontal rule divider": "Insert horizontal rule divider",
+  "Page break": "Page break",
+  "Insert a page break for printing.": "Insert a page break for printing.",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
+  "Upload any audio from your device.": "Upload any audio from your device.",
   "Upload any file from your device.": "Upload any file from your device.",
+  "Uploading {{name}}": "Uploading {{name}}",
+  "Uploading file": "Uploading file",
   "Table": "Table",
   "Insert a table.": "Insert a table.",
   "Insert collapsible block.": "Insert collapsible block.",
@@ -335,6 +380,12 @@
   "Divider": "Divider",
   "Quote": "Quote",
   "Image": "Image",
+  "Audio": "Audio",
+  "Embed PDF": "Embed PDF",
+  "Upload and embed a PDF file.": "Upload and embed a PDF file.",
+  "Embed as PDF": "Embed as PDF",
+  "Failed to load PDF": "Failed to load PDF",
+  "Convert to attachment": "Convert to attachment",
   "File attachment": "File attachment",
   "Toggle block": "Toggle block",
   "Callout": "Callout",
@@ -349,9 +400,27 @@
   "Insert current date": "Insert current date",
   "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
   "Multiple": "Multiple",
+  "Turn into": "Turn into",
+  "Text align": "Text align",
+  "This page may have been deleted, moved, or you may not have access.": "This page may have been deleted, moved, or you may not have access.",
+  "Go to homepage": "Go to homepage",
+  "Pages you create will show up here.": "Pages you create will show up here.",
   "Heading {{level}}": "Heading {{level}}",
   "Toggle title": "Toggle title",
   "Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
+  "Write...": "Write...",
+  "Column count": "Column count",
+  "{{count}} Columns": "{{count}} Columns",
+  "{{count}} command available_one": "1 command available",
+  "{{count}} command available_other": "{{count}} commands available",
+  "{{count}} result available_one": "1 result available",
+  "{{count}} result available_other": "{{count}} results available",
+  "Equal columns": "Equal columns",
+  "Left sidebar": "Left sidebar",
+  "Right sidebar": "Right sidebar",
+  "Wide center": "Wide center",
+  "Left wide": "Left wide",
+  "Right wide": "Right wide",
   "Names do not match": "Names do not match",
   "Today, {{time}}": "Today, {{time}}",
   "Yesterday, {{time}}": "Yesterday, {{time}}",
@@ -370,10 +439,18 @@
   "{{latestVersion}} is available": "{{latestVersion}} is available",
   "Default page edit mode": "Default page edit mode",
   "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
+  "Choose {{format}} file": "Choose {{format}} file",
   "Reading": "Reading",
   "Delete member": "Delete member",
   "Member deleted successfully": "Member deleted successfully",
   "Are you sure you want to delete this workspace member? This action is irreversible.": "Are you sure you want to delete this workspace member? This action is irreversible.",
+  "Deactivate member": "Deactivate member",
+  "Activate member": "Activate member",
+  "Are you sure you want to deactivate this workspace member? They will no longer be able to access this workspace.": "Are you sure you want to deactivate this workspace member? They will no longer be able to access this workspace.",
+  "Are you sure you want to activate this workspace member?": "Are you sure you want to activate this workspace member?",
+  "Deactivate": "Deactivate",
+  "Activate": "Activate",
+  "Deactivated": "Deactivated",
   "Move": "Move",
   "Move page": "Move page",
   "Move page to a different space.": "Move page to a different space.",
@@ -401,6 +478,25 @@
   "Share deleted successfully": "Share deleted successfully",
   "Share not found": "Share not found",
   "Failed to share page": "Failed to share page",
+  "Disable public sharing": "Disable public sharing",
+  "Prevent members from sharing pages publicly.": "Prevent members from sharing pages publicly.",
+  "Toggle public sharing": "Toggle public sharing",
+  "Toggle space public sharing": "Toggle space public sharing",
+  "Allow viewers to comment": "Allow viewers to comment",
+  "Allow viewers to add comments on pages in this space.": "Allow viewers to add comments on pages in this space.",
+  "Toggle viewer comments": "Toggle viewer comments",
+  "Public sharing is disabled at the workspace level": "Public sharing is disabled at the workspace level",
+  "Prevent pages in this space from being shared publicly.": "Prevent pages in this space from being shared publicly.",
+  "Page permissions": "Page permissions",
+  "Control who can view and edit individual pages. Available with an enterprise license.": "Control who can view and edit individual pages. Available with an enterprise license.",
+  "Enable public sharing": "Enable public sharing",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Are you sure you want to enable public sharing? Members will be able to share pages publicly.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.",
+  "Are you sure you want to enable public sharing for this space?": "Are you sure you want to enable public sharing for this space?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.",
+  "Public sharing is disabled": "Public sharing is disabled",
+  "Public sharing has been disabled at the workspace level.": "Public sharing has been disabled at the workspace level.",
+  "Public sharing has been disabled for this space.": "Public sharing has been disabled for this space.",
   "Copy page": "Copy page",
   "Copy page to a different space.": "Copy page to a different space.",
   "Page copied successfully": "Page copied successfully",
@@ -415,6 +511,7 @@
   "Replace (Enter)": "Replace (Enter)",
   "Replace all (Ctrl+Alt+Enter)": "Replace all (Ctrl+Alt+Enter)",
   "Replace all": "Replace all",
+  "View all": "View all",
   "View all spaces": "View all spaces",
   "Error": "Error",
   "Failed to disable MFA": "Failed to disable MFA",
@@ -483,7 +580,7 @@
   "Enter one of your backup codes. Each backup code can only be used once.": "Enter one of your backup codes. Each backup code can only be used once.",
   "Verify": "Verify",
   "Trash": "Trash",
-  "Pages in trash will be permanently deleted after 30 days.": "Pages in trash will be permanently deleted after 30 days.",
+  "Pages in trash will be permanently deleted after {{count}} days.": "Pages in trash will be permanently deleted after {{count}} days.",
   "Deleted": "Deleted",
   "No pages in trash": "No pages in trash",
   "Permanently delete page?": "Permanently delete page?",
@@ -492,6 +589,8 @@
   "Move to trash": "Move to trash",
   "Move this page to trash?": "Move this page to trash?",
   "Restore page": "Restore page",
+  "Permanently delete": "Permanently delete",
+  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
   "Page moved to trash": "Page moved to trash",
   "Page restored successfully": "Page restored successfully",
   "Deleted by": "Deleted by",
@@ -535,39 +634,455 @@
   "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
   "Image removed successfully": "Image removed successfully",
   "API key": "API key",
-  "API key created successfully": "API key created successfully",
   "API keys": "API keys",
   "API management": "API management",
-  "Are you sure you want to revoke this API key": "Are you sure you want to revoke this API key",
-  "Create API Key": "Create API Key",
   "Custom expiration date": "Custom expiration date",
   "Enter a descriptive token name": "Enter a descriptive token name",
   "Expiration": "Expiration",
   "Expired": "Expired",
   "Expires": "Expires",
-  "I've saved my API key": "I've saved my API key",
   "Last use": "Last Used",
   "No API keys found": "No API keys found",
   "No expiration": "No expiration",
-  "Revoke API key": "Revoke API key",
   "Revoked successfully": "Revoked successfully",
   "Select expiration date": "Select expiration date",
   "This action cannot be undone. Any applications using this API key will stop working.": "This action cannot be undone. Any applications using this API key will stop working.",
-  "Update API key": "Update API key",
+  "Update": "Update",
+  "Update {{credential}}": "Update {{credential}}",
   "Manage API keys for all users in the workspace": "Manage API keys for all users in the workspace",
+  "Restrict API key creation to admins": "Restrict API key creation to admins",
+  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Only admins and owners can create new API keys. Existing member keys will continue to work.",
+  "Toggle restrict API keys to admins": "Toggle restrict API keys to admins",
+  "API key creation is restricted to admins by your workspace administrator.": "API key creation is restricted to admins by your workspace administrator.",
   "AI settings": "AI settings",
   "AI search": "AI search",
   "AI Answer": "AI Answer",
   "Ask AI": "Ask AI",
   "AI is thinking...": "AI is thinking...",
+  "Thinking": "Thinking",
   "Ask a question...": "Ask a question...",
-  "AI-powered search (Ask AI)": "AI-powered search (Ask AI)",
+  "AI Answers": "AI Answers",
+  "AI-powered search (AI Answers)": "AI-powered search (AI Answers)",
   "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
   "Toggle AI search": "Toggle AI search",
+  "Generative AI (Ask AI)": "Generative AI (Ask AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
+  "Toggle generative AI": "Toggle generative AI",
+  "Upgrade your plan": "Upgrade your plan",
+  "Available with a paid license": "Available with a paid license",
+  "Upgrade your license tier.": "Upgrade your license tier.",
+  "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.": "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+  "AI & MCP": "AI & MCP",
+  "AI": "AI",
+  "MCP": "MCP",
+  "Model Context Protocol (MCP)": "Model Context Protocol (MCP)",
+  "Enable the MCP server to allow AI assistants and tools to interact with your workspace content.": "Enable the MCP server to allow AI assistants and tools to interact with your workspace content.",
+  "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.": "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+  "MCP Server URL": "MCP Server URL",
+  "Use your API key for authentication. You can manage API keys in your account settings.": "Use your API key for authentication. You can manage API keys in your account settings.",
+  "Supported tools": "Supported tools",
+  "Your workspace has MCP enabled. Use your API key to connect AI assistants.": "Your workspace has MCP enabled. Use your API key to connect AI assistants.",
+  "MCP server URL:": "MCP server URL:",
+  "Learn more": "Learn more",
+  "Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details.": "Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details.",
+  "View the <anchor>API documentation</anchor> for usage details.": "View the <anchor>API documentation</anchor> for usage details.",
+  "View the <anchor>MCP documentation</anchor>.": "View the <anchor>MCP documentation</anchor>.",
   "Sources": "Sources",
-  "Ask AI not available for attachments": "Ask AI not available for attachments",
+  "AI Answers not available for attachments": "AI Answers not available for attachments",
   "No answer available": "No answer available",
   "Background color": "Background color",
   "Highlight color": "Highlight color",
-  "Remove color": "Remove color"
+  "Remove color": "Remove color",
+  "Notifications": "Notifications",
+  "No notifications": "No notifications",
+  "No unread notifications": "No unread notifications",
+  "All notifications": "All notifications",
+  "Unread only": "Unread only",
+  "Mark all as read": "Mark all as read",
+  "Mark as read": "Mark as read",
+  "More options": "More options",
+  "<bold>{{name}}</bold> mentioned you in a comment": "<bold>{{name}}</bold> mentioned you in a comment",
+  "<bold>{{name}}</bold> commented on a page": "<bold>{{name}}</bold> commented on a page",
+  "<bold>{{name}}</bold> resolved a comment": "<bold>{{name}}</bold> resolved a comment",
+  "<bold>{{name}}</bold> mentioned you on a page": "<bold>{{name}}</bold> mentioned you on a page",
+  "<bold>{{name}}</bold> gave you edit access to a page": "<bold>{{name}}</bold> gave you edit access to a page",
+  "<bold>{{name}}</bold> gave you view access to a page": "<bold>{{name}}</bold> gave you view access to a page",
+  "<bold>{{name}}</bold> updated a page": "<bold>{{name}}</bold> updated a page",
+  "Watch page": "Watch page",
+  "Stop watching": "Stop watching",
+  "Watch space": "Watch space",
+  "Stop watching space": "Stop watching space",
+  "Email notifications": "Email notifications",
+  "Page updates": "Page updates",
+  "Get notified when pages you watch are updated.": "Receive notifications when the pages you watch are updated.",
+  "Page mentions": "Page mentions",
+  "Get notified when someone mentions you on a page.": "Receive notifications when someone mentions you on a page.",
+  "Comment mentions": "Comment mentions",
+  "Get notified when someone mentions you in a comment.": "Receive notifications when someone mentions you in a comment.",
+  "New comments": "New comments",
+  "Get notified about new comments on threads you participate in.": "Receive notifications about new comments in threads you are participating in.",
+  "Resolved comments": "Resolved comments",
+  "Get notified when your comment is resolved.": "Receive a notification when your comment is resolved.",
+  "You are now watching this page": "You’re now watching this page",
+  "You are no longer watching this page": "You’re no longer watching this page",
+  "You are now watching this space": "You’re now watching this space",
+  "You are no longer watching this space": "You’re no longer watching this space",
+  "Direct": "Direct",
+  "Updates": "Updates",
+  "Today": "Today",
+  "Yesterday": "Yesterday",
+  "This week": "This week",
+  "Older": "Older",
+  "Restricted page": "Restricted page",
+  "Restricted pages cannot be shared publicly.": "Restricted pages cannot be shared publicly.",
+  "Restricted by parent": "Restricted by parent",
+  "Restricted": "Restricted",
+  "Open": "Open",
+  "Inherits restrictions from ancestor page": "Inherits restrictions from ancestor page",
+  "Only people listed below can access this page": "Only people listed below can access this page",
+  "Everyone in this space can access": "Everyone in this space can access",
+  "No additional restrictions on this page": "No additional restrictions on this page",
+  "Only specific people can access": "Only specific people can access",
+  "Use only inherited restrictions": "Use only inherited restrictions",
+  "Add restrictions on top of inherited": "Add restrictions on top of inherited",
+  "Inherited restriction": "Inherited restriction",
+  "Access limited by": "Access limited by",
+  "Restrict access to control who can view and edit this page": "Restrict access to control who can view and edit this page",
+  "Add additional restrictions specific to this page": "Add additional restrictions specific to this page",
+  "Access": "Access",
+  "People with access": "People with access",
+  "Remove all": "Remove all",
+  "Remove access": "Remove access",
+  "Remove all access": "Remove all access",
+  "Are you sure you want to remove this member's access to the page?": "Are you sure you want to remove this member's access to the page?",
+  "Are you sure you want to remove all specific access? This will make the page open to everyone in the space.": "Are you sure you want to remove all specific access? This will make the page open to everyone in the space.",
+  "Trash retention": "Trash retention",
+  "Pages in trash will be permanently deleted after this period.": "Pages in trash will be permanently deleted after this period.",
+  "Trash retention updated": "Trash retention updated",
+  "Failed to update trash retention": "Failed to update trash retention",
+  "Removed page restriction": "Removed page restriction",
+  "Added page permission": "Added page permission",
+  "Removed page permission": "Removed page permission",
+  "day": "day",
+  "days": "days",
+  "week": "week",
+  "weeks": "weeks",
+  "month": "month",
+  "months": "months",
+  "year": "year",
+  "years": "years",
+  "Period": "Period",
+  "Fixed date": "Fixed date",
+  "Indefinitely": "Indefinitely",
+  "Days": "Days",
+  "Weeks": "Weeks",
+  "Months": "Months",
+  "Years": "Years",
+  "Pick a date": "Pick a date",
+  "Maximum is {{max}} {{unit}} for this unit": "Maximum is {{max}} {{unit}} for this unit",
+  "Never expires. Verifiers can re-verify at any time.": "Never expires. Verifiers can re-verify at any time.",
+  "Verified": "Verified",
+  "Review needed": "Review needed",
+  "Verification expired": "Verification expired",
+  "Draft": "Draft",
+  "In Approval": "In Approval",
+  "In approval": "In approval",
+  "Approved": "Approved",
+  "Obsolete": "Obsolete",
+  "Expiring": "Expiring",
+  "Set up verification": "Set up verification",
+  "Verify page": "Verify page",
+  "Page verification": "Page verification",
+  "Add verification": "Add verification",
+  "Edit verification": "Edit verification",
+  "Search by title": "Search by title",
+  "Choose how this page should stay accurate.": "Choose how this page should stay accurate.",
+  "Recurring verification": "Recurring verification",
+  "Verifiers re-confirm this page on a schedule.": "Verifiers re-confirm this page on a schedule.",
+  "Re-verify on a schedule (e.g every 30 days )": "Re-verify on a schedule (e.g every 30 days )",
+  "Page stays editable at all times": "Page stays editable at all times",
+  "Best for runbooks, FAQs, living documentation": "Best for runbooks, FAQs, living documentation",
+  "Approval workflow": "Approval workflow",
+  "Formal document lifecycle with named approvers.": "Formal document lifecycle with named approvers.",
+  "Draft → In approval → Approved → Obsolete": "Draft → In approval → Approved → Obsolete",
+  "Locked once approved, with full history": "Locked once approved, with full history",
+  "Designed for ISO 9001, ISO 13485, and FDA": "Designed for ISO 9001, ISO 13485, and FDA",
+  "Best for SOPs and controlled documents": "Best for SOPs and controlled documents",
+  "Back": "Back",
+  "Quality management": "Quality management",
+  "Recurring": "Recurring",
+  "Pages move through draft, approval, and approved stages.": "Pages move through draft, approval, and approved stages.",
+  "Verifiers": "Verifiers",
+  "Add verifier": "Add verifier",
+  "I've reviewed this page for accuracy": "I've reviewed this page for accuracy",
+  "Set up": "Set up",
+  "Remove verification": "Remove verification",
+  "Are you sure you want to remove verification from this page?": "Are you sure you want to remove verification from this page?",
+  "Assigned verifiers must periodically re-verify this page.": "Assigned verifiers must periodically re-verify this page.",
+  "Last verified by {{name}} {{time}} (expired)": "Last verified by {{name}} {{time}} (expired)",
+  "The fixed expiration date has passed.": "The fixed expiration date has passed.",
+  "Verified by {{name}} {{time}}": "Verified by {{name}} {{time}}",
+  "Expires {{date}}": "Expires {{date}}",
+  "Expired {{date}}": "Expired {{date}}",
+  "Mark as obsolete": "Mark as obsolete",
+  "Mark obsolete": "Mark obsolete",
+  "Returned by {{name}} {{time}}": "Returned by {{name}} {{time}}",
+  "No approval has been requested yet.": "No approval has been requested yet.",
+  "Submitted by {{name}} {{time}}": "Submitted by {{name}} {{time}}",
+  "Someone": "Someone",
+  "Approved by {{name}} {{time}}": "Approved by {{name}} {{time}}",
+  "This document has been marked as obsolete.": "This document has been marked as obsolete.",
+  "Rejection comment": "Rejection comment",
+  "Reason for returning this document...": "Reason for returning this document...",
+  "Confirm rejection": "Confirm rejection",
+  "Submit for approval": "Submit for approval",
+  "Reject": "Reject",
+  "Approve": "Approve",
+  "Re-submit for approval": "Re-submit for approval",
+  "Verified until": "Verified until",
+  "QMS": "QMS",
+  "Verified pages": "Verified pages",
+  "Search pages...": "Search pages...",
+  "Filter by space": "Filter by space",
+  "Filter by type": "Filter by type",
+  "<bold>{{name}}</bold> verified a page": "<bold>{{name}}</bold> verified a page",
+  "<bold>{{name}}</bold> submitted a page for your approval": "<bold>{{name}}</bold> submitted a page for your approval",
+  "<bold>{{name}}</bold> returned a page for revision": "<bold>{{name}}</bold> returned a page for revision",
+  "Page verification expires soon": "Page verification expires soon",
+  "Page verification has expired": "Page verification has expired",
+  "Verifying your email": "Verifying your email",
+  "Please wait...": "Please wait...",
+  "Verification failed. The link may have expired.": "Verification failed. The link may have expired.",
+  "Check your email": "Check your email",
+  "We sent a verification link to {{email}}.": "We sent a verification link to {{email}}.",
+  "We sent a verification link to your email.": "We sent a verification link to your email.",
+  "Click the link to verify your email and access your workspace.": "Click the link to verify your email and access your workspace.",
+  "Resend verification email": "Resend verification email",
+  "Verification email sent. Please check your inbox.": "Verification email sent. Please check your inbox.",
+  "Failed to resend verification email. Please try again.": "Failed to resend verification email. Please try again.",
+  "We've sent you an email with your associated workspaces.": "We've sent you an email with your associated workspaces.",
+  "Load more": "Load more",
+  "Log out of all devices": "Log out of all devices",
+  "Log out of all sessions except this device": "Log out of all sessions except this device",
+  "This Device": "This Device",
+  "Unknown device": "Unknown device",
+  "No active sessions": "No active sessions",
+  "Session revoked": "Session revoked",
+  "All other sessions revoked": "All other sessions revoked",
+  "Last used": "Last used",
+  "Created": "Created",
+  "Rename": "Rename",
+  "Publish": "Publish",
+  "Security": "Security",
+  "Enforce SSO": "Enforce SSO",
+  "Once enforced, members will not be able to login with email and password.": "Once enforced, members will not be able to login with email and password.",
+  "AI-generated content may not be accurate.": "AI-generated content may not be accurate.",
+  "AI Chat": "AI Chat",
+  "Analyze for insights": "Analyze for insights",
+  "Ask anything...": "Ask anything...",
+  "Assistant said:": "Assistant said:",
+  "Chat history": "Chat history",
+  "Chat name": "Chat name",
+  "Chat transcript": "Chat transcript",
+  "Close": "Close",
+  "Copy assistant response": "Copy assistant response",
+  "Docmost AI": "Docmost AI",
+  "Failed to load chat. An error occurred.": "Failed to load chat. An error occurred.",
+  "Failed to render this message.": "Failed to render this message.",
+  "How can I help you today?": "How can I help you today?",
+  "New chat": "New chat",
+  "No chat history": "No chat history",
+  "No chats found": "No chats found",
+  "No conversations yet": "No conversations yet",
+  "Open full page": "Open full page",
+  "Scroll to bottom": "Scroll to bottom",
+  "You said:": "You said:",
+  "Previous 7 days": "Previous 7 days",
+  "Previous 30 days": "Previous 30 days",
+  "Search chats...": "Search chats...",
+  "Search chats": "Search chats",
+  "Ask anything... Use @ to mention pages": "Ask anything... Use @ to mention pages",
+  "Ask anything or search your workspace": "Ask anything or search your workspace",
+  "Welcome to {{name}}": "Welcome to {{name}}",
+  "Add files": "Add files",
+  "Mention a page": "Mention a page",
+  "Start a new chat to see it here.": "Start a new chat to see it here.",
+  "Summarize this page": "Summarize this page",
+  "Toggle AI Chat": "Toggle AI Chat",
+  "Translate this page": "Translate this page",
+  "Try a different search term.": "Try a different search term.",
+  "Try again": "Try again",
+  "Untitled chat": "Untitled chat",
+  "What can I help you with?": "What can I help you with?",
+  "Are you sure you want to revoke this {{credential}}": "Are you sure you want to revoke this {{credential}}",
+  "Automatically provision users and groups from your identity provider via SCIM.": "Automatically provision users and groups from your identity provider via SCIM.",
+  "Configure your identity provider with this URL to provision users and groups.": "Configure your identity provider with this URL to provision users and groups.",
+  "Create {{credential}}": "Create {{credential}}",
+  "{{credential}} created": "{{credential}} created",
+  "{{credential}} created successfully": "{{credential}} created successfully",
+  "Created by": "Created by",
+  "Custom": "Custom",
+  "Enable SCIM": "Enable SCIM",
+  "Enter a descriptive name": "Enter a descriptive name",
+  "I've saved my {{credential}}": "I've saved my {{credential}}",
+  "Important": "Important",
+  "Make sure to copy your {{credential}} now. You won't be able to see it again!": "Make sure to copy your {{credential}} now. You won't be able to see it again!",
+  "Never": "Never",
+  "Revoke {{credential}}": "Revoke {{credential}}",
+  "SCIM endpoint URL": "SCIM endpoint URL",
+  "SCIM provisioning": "SCIM provisioning",
+  "SCIM takes precedence over SSO group sync while enabled.": "SCIM takes precedence over SSO group sync while enabled.",
+  "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.",
+  "SCIM token": "SCIM token",
+  "SCIM tokens": "SCIM tokens",
+  "This action cannot be undone. Your identity provider will stop syncing immediately.": "This action cannot be undone. Your identity provider will stop syncing immediately.",
+  "Toggle SCIM provisioning": "Toggle SCIM provisioning",
+  "Token": "Token",
+  "Page menu": "Page menu",
+  "Expand": "Expand",
+  "Collapse": "Collapse",
+  "Comment menu": "Comment menu",
+  "Group menu": "Group menu",
+  "Show hidden breadcrumbs": "Show hidden breadcrumbs",
+  "Breadcrumbs": "Breadcrumbs",
+  "Page actions": "Page actions",
+  "Pick emoji": "Pick emoji",
+  "Template menu": "Template menu",
+  "Use": "Use",
+  "Use template": "Use template",
+  "Preview template: {{title}}": "Preview template: {{title}}",
+  "Use a template": "Use a template",
+  "Search templates...": "Search templates...",
+  "Search spaces...": "Search spaces...",
+  "No templates found": "No templates found",
+  "No spaces found": "No spaces found",
+  "Browse all templates": "Browse all templates",
+  "This space": "This space",
+  "All templates": "All templates",
+  "Global": "Global",
+  "New template": "New template",
+  "Edit template": "Edit template",
+  "Are you sure you want to delete this template?": "Are you sure you want to delete this template?",
+  "Template scope updated": "Template scope updated",
+  "Choose which space this template belongs to": "Choose which space this template belongs to",
+  "Scope": "Scope",
+  "Select scope": "Select scope",
+  "Title": "Title",
+  "Saving...": "Saving...",
+  "Saved": "Saved",
+  "Save failed. Retry": "Save failed. Retry",
+  "By {{name}}": "By {{name}}",
+  "Updated {{time}}": "Updated {{time}}",
+  "Choose destination": "Choose destination",
+  "Search pages and spaces...": "Search pages and spaces...",
+  "No results found": "No results found",
+  "You don't have permission to create pages here": "You don't have permission to create pages here",
+  "Chat menu": "Chat menu",
+  "API key menu": "API key menu",
+  "Jump to comment selection": "Jump to comment selection",
+  "Slash commands": "Slash commands",
+  "Mention suggestions": "Mention suggestions",
+  "Link suggestions": "Link suggestions",
+  "Diagram editor": "Diagram editor",
+  "Add comment": "Add comment",
+  "Find and replace": "Find and replace",
+  "Main navigation": "Main navigation",
+  "Space navigation": "Space navigation",
+  "Settings navigation": "Settings navigation",
+  "AI navigation": "AI navigation",
+  "Breadcrumb": "Breadcrumb",
+  "Synced block": "Synced block",
+  "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
+  "Editing original": "Editing original",
+  "Copy synced block": "Copy synced block",
+  "Unsync": "Unsync",
+  "Delete synced block": "Delete synced block",
+  "Synced to {{count}} other page_one": "Synced to {{count}} other page",
+  "Synced to {{count}} other page_other": "Synced to {{count}} other pages",
+  "ORIGINAL": "ORIGINAL",
+  "THIS PAGE": "THIS PAGE",
+  "No pages": "No pages",
+  "The original synced block no longer exists": "The original synced block no longer exists",
+  "You don't have access to this synced block": "You don't have access to this synced block",
+  "Failed to load this synced block": "Failed to load this synced block",
+  "Fixed editor toolbar": "Fixed editor toolbar",
+  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
+  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
+  "Normal text": "Normal text",
+  "More inline formatting": "More inline formatting",
+  "Subscript": "Subscript",
+  "Superscript": "Superscript",
+  "Inline code": "Inline code",
+  "Insert media": "Insert media",
+  "Mention": "Mention",
+  "Emoji": "Emoji",
+  "Columns": "Columns",
+  "More inserts": "More inserts",
+  "Embeds": "Embeds",
+  "Diagrams": "Diagrams",
+  "Advanced": "Advanced",
+  "Utility": "Utility",
+  "Decrease indent": "Decrease indent",
+  "Increase indent": "Increase indent",
+  "Clear formatting": "Clear formatting",
+  "Code block": "Code block",
+  "Experimental": "Experimental",
+  "Strikethrough": "Strikethrough",
+  "Undo": "Undo",
+  "Redo": "Redo",
+  "Backlinks": "Backlinks",
+  "Last updated by": "Last updated by",
+  "Last updated": "Last updated",
+  "Stats": "Stats",
+  "Word count": "Word count",
+  "Characters": "Characters",
+  "Incoming links": "Incoming links",
+  "Outgoing links": "Outgoing links",
+  "Incoming links ({{count}})": "Incoming links ({{count}})",
+  "Outgoing links ({{count}})": "Outgoing links ({{count}})",
+  "No pages link here yet.": "No pages link here yet.",
+  "This page doesn't link to other pages yet.": "This page doesn't link to other pages yet.",
+  "Verified until {{date}}": "Verified until {{date}}",
+  "Labels": "Labels",
+  "Add label": "Add label",
+  "No labels yet": "No labels yet",
+  "Already added": "Already added",
+  "Invalid label name": "Invalid label name",
+  "No matches": "No matches",
+  "Search or create…": "Search or create…",
+  "Remove label {{name}}": "Remove label {{name}}",
+  "Failed to add label": "Failed to add label",
+  "Failed to remove label": "Failed to remove label",
+  "No pages with this label": "No pages with this label",
+  "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
+  "No pages match your search.": "No pages match your search.",
+  "Updated {{date}}": "Updated {{date}}",
+  "Cell actions": "Cell actions",
+  "Column actions": "Column actions",
+  "Row actions": "Row actions",
+  "Filter": "Filter",
+  "Page title": "Page title",
+  "Page content": "Page content",
+  "Member actions": "Member actions",
+  "Toggle password visibility": "Toggle password visibility",
+  "Send comment": "Send comment",
+  "Token actions": "Token actions",
+  "Template settings": "Template settings",
+  "Edit diagram": "Edit diagram",
+  "Edit embed": "Edit embed",
+  "Edit drawing": "Edit drawing",
+  "Delete equation": "Delete equation",
+  "Invite actions": "Invite actions",
+  "Get started": "Get started",
+  "* indicates required fields": "* indicates required fields",
+  "List of spaces in this workspace": "List of spaces in this workspace",
+  "Active sessions": "Active sessions",
+  "Add {{name}} to favorites": "Add {{name}} to favorites",
+  "Remove {{name}} from favorites": "Remove {{name}} from favorites",
+  "Added to favorites": "Added to favorites",
+  "Removed from favorites": "Removed from favorites",
+  "Added {{name}} to favorites": "Added {{name}} to favorites",
+  "Removed {{name}} from favorites": "Removed {{name}} from favorites",
+  "Page menu for {{name}}": "Page menu for {{name}}",
+  "Create subpage of {{name}}": "Create subpage of {{name}}"
 }

apps/client/src/App.tsx

@@ -14,7 +14,6 @@ import AccountPreferences from "@/pages/settings/account/account-preferences.tsx
 import SpaceHome from "@/pages/space/space-home.tsx";
 import PageRedirect from "@/pages/page/page-redirect.tsx";
 import Layout from "@/components/layouts/global/layout.tsx";
-import { ErrorBoundary } from "react-error-boundary";
 import InviteSignup from "@/pages/auth/invite-signup.tsx";
 import ForgotPassword from "@/pages/auth/forgot-password.tsx";
 import PasswordReset from "./pages/auth/password-reset";
@@ -27,6 +26,7 @@ import Security from "@/ee/security/pages/security.tsx";
 import License from "@/ee/licence/pages/license.tsx";
 import { useRedirectToCloudSelect } from "@/ee/hooks/use-redirect-to-cloud-select.tsx";
 import SharedPage from "@/pages/share/shared-page.tsx";
+import PdfRenderPage from "@/ee/pdf-export/pdf-render-page.tsx";
 import Shares from "@/pages/settings/shares/shares.tsx";
 import ShareLayout from "@/features/share/components/share-layout.tsx";
 import ShareRedirect from "@/pages/share/share-redirect.tsx";
@@ -38,6 +38,14 @@ import SpaceTrash from "@/pages/space/space-trash.tsx";
 import UserApiKeys from "@/ee/api-key/pages/user-api-keys";
 import WorkspaceApiKeys from "@/ee/api-key/pages/workspace-api-keys";
 import AiSettings from "@/ee/ai/pages/ai-settings.tsx";
+import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
+import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
+import TemplateList from "@/ee/template/pages/template-list";
+import TemplateEditor from "@/ee/template/pages/template-editor";
+import FavoritesPage from "@/pages/favorites/favorites-page";
+import AiChat from "@/ee/ai-chat/pages/ai-chat.tsx";
+import VerifyEmail from "@/ee/pages/verify-email.tsx";
+import LabelPage from "@/pages/label/label-page";
 
 export default function App() {
   const { t } = useTranslation();
@@ -63,6 +71,7 @@ export default function App() {
           <>
             <Route path={"/create"} element={<CreateWorkspace />} />
             <Route path={"/select"} element={<CloudLogin />} />
+            <Route path={"/verify-email"} element={<VerifyEmail />} />
           </>
         )}
 
@@ -74,23 +83,27 @@ export default function App() {
           <Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
         </Route>
 
+        <Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
         <Route path={"/share/:shareId"} element={<ShareRedirect />} />
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 
         <Route element={<Layout />}>
           <Route path={"/home"} element={<Home />} />
+          <Route path={"/ai"} element={<AiChat />} />
+          <Route path={"/ai/chat/:chatId"} element={<AiChat />} />
           <Route path={"/spaces"} element={<SpacesPage />} />
+          <Route path={"/favorites"} element={<FavoritesPage />} />
+          <Route path={"/labels/:labelName"} element={<LabelPage />} />
+          <Route path={"/templates"} element={<TemplateList />} />
+          <Route
+            path={"/templates/:templateId"}
+            element={<TemplateEditor />}
+          />
           <Route path={"/s/:spaceSlug"} element={<SpaceHome />} />
           <Route path={"/s/:spaceSlug/trash"} element={<SpaceTrash />} />
           <Route
             path={"/s/:spaceSlug/p/:pageSlug"}
-            element={
+            element={<Page />}
-              <ErrorBoundary
-                fallback={<>{t("Failed to load page. An error occurred.")}</>}
-              >
-                <Page />
-              </ErrorBoundary>
-            }
           />
 
           <Route path={"/settings"}>
@@ -109,6 +122,9 @@ export default function App() {
             <Route path={"sharing"} element={<Shares />} />
             <Route path={"security"} element={<Security />} />
             <Route path={"ai"} element={<AiSettings />} />
+            <Route path={"ai/mcp"} element={<AiSettings />} />
+            <Route path={"audit"} element={<AuditLogs />} />
+            <Route path={"verifications"} element={<VerifiedPages />} />
             {!isCloud() && <Route path={"license"} element={<License />} />}
             {isCloud() && <Route path={"billing"} element={<Billing />} />}
           </Route>

apps/client/src/components/common/avatar-uploader.tsx

@@ -80,6 +80,20 @@ export default function AvatarUploader({
     }
   };
 
+  const actionLabel = {
+    [AvatarIconType.AVATAR]: t("Change avatar"),
+    [AvatarIconType.SPACE_ICON]: t("Change space icon"),
+    [AvatarIconType.WORKSPACE_ICON]: t("Change workspace icon"),
+  }[type];
+
+  // Per WCAG 2.5.3 (Label in Name), the accessible name must include the
+  // visible text. When no image is set, the avatar renders the name's
+  // initials, so prepend the name to the action label.
+  const ariaLabel =
+    !currentImageUrl && fallbackName
+      ? `${fallbackName} – ${actionLabel}`
+      : actionLabel;
+
   const handleRemove = async () => {
     if (disabled) return;
 
@@ -104,6 +118,8 @@ export default function AvatarUploader({
         ref={fileInputRef}
         onChange={handleFileInputChange}
         accept="image/png,image/jpeg,image/jpg"
+        aria-label={ariaLabel}
+        tabIndex={-1}
         style={{ display: "none" }}
       />
 
@@ -115,6 +131,8 @@ export default function AvatarUploader({
               size={size}
               avatarUrl={currentImageUrl}
               name={fallbackName}
+              aria-label={ariaLabel}
+              aria-haspopup="menu"
               style={{
                 cursor: disabled || isLoading ? "default" : "pointer",
                 opacity: isLoading ? 0.6 : 1,
@@ -130,7 +148,7 @@ export default function AvatarUploader({
                   top: "50%",
                   left: "50%",
                   transform: "translate(-50%, -50%)",
-                  zIndex: 1000,
+                  zIndex: 200,
                 }}
               >
                 <Loader size="sm" />

apps/client/src/components/common/copy-button.tsx

@@ -0,0 +1,33 @@
+// Source: https://github.com/mantinedev/mantine/blob/master/packages/@mantine/core/src/components/CopyButton/CopyButton.tsx - MIT
+// modified to use the polyfilled clipboard api
+import React from "react";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { useProps } from "@mantine/core";
+
+interface CopyButtonProps {
+  /** Children callback, provides current status and copy function as an argument */
+  children: (payload: { copied: boolean; copy: () => void }) => React.ReactNode;
+
+  /** Value that is copied to the clipboard when the button is clicked */
+  value: string;
+
+  /** Copied status timeout in ms @default `1000` */
+  timeout?: number;
+}
+
+const defaultProps = {
+  timeout: 1000,
+} satisfies Partial<CopyButtonProps>;
+
+export function CopyButton(props: CopyButtonProps) {
+  const { children, timeout, value, ...others } = useProps(
+    "CopyButton",
+    defaultProps,
+    props,
+  );
+  const clipboard = useClipboard({ timeout });
+  const copy = () => clipboard.copy(value);
+  return <>{children({ copy, copied: clipboard.copied, ...others })}</>;
+}
+
+CopyButton.displayName = "@mantine/core/CopyButton";

apps/client/src/components/common/copy.tsx

@@ -1,19 +1,26 @@
-import { ActionIcon, CopyButton, Tooltip } from "@mantine/core";
+import { ActionIcon, MantineColor, MantineSize, Tooltip } from "@mantine/core";
+import { CopyButton } from "@/components/common/copy-button";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 
 interface CopyProps {
   text: string;
+  size?: MantineSize;
+  color?: MantineColor;
+  /** Override the accessible name (and tooltip) when not yet copied. Lets callers disambiguate adjacent copy buttons for screen readers. */
+  label?: string;
 }
-export default function CopyTextButton({ text }: CopyProps) {
+export default function CopyTextButton({ text, size, label }: CopyProps) {
   const { t } = useTranslation();
 
+  const copyLabel = label ?? t("Copy");
+
   return (
     <CopyButton value={text} timeout={2000}>
       {({ copied, copy }) => (
         <Tooltip
-          label={copied ? t("Copied") : t("Copy")}
+          label={copied ? t("Copied") : copyLabel}
           withArrow
           position="right"
         >
@@ -21,6 +28,8 @@ export default function CopyTextButton({ text }: CopyProps) {
             color={copied ? "teal" : "gray"}
             variant="subtle"
             onClick={copy}
+            size={size}
+            aria-label={copied ? t("Copied") : copyLabel}
           >
             {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
           </ActionIcon>

apps/client/src/components/common/export-modal.tsx

@@ -30,9 +30,11 @@ export default function ExportModal({
   const [format, setFormat] = useState<ExportFormat>(ExportFormat.Markdown);
   const [includeChildren, setIncludeChildren] = useState<boolean>(false);
   const [includeAttachments, setIncludeAttachments] = useState<boolean>(false);
+  const [isExporting, setIsExporting] = useState<boolean>(false);
   const { t } = useTranslation();
 
   const handleExport = async () => {
+    setIsExporting(true);
     try {
       if (type === "page") {
         await exportPage({
@@ -45,6 +47,9 @@ export default function ExportModal({
       if (type === "space") {
         await exportSpace({ spaceId: id, format, includeAttachments });
       }
+      notifications.show({
+        message: t("Export successful"),
+      });
       onClose();
     } catch (err) {
       notifications.show({
@@ -52,6 +57,8 @@ export default function ExportModal({
         color: "red",
       });
       console.error("export error", err);
+    } finally {
+      setIsExporting(false);
     }
   };
 
@@ -74,7 +81,7 @@ export default function ExportModal({
       <Modal.Content style={{ overflow: "hidden" }}>
         <Modal.Header py={0}>
           <Modal.Title fw={500}>{t(`Export ${type}`)}</Modal.Title>
-          <Modal.CloseButton />
+          <Modal.CloseButton aria-label={t("Close")} />
         </Modal.Header>
         <Modal.Body>
           <Group justify="space-between" wrap="nowrap">
@@ -136,7 +143,7 @@ export default function ExportModal({
             <Button onClick={onClose} variant="default">
               {t("Cancel")}
             </Button>
-            <Button onClick={handleExport}>{t("Export")}</Button>
+            <Button onClick={handleExport} loading={isExporting}>{t("Export")}</Button>
           </Group>
         </Modal.Body>
       </Modal.Content>

apps/client/src/components/common/paginate.tsx

@@ -2,17 +2,17 @@ import { Button, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 export interface PagePaginationProps {
-  currentPage: number;
   hasPrevPage: boolean;
   hasNextPage: boolean;
-  onPageChange: (newPage: number) => void;
+  onPrev: () => void;
+  onNext: () => void;
 }
 
 export default function Paginate({
-  currentPage,
   hasPrevPage,
   hasNextPage,
-  onPageChange,
+  onPrev,
+  onNext,
 }: PagePaginationProps) {
   const { t } = useTranslation();
 
@@ -25,7 +25,7 @@ export default function Paginate({
       <Button
         variant="default"
         size="compact-sm"
-        onClick={() => onPageChange(currentPage - 1)}
+        onClick={onPrev}
         disabled={!hasPrevPage}
       >
         {t("Prev")}
@@ -34,7 +34,7 @@ export default function Paginate({
       <Button
         variant="default"
         size="compact-sm"
-        onClick={() => onPageChange(currentPage + 1)}
+        onClick={onNext}
         disabled={!hasNextPage}
       >
         {t("Next")}

apps/client/src/components/common/recent-changes.tsx

@@ -4,16 +4,20 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ActionIcon,
+  ThemeIcon,
-} from '@mantine/core';
+  Button,
-import {Link} from 'react-router-dom';
+} from "@mantine/core";
-import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
+import { Link } from "react-router-dom";
-import { buildPageUrl } from '@/features/page/page.utils.ts';
+import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
-import { formattedDate } from '@/lib/time.ts';
+import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
+import { formattedDate } from "@/lib/time.ts";
-import { IconFileDescription } from '@tabler/icons-react';
+import { useRecentChangesQuery } from "@/features/page/queries/page-query.ts";
-import { getSpaceUrl } from '@/lib/config.ts';
+import { IconFileDescription, IconFiles } from "@tabler/icons-react";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
+import { getSpaceUrl } from "@/lib/config.ts";
 import { useTranslation } from "react-i18next";
+import { getInitialsColor } from "@/lib/get-initials-color.ts";
+import rowClasses from "@/components/ui/clickable-table-row.module.css";
 
 interface Props {
   spaceId?: string;
@@ -21,7 +25,8 @@ interface Props {
 
 export default function RecentChanges({ spaceId }: Props) {
   const { t } = useTranslation();
-  const {data: pages, isLoading, isError} = useRecentChangesQuery(spaceId);
+  const { data, isLoading, isError, hasNextPage, fetchNextPage, isFetchingNextPage } = useRecentChangesQuery(spaceId);
+  const pages = data?.pages.flatMap((p) => p.items) ?? [];
 
   if (isLoading) {
     return <PageListSkeleton />;
@@ -31,22 +36,24 @@ export default function RecentChanges({spaceId}: Props) {
     return <Text>{t("Failed to fetch recent pages")}</Text>;
   }
 
-  return pages && pages.items.length > 0 ? (
+  return pages.length > 0 ? (
+    <>
       <Table.ScrollContainer minWidth={500}>
         <Table highlightOnHover verticalSpacing="sm">
           <Table.Tbody>
-          {pages.items.map((page) => (
+            {pages.map((page) => (
-            <Table.Tr key={page.id}>
+              <Table.Tr key={page.id} className={rowClasses.row}>
                 <Table.Td>
                   <UnstyledButton
+                    className={rowClasses.link}
                     component={Link}
                     to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
                     <Group wrap="nowrap">
                       {page.icon || (
-                      <ActionIcon variant='transparent' color='gray' size={18}>
+                        <ThemeIcon variant="transparent" color="gray" size={18}>
                           <IconFileDescription size={18} />
-                      </ActionIcon>
+                        </ThemeIcon>
                       )}
 
                       <Text fw={500} size="md" lineClamp={1}>
@@ -58,18 +65,23 @@ export default function RecentChanges({spaceId}: Props) {
                 {!spaceId && (
                   <Table.Td>
                     <Badge
-                    color="blue"
+                      color={getInitialsColor(page?.space.name)}
                       variant="light"
                       component={Link}
                       to={getSpaceUrl(page?.space.slug)}
-                    style={{cursor: 'pointer'}}
+                      style={{ cursor: "pointer" }}
                     >
                       {page?.space.name}
                     </Badge>
                   </Table.Td>
                 )}
                 <Table.Td>
-                <Text c="dimmed" style={{whiteSpace: 'nowrap'}} size="xs" fw={500}>
+                  <Text
+                    c="dimmed"
+                    style={{ whiteSpace: "nowrap" }}
+                    size="xs"
+                    fw={500}
+                  >
                     {formattedDate(page.updatedAt)}
                   </Text>
                 </Table.Td>
@@ -78,9 +90,24 @@ export default function RecentChanges({spaceId}: Props) {
           </Table.Tbody>
         </Table>
       </Table.ScrollContainer>
+      {hasNextPage && (
+        <Button
+          variant="subtle"
+          fullWidth
+          mt="sm"
+          mb="xl"
+          onClick={() => fetchNextPage()}
+          loading={isFetchingNextPage}
+        >
+          {t("Load more")}
+        </Button>
+      )}
+    </>
   ) : (
-    <Text size="md" ta="center">
+    <EmptyState
-      {t("No pages yet")}
+      icon={IconFiles}
-    </Text>
+      title={t("No pages yet")}
+      description={t("Pages you create will show up here.")}
+    />
   );
 }

apps/client/src/components/common/search-input.tsx

@@ -6,12 +6,14 @@ import { useTranslation } from "react-i18next";
 
 export interface SearchInputProps {
   placeholder?: string;
+  ariaLabel?: string;
   debounceDelay?: number;
   onSearch: (value: string) => void;
 }
 
 export function SearchInput({
   placeholder,
+  ariaLabel,
   debounceDelay = 500,
   onSearch,
 }: SearchInputProps) {
@@ -28,6 +30,7 @@ export function SearchInput({
       <TextInput
         size="sm"
         placeholder={placeholder || t("Search...")}
+        aria-label={ariaLabel || placeholder || t("Search")}
         leftSection={<IconSearch size={16} />}
         value={value}
         onChange={(e) => setValue(e.currentTarget.value)}

apps/client/src/components/icons/icon-columns-4.tsx

@@ -0,0 +1,27 @@
+import { rem } from "@mantine/core";
+
+type Props = {
+  size?: number | string;
+  stroke?: number;
+};
+
+export function IconColumns4({ size = 24, stroke = 2 }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={rem(size)}
+      height={rem(size)}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-16" />
+      <path d="M7.5 3v18" />
+      <path d="M12 3v18" />
+      <path d="M16.5 3v18" />
+    </svg>
+  );
+}

apps/client/src/components/icons/icon-columns-5.tsx

@@ -0,0 +1,28 @@
+import { rem } from "@mantine/core";
+
+type Props = {
+  size?: number | string;
+  stroke?: number;
+};
+
+export function IconColumns5({ size = 24, stroke = 2 }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={rem(size)}
+      height={rem(size)}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={stroke}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-16" />
+      <path d="M6.6 3v18" />
+      <path d="M10.2 3v18" />
+      <path d="M13.8 3v18" />
+      <path d="M17.4 3v18" />
+    </svg>
+  );
+}

apps/client/src/components/icons/icon-people-circle.tsx

@@ -1,11 +1,11 @@
-import { ActionIcon, rem } from "@mantine/core";
+import { ThemeIcon } from "@mantine/core";
 import React from "react";
 import { IconUsersGroup } from "@tabler/icons-react";
 
 export function IconGroupCircle() {
   return (
-    <ActionIcon variant="light" size="lg" color="gray" radius="xl">
+    <ThemeIcon variant="light" size="lg" color="gray" radius="xl">
       <IconUsersGroup stroke={1.5} />
-    </ActionIcon>
+    </ThemeIcon>
   );
 }

apps/client/src/components/layouts/global/app-header.module.css

@@ -7,6 +7,19 @@
     padding-right: var(--mantine-spacing-md);
 }
 
+.brand {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    cursor: pointer;
+}
+
+.brandIcon {
+    display: flex;
+    align-items: center;
+}
+
 .link {
     display: block;
     line-height: 1;
@@ -16,6 +29,9 @@
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
     font-size: var(--mantine-font-size-sm);
     font-weight: 500;
+    user-select: none;
+    white-space: nowrap;
+    flex-shrink: 0;
 
     @mixin hover {
         background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));

apps/client/src/components/layouts/global/app-header.tsx

@@ -1,8 +1,18 @@
-import { Badge, Group, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Group,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import classes from "./app-header.module.css";
 import React from "react";
 import TopMenu from "@/components/layouts/global/top-menu.tsx";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { IconSparkles } from "@tabler/icons-react";
+import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import APP_ROUTE from "@/lib/app-route.ts";
 import { useAtom } from "jotai";
 import {
@@ -22,8 +32,12 @@ import {
   searchSpotlight,
   shareSearchSpotlight,
 } from "@/features/search/constants.ts";
+import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 
-const links = [{ link: APP_ROUTE.HOME, label: "Home" }];
+const links = [
+  { link: APP_ROUTE.HOME, label: "Home" },
+];
 
 export function AppHeader() {
   const { t } = useTranslation();
@@ -33,10 +47,12 @@ export function AppHeader() {
   const [desktopOpened] = useAtom(desktopSidebarAtom);
   const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
   const { isTrial, trialDaysLeft } = useTrial();
+  const location = useLocation();
+  const toggleAside = useToggleAside();
+  const [workspace] = useAtom(workspaceAtom);
+  const aiChatEnabled = workspace?.settings?.ai?.chat === true;
 
-  const isHomeRoute = location.pathname.startsWith("/home");
+  const isPageRoute = location.pathname.includes("/p/");
-  const isSpacesRoute = location.pathname === "/spaces";
-  const hideSidebar = isHomeRoute || isSpacesRoute;
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
@@ -48,8 +64,6 @@ export function AppHeader() {
     <>
       <Group h="100%" px="md" justify="space-between" wrap={"nowrap"}>
         <Group wrap="nowrap">
-          {!hideSidebar && (
-            <>
           <Tooltip label={t("Sidebar toggle")}>
             <SidebarToggle
               aria-label={t("Sidebar toggle")}
@@ -69,18 +83,25 @@ export function AppHeader() {
               size="sm"
             />
           </Tooltip>
-            </>
-          )}
 
+          <Link to="/home" className={classes.brand} aria-label="Docmost">
+            <Box hiddenFrom="sm" className={classes.brandIcon}>
+              <img
+                src="/icons/favicon-32x32.png"
+                alt="Docmost"
+                width={22}
+                height={22}
+              />
+            </Box>
             <Text
               size="lg"
               fw={600}
-            style={{ cursor: "pointer", userSelect: "none" }}
+              style={{ userSelect: "none" }}
-            component={Link}
+              visibleFrom="sm"
-            to="/home"
             >
               Docmost
             </Text>
+          </Link>
 
           <Group ml={50} gap={5} className={classes.links} visibleFrom="sm">
             {items}
@@ -97,6 +118,50 @@ export function AppHeader() {
         </div>
 
         <Group px={"xl"} wrap="nowrap">
+          {aiChatEnabled && (
+            <>
+              <UnstyledButton
+                component={Link}
+                to="/ai"
+                className={classes.link}
+                visibleFrom="sm"
+                onClick={(e: React.MouseEvent) => {
+                  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+                    return;
+                  }
+                  if (isPageRoute) {
+                    e.preventDefault();
+                    toggleAside("chat");
+                  }
+                }}
+              >
+                {t("AI Chat")}
+              </UnstyledButton>
+              <Tooltip label={t("AI Chat")} openDelay={250} withArrow>
+                <ActionIcon
+                  component={Link}
+                  to="/ai"
+                  variant="subtle"
+                  color="dark"
+                  size="sm"
+                  hiddenFrom="sm"
+                  aria-label={t("AI Chat")}
+                  onClick={(e: React.MouseEvent) => {
+                    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
+                      return;
+                    }
+                    if (isPageRoute) {
+                      e.preventDefault();
+                      toggleAside("chat");
+                    }
+                  }}
+                >
+                  <IconSparkles size={20} stroke={2} />
+                </ActionIcon>
+              </Tooltip>
+            </>
+          )}
+          <NotificationPopover />
           {isCloud() && isTrial && trialDaysLeft !== 0 && (
             <Badge
               variant="light"

apps/client/src/components/layouts/global/app-shell.module.css

@@ -27,5 +27,3 @@
     background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
   }
 }
-
-

apps/client/src/components/layouts/global/aside.tsx

@@ -1,17 +1,27 @@
-import { Box, ScrollArea, Text } from "@mantine/core";
+import { ActionIcon, Box, Group, ScrollArea, Title, Tooltip } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
 import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
 import { useAtomValue } from "jotai";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
+import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";
+import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
 
 export default function Aside() {
-  const [{ tab }] = useAtom(asideStateAtom);
+  const [{ tab, isAsideOpen }, setAsideState] = useAtom(asideStateAtom);
   const { t } = useTranslation();
   const pageEditor = useAtomValue(pageEditorAtom);
+  const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));
+
+  useEffect(() => {
+    if (!isAsideOpen) return;
+    document.getElementById(ASIDE_PANEL_ID)?.focus();
+  }, [isAsideOpen, tab]);
 
   let title: string;
   let component: ReactNode;
@@ -25,21 +35,41 @@ export default function Aside() {
       component = <TableOfContents editor={pageEditor} />;
       title = "Table of contents";
       break;
+    case "chat":
+      component = <AsideChatPanel />;
+      title = "AI Chat";
+      break;
+    case "details":
+      component = <PageDetailsAside />;
+      title = "Details";
+      break;
     default:
       component = null;
       title = null;
   }
 
   return (
-    <Box p="md">
+    <Box p="md" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
       {component && (
         <>
-          <Text mb="md" fw={500}>
+          {tab !== "chat" && (
-            {t(title)}
+            <Group justify="space-between" wrap="nowrap" mb="md">
-          </Text>
+              <Title order={2} size="h6" fw={500}>{t(title)}</Title>
+              <Tooltip label={t("Close")} withArrow>
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  onClick={closeAside}
+                  aria-label={t("Close")}
+                >
+                  <IconX size={18} />
+                </ActionIcon>
+              </Tooltip>
+            </Group>
+          )}
 
-          {tab === "comments" ? (
+          {tab === "comments" || tab === "chat" ? (
-            <CommentListWithTabs />
+            component
           ) : (
             <ScrollArea
               style={{ height: "85vh" }}

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -1,6 +1,7 @@
 import { AppShell, Container } from "@mantine/core";
 import React, { useEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import SettingsSidebar from "@/components/settings/settings-sidebar.tsx";
 import { useAtom } from "jotai";
 import {
@@ -10,22 +11,27 @@ import {
   sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { SpaceSidebar } from "@/features/space/components/sidebar/space-sidebar.tsx";
+import AiChatSidebar from "@/ee/ai-chat/components/ai-chat-sidebar.tsx";
 import { AppHeader } from "@/components/layouts/global/app-header.tsx";
 import Aside from "@/components/layouts/global/aside.tsx";
 import classes from "./app-shell.module.css";
 import { useTrialEndAction } from "@/ee/hooks/use-trial-end-action.tsx";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import GlobalSidebar from "@/components/layouts/global/global-sidebar.tsx";
+import { ASIDE_PANEL_ID } from "@/hooks/use-toggle-aside.tsx";
+import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
 
 export default function GlobalAppShell({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { t } = useTranslation();
   useTrialEndAction();
   const [mobileOpened] = useAtom(mobileSidebarAtom);
   const toggleMobile = useToggleSidebar(mobileSidebarAtom);
   const [desktopOpened] = useAtom(desktopSidebarAtom);
-  const [{ isAsideOpen }] = useAtom(asideStateAtom);
+  const [{ isAsideOpen, tab: asideTab }] = useAtom(asideStateAtom);
   const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
   const [isResizing, setIsResizing] = useState(false);
   const sidebarRef = useRef(null);
@@ -72,24 +78,23 @@ export default function GlobalAppShell({
   const location = useLocation();
   const isSettingsRoute = location.pathname.startsWith("/settings");
   const isSpaceRoute = location.pathname.startsWith("/s/");
-  const isHomeRoute = location.pathname.startsWith("/home");
+  const isAiRoute = location.pathname.startsWith("/ai");
-  const isSpacesRoute = location.pathname === "/spaces";
   const isPageRoute = location.pathname.includes("/p/");
-  const hideSidebar = isHomeRoute || isSpacesRoute;
+  const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
+    <>
+      <SkipToMain />
       <AppShell
       header={{ height: 45 }}
-      navbar={
+      navbar={{
-        !hideSidebar && {
         width: isSpaceRoute ? sidebarWidth : 300,
         breakpoint: "sm",
         collapsed: {
           mobile: !mobileOpened,
           desktop: !desktopOpened,
         },
-        }
+      }}
-      }
       aside={
         isPageRoute && {
           width: 350,
@@ -102,30 +107,61 @@ export default function GlobalAppShell({
       <AppShell.Header px="md" className={classes.header}>
         <AppHeader />
       </AppShell.Header>
-      {!hideSidebar && (
       <AppShell.Navbar
         className={classes.navbar}
         withBorder={false}
         ref={sidebarRef}
+        aria-label={
+          isSpaceRoute
+            ? t("Space navigation")
+            : isSettingsRoute
+              ? t("Settings navigation")
+              : isAiRoute
+                ? t("AI navigation")
+                : t("Main navigation")
+        }
       >
+        {isSpaceRoute && (
           <div className={classes.resizeHandle} onMouseDown={startResizing} />
+        )}
         {isSpaceRoute && <SpaceSidebar />}
         {isSettingsRoute && <SettingsSidebar />}
+        {isAiRoute && <AiChatSidebar />}
+        {showGlobalSidebar && <GlobalSidebar />}
       </AppShell.Navbar>
-      )}
+      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
-      <AppShell.Main>
         {isSettingsRoute ? (
-          <Container size={850}>{children}</Container>
+          <Container size={900} pb={80}>
+            {children}
+          </Container>
         ) : (
           children
         )}
       </AppShell.Main>
 
       {isPageRoute && (
-        <AppShell.Aside className={classes.aside} p="md" withBorder={false}>
+        <AppShell.Aside
+          id={ASIDE_PANEL_ID}
+          tabIndex={-1}
+          className={classes.aside}
+          p="md"
+          withBorder={false}
+          aria-label={
+            asideTab === "comments"
+              ? t("Comments")
+              : asideTab === "toc"
+                ? t("Table of contents")
+                : asideTab === "chat"
+                  ? t("AI Chat")
+                  : asideTab === "details"
+                    ? t("Details")
+                    : undefined
+          }
+        >
           <Aside />
         </AppShell.Aside>
       )}
     </AppShell>
+    </>
   );
 }

apps/client/src/components/layouts/global/global-sidebar.module.css

@@ -0,0 +1,109 @@
+.navbar {
+    height: 100%;
+    width: 100%;
+    padding: var(--mantine-spacing-md);
+    display: flex;
+    flex-direction: column;
+}
+
+.section {
+    padding-bottom: var(--mantine-spacing-xs);
+}
+
+.link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    padding-left: var(--mantine-spacing-xs);
+    min-height: 30px;
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+    user-select: none;
+
+    @mixin hover {
+        background-color: light-dark(
+                var(--mantine-color-gray-1),
+                var(--mantine-color-dark-6)
+        );
+        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: 2px;
+    }
+
+    &[data-active] {
+        &,
+        & :hover {
+            background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
+            color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+        }
+    }
+
+    &[data-disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        @mixin hover {
+            background-color: transparent;
+            color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+        }
+    }
+}
+
+.linkIcon {
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    margin-right: var(--mantine-spacing-sm);
+    width: rem(16px);
+    height: rem(16px);
+}
+
+.sectionHeader {
+    padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+    font-size: var(--mantine-font-size-xs);
+    color: var(--mantine-color-dimmed);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.spacer {
+    flex: 1;
+}
+
+.bottomSection {
+    padding-top: var(--mantine-spacing-xs);
+    border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+}
+
+.spaceItem {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--mantine-spacing-sm);
+    text-decoration: none;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    padding-left: var(--mantine-spacing-xs);
+    min-height: 30px;
+    border-radius: var(--mantine-radius-sm);
+    font-weight: 500;
+    user-select: none;
+
+    @mixin hover {
+        background-color: light-dark(
+                var(--mantine-color-gray-1),
+                var(--mantine-color-dark-6)
+        );
+        color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: 2px;
+    }
+}

apps/client/src/components/layouts/global/global-sidebar.tsx

@@ -0,0 +1,186 @@
+import { useEffect, useState } from "react";
+import { ScrollArea, Text, Divider, Modal, UnstyledButton, Tooltip } from "@mantine/core";
+import {
+  IconHome,
+  IconClock,
+  IconStar,
+  IconLayoutGrid,
+  IconSettings,
+  IconUserPlus,
+  IconTemplate,
+} from "@tabler/icons-react";
+import { Link, useLocation } from "react-router-dom";
+import classes from "./global-sidebar.module.css";
+import { useTranslation } from "react-i18next";
+import { useAtom } from "jotai";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar";
+import { useFavoritesQuery } from "@/features/favorite/queries/favorite-query";
+import { getSpaceUrl } from "@/lib/config";
+import { useDisclosure } from "@mantine/hooks";
+import { WorkspaceInviteForm } from "@/features/workspace/components/members/components/workspace-invite-form";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+export default function GlobalSidebar() {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const [active, setActive] = useState(location.pathname);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
+  const hasTemplates = useHasFeature(Feature.TEMPLATES);
+  const upgradeLabel = useUpgradeLabel();
+  const mainNavItems = [
+    { label: "Home", icon: IconHome, path: "/home" },
+    { label: "Favorites", icon: IconStar, path: "/favorites" },
+    { label: "Spaces", icon: IconLayoutGrid, path: "/spaces" },
+    {
+      label: "Templates",
+      icon: IconTemplate,
+      path: "/templates",
+      disabled: !hasTemplates,
+    },
+  ];
+  const { data: favoriteSpacesData, isPending: isFavoritesPending } = useFavoritesQuery("space");
+  const favoriteSpaces = favoriteSpacesData?.pages.flatMap((p) => p.items) ?? [];
+  const sortedFavoriteSpaces = [...favoriteSpaces]
+    .filter((fav) => fav.space)
+    .sort((a, b) => {
+      const cmp = (a.space!.name ?? "").localeCompare(b.space!.name ?? "", undefined, { sensitivity: "base" });
+      return cmp !== 0 ? cmp : a.id.localeCompare(b.id);
+    });
+  const [inviteOpened, { open: openInvite, close: closeInvite }] =
+    useDisclosure(false);
+
+  useEffect(() => {
+    setActive(location.pathname);
+  }, [location.pathname]);
+
+  const handleNavClick = () => {
+    if (mobileSidebarOpened) {
+      toggleMobileSidebar();
+    }
+  };
+
+  return (
+    <div className={classes.navbar}>
+      <ScrollArea w="100%" style={{ flex: 1 }}>
+        <div className={classes.section}>
+          {mainNavItems.map((item) =>
+            item.disabled ? (
+              <Tooltip
+                key={item.label}
+                label={upgradeLabel}
+                position="right"
+                withArrow
+              >
+                <UnstyledButton
+                  className={classes.link}
+                  data-disabled
+                  aria-disabled="true"
+                  tabIndex={-1}
+                >
+                  <item.icon className={classes.linkIcon} stroke={2} />
+                  <span>{t(item.label)}</span>
+                </UnstyledButton>
+              </Tooltip>
+            ) : (
+              <Link
+                key={item.label}
+                className={classes.link}
+                data-active={active === item.path || undefined}
+                aria-current={active === item.path ? "page" : undefined}
+                to={item.path}
+                onClick={handleNavClick}
+              >
+                <item.icon className={classes.linkIcon} stroke={2} />
+                <span>{t(item.label)}</span>
+              </Link>
+            ),
+          )}
+        </div>
+
+        <Divider my="xs" />
+        <div className={classes.section}>
+          <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
+          {!isFavoritesPending && sortedFavoriteSpaces.length === 0 ? (
+            <Text size="xs" c="dimmed" pl="xs" py={4}>
+              {t("Favorite spaces appear here")}
+            </Text>
+          ) : (
+            <>
+              {sortedFavoriteSpaces.slice(0, 10).map((fav) => (
+                <Link
+                  key={fav.id}
+                  className={classes.spaceItem}
+                  to={getSpaceUrl(fav.space!.slug)}
+                  onClick={handleNavClick}
+                >
+                  <CustomAvatar
+                    name={fav.space!.name}
+                    avatarUrl={fav.space!.logo}
+                    type={AvatarIconType.SPACE_ICON}
+                    color="initials"
+                    variant="filled"
+                    size={20}
+                  />
+                  <Text size="sm" fw={500} lineClamp={1}>
+                    {fav.space!.name}
+                  </Text>
+                </Link>
+              ))}
+              {sortedFavoriteSpaces.length > 10 && (
+                <Link
+                  className={classes.spaceItem}
+                  to="/spaces"
+                  onClick={handleNavClick}
+                >
+                  <Text size="xs" c="dimmed">
+                    {t("View all")}
+                  </Text>
+                </Link>
+              )}
+            </>
+          )}
+        </div>
+
+      </ScrollArea>
+
+      <div className={classes.bottomSection}>
+        <UnstyledButton
+          className={classes.link}
+          onClick={openInvite}
+        >
+          <IconUserPlus className={classes.linkIcon} stroke={2} />
+          <span>{t("Invite People")}</span>
+        </UnstyledButton>
+        <Link
+          className={classes.link}
+          data-active={active.startsWith("/settings") || undefined}
+          aria-current={active.startsWith("/settings") ? "page" : undefined}
+          to="/settings/account/profile"
+          onClick={handleNavClick}
+        >
+          <IconSettings className={classes.linkIcon} stroke={2} />
+          <span>{t("Settings")}</span>
+        </Link>
+      </div>
+
+      <Modal
+        size="550"
+        opened={inviteOpened}
+        onClose={closeInvite}
+        title={t("Invite new members")}
+        centered
+      >
+        <Divider size="xs" mb="xs" />
+        <ScrollArea h="80%">
+          <WorkspaceInviteForm onClose={closeInvite} />
+        </ScrollArea>
+      </Modal>
+    </div>
+  );
+}

apps/client/src/components/layouts/global/hooks/atoms/sidebar-atom.ts

@@ -10,6 +10,7 @@ export const desktopSidebarAtom = atomWithWebStorage<boolean>(
 
 export const desktopAsideAtom = atom<boolean>(false);
 
+// Valid `tab` values: "" | "comments" | "toc" | "chat" | "details"
 type AsideStateType = {
   tab: string;
   isAsideOpen: boolean;

apps/client/src/components/settings/settings-queries.tsx

@@ -11,9 +11,12 @@ import { getLicenseInfo } from "@/ee/licence/services/license-service.ts";
 import { getSsoProviders } from "@/ee/security/services/security-service.ts";
 import { getShares } from "@/features/share/services/share-service.ts";
 import { getApiKeys } from "@/ee/api-key";
+import { getAuditLogs } from "@/ee/audit/services/audit-service";
+import { getVerificationList } from "@/ee/page-verification/services/page-verification-service";
+import { getScimTokens } from "@/ee/scim/services/scim-token-service";
 
 export const prefetchWorkspaceMembers = () => {
-  const params = { limit: 100, page: 1, query: "" } as QueryParams;
+  const params: QueryParams = { limit: 100, query: "" };
   queryClient.prefetchQuery({
     queryKey: ["workspaceMembers", params],
     queryFn: () => getWorkspaceMembers(params),
@@ -22,15 +25,15 @@ export const prefetchWorkspaceMembers = () => {
 
 export const prefetchSpaces = () => {
   queryClient.prefetchQuery({
-    queryKey: ["spaces", { page: 1 }],
+    queryKey: ["spaces", {}],
-    queryFn: () => getSpaces({ page: 1 }),
+    queryFn: () => getSpaces({}),
   });
 };
 
 export const prefetchGroups = () => {
   queryClient.prefetchQuery({
-    queryKey: ["groups", { page: 1 }],
+    queryKey: ["groups", {}],
-    queryFn: () => getGroups({ page: 1 }),
+    queryFn: () => getGroups({}),
   });
 };
 
@@ -62,21 +65,44 @@ export const prefetchSsoProviders = () => {
 
 export const prefetchShares = () => {
   queryClient.prefetchQuery({
-    queryKey: ["share-list", { page: 1 }],
+    queryKey: ["share-list", {}],
-    queryFn: () => getShares({ page: 1, limit: 100 }),
+    queryFn: () => getShares({}),
   });
 };
 
 export const prefetchApiKeys = () => {
   queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
+    queryKey: ["api-key-list", {}],
-    queryFn: () => getApiKeys({ page: 1 }),
+    queryFn: () => getApiKeys({}),
   });
 };
 
 export const prefetchApiKeyManagement = () => {
   queryClient.prefetchQuery({
-    queryKey: ["api-key-list", { page: 1 }],
+    queryKey: ["api-key-list", { adminView: true }],
-    queryFn: () => getApiKeys({ page: 1, adminView: true }),
+    queryFn: () => getApiKeys({ adminView: true }),
+  });
+};
+
+export const prefetchAuditLogs = () => {
+  const params = { limit: 50 };
+  queryClient.prefetchQuery({
+    queryKey: ["audit-logs", params],
+    queryFn: () => getAuditLogs(params),
+  });
+};
+
+export const prefetchVerifiedPages = () => {
+  const params = { limit: 50 };
+  queryClient.prefetchQuery({
+    queryKey: ["verification-list", params],
+    queryFn: () => getVerificationList(params),
+  });
+};
+
+export const prefetchScimTokens = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["scim-token-list", { cursor: undefined }],
+    queryFn: () => getScimTokens({}),
   });
 };

apps/client/src/components/settings/settings-sidebar.tsx

@@ -13,6 +13,8 @@ import {
   IconKey,
   IconWorld,
   IconSparkles,
+  IconHistory,
+  IconShieldCheck,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
@@ -20,38 +22,41 @@ import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { useAtom } from "jotai";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { entitlementAtom } from "@/ee/entitlement/entitlement-atom";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 import {
   prefetchApiKeyManagement,
   prefetchApiKeys,
   prefetchBilling,
   prefetchGroups,
   prefetchLicense,
+  prefetchScimTokens,
   prefetchShares,
   prefetchSpaces,
   prefetchSsoProviders,
   prefetchWorkspaceMembers,
+  prefetchAuditLogs,
+  prefetchVerifiedPages,
 } from "@/components/settings/settings-queries.tsx";
 import AppVersion from "@/components/settings/app-version.tsx";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
 import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 
-interface DataItem {
+type DataItem = {
   label: string;
   icon: React.ElementType;
   path: string;
-  isCloud?: boolean;
+  feature?: string;
-  isEnterprise?: boolean;
+  role?: "admin" | "owner";
-  isAdmin?: boolean;
+  env?: "cloud" | "selfhosted";
-  isSelfhosted?: boolean;
+};
-  showDisabledInNonEE?: boolean;
-}
 
-interface DataGroup {
+type DataGroup = {
   heading: string;
   items: DataItem[];
-}
+};
 
 const groupedData: DataGroup[] = [
   {
@@ -67,9 +72,7 @@ const groupedData: DataGroup[] = [
         label: "API keys",
         icon: IconKey,
         path: "/settings/account/api-keys",
-        isCloud: true,
+        feature: Feature.API_KEYS,
-        isEnterprise: true,
-        showDisabledInNonEE: true,
       },
     ],
   },
@@ -77,45 +80,50 @@ const groupedData: DataGroup[] = [
     heading: "Workspace",
     items: [
       { label: "General", icon: IconSettings, path: "/settings/workspace" },
-      {
+      { label: "Members", icon: IconUsers, path: "/settings/members" },
-        label: "Members",
-        icon: IconUsers,
-        path: "/settings/members",
-      },
       {
         label: "Billing",
         icon: IconCoin,
         path: "/settings/billing",
-        isCloud: true,
+        role: "admin",
-        isAdmin: true,
+        env: "cloud",
       },
       {
         label: "Security & SSO",
         icon: IconLock,
         path: "/settings/security",
-        isCloud: true,
+        feature: Feature.SECURITY_SETTINGS,
-        isEnterprise: true,
+        role: "admin",
-        isAdmin: true,
-        showDisabledInNonEE: true,
       },
       { label: "Groups", icon: IconUsersGroup, path: "/settings/groups" },
       { label: "Spaces", icon: IconSpaces, path: "/settings/spaces" },
       { label: "Public sharing", icon: IconWorld, path: "/settings/sharing" },
+      {
+        label: "Verified pages",
+        icon: IconShieldCheck,
+        path: "/settings/verifications",
+        feature: Feature.PAGE_VERIFICATION,
+      },
       {
         label: "API management",
         icon: IconKey,
         path: "/settings/api-keys",
-        isCloud: true,
+        feature: Feature.API_KEYS,
-        isEnterprise: true,
+        role: "admin",
-        isAdmin: true,
-        showDisabledInNonEE: true,
       },
       {
         label: "AI settings",
         icon: IconSparkles,
         path: "/settings/ai",
-        isAdmin: true,
+        role: "admin",
-        isSelfhosted: true,
+      },
+      {
+        label: "Audit log",
+        icon: IconHistory,
+        path: "/settings/audit",
+        feature: Feature.AUDIT_LOGS,
+        role: "owner",
+        env: "selfhosted",
       },
     ],
   },
@@ -136,8 +144,9 @@ export default function SettingsSidebar() {
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
   const { goBack } = useSettingsNavigation();
-  const { isAdmin } = useUserRole();
+  const { isAdmin, isOwner } = useUserRole();
-  const [workspace] = useAtom(workspaceAtom);
+  const [entitlements] = useAtom(entitlementAtom);
+  const upgradeLabel = useUpgradeLabel();
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
@@ -145,41 +154,20 @@ export default function SettingsSidebar() {
     setActive(location.pathname);
   }, [location.pathname]);
 
+  const hasFeature = (f: string) =>
+    entitlements?.features?.includes(f) ?? false;
+
   const canShowItem = (item: DataItem) => {
-    if (item.showDisabledInNonEE && item.isEnterprise) {
+    if (item.env === "cloud" && !isCloud()) return false;
-      // Check admin permission regardless of license
+    if (item.env === "selfhosted" && isCloud()) return false;
-      return item.isAdmin ? isAdmin : true;
+    if (item.role === "admin" && !isAdmin) return false;
-    }
+    if (item.role === "owner" && !isOwner) return false;
-
-    if (item.isCloud && item.isEnterprise) {
-      if (!(isCloud() || workspace?.hasLicenseKey)) return false;
-      return item.isAdmin ? isAdmin : true;
-    }
-
-    if (item.isCloud) {
-      return isCloud() ? (item.isAdmin ? isAdmin : true) : false;
-    }
-
-    if (item.isSelfhosted) {
-      return !isCloud() ? (item.isAdmin ? isAdmin : true) : false;
-    }
-
-    if (item.isEnterprise) {
-      return workspace?.hasLicenseKey ? (item.isAdmin ? isAdmin : true) : false;
-    }
-
-    if (item.isAdmin) {
-      return isAdmin;
-    }
-
     return true;
   };
 
   const isItemDisabled = (item: DataItem) => {
-    if (item.showDisabledInNonEE && item.isEnterprise) {
+    if (!item.feature) return false;
-      return !(isCloud() || workspace?.hasLicenseKey);
+    return !hasFeature(item.feature);
-    }
-    return false;
   };
 
   const menuItems = groupedData.map((group) => {
@@ -212,12 +200,15 @@ export default function SettingsSidebar() {
               prefetchHandler = prefetchBilling;
               break;
             case "License & Edition":
-              if (workspace?.hasLicenseKey) {
+              if (entitlements?.tier !== "free") {
                 prefetchHandler = prefetchLicense;
               }
               break;
             case "Security & SSO":
-              prefetchHandler = prefetchSsoProviders;
+              prefetchHandler = () => {
+                prefetchSsoProviders();
+                prefetchScimTokens();
+              };
               break;
             case "Public sharing":
               prefetchHandler = prefetchShares;
@@ -228,52 +219,61 @@ export default function SettingsSidebar() {
             case "API management":
               prefetchHandler = prefetchApiKeyManagement;
               break;
+            case "Audit log":
+              prefetchHandler = prefetchAuditLogs;
+              break;
+            case "Verified pages":
+              prefetchHandler = prefetchVerifiedPages;
+              break;
             default:
               break;
           }
 
           const isDisabled = isItemDisabled(item);
-          const linkElement = (
+
+          if (isDisabled) {
+            return (
+              <Tooltip
+                key={item.label}
+                label={upgradeLabel}
+                position="right"
+                withArrow
+              >
+                <span
+                  className={classes.link}
+                  data-disabled
+                  role="link"
+                  aria-disabled="true"
+                  tabIndex={0}
+                  style={{
+                    opacity: 0.5,
+                    cursor: "not-allowed",
+                  }}
+                >
+                  <item.icon className={classes.linkIcon} stroke={2} />
+                  <span>{t(item.label)}</span>
+                </span>
+              </Tooltip>
+            );
+          }
+
+          return (
             <Link
-              onMouseEnter={!isDisabled ? prefetchHandler : undefined}
+              onMouseEnter={prefetchHandler}
               className={classes.link}
               data-active={active.startsWith(item.path) || undefined}
-              data-disabled={isDisabled || undefined}
               key={item.label}
-              to={isDisabled ? "#" : item.path}
+              to={item.path}
-              onClick={(e) => {
+              onClick={() => {
-                if (isDisabled) {
-                  e.preventDefault();
-                  return;
-                }
                 if (mobileSidebarOpened) {
                   toggleMobileSidebar();
                 }
               }}
-              style={{
-                opacity: isDisabled ? 0.5 : 1,
-                cursor: isDisabled ? "not-allowed" : "pointer",
-              }}
             >
               <item.icon className={classes.linkIcon} stroke={2} />
               <span>{t(item.label)}</span>
             </Link>
           );
-
-          if (isDisabled) {
-            return (
-              <Tooltip
-                key={item.label}
-                label={t("Available in enterprise edition")}
-                position="right"
-                withArrow
-              >
-                {linkElement}
-              </Tooltip>
-            );
-          }
-
-          return linkElement;
         })}
       </div>
     );
@@ -291,7 +291,7 @@ export default function SettingsSidebar() {
           }}
           variant="transparent"
           c="gray"
-          aria-label="Back"
+          aria-label={t("Back")}
         >
           <IconArrowLeft stroke={2} />
         </ActionIcon>

apps/client/src/components/settings/settings-title.tsx

@@ -4,7 +4,7 @@ import { Divider, Title } from '@mantine/core';
 export default function SettingsTitle({ title }: { title: string }) {
   return (
     <>
-      <Title order={3}>
+      <Title order={1} size="h3">
         {title}
       </Title>
       <Divider my="md" />

apps/client/src/components/ui/auto-tooltip-text.tsx

@@ -0,0 +1,50 @@
+import { useRef, useState, ReactNode } from "react";
+import { Text, TextProps, Tooltip } from "@mantine/core";
+
+type AutoTooltipTextProps = TextProps & {
+  children: ReactNode;
+  tooltipLabel?: string;
+  tooltipProps?: Omit<
+    React.ComponentProps<typeof Tooltip>,
+    "children" | "label"
+  >;
+};
+
+export function AutoTooltipText({
+  children,
+  tooltipLabel,
+  tooltipProps,
+  ...textProps
+}: AutoTooltipTextProps) {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const handleMouseEnter = () => {
+    const element = textRef.current;
+    if (element) {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    }
+  };
+
+  const label = tooltipLabel ?? (typeof children === "string" ? children : "");
+
+  return (
+    <Tooltip
+      label={label}
+      disabled={!isTruncated || !label}
+      multiline
+      withArrow
+      withinPortal={false}
+      {...tooltipProps}
+    >
+      <Text
+        ref={textRef}
+        truncate
+        onMouseEnter={handleMouseEnter}
+        {...textProps}
+      >
+        {children}
+      </Text>
+    </Tooltip>
+  );
+}

apps/client/src/components/ui/card-carousel.module.css

@@ -0,0 +1,68 @@
+.root {
+  position: relative;
+}
+
+.track {
+  display: flex;
+  gap: var(--mantine-spacing-md);
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding: 2px;
+  margin: -2px;
+}
+
+.track::-webkit-scrollbar {
+  display: none;
+}
+
+.track > * {
+  scroll-snap-align: start;
+  flex: 0 0 auto;
+}
+
+.arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, background-color 120ms ease, transform 120ms ease;
+  z-index: 2;
+}
+
+.root:hover .arrow.visible,
+.arrow.visible:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.arrow:hover {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+}
+
+.arrow:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.arrowLeft {
+  left: -14px;
+}
+
+.arrowRight {
+  right: -14px;
+}

apps/client/src/components/ui/card-carousel.tsx

@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./card-carousel.module.css";
+
+type Props = {
+  children: ReactNode;
+  ariaLabel?: string;
+};
+
+export default function CardCarousel({ children, ariaLabel }: Props) {
+  const { t } = useTranslation();
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollState = useCallback(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 1);
+    setCanScrollRight(el.scrollLeft < maxScroll - 1);
+  }, []);
+
+  useEffect(() => {
+    updateScrollState();
+    const el = trackRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(el);
+    for (const child of Array.from(el.children)) {
+      observer.observe(child);
+    }
+
+    return () => observer.disconnect();
+  }, [updateScrollState, children]);
+
+  const scrollBy = (direction: 1 | -1) => {
+    const el = trackRef.current;
+    if (!el) return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.85, behavior: "smooth" });
+  };
+
+  return (
+    <div className={classes.root}>
+      <div
+        ref={trackRef}
+        className={classes.track}
+        onScroll={updateScrollState}
+        {...(ariaLabel ? { role: "region", "aria-label": ariaLabel } : {})}
+      >
+        {children}
+      </div>
+
+      <button
+        type="button"
+        className={`${classes.arrow} ${classes.arrowLeft} ${canScrollLeft ? classes.visible : ""}`}
+        onClick={() => scrollBy(-1)}
+        aria-label={t("Scroll left")}
+        tabIndex={canScrollLeft ? 0 : -1}
+      >
+        <IconChevronLeft size={18} />
+      </button>
+
+      <button
+        type="button"
+        className={`${classes.arrow} ${classes.arrowRight} ${canScrollRight ? classes.visible : ""}`}
+        onClick={() => scrollBy(1)}
+        aria-label={t("Scroll right")}
+        tabIndex={canScrollRight ? 0 : -1}
+      >
+        <IconChevronRight size={18} />
+      </button>
+    </div>
+  );
+}

apps/client/src/components/ui/clickable-table-row.module.css

@@ -0,0 +1,29 @@
+/*
+ * Focus styling for list-style tables (recent changes, favorites, all
+ * spaces, groups, verified pages, shares).
+ *
+ * Per WAI-ARIA Authoring Practices and Adrian Roselli's guidance on table
+ * accessibility (https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html),
+ * data tables should not be made fully clickable. Only the title cell is the
+ * link, and that link is what receives Tab focus.
+ *
+ * - `.row` adds a subtle background tint when the row contains the focused
+ *   element, so keyboard users can see which row they're inspecting.
+ * - `.link` adds a visible :focus-visible outline on the title link itself.
+ *
+ * No stretched-link pseudo here on purpose: absolutely-positioned pseudos
+ * inside table cells cause column reflow on focus in Chromium.
+ */
+
+.row:focus-within {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-6)
+  );
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-sm);
+}

apps/client/src/components/ui/custom-avatar.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Avatar } from "@mantine/core";
+import { Avatar, MantineColor } from "@mantine/core";
 import { getAvatarUrl } from "@/lib/config.ts";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 
 interface CustomAvatarProps {
-  avatarUrl: string;
+  avatarUrl?: string;
   name: string;
   color?: string;
   size?: string | number;
@@ -16,19 +16,57 @@ interface CustomAvatarProps {
   mt?: string | number;
 }
 
+// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
+//   - filled: white text on the shade as bg
+//   - light:  shade as text on the color's light-bg (10% color.6 over white)
+// Avoids lime/yellow/green/orange — even their dark shades have weak
+// contrast. grape and indigo were bumped from .7 to darker shades because
+// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
+// indigo.7 was 4.98/4.39 (light fails by a hair).
+const SAFE_INITIALS_COLORS: MantineColor[] = [
+  "blue.8",
+  "cyan.9",
+  "grape.9",
+  "indigo.8",
+  "pink.8",
+  "red.8",
+  "violet.7",
+];
+
+function hashName(input: string) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    hash = (hash << 5) - hash + input.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+
+function pickInitialsColor(name: string) {
+  return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
+}
+
+function sanitizeInitialsSource(name: string) {
+  const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
+  return sanitized || name;
+}
+
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
->(({ avatarUrl, name, type, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, color, ...props }: CustomAvatarProps, ref) => {
   const avatarLink = getAvatarUrl(avatarUrl, type);
+  const resolvedColor =
+    !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
+  const initialsSource = sanitizeInitialsSource(name ?? "");
 
   return (
     <Avatar
       ref={ref}
       src={avatarLink}
-      name={name}
+      name={initialsSource}
       alt={name}
-      color="initials"
+      color={resolvedColor}
       {...props}
     />
   );

apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from "react";
+import { Modal, Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { DestinationPicker } from "./destination-picker";
+import {
+  DestinationPickerModalProps,
+  DestinationSelection,
+} from "./destination-picker.types";
+
+export function DestinationPickerModal({
+  opened,
+  onClose,
+  title,
+  actionLabel,
+  onSelect,
+  loading,
+  excludePageId,
+  pageLimit,
+  initialSpaceId,
+  searchSpacesOnly,
+}: DestinationPickerModalProps) {
+  const { t } = useTranslation();
+  const [selection, setSelection] = useState<DestinationSelection | null>(null);
+
+  useEffect(() => {
+    if (!opened) {
+      setSelection(null);
+    }
+  }, [opened]);
+
+  return (
+    <Modal.Root
+      opened={opened}
+      onClose={onClose}
+      size={550}
+      padding="lg"
+      yOffset="10vh"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Modal.Overlay />
+      <Modal.Content>
+        <Modal.Header py={0}>
+          <Modal.Title fw={500}>{title}</Modal.Title>
+          <Modal.CloseButton aria-label={t("Close")} />
+        </Modal.Header>
+        <Modal.Body>
+          <DestinationPicker
+            onSelectionChange={setSelection}
+            excludePageId={excludePageId}
+            pageLimit={pageLimit}
+            initialSpaceId={initialSpaceId}
+            searchSpacesOnly={searchSpacesOnly}
+          />
+
+          <Group justify="flex-end" mt="md">
+            <Button variant="default" onClick={onClose}>
+              {t("Close")}
+            </Button>
+            <Button
+              onClick={() => selection && onSelect(selection)}
+              disabled={!selection}
+              loading={loading}
+            >
+              {actionLabel}
+            </Button>
+          </Group>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}

apps/client/src/components/ui/destination-picker/destination-picker.module.css

@@ -0,0 +1,134 @@
+.searchInput {
+    margin-bottom: var(--mantine-spacing-sm);
+}
+
+.scrollArea {
+    max-height: 50vh;
+}
+
+.row {
+    padding: 6px 12px;
+    border-radius: var(--mantine-radius-sm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+    transition: background-color 150ms ease;
+    user-select: none;
+
+    @mixin hover {
+        background-color: light-dark(
+                var(--mantine-color-gray-0),
+                var(--mantine-color-dark-6)
+        );
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--mantine-primary-color-filled);
+        outline-offset: -2px;
+    }
+}
+
+.selected {
+    background-color: light-dark(
+            var(--mantine-color-blue-0),
+            var(--mantine-color-dark-5)
+    );
+    border-left: 2px solid var(--mantine-primary-color-filled);
+}
+
+.spaceRow {
+    composes: row;
+    font-weight: 500;
+}
+
+.pageRow {
+    composes: row;
+    font-weight: 400;
+}
+
+.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.chevron {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--mantine-radius-sm);
+    flex-shrink: 0;
+    transition: transform 150ms ease;
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+
+    @mixin hover {
+        background-color: light-dark(
+                var(--mantine-color-gray-1),
+                var(--mantine-color-dark-5)
+        );
+    }
+}
+
+.chevronExpanded {
+    transform: rotate(90deg);
+}
+
+.loadMore {
+    text-align: center;
+    padding: 6px;
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    font-size: var(--mantine-font-size-sm);
+    cursor: pointer;
+
+    @mixin hover {
+        text-decoration: underline;
+    }
+}
+
+.selectedIndicator {
+    padding: 8px 12px;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+    margin-top: var(--mantine-spacing-xs);
+}
+
+.emptyState {
+    padding: 12px;
+    text-align: center;
+    font-size: var(--mantine-font-size-sm);
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.searchResult {
+    composes: row;
+}
+
+.pageTitle {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--mantine-font-size-sm);
+}
+
+.spaceName {
+    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+    font-size: var(--mantine-font-size-xs);
+    flex-shrink: 0;
+}
+
+.iconWrapper {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 16px;
+    line-height: 1;
+}

apps/client/src/components/ui/destination-picker/destination-picker.tsx

@@ -0,0 +1,234 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { ActionIcon, TextInput, ScrollArea, Loader } from "@mantine/core";
+import { useDebouncedValue } from "@mantine/hooks";
+import { IconSearch, IconFileDescription } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useGetSpacesQuery } from "@/features/space/queries/space-query";
+import { useSearchSuggestionsQuery } from "@/features/search/queries/search-query";
+import { ISpace } from "@/features/space/types/space.types";
+import { IPage } from "@/features/page/types/page.types";
+import { DestinationSelection } from "./destination-picker.types";
+import { SpaceRow } from "./space-row";
+import classes from "./destination-picker.module.css";
+
+type DestinationPickerProps = {
+  onSelectionChange: (selection: DestinationSelection | null) => void;
+  excludePageId?: string;
+  pageLimit?: number;
+  initialSpaceId?: string;
+  searchSpacesOnly?: boolean;
+};
+
+export function DestinationPicker({
+  onSelectionChange,
+  excludePageId,
+  pageLimit = 15,
+  initialSpaceId,
+  searchSpacesOnly,
+}: DestinationPickerProps) {
+  const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selection, setSelection] = useState<DestinationSelection | null>(null);
+  const [debouncedQuery] = useDebouncedValue(searchQuery, 300);
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  const { data: spacesData, isLoading: spacesLoading } = useGetSpacesQuery({
+    limit: 100,
+  });
+
+  const searchEnabled =
+    !searchSpacesOnly && debouncedQuery && debouncedQuery.length >= 2;
+
+  const { data: searchData, isLoading: searchLoading } =
+    useSearchSuggestionsQuery({
+      query: searchEnabled ? debouncedQuery : "",
+      includePages: true,
+      limit: 20,
+    });
+
+  const isSearching = !!searchEnabled;
+
+  const filteredSpaces = useMemo(() => {
+    const items = spacesData?.items ?? [];
+    if (!searchSpacesOnly || !debouncedQuery) return items;
+    const fold = (s: string) =>
+      s
+        .normalize("NFD")
+        .replace(/[̀-ͯ]/g, "")
+        .toLocaleLowerCase();
+    const term = fold(debouncedQuery);
+    return items.filter((s) => fold(s.name).includes(term));
+  }, [spacesData, searchSpacesOnly, debouncedQuery]);
+
+  const selectedId =
+    selection?.type === "space" ? selection.spaceId : selection?.pageId ?? null;
+
+  const updateSelection = useCallback(
+    (next: DestinationSelection | null) => {
+      setSelection(next);
+      onSelectionChange(next);
+    },
+    [onSelectionChange],
+  );
+
+  const handleSearchResultClick = (page: Partial<IPage>) => {
+    if (!page.space || !page.id) return;
+
+    updateSelection({
+      type: "page",
+      spaceId: page.space.id,
+      pageId: page.id,
+      page,
+      space: page.space,
+    });
+    setSearchQuery("");
+  };
+
+  const handleSelectSpace = useCallback(
+    (space: ISpace) => {
+      updateSelection({ type: "space", spaceId: space.id, space });
+    },
+    [updateSelection],
+  );
+
+  const handleSelectPage = useCallback(
+    (page: Partial<IPage>, space: ISpace) => {
+      if (!page.id) return;
+      updateSelection({
+        type: "page",
+        spaceId: page.spaceId ?? space.id,
+        pageId: page.id,
+        page,
+        space,
+      });
+    },
+    [updateSelection],
+  );
+
+  // Pre-select space when initialSpaceId is set and spaces have loaded.
+  // Only runs once: skip if user has already made a selection.
+  useEffect(() => {
+    if (!initialSpaceId || selection) return;
+    const match = spacesData?.items?.find((s) => s.id === initialSpaceId);
+    if (match) {
+      updateSelection({ type: "space", spaceId: match.id, space: match });
+      requestAnimationFrame(() => {
+        const el = viewportRef.current?.querySelector<HTMLElement>(
+          `[data-space-id="${match.id}"]`,
+        );
+        el?.scrollIntoView({ block: "nearest" });
+      });
+    }
+  }, [initialSpaceId, selection, spacesData, updateSelection]);
+
+  return (
+    <>
+      <TextInput
+        leftSection={<IconSearch size={16} />}
+        placeholder={
+          searchSpacesOnly
+            ? t("Search spaces...")
+            : t("Search pages and spaces...")
+        }
+        aria-label={
+          searchSpacesOnly
+            ? t("Search spaces...")
+            : t("Search pages and spaces...")
+        }
+        variant="filled"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.currentTarget.value)}
+        className={classes.searchInput}
+      />
+
+      <ScrollArea
+        h="50vh"
+        offsetScrollbars
+        className={classes.scrollArea}
+        viewportRef={viewportRef}
+      >
+        {isSearching ? (
+          searchLoading ? (
+            <div className={classes.emptyState}>
+              <Loader size="xs" />
+            </div>
+          ) : searchData?.pages && searchData.pages.length > 0 ? (
+            searchData.pages.map(
+              (page) =>
+                page && (
+                  <div
+                    key={page.id}
+                    className={classes.searchResult}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => handleSearchResultClick(page)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleSearchResultClick(page);
+                      }
+                    }}
+                  >
+                    <div className={classes.iconWrapper}>
+                      {page.icon ? (
+                        page.icon
+                      ) : (
+                        <ActionIcon
+                          component="div"
+                          variant="transparent"
+                          c="gray"
+                          size={22}
+                        >
+                          <IconFileDescription size={18} />
+                        </ActionIcon>
+                      )}
+                    </div>
+                    <div className={classes.pageTitle}>
+                      {page.title || t("Untitled")}
+                    </div>
+                    {page.space && (
+                      <div className={classes.spaceName}>
+                        {page.space.name}
+                      </div>
+                    )}
+                  </div>
+                ),
+            )
+          ) : (
+            <div className={classes.emptyState}>{t("No results found")}</div>
+          )
+        ) : spacesLoading ? (
+          <div className={classes.emptyState}>
+            <Loader size="xs" />
+          </div>
+        ) : filteredSpaces.length === 0 ? (
+          <div className={classes.emptyState}>
+            {searchSpacesOnly && debouncedQuery
+              ? t("No spaces found")
+              : t("No results found")}
+          </div>
+        ) : (
+          filteredSpaces.map((space) => (
+            <SpaceRow
+              key={space.id}
+              space={space}
+              limit={pageLimit}
+              selectedId={selectedId}
+              excludePageId={excludePageId}
+              onSelectSpace={handleSelectSpace}
+              onSelectPage={handleSelectPage}
+            />
+          ))
+        )}
+      </ScrollArea>
+
+      {selection && (
+        <div className={classes.selectedIndicator}>
+          {selection.type === "space"
+            ? selection.space.name
+            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
+        </div>
+      )}
+    </>
+  );
+}

apps/client/src/components/ui/destination-picker/destination-picker.types.ts

@@ -0,0 +1,25 @@
+import { ISpace } from "@/features/space/types/space.types";
+import { IPage } from "@/features/page/types/page.types";
+
+export type DestinationSelection =
+  | { type: "space"; spaceId: string; space: ISpace }
+  | {
+      type: "page";
+      spaceId: string;
+      pageId: string;
+      page: Partial<IPage>;
+      space: Partial<ISpace>;
+    };
+
+export type DestinationPickerModalProps = {
+  opened: boolean;
+  onClose: () => void;
+  title: string;
+  actionLabel: string;
+  onSelect: (selection: DestinationSelection) => void | Promise<void>;
+  loading?: boolean;
+  excludePageId?: string;
+  pageLimit?: number;
+  initialSpaceId?: string;
+  searchSpacesOnly?: boolean;
+};

apps/client/src/components/ui/destination-picker/page-children.tsx

@@ -0,0 +1,94 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { getSidebarPages } from "@/features/page/services/page-service";
+import { IPage } from "@/features/page/types/page.types";
+import { IPagination } from "@/lib/types";
+import { PageRow } from "./page-row";
+import classes from "./destination-picker.module.css";
+
+type PageChildrenProps = {
+  spaceId: string;
+  pageId?: string;
+  depth: number;
+  limit: number;
+  selectedId: string | null;
+  excludePageId?: string;
+  onSelectPage: (page: Partial<IPage>) => void;
+};
+
+export function PageChildren({
+  spaceId,
+  pageId,
+  depth,
+  limit,
+  selectedId,
+  excludePageId,
+  onSelectPage,
+}: PageChildrenProps) {
+  const { t } = useTranslation();
+
+  const { data, isLoading, hasNextPage, fetchNextPage } = useInfiniteQuery({
+    queryKey: ["destination-pages", spaceId, pageId ?? "root"],
+    queryFn: ({ pageParam }) =>
+      getSidebarPages({
+        spaceId,
+        pageId,
+        limit,
+        cursor: pageParam,
+      }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage: IPagination<IPage>) =>
+      lastPage.meta?.nextCursor ?? undefined,
+  });
+
+  const pages = data?.pages.flatMap((page) => page.items) ?? [];
+
+  if (isLoading) {
+    return (
+      <div className={classes.emptyState}>
+        <Loader size="xs" />
+      </div>
+    );
+  }
+
+  if (pages.length === 0) {
+    return (
+      <div className={classes.emptyState}>
+        {pageId ? t("No pages inside") : t("No pages in this space")}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {pages.map((page) => (
+        <PageRow
+          key={page.id}
+          page={page}
+          depth={depth}
+          limit={limit}
+          selectedId={selectedId}
+          excludePageId={excludePageId}
+          onSelect={onSelectPage}
+        />
+      ))}
+      {hasNextPage && (
+        <div
+          className={classes.loadMore}
+          onClick={() => fetchNextPage()}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              fetchNextPage();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          {t("Load more")}
+        </div>
+      )}
+    </>
+  );
+}

apps/client/src/components/ui/destination-picker/page-row.tsx

@@ -0,0 +1,115 @@
+import { KeyboardEvent, useState } from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconChevronRight, IconFileDescription } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IPage } from "@/features/page/types/page.types";
+import { PageChildren } from "./page-children";
+import classes from "./destination-picker.module.css";
+
+type PageRowProps = {
+  page: Partial<IPage>;
+  depth: number;
+  limit: number;
+  selectedId: string | null;
+  excludePageId?: string;
+  onSelect: (page: Partial<IPage>) => void;
+};
+
+export function PageRow({
+  page,
+  depth,
+  limit,
+  selectedId,
+  excludePageId,
+  onSelect,
+}: PageRowProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  const isExcluded = page.id === excludePageId;
+  const isSelected = page.id === selectedId;
+
+  const rowClasses = [
+    classes.pageRow,
+    isSelected && classes.selected,
+    isExcluded && classes.disabled,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleSelect = () => {
+    if (!isExcluded) onSelect(page);
+  };
+
+  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect();
+    }
+  };
+
+  return (
+    <>
+      <div
+        className={rowClasses}
+        style={{ paddingLeft: depth * 20 + 12 }}
+        role="button"
+        tabIndex={isExcluded ? -1 : 0}
+        aria-disabled={isExcluded || undefined}
+        onClick={handleSelect}
+        onKeyDown={handleRowKeyDown}
+      >
+        {page.hasChildren ? (
+          <ActionIcon
+            className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
+            variant="subtle"
+            color="gray"
+            size="sm"
+            aria-label={expanded ? t("Collapse") : t("Expand")}
+            aria-expanded={expanded}
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(!expanded);
+            }}
+          >
+            <IconChevronRight size={14} />
+          </ActionIcon>
+        ) : (
+          <div style={{ width: 20, flexShrink: 0 }} />
+        )}
+
+        <div className={classes.iconWrapper}>
+          {page.icon ? (
+            page.icon
+          ) : (
+            <ActionIcon
+              component="div"
+              variant="transparent"
+              c="gray"
+              size={22}
+            >
+              <IconFileDescription size={18} />
+            </ActionIcon>
+          )}
+        </div>
+
+        <div className={classes.pageTitle}>
+          {page.title || t("Untitled")}
+        </div>
+      </div>
+
+      {expanded && page.hasChildren && (
+        <PageChildren
+          spaceId={page.spaceId}
+          pageId={page.id}
+          depth={depth + 1}
+          limit={limit}
+          selectedId={selectedId}
+          excludePageId={excludePageId}
+          onSelectPage={onSelect}
+        />
+      )}
+    </>
+  );
+}

apps/client/src/components/ui/destination-picker/space-row.tsx

@@ -0,0 +1,130 @@
+import { KeyboardEvent, useState } from "react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconChevronRight, IconLock } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { ISpace } from "@/features/space/types/space.types";
+import { IPage } from "@/features/page/types/page.types";
+import { SpaceRole } from "@/lib/types";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { AvatarIconType } from "@/features/attachments/types/attachment.types";
+import { PageChildren } from "./page-children";
+import classes from "./destination-picker.module.css";
+
+type SpaceRowProps = {
+  space: ISpace;
+  limit: number;
+  selectedId: string | null;
+  excludePageId?: string;
+  onSelectSpace: (space: ISpace) => void;
+  onSelectPage: (page: Partial<IPage>, space: ISpace) => void;
+};
+
+export function SpaceRow({
+  space,
+  limit,
+  selectedId,
+  excludePageId,
+  onSelectSpace,
+  onSelectPage,
+}: SpaceRowProps) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  const writable =
+    !!space.membership?.role && space.membership.role !== SpaceRole.READER;
+  const isSelected = space.id === selectedId;
+
+  const rowClasses = [
+    classes.spaceRow,
+    isSelected && classes.selected,
+    !writable && classes.disabled,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleSelect = () => {
+    if (writable) onSelectSpace(space);
+  };
+
+  const handleRowKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSelect();
+    }
+  };
+
+  const rowContent = (
+    <div
+      className={rowClasses}
+      data-space-id={space.id}
+      role="button"
+      tabIndex={writable ? 0 : -1}
+      aria-disabled={!writable || undefined}
+      onClick={handleSelect}
+      onKeyDown={handleRowKeyDown}
+    >
+      {writable ? (
+        <ActionIcon
+          className={`${classes.chevron} ${expanded ? classes.chevronExpanded : ""}`}
+          variant="subtle"
+          color="gray"
+          size="sm"
+          aria-label={expanded ? t("Collapse") : t("Expand")}
+          aria-expanded={expanded}
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
+        >
+          <IconChevronRight size={14} />
+        </ActionIcon>
+      ) : (
+        <div style={{ width: 20, flexShrink: 0 }} />
+      )}
+
+      <CustomAvatar
+        name={space.name}
+        avatarUrl={space.logo}
+        type={AvatarIconType.SPACE_ICON}
+        size={22}
+      />
+
+      <div className={classes.pageTitle}>{space.name}</div>
+
+      {!writable && (
+        <IconLock
+          size={14}
+          color="var(--mantine-color-gray-5)"
+        />
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      {writable ? (
+        rowContent
+      ) : (
+        <Tooltip
+          label={t("You don't have permission to create pages here")}
+          position="right"
+          withArrow
+        >
+          <div>{rowContent}</div>
+        </Tooltip>
+      )}
+
+      {expanded && writable && (
+        <PageChildren
+          spaceId={space.id}
+          depth={1}
+          limit={limit}
+          selectedId={selectedId}
+          excludePageId={excludePageId}
+          onSelectPage={(page) => onSelectPage(page, space)}
+        />
+      )}
+    </>
+  );
+}

apps/client/src/components/ui/emoji-picker.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import {
   ActionIcon,
   Popover,
@@ -7,9 +7,24 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
-const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";
 
+// Load the picker module AND the emoji data in parallel inside the lazy
+// resolution, then bind the data into the component. React.lazy only finishes
+// suspending once both are in memory, so the Suspense boundary hides the
+// Remove button until the Picker can render with real content.
+const Picker = React.lazy(async () => {
+  const [pickerModule, dataModule] = await Promise.all([
+    import("@slidoapp/emoji-mart-react"),
+    import("@slidoapp/emoji-mart-data"),
+  ]);
+  const PickerComp = pickerModule.default;
+  const data = dataModule.default;
+  return {
+    default: (props: any) => <PickerComp {...props} data={data} />,
+  };
+});
+
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
@@ -19,6 +34,7 @@ export interface EmojiPickerInterface {
     size?: string;
     variant?: string;
     c?: string;
+    tabIndex?: number;
   };
 }
 
@@ -50,6 +66,38 @@ function EmojiPicker({
     }
   });
 
+  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
+  // makes the browser scroll every scrollable ancestor of the search input to
+  // bring it on screen — including the page editor's scroll container, so the
+  // page jumps to the top whenever the picker is opened from a scrolled-down
+  // position. The search input lives inside the <em-emoji-picker> custom
+  // element's shadow root, so we poll for it after the dropdown mounts and
+  // focus it ourselves with preventScroll.
+  useEffect(() => {
+    if (!opened || !dropdown) return;
+    let cancelled = false;
+    let rafId = 0;
+    const tryFocus = (attempts: number) => {
+      if (cancelled) return;
+      const pickerEl = dropdown.querySelector("em-emoji-picker");
+      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
+        'input[type="search"]',
+      );
+      if (input) {
+        input.focus({ preventScroll: true });
+        return;
+      }
+      if (attempts < 60) {
+        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
+      }
+    };
+    rafId = requestAnimationFrame(() => tryFocus(0));
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+    };
+  }, [opened, dropdown]);
+
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
@@ -74,7 +122,11 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"}
           variant={actionIconProps?.variant || "transparent"}
           size={actionIconProps?.size}
+          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
+          aria-label={t("Pick emoji")}
+          aria-haspopup="dialog"
+          aria-expanded={opened}
         >
           {icon}
         </ActionIcon>
@@ -82,7 +134,6 @@ function EmojiPicker({
       <Suspense fallback={null}>
         <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
-            data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
             perLine={8}
             skinTonePosition="search"

apps/client/src/components/ui/empty-state.module.css

@@ -0,0 +1,8 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}

apps/client/src/components/ui/empty-state.tsx

@@ -0,0 +1,30 @@
+import { Stack, Text } from "@mantine/core";
+import { type TablerIcon } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import classes from "./empty-state.module.css";
+
+type EmptyStateProps = {
+  icon: TablerIcon;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+};
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className={classes.root}>
+      <Stack align="center" gap="xs">
+        <Icon size={40} stroke={1.5} color="var(--mantine-color-dimmed)" />
+        <Text size="lg" fw={500}>
+          {title}
+        </Text>
+        {description && (
+          <Text size="sm" c="dimmed" maw={350}>
+            {description}
+          </Text>
+        )}
+        {action}
+      </Stack>
+    </div>
+  );
+}

apps/client/src/components/ui/sidebar-toggle-button.tsx

@@ -14,7 +14,14 @@ export interface SidebarToggleProps extends BoxProps, ElementProps<"button"> {
 const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
   ({ opened, size = "sm", ...others }, ref) => {
     return (
-      <ActionIcon size={size} {...others} variant="subtle" color="gray" ref={ref}>
+      <ActionIcon
+        size={size}
+        aria-expanded={opened}
+        {...others}
+        variant="subtle"
+        color="gray"
+        ref={ref}
+      >
         {opened ? (
           <IconLayoutSidebarRightExpand />
         ) : (

apps/client/src/components/ui/skip-to-main.module.css

@@ -0,0 +1,27 @@
+.skipLink {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 9999;
+  padding: 8px 16px;
+  background: var(--mantine-color-body);
+  color: var(--mantine-color-text);
+  border: 2px solid var(--mantine-color-blue-6);
+  border-radius: 4px;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: var(--mantine-font-size-sm);
+  transform: translateY(-200%);
+  transition: transform 0.15s ease-out;
+}
+
+.skipLink:focus {
+  transform: translateY(0);
+  outline: none;
+}
+
+@media print {
+  .skipLink {
+    display: none !important;
+  }
+}

apps/client/src/components/ui/skip-to-main.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from "react-i18next";
+import classes from "./skip-to-main.module.css";
+
+export const MAIN_CONTENT_ID = "main-content";
+
+export function SkipToMain() {
+  const { t } = useTranslation();
+  return (
+    <a href={`#${MAIN_CONTENT_ID}`} className={classes.skipLink}>
+      {t("Skip to main content")}
+    </a>
+  );
+}

apps/client/src/ee/ai-chat/components/ai-chat-layout.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useChatInfoQuery } from "../queries/ai-chat-query";
+import { useChatStream } from "../hooks/use-chat-stream";
+import ChatMessageList from "./chat-message-list";
+import ChatEmptyState from "./chat-empty-state";
+import ChatInput from "./chat-input";
+import type { HomeAiPromptInitialState } from "@/features/home/components/home-ai-prompt";
+import classes from "../styles/ai-chat.module.css";
+
+export default function AiChatLayout() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const chatInfoQuery = useChatInfoQuery(chatId);
+
+  // If the URL points at a chat the user does not own, the info fetch 404s.
+  // Bounce them back to /ai so they cannot interact with any chat UI (including
+  // kicking off orphan uploads) tied to a chat they have no access to.
+  useEffect(() => {
+    if (chatId && chatInfoQuery.isError) {
+      navigate("/ai", { replace: true });
+    }
+  }, [chatId, chatInfoQuery.isError, navigate]);
+  const {
+    messages,
+    streamingContent,
+    streamingToolCalls,
+    isStreaming,
+    error,
+    sendMessage,
+    stopGeneration,
+    hydrateFromServer,
+  } = useChatStream(chatId);
+
+  const autoSentRef = useRef(false);
+
+  useEffect(() => {
+    if (chatInfoQuery.data?.messages) {
+      hydrateFromServer(chatInfoQuery.data.messages);
+    }
+  }, [chatInfoQuery.data, hydrateFromServer]);
+
+  useEffect(() => {
+    if (autoSentRef.current || chatId) return;
+    const state = location.state as HomeAiPromptInitialState | null;
+    if (!state?.initialContent && !state?.initialAttachments?.length) return;
+
+    autoSentRef.current = true;
+    sendMessage(
+      state.initialContent ?? "",
+      state.initialMentions ?? [],
+      state.initialAttachments ?? [],
+    );
+    navigate(location.pathname, { replace: true, state: null });
+  }, [chatId, location, navigate, sendMessage]);
+
+  const hasMessages = messages.length > 0 || isStreaming || !!chatId;
+
+  // While the redirect effect is running (or if the user is still on this
+  // component for any reason) never render the chat UI for a forbidden chat.
+  if (chatId && chatInfoQuery.isError) {
+    return null;
+  }
+
+  return (
+    <div className={classes.main}>
+      {hasMessages ? (
+        <>
+          <ChatMessageList
+            messages={messages}
+            isStreaming={isStreaming}
+            streamingContent={streamingContent}
+            streamingToolCalls={streamingToolCalls}
+          />
+          {error && (
+            <div
+              style={{
+                padding: "var(--mantine-spacing-sm) var(--mantine-spacing-lg)",
+                color: "var(--mantine-color-red-6)",
+                fontSize: "var(--mantine-font-size-sm)",
+              }}
+            >
+              {error}
+            </div>
+          )}
+          <div className={classes.inputArea}>
+            <ChatInput
+              isStreaming={isStreaming}
+              onSend={sendMessage}
+              onStop={stopGeneration}
+              chatId={chatId}
+            />
+          </div>
+        </>
+      ) : (
+        <ChatEmptyState
+          isStreaming={isStreaming}
+          onSend={sendMessage}
+          onStop={stopGeneration}
+        />
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/ai-chat-sidebar-item.tsx

@@ -0,0 +1,167 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { ActionIcon, Menu, TextInput } from "@mantine/core";
+import { IconDots, IconTrash, IconEdit } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import type { AiChat } from "../types/ai-chat.types";
+import classes from "../styles/chat-sidebar.module.css";
+
+type Props = {
+  chat: AiChat;
+  isActive: boolean;
+  onDelete: (chatId: string, title: string | null) => void;
+  onRename: (chatId: string, title: string) => void;
+};
+
+function formatChatDate(
+  isoString: string | Date,
+  locale: string | undefined,
+): string {
+  const date = new Date(isoString);
+  if (Number.isNaN(date.getTime())) return "";
+
+  const now = new Date();
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime();
+  const ts = date.getTime();
+  const sameYear = date.getFullYear() === now.getFullYear();
+
+  if (ts >= startOfToday) {
+    return date.toLocaleTimeString(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+    });
+  }
+
+  if (sameYear) {
+    return date.toLocaleDateString(locale, {
+      month: "short",
+      day: "numeric",
+    });
+  }
+
+  return date.toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export default function AiChatSidebarItem({
+  chat,
+  isActive,
+  onDelete,
+  onRename,
+}: Props) {
+  const { t, i18n } = useTranslation();
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const formattedDate = useMemo(
+    () => formatChatDate(chat.updatedAt, i18n.language),
+    [chat.updatedAt, i18n.language],
+  );
+
+  useEffect(() => {
+    if (renaming) {
+      // Wait for the input to be mounted before selecting.
+      const id = window.setTimeout(() => inputRef.current?.select(), 0);
+      return () => window.clearTimeout(id);
+    }
+  }, [renaming]);
+
+  const startRename = useCallback(() => {
+    setRenameValue(chat.title || "");
+    setRenaming(true);
+  }, [chat.title]);
+
+  const submitRename = useCallback(() => {
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== chat.title) {
+      onRename(chat.id, trimmed);
+    }
+    setRenaming(false);
+  }, [renameValue, chat.id, chat.title, onRename]);
+
+  if (renaming) {
+    return (
+      <div className={classes.chatItem} data-active={isActive || undefined}>
+        <TextInput
+          ref={inputRef}
+          size="xs"
+          variant="unstyled"
+          placeholder={t("Chat name")}
+          value={renameValue}
+          onChange={(e) => setRenameValue(e.currentTarget.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              submitRename();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setRenaming(false);
+            }
+          }}
+          onBlur={submitRename}
+          classNames={{ input: classes.chatItemRenameInput }}
+          style={{ flex: 1 }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      to={`/ai/chat/${chat.id}`}
+      className={classes.chatItem}
+      data-active={isActive || undefined}
+    >
+      <span className={classes.chatItemTitle}>
+        {chat.title || t("Untitled chat")}
+      </span>
+      <span className={classes.chatItemDate}>{formattedDate}</span>
+      <div className={classes.chatItemActions}>
+        <Menu position="bottom-end" withinPortal>
+          <Menu.Target>
+            <ActionIcon
+              variant="subtle"
+              size="xs"
+              color="gray"
+              onClick={(e) => e.preventDefault()}
+              aria-label={t("Chat menu")}
+            >
+              <IconDots size={14} />
+            </ActionIcon>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              leftSection={<IconEdit size={14} />}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                startRename();
+              }}
+            >
+              {t("Rename")}
+            </Menu.Item>
+            <Menu.Item
+              leftSection={<IconTrash size={14} />}
+              color="red"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onDelete(chat.id, chat.title);
+              }}
+            >
+              {t("Delete")}
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </div>
+    </Link>
+  );
+}

apps/client/src/ee/ai-chat/components/ai-chat-sidebar.tsx

@@ -0,0 +1,204 @@
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  ActionIcon,
+  Center,
+  Text,
+  TextInput,
+  Loader,
+  Tooltip,
+} from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useDebouncedValue } from "@mantine/hooks";
+import { IconPlus, IconSearch, IconMessageCircle2 } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import {
+  useChatsQuery,
+  useDeleteChatMutation,
+  useUpdateChatTitleMutation,
+  useSearchChatsQuery,
+} from "../queries/ai-chat-query";
+import AiChatSidebarItem from "./ai-chat-sidebar-item";
+import { groupChatsByAge } from "../utils/group-chats-by-age";
+import classes from "../styles/chat-sidebar.module.css";
+
+export default function AiChatSidebar() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { chatId } = useParams<{ chatId: string }>();
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 300);
+  const chatsQuery = useChatsQuery();
+  const searchQuery = useSearchChatsQuery(debouncedSearch);
+  const deleteMutation = useDeleteChatMutation();
+  const renameMutation = useUpdateChatTitleMutation();
+
+  const chats = useMemo(() => {
+    if (debouncedSearch) {
+      return searchQuery.data || [];
+    }
+    return chatsQuery.data?.pages.flatMap((p) => p.items) || [];
+  }, [debouncedSearch, searchQuery.data, chatsQuery.data]);
+
+  const groupedChats = useMemo(() => groupChatsByAge(chats, t), [chats, t]);
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const { hasNextPage, fetchNextPage, isFetchingNextPage } = chatsQuery;
+  const isSearching = Boolean(debouncedSearch);
+
+  useEffect(() => {
+    if (isSearching) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
+          fetchNextPage();
+        }
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [isSearching, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const handleNewChat = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        event.button !== 0 ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+      event.preventDefault();
+      navigate("/ai");
+    },
+    [navigate],
+  );
+
+  const handleDelete = useCallback(
+    (id: string, title: string | null) => {
+      modals.openConfirmModal({
+        title: t("Delete chat"),
+        centered: true,
+        children: (
+          <Text size="sm">
+            {t("Are you sure you want to delete '{{title}}'? This action cannot be undone.", {
+              title: title || t("Untitled"),
+            })}
+          </Text>
+        ),
+        labels: { confirm: t("Delete"), cancel: t("Cancel") },
+        confirmProps: { color: "red" },
+        onConfirm: () => {
+          deleteMutation.mutate(id, {
+            onSuccess: () => {
+              if (chatId === id) {
+                navigate("/ai");
+              }
+            },
+          });
+        },
+      });
+    },
+    [deleteMutation, chatId, navigate, t],
+  );
+
+  const handleRename = useCallback(
+    (chatId: string, title: string) => {
+      renameMutation.mutate({ chatId, title });
+    },
+    [renameMutation],
+  );
+
+  const isLoading = chatsQuery.isLoading || searchQuery.isLoading;
+
+  return (
+    <div className={classes.sidebar}>
+      <div className={classes.header}>
+        <h2 className={classes.title}>{t("AI Chat")}</h2>
+        <Tooltip label={t("New chat")} openDelay={250} withArrow>
+          <ActionIcon
+            component={Link}
+            to="/ai"
+            variant="subtle"
+            color="gray"
+            onClick={handleNewChat}
+            aria-label={t("New chat")}
+          >
+            <IconPlus size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      <TextInput
+        className={classes.searchInput}
+        placeholder={t("Search chats...")}
+        aria-label={t("Search chats")}
+        leftSection={<IconSearch size={14} />}
+        size="xs"
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+
+      <div className={classes.chatList}>
+        {isLoading && <Loader size="xs" mx="auto" mt="md" />}
+        {!isLoading && chats.length === 0 && (
+          <div className={classes.chatListEmpty}>
+            <IconMessageCircle2
+              size={28}
+              stroke={1.5}
+              className={classes.chatListEmptyIcon}
+            />
+            <div className={classes.chatListEmptyTitle}>
+              {isSearching ? t("No chats found") : t("No conversations yet")}
+            </div>
+            <div className={classes.chatListEmptyHint}>
+              {isSearching
+                ? t("Try a different search term.")
+                : t("Start a new chat to see it here.")}
+            </div>
+          </div>
+        )}
+        {isSearching
+          ? chats.map((chat) => (
+              <AiChatSidebarItem
+                key={chat.id}
+                chat={chat}
+                isActive={chat.id === chatId}
+                onDelete={handleDelete}
+                onRename={handleRename}
+              />
+            ))
+          : groupedChats.map((group) => (
+              <div key={group.key} className={classes.chatGroup}>
+                <h3 className={classes.chatGroupLabel}>{group.label}</h3>
+                {group.chats.map((chat) => (
+                  <AiChatSidebarItem
+                    key={chat.id}
+                    chat={chat}
+                    isActive={chat.id === chatId}
+                    onDelete={handleDelete}
+                    onRename={handleRename}
+                  />
+                ))}
+              </div>
+            ))}
+        {!isSearching && (
+          <>
+            <div ref={sentinelRef} style={{ height: 1 }} />
+            {isFetchingNextPage && (
+              <Center py="xs">
+                <Loader size="xs" />
+              </Center>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/aside-chat-history.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import { TextInput, Loader, Text, ScrollArea } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+import { useChatsQuery, useSearchChatsQuery } from "../queries/ai-chat-query";
+import { useDebouncedValue } from "@mantine/hooks";
+import { useTranslation } from "react-i18next";
+import classes from "../styles/aside-chat-panel.module.css";
+
+type Props = {
+  activeChatId: string | undefined;
+  onSelect: (chatId: string) => void;
+};
+
+export default function AsideChatHistory({ activeChatId, onSelect }: Props) {
+  const { t } = useTranslation();
+  const [searchValue, setSearchValue] = useState("");
+  const [debouncedSearch] = useDebouncedValue(searchValue, 300);
+
+  const chatsQuery = useChatsQuery();
+  const searchQuery = useSearchChatsQuery(debouncedSearch);
+
+  const isSearching = debouncedSearch.length > 0;
+  const chats = isSearching
+    ? (searchQuery.data ?? [])
+    : (chatsQuery.data?.pages.flatMap((p) => p.items) ?? []);
+  const isLoading = isSearching ? searchQuery.isLoading : chatsQuery.isLoading;
+
+  return (
+    <div>
+      <TextInput
+        placeholder={t("Search chats...")}
+        leftSection={<IconSearch size={14} />}
+        size="xs"
+        mb="xs"
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.currentTarget.value)}
+      />
+
+      {isLoading ? (
+        <div style={{ display: "flex", justifyContent: "center", padding: 16 }}>
+          <Loader size="sm" />
+        </div>
+      ) : chats.length === 0 ? (
+        <Text size="sm" c="dimmed" ta="center" py="md">
+          {isSearching ? t("No chats found") : t("No chat history")}
+        </Text>
+      ) : (
+        <ScrollArea.Autosize mah={300} scrollbars="y">
+          <div className={classes.historyList}>
+            {chats.map((chat) => (
+              <div
+                key={chat.id}
+                className={classes.historyItem}
+                data-active={chat.id === activeChatId || undefined}
+                onClick={() => onSelect(chat.id)}
+              >
+                <span className={classes.historyItemTitle}>
+                  {chat.title || t("Untitled chat")}
+                </span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea.Autosize>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/aside-chat-panel.tsx

@@ -0,0 +1,269 @@
+import { useState, useEffect, useCallback } from "react";
+import { ActionIcon, Popover, Tooltip, UnstyledButton } from "@mantine/core";
+import {
+  IconPlus,
+  IconChevronDown,
+  IconArrowsDiagonal,
+  IconX,
+  IconSparkles,
+  IconFileText,
+  IconLanguage,
+  IconSearch,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { extractPageSlugId } from "@/lib";
+import { useChatStream } from "../hooks/use-chat-stream";
+import { useChatInfoQuery } from "../queries/ai-chat-query";
+import ChatMessageList from "./chat-message-list";
+import ChatInput from "./chat-input";
+import AsideChatHistory from "./aside-chat-history";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/aside-chat-panel.module.css";
+
+type QuickAction = {
+  icon: React.ReactNode;
+  label: string;
+  prompt: string;
+};
+
+export default function AsideChatPanel() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [, setAsideState] = useAtom(asideStateAtom);
+  const [chatId, setChatId] = useState<string | undefined>(undefined);
+  const [historyOpen, setHistoryOpen] = useState(false);
+  const [contextPages, setContextPages] = useState<PageMention[]>([]);
+  const { pageSlug } = useParams();
+  const slugId = extractPageSlugId(pageSlug);
+  const { data: page } = usePageQuery({ pageId: slugId });
+
+  const chatInfoQuery = useChatInfoQuery(chatId);
+  const {
+    messages,
+    streamingContent,
+    streamingToolCalls,
+    isStreaming,
+    error,
+    sendMessage,
+    stopGeneration,
+    hydrateFromServer,
+  } = useChatStream(chatId, {
+    onChatCreated: (newChatId) => {
+      setChatId(newChatId);
+    },
+  });
+
+  useEffect(() => {
+    if (page && !chatId) {
+      setContextPages([{ id: page.id, title: page.title || "", slugId: page.slugId }]);
+    }
+  }, [page, chatId]);
+
+  const handleRemoveContextPage = useCallback((pageId: string) => {
+    setContextPages((prev) => prev.filter((p) => p.id !== pageId));
+  }, []);
+
+  useEffect(() => {
+    if (chatInfoQuery.data?.messages) {
+      hydrateFromServer(chatInfoQuery.data.messages);
+    }
+  }, [chatInfoQuery.data, hydrateFromServer]);
+
+  // Drop the open chatId if the current user lost access to it (404/403 on
+  // the info fetch). Reverts the panel to a fresh chat instead of presenting
+  // an input tied to a chat the user does not own.
+  useEffect(() => {
+    if (chatId && chatInfoQuery.isError) {
+      setChatId(undefined);
+    }
+  }, [chatId, chatInfoQuery.isError]);
+
+  const handleNewChat = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      if (
+        event.button !== 0 ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return;
+      }
+      event.preventDefault();
+      setChatId(undefined);
+      if (page) {
+        setContextPages([
+          { id: page.id, title: page.title || "", slugId: page.slugId },
+        ]);
+      }
+    },
+    [page],
+  );
+
+  const handleSelectChat = useCallback((selectedChatId: string) => {
+    setChatId(selectedChatId);
+    setHistoryOpen(false);
+  }, []);
+
+  const handleExpand = useCallback(() => {
+    if (chatId) {
+      navigate(`/ai/chat/${chatId}`);
+    } else {
+      navigate("/ai");
+    }
+    setAsideState({ tab: "", isAsideOpen: false });
+  }, [chatId, navigate, setAsideState]);
+
+  const handleClose = useCallback(() => {
+    setAsideState({ tab: "", isAsideOpen: false });
+  }, [setAsideState]);
+
+  const handleSend = useCallback(
+    (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => {
+      const contextPageId = contextPages.length > 0 ? contextPages[0].id : undefined;
+      sendMessage(content, mentions, attachments, contextPageId);
+    },
+    [sendMessage, contextPages],
+  );
+
+  const handleQuickAction = useCallback(
+    (prompt: string) => {
+      handleSend(prompt, [], []);
+    },
+    [handleSend],
+  );
+
+  const hasMessages = messages.length > 0 || isStreaming;
+
+  const quickActions: QuickAction[] = [
+    { icon: <IconFileText size={16} />, label: t("Summarize this page"), prompt: "Summarize this page" },
+    { icon: <IconLanguage size={16} />, label: t("Translate this page"), prompt: "Translate this page" },
+    { icon: <IconSearch size={16} />, label: t("Analyze for insights"), prompt: "Analyze this page for insights" },
+  ];
+
+  return (
+    <div className={classes.panel}>
+      <div className={classes.toolbar}>
+        <Popover
+          opened={historyOpen}
+          onChange={setHistoryOpen}
+          position="bottom-start"
+          width={280}
+          shadow="md"
+        >
+          <Popover.Target>
+            <UnstyledButton
+              className={classes.titleButton}
+              onClick={() => setHistoryOpen((o) => !o)}
+            >
+              <span className={classes.titleText}>
+                {chatInfoQuery.data?.chat?.title || t("New chat")}
+              </span>
+              <IconChevronDown size={16} stroke={1.75} />
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
+            <AsideChatHistory activeChatId={chatId} onSelect={handleSelectChat} />
+          </Popover.Dropdown>
+        </Popover>
+
+        <div className={classes.toolbarSpacer} />
+
+        <Tooltip label={t("New chat")} openDelay={250}>
+          <ActionIcon
+            component="a"
+            href="/ai"
+            variant="subtle"
+            color="dark"
+            aria-label={t("New chat")}
+            onClick={handleNewChat}
+          >
+            <IconPlus size={20} stroke={1.75} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("Open full page")} openDelay={250}>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            aria-label={t("Open full page")}
+            onClick={handleExpand}
+          >
+            <IconArrowsDiagonal size={18} stroke={1.5} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip label={t("Close")} openDelay={250}>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            aria-label={t("Close")}
+            onClick={handleClose}
+          >
+            <IconX size={20} stroke={1.75} />
+          </ActionIcon>
+        </Tooltip>
+      </div>
+
+      {error && (
+        <div
+          style={{
+            padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
+            color: "var(--mantine-color-red-6)",
+            fontSize: "var(--mantine-font-size-xs)",
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {hasMessages ? (
+        <>
+          <div className={classes.messages} data-aside-chat>
+            <ChatMessageList
+              messages={messages}
+              isStreaming={isStreaming}
+              streamingContent={streamingContent}
+              streamingToolCalls={streamingToolCalls}
+            />
+          </div>
+        </>
+      ) : (
+        <div className={classes.emptyState}>
+          <IconSparkles size={36} stroke={1.5} className={classes.emptyStateIcon} />
+          <div className={classes.emptyStateTitle}>{t("How can I help you today?")}</div>
+          <div className={classes.quickActions}>
+            {quickActions.map((action) => (
+              <button
+                key={action.label}
+                type="button"
+                className={classes.quickAction}
+                onClick={() => handleQuickAction(action.prompt)}
+              >
+                <span className={classes.quickActionIcon}>{action.icon}</span>
+                {action.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className={classes.inputArea}>
+        <ChatInput
+          isStreaming={isStreaming}
+          onSend={handleSend}
+          onStop={stopGeneration}
+          placeholder={t("Ask anything...")}
+          autofocus={false}
+          contextPages={contextPages}
+          onRemoveContextPage={handleRemoveContextPage}
+          variant="flat"
+          chatId={chatId}
+        />
+      </div>
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-empty-state.tsx

@@ -0,0 +1,91 @@
+import {
+  IconSparkles,
+  IconSearch,
+  IconFilePlus,
+  IconEdit,
+  IconFileText,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import ChatInput from "./chat-input";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/ai-chat.module.css";
+
+type Suggestion = {
+  icon: React.ReactNode;
+  text: string;
+  prompt: string;
+};
+
+const SUGGESTIONS: Suggestion[] = [
+  {
+    icon: <IconSearch size={16} />,
+    text: "Search across all pages",
+    prompt: "Search for pages about ",
+  },
+  {
+    icon: <IconFilePlus size={16} />,
+    text: "Create a new page",
+    prompt: "Create a new page titled ",
+  },
+  {
+    icon: <IconFileText size={16} />,
+    text: "Summarize a page",
+    prompt: "Summarize the page @",
+  },
+  {
+    icon: <IconEdit size={16} />,
+    text: "Update page content",
+    prompt: "Update the page @",
+  },
+];
+
+type Props = {
+  isStreaming: boolean;
+  onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
+  onStop: () => void;
+};
+
+export default function ChatEmptyState({ isStreaming, onSend, onStop }: Props) {
+  const { t } = useTranslation();
+
+  const handleSuggestionClick = (prompt: string) => {
+    onSend(prompt, [], []);
+  };
+
+  return (
+    <div className={classes.emptyState}>
+      <IconSparkles size={48} stroke={1.5} className={classes.emptyStateIcon} />
+      <div className={classes.emptyStateBrand}>{t("Docmost AI")}</div>
+      <h1 className={classes.emptyStateTitle}>
+        {t("What can I help you with?")}
+      </h1>
+
+      <div className={classes.emptyStateInput}>
+        <ChatInput
+          isStreaming={isStreaming}
+          onSend={onSend}
+          onStop={onStop}
+          placeholder={t("Ask anything... Use @ to mention pages")}
+          autofocus
+        />
+      </div>
+
+      <div className={classes.suggestionsSection}>
+        <h2 className={classes.suggestionsLabel}>{t("Get started")}</h2>
+        <div className={classes.suggestionsGrid}>
+          {SUGGESTIONS.map((s) => (
+            <button
+              key={s.text}
+              type="button"
+              className={classes.suggestionCard}
+              onClick={() => handleSuggestionClick(s.prompt)}
+            >
+              <span className={classes.suggestionIcon}>{s.icon}</span>
+              <span className={classes.suggestionText}>{s.text}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-input.tsx

@@ -0,0 +1,424 @@
+import { useCallback, useRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
+import { Popover } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { CharacterCount } from "@tiptap/extensions";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Mention, LinkExtension } from "@docmost/editor-ext";
+import EmojiCommand from "@/features/editor/extensions/emoji-command";
+import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
+import MentionView from "@/features/editor/components/mention/mention-view";
+import { uploadChatFile } from "../services/ai-chat-service";
+import type { ChatAttachment, PageMention } from "../types/ai-chat.types";
+import classes from "../styles/chat-input.module.css";
+
+type PendingAttachment = ChatAttachment & { uploading: boolean };
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
+const ACCEPTED_FILE_TYPES = ".pdf,.docx,.txt,.csv,.md,.png,.jpg,.jpeg,.webp";
+// Kept in sync with MAX_ATTACHMENTS_PER_MESSAGE in apps/server/src/ee/ai-chat/ai-chat-limits.ts
+const MAX_ATTACHMENTS_PER_MESSAGE = 5;
+
+type Props = {
+  isStreaming: boolean;
+  onSend: (content: string, mentions: PageMention[], attachments: ChatAttachment[]) => void;
+  onStop: () => void;
+  placeholder?: string;
+  autofocus?: boolean;
+  contextPages?: PageMention[];
+  onRemoveContextPage?: (pageId: string) => void;
+  variant?: "card" | "flat";
+  showDisclaimer?: boolean;
+  chatId?: string;
+};
+
+function extractMentions(json: any): PageMention[] {
+  const mentions: PageMention[] = [];
+  const seen = new Set<string>();
+
+  function walk(node: any) {
+    if (node.type === "mention" && node.attrs?.entityType === "page" && node.attrs?.entityId) {
+      if (!seen.has(node.attrs.entityId)) {
+        seen.add(node.attrs.entityId);
+        mentions.push({
+          id: node.attrs.entityId,
+          title: node.attrs.label || "",
+          slugId: node.attrs.slugId || "",
+        });
+      }
+    }
+    if (node.content) {
+      for (const child of node.content) {
+        walk(child);
+      }
+    }
+  }
+
+  walk(json);
+  return mentions;
+}
+
+function editorJsonToText(json: any): string {
+  let text = "";
+
+  function walk(node: any) {
+    if (node.type === "text") {
+      text += node.text || "";
+    } else if (node.type === "mention") {
+      text += `@${node.attrs?.label || ""}`;
+    } else if (node.type === "paragraph") {
+      if (text.length > 0) text += "\n";
+      if (node.content) {
+        for (const child of node.content) {
+          walk(child);
+        }
+      }
+      return;
+    }
+    if (node.content) {
+      for (const child of node.content) {
+        walk(child);
+      }
+    }
+  }
+
+  walk(json);
+  return text;
+}
+
+export default function ChatInput({
+  isStreaming,
+  onSend,
+  onStop,
+  placeholder,
+  autofocus = true,
+  contextPages,
+  onRemoveContextPage,
+  variant = "card",
+  showDisclaimer = true,
+  chatId,
+}: Props) {
+  const chatIdRef = useRef(chatId);
+  chatIdRef.current = chatId;
+  const { t } = useTranslation();
+  const [isEmpty, setIsEmpty] = useState(true);
+  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
+  const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const onSendRef = useRef(onSend);
+  onSendRef.current = onSend;
+
+  const handleFileSelect = useCallback(async (files: FileList | null) => {
+    if (!files?.length) return;
+
+    const room = MAX_ATTACHMENTS_PER_MESSAGE - pendingAttachments.length;
+    if (room <= 0) {
+      notifications.show({
+        color: "yellow",
+        message: t("You can attach up to {{max}} files per message.", {
+          max: MAX_ATTACHMENTS_PER_MESSAGE,
+        }),
+      });
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      return;
+    }
+
+    const incoming = Array.from(files);
+    const accepted = incoming.slice(0, room);
+
+    if (incoming.length > accepted.length) {
+      notifications.show({
+        color: "yellow",
+        message: t(
+          "Only the first {{n}} file(s) were added (max {{max}} per message).",
+          { n: accepted.length, max: MAX_ATTACHMENTS_PER_MESSAGE },
+        ),
+      });
+    }
+
+    for (const file of accepted) {
+      const tempId = `uploading-${Date.now()}-${Math.random()}`;
+      const ext = file.name.split(".").pop()?.toLowerCase() || "";
+
+      const placeholder: PendingAttachment = {
+        id: tempId,
+        fileName: file.name,
+        fileExt: ext,
+        fileSize: file.size,
+        mimeType: file.type,
+        uploading: true,
+      };
+
+      setPendingAttachments((prev) => [...prev, placeholder]);
+
+      try {
+        const uploaded = await uploadChatFile(file, chatIdRef.current);
+        setPendingAttachments((prev) =>
+          prev.map((a) =>
+            a.id === tempId ? { ...uploaded, uploading: false } : a,
+          ),
+        );
+      } catch {
+        setPendingAttachments((prev) => prev.filter((a) => a.id !== tempId));
+      }
+    }
+
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, [pendingAttachments.length, t]);
+
+  const removeAttachment = useCallback((id: string) => {
+    setPendingAttachments((prev) => prev.filter((a) => a.id !== id));
+  }, []);
+
+  const handleSubmit = useCallback(() => {
+    if (!editor || isStreaming) return;
+    const json = editor.getJSON();
+    const text = editorJsonToText(json).trim();
+    const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
+    if (!text && readyAttachments.length === 0) return;
+
+    const mentions = extractMentions(json);
+    onSendRef.current(text, mentions, readyAttachments);
+    editor.commands.clearContent();
+    editor.commands.focus();
+    setPendingAttachments([]);
+  }, [isStreaming, pendingAttachments]);
+
+  const handleSubmitRef = useRef(handleSubmit);
+  handleSubmitRef.current = handleSubmit;
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        gapcursor: false,
+        dropcursor: false,
+        link: false,
+      }),
+      Placeholder.configure({
+        placeholder: placeholder || t("Ask anything... Use @ to mention pages"),
+      }),
+      CharacterCount.configure({
+        limit: 50000,
+      }),
+      LinkExtension,
+      EmojiCommand,
+      Mention.configure({
+        suggestion: {
+          allowSpaces: true,
+          items: () => [],
+          // @ts-ignore
+          render: mentionRenderItems,
+        },
+        HTMLAttributes: {
+          class: "mention",
+        },
+      }).extend({
+        addNodeView() {
+          this.editor.isInitialized = true;
+          return ReactNodeViewRenderer(MentionView);
+        },
+      }),
+    ],
+    editorProps: {
+      attributes: {
+        role: "textbox",
+        "aria-label": placeholder || t("Ask anything... Use @ to mention pages"),
+        "aria-multiline": "true",
+      },
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (
+            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
+              event.key,
+            )
+          ) {
+            const emojiCommand = document.querySelector("#emoji-command");
+            const mentionPopup = document.querySelector("#mention");
+            if (emojiCommand || mentionPopup) {
+              return true;
+            }
+          }
+
+          if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            handleSubmitRef.current();
+            return true;
+          }
+        },
+      },
+    },
+    content: "",
+    editable: true,
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
+    autofocus: autofocus ? "end" : false,
+    onUpdate: ({ editor: e }) => {
+      setIsEmpty(!e.getText().trim());
+    },
+  });
+
+  useEffect(() => {
+    if (editor && autofocus) {
+      editor.commands.focus();
+    }
+  }, [editor]);
+
+  const hasContent = !isEmpty || pendingAttachments.some((a) => !a.uploading) || (contextPages?.length ?? 0) > 0;
+
+  const wrapperClass = variant === "flat" ? classes.inputWrapperFlat : classes.inputWrapper;
+
+  return (
+    <>
+    <div className={wrapperClass} data-chat-input>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPTED_FILE_TYPES}
+        multiple
+        aria-label={t("Add files")}
+        tabIndex={-1}
+        style={{ display: "none" }}
+        onChange={(e) => handleFileSelect(e.target.files)}
+      />
+
+      {((contextPages?.length ?? 0) > 0 || pendingAttachments.length > 0) && (
+        <div className={classes.attachmentChips}>
+          {contextPages?.map((page) => (
+            <div key={page.id} className={classes.attachmentChip}>
+              <IconFileText size={14} />
+              <span className={classes.attachmentChipName}>
+                {page.title || "Untitled"}
+              </span>
+              {onRemoveContextPage && (
+                <button
+                  type="button"
+                  className={classes.attachmentChipRemove}
+                  onClick={() => onRemoveContextPage(page.id)}
+                  aria-label={`Remove ${page.title}`}
+                >
+                  <IconX size={12} />
+                </button>
+              )}
+            </div>
+          ))}
+          {pendingAttachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className={`${classes.attachmentChip} ${attachment.uploading ? classes.attachmentChipUploading : ""}`}
+            >
+              {IMAGE_EXTENSIONS.includes(attachment.fileExt) ? (
+                <IconPhoto size={14} />
+              ) : (
+                <IconFile size={14} />
+              )}
+              <span className={classes.attachmentChipName}>
+                {attachment.fileName}
+              </span>
+              {!attachment.uploading && (
+                <button
+                  type="button"
+                  className={classes.attachmentChipRemove}
+                  onClick={() => removeAttachment(attachment.id)}
+                  aria-label={`Remove ${attachment.fileName}`}
+                >
+                  <IconX size={12} />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <EditorContent editor={editor} className={classes.editorContent} />
+      <div className={classes.actions}>
+        <Popover
+          opened={plusMenuOpen}
+          onChange={setPlusMenuOpen}
+          position="top-start"
+          width={220}
+          shadow="md"
+          trapFocus
+          returnFocus
+        >
+          <Popover.Target>
+            <button
+              type="button"
+              className={classes.plusButton}
+              onClick={() => setPlusMenuOpen((o) => !o)}
+              aria-label="Add content"
+            >
+              <IconPlus size={14} />
+            </button>
+          </Popover.Target>
+          <Popover.Dropdown p={4}>
+            <button
+              type="button"
+              className={classes.plusMenuItem}
+              onClick={() => {
+                fileInputRef.current?.click();
+                setPlusMenuOpen(false);
+              }}
+              disabled={pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE}
+              title={
+                pendingAttachments.length >= MAX_ATTACHMENTS_PER_MESSAGE
+                  ? t("Max {{max}} files per message", {
+                      max: MAX_ATTACHMENTS_PER_MESSAGE,
+                    })
+                  : undefined
+              }
+            >
+              <IconPaperclip size={16} className={classes.plusMenuIcon} />
+              {t("Add files")}
+            </button>
+            <button
+              type="button"
+              className={classes.plusMenuItem}
+              onClick={() => {
+                editor?.commands.insertContent("@");
+                editor?.commands.focus();
+                setPlusMenuOpen(false);
+              }}
+            >
+              <IconAt size={16} className={classes.plusMenuIcon} />
+              Mention a page
+            </button>
+          </Popover.Dropdown>
+        </Popover>
+
+        <div style={{ flex: 1 }} />
+
+        {isStreaming ? (
+          <button
+            type="button"
+            className={classes.stopButton}
+            onClick={onStop}
+            aria-label="Stop generation"
+          >
+            <IconPlayerStopFilled size={14} />
+          </button>
+        ) : (
+          <button
+            type="button"
+            className={classes.sendButton}
+            onClick={handleSubmit}
+            disabled={!hasContent}
+            aria-label="Send message"
+          >
+            <IconArrowUp size={16} stroke={2.5} />
+          </button>
+        )}
+      </div>
+    </div>
+    {showDisclaimer && (
+      <div className={classes.disclaimer}>
+        {t("AI-generated content may not be accurate.")}
+      </div>
+    )}
+    </>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-message-list.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useRef, useCallback, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { IconArrowDown, IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { VisuallyHidden } from "@mantine/core";
+import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
+import ChatMessage from "./chat-message";
+import classes from "../styles/ai-chat.module.css";
+
+function ChatMessageErrorFallback() {
+  const { t } = useTranslation();
+  return (
+    <div className={classes.messageErrorFallback}>
+      <IconAlertTriangle size={14} />
+      <span>{t("Failed to render this message.")}</span>
+    </div>
+  );
+}
+
+type Props = {
+  messages: AiChatMessage[];
+  isStreaming: boolean;
+  streamingContent: string;
+  streamingToolCalls: AiChatToolCall[];
+};
+
+const BOTTOM_THRESHOLD_PX = 32;
+const SCROLL_UP_THRESHOLD_PX = 5;
+const SMOOTH_SCROLL_SETTLE_MS = 600;
+
+export default function ChatMessageList({
+  messages,
+  isStreaming,
+  streamingContent,
+  streamingToolCalls,
+}: Props) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const isAtBottomRef = useRef(true);
+  const isAutoScrollingRef = useRef(false);
+  const prevScrollTopRef = useRef(0);
+  const [showScrollButton, setShowScrollButton] = useState(false);
+
+  // Dedicated status-region announcement for screen readers. Rather than
+  // putting aria-live on the whole transcript (which re-fires for every
+  // streamed token), announce "AI is thinking…" when streaming starts and
+  // the full assistant reply once streaming completes — a single, clean read.
+  const [statusAnnouncement, setStatusAnnouncement] = useState("");
+  const wasStreamingRef = useRef(false);
+
+  useEffect(() => {
+    const justStartedStreaming = isStreaming && !wasStreamingRef.current;
+    const justFinishedStreaming = !isStreaming && wasStreamingRef.current;
+
+    if (justStartedStreaming) {
+      setStatusAnnouncement(t("AI is thinking..."));
+    } else if (justFinishedStreaming) {
+      const lastMessage = messages[messages.length - 1];
+      if (lastMessage?.role === "assistant" && lastMessage.content) {
+        // Strip markdown punctuation so screen readers don't read symbols
+        // like # * _ ` ~ aloud. A plain-text version is fine — the styled
+        // version stays in the DOM for visual users.
+        const plainText = lastMessage.content
+          .replace(/[#*_`~]/g, "")
+          .replace(/\s+/g, " ")
+          .trim();
+        setStatusAnnouncement(plainText);
+      } else {
+        setStatusAnnouncement("");
+      }
+    }
+
+    wasStreamingRef.current = isStreaming;
+  }, [isStreaming, messages, t]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    isAutoScrollingRef.current = true;
+    const target = container.scrollHeight - container.clientHeight;
+    container.scrollTo({ top: target, behavior });
+    prevScrollTopRef.current = target;
+    isAtBottomRef.current = true;
+    setShowScrollButton(false);
+
+    if (behavior === "smooth") {
+      setTimeout(() => {
+        isAutoScrollingRef.current = false;
+        if (containerRef.current) {
+          prevScrollTopRef.current = containerRef.current.scrollTop;
+        }
+      }, SMOOTH_SCROLL_SETTLE_MS);
+    } else {
+      isAutoScrollingRef.current = false;
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    if (isAutoScrollingRef.current) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const currentScrollTop = container.scrollTop;
+    const scrolledUp =
+      currentScrollTop < prevScrollTopRef.current - SCROLL_UP_THRESHOLD_PX;
+    prevScrollTopRef.current = currentScrollTop;
+
+    const distanceFromBottom =
+      container.scrollHeight - currentScrollTop - container.clientHeight;
+    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
+
+    if (scrolledUp) {
+      isAtBottomRef.current = atBottom;
+    } else if (atBottom) {
+      isAtBottomRef.current = true;
+    }
+
+    setShowScrollButton(!atBottom);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  // Instant scroll during streaming to keep up with rapid updates
+  useEffect(() => {
+    if (isAtBottomRef.current) {
+      scrollToBottom("instant");
+    }
+  }, [streamingContent, streamingToolCalls.length, scrollToBottom]);
+
+  // Smooth scroll for new messages. Always force-scroll when the latest
+  // message is from the user (they just sent it), even if they were reading
+  // scrollback.
+  useEffect(() => {
+    const lastMessage = messages[messages.length - 1];
+    const lastIsUser = lastMessage?.role === "user";
+    if (lastIsUser || isAtBottomRef.current) {
+      scrollToBottom("smooth");
+      return;
+    }
+
+    // No auto-scroll: recompute from actual layout so that chat switches to
+    // content that doesn't overflow correctly hide the button even when no
+    // scroll event fires.
+    const container = containerRef.current;
+    if (!container) return;
+    const distanceFromBottom =
+      container.scrollHeight - container.scrollTop - container.clientHeight;
+    const atBottom = distanceFromBottom <= BOTTOM_THRESHOLD_PX;
+    isAtBottomRef.current = atBottom;
+    setShowScrollButton(!atBottom);
+  }, [messages, scrollToBottom]);
+
+  return (
+    <div className={classes.messageListWrapper}>
+      {/* Single status region for chat announcements. Kept outside the
+          scrolling transcript so changes here trigger one polite read per
+          state change instead of re-announcing every streamed token. */}
+      <VisuallyHidden role="status" aria-live="polite">
+        {statusAnnouncement}
+      </VisuallyHidden>
+
+      <div
+        ref={containerRef}
+        className={classes.messageList}
+        aria-label={t("Chat transcript")}
+      >
+        {messages.map((msg) => (
+          <ErrorBoundary
+            key={msg.id}
+            fallback={<ChatMessageErrorFallback />}
+          >
+            <ChatMessage message={msg} />
+          </ErrorBoundary>
+        ))}
+        {isStreaming && (
+          <ErrorBoundary
+            resetKeys={[streamingContent, streamingToolCalls.length]}
+            fallback={<ChatMessageErrorFallback />}
+          >
+            <ChatMessage
+              message={{
+                id: "streaming",
+                chatId: "",
+                role: "assistant",
+                content: null,
+                toolCalls: null,
+                metadata: null,
+                createdAt: new Date().toISOString(),
+              }}
+              isStreaming
+              streamingContent={streamingContent}
+              streamingToolCalls={streamingToolCalls}
+            />
+          </ErrorBoundary>
+        )}
+        <div ref={bottomRef} />
+      </div>
+      {showScrollButton && (
+        <button
+          type="button"
+          aria-label={t("Scroll to bottom")}
+          className={classes.scrollToBottomButton}
+          onClick={() => scrollToBottom("smooth")}
+        >
+          <IconArrowDown size={16} stroke={2} />
+        </button>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-message.tsx

@@ -0,0 +1,156 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import { useTranslation } from "react-i18next";
+import DOMPurify from "dompurify";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import {
+  IconCheck,
+  IconCopy,
+  IconFile,
+  IconLoader2,
+  IconPhoto,
+} from "@tabler/icons-react";
+import { markdownToHtml } from "@docmost/editor-ext";
+import { CopyButton } from "@/components/common/copy-button";
+import type { AiChatMessage, AiChatToolCall } from "../types/ai-chat.types";
+import ChatToolGroup from "./chat-tool-group";
+import classes from "../styles/chat-message.module.css";
+import CopyTextButton from "@/components/common/copy.tsx";
+
+const chatSanitizer = DOMPurify();
+chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A") {
+    const href = node.getAttribute("href") || "";
+    if (href.startsWith("http://") || href.startsWith("https://")) {
+      node.setAttribute("target", "_blank");
+      node.setAttribute("rel", "noopener noreferrer");
+    }
+  }
+});
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "webp", "gif"];
+
+type Props = {
+  message: AiChatMessage;
+  isStreaming?: boolean;
+  streamingContent?: string;
+  streamingToolCalls?: AiChatToolCall[];
+};
+
+export default function ChatMessage({
+  message,
+  isStreaming,
+  streamingContent,
+  streamingToolCalls,
+}: Props) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const handleContentClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      const anchor = target.closest("a");
+      if (!anchor) return;
+
+      const href = anchor.getAttribute("href");
+      if (href && (href.startsWith("/s/") || href.startsWith("/p/"))) {
+        e.preventDefault();
+        navigate(href);
+      }
+    },
+    [navigate],
+  );
+
+  if (message.role === "tool") return null;
+
+  const isUser = message.role === "user";
+  const content = isStreaming ? streamingContent : message.content;
+  const toolCalls = isStreaming ? streamingToolCalls : message.toolCalls;
+
+  if (isUser) {
+    const displayContent = (content || "").replace(
+      /\n\n<referenced_pages>[\s\S]*<\/referenced_pages>$/,
+      "",
+    );
+    const attachments =
+      (message.metadata?.attachments as {
+        id: string;
+        fileName: string;
+        fileExt: string;
+      }[]) || [];
+
+    return (
+      <div
+        className={classes.userMessage}
+        role="article"
+        aria-label={t("You said:")}
+      >
+        <div className={classes.userBubble}>
+          {attachments.length > 0 && (
+            <div className={classes.messageAttachments}>
+              {attachments.map((a) => (
+                <span key={a.id} className={classes.messageAttachmentChip}>
+                  {IMAGE_EXTENSIONS.includes(a.fileExt) ? (
+                    <IconPhoto size={13} />
+                  ) : (
+                    <IconFile size={13} />
+                  )}
+                  {a.fileName}
+                </span>
+              ))}
+            </div>
+          )}
+          {displayContent}
+        </div>
+      </div>
+    );
+  }
+
+  // Only label the article when there's something meaningful to announce.
+  // Tool-only assistant turns (no text) shouldn't announce "Assistant said:" with empty content.
+  const hasAnnouncableContent = Boolean(content);
+
+  return (
+    <div
+      className={classes.assistantMessage}
+      role="article"
+      aria-label={hasAnnouncableContent ? t("Assistant said:") : undefined}
+    >
+      <div className={classes.messageContent}>
+        {toolCalls && toolCalls.length > 0 && (
+          <ChatToolGroup toolCalls={toolCalls} isStreaming={isStreaming} />
+        )}
+        {content && (
+          <div
+            onClick={handleContentClick}
+            dangerouslySetInnerHTML={{
+              __html: chatSanitizer.sanitize(
+                markdownToHtml(content) as string,
+                { ADD_ATTR: ["target", "rel"] },
+              ),
+            }}
+          />
+        )}
+        {isStreaming && (
+          <>
+            {!content && (
+              <span className={classes.processingIndicator}>
+                <IconLoader2 size={16} className={classes.processingSpinner} />
+                Thinking
+              </span>
+            )}
+            <span className={classes.streamingCursor} />
+          </>
+        )}
+      </div>
+      {!isStreaming && message.content && (
+        <div className={classes.messageActions}>
+          <CopyTextButton
+            text={message?.content}
+            label={t("Copy assistant response")}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-tool-group.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import {
+  IconChevronRight,
+  IconChevronDown,
+  IconLoader2,
+} from "@tabler/icons-react";
+import type { AiChatToolCall } from "../types/ai-chat.types";
+import ChatToolResult, { TOOL_LABELS } from "./chat-tool-result";
+import classes from "../styles/chat-message.module.css";
+
+type Props = {
+  toolCalls: AiChatToolCall[];
+  isStreaming?: boolean;
+};
+
+export default function ChatToolGroup({ toolCalls, isStreaming }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!toolCalls || toolCalls.length === 0) return null;
+
+  const activeCall =
+    isStreaming && toolCalls.length > 0
+      ? [...toolCalls].reverse().find((tc) => tc.result === undefined)
+      : undefined;
+
+  const activeLabel = activeCall
+    ? TOOL_LABELS[activeCall.name] || activeCall.name
+    : null;
+
+  return (
+    <div className={classes.toolGroup}>
+      <div
+        className={classes.toolGroupHeader}
+        role="button"
+        tabIndex={0}
+        aria-expanded={expanded}
+        onClick={() => setExpanded((prev) => !prev)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            setExpanded((prev) => !prev);
+          }
+        }}
+      >
+        {activeLabel ? (
+          <IconLoader2 size={12} className={classes.processingSpinner} />
+        ) : expanded ? (
+          <IconChevronDown size={12} />
+        ) : (
+          <IconChevronRight size={12} />
+        )}
+        <span className={classes.toolGroupLabel}>
+          {activeLabel ? `${activeLabel}…` : `Steps ${toolCalls.length}`}
+        </span>
+      </div>
+      {expanded && (
+        <div className={classes.toolGroupSteps}>
+          {toolCalls.map((tc) => (
+            <ChatToolResult key={tc.id} toolCall={tc} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/chat-tool-result.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { IconChevronRight, IconChevronDown } from "@tabler/icons-react";
+import type { AiChatToolCall } from "../types/ai-chat.types";
+import classes from "../styles/chat-message.module.css";
+
+export const TOOL_LABELS: Record<string, string> = {
+  list_spaces: "Listed spaces",
+  search_pages: "Searched pages",
+  get_page: "Read page",
+  create_page: "Created page",
+  update_page: "Updated page",
+};
+
+type Props = {
+  toolCall: AiChatToolCall;
+};
+
+export default function ChatToolResult({ toolCall }: Props) {
+  const [expanded, setExpanded] = useState(false);
+  const label = TOOL_LABELS[toolCall.name] || toolCall.name;
+
+  return (
+    <div className={classes.toolStep}>
+      <div
+        className={classes.toolStepRow}
+        onClick={() => setExpanded((prev) => !prev)}
+      >
+        <span className={classes.toolStepBullet}>·</span>
+        {expanded ? (
+          <IconChevronDown size={12} />
+        ) : (
+          <IconChevronRight size={12} />
+        )}
+        <span>{label}</span>
+      </div>
+      {expanded && (
+        <div className={classes.toolStepDetails}>
+          <pre style={{ margin: 0, whiteSpace: "pre-wrap" }}>
+            {JSON.stringify(
+              { args: toolCall.args, result: toolCall.result },
+              null,
+              2,
+            )}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/components/enable-ai-chat.tsx

@@ -0,0 +1,67 @@
+import { Badge, Group, Text, Switch, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+export default function EnableAiChat() {
+  const { t } = useTranslation();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Group gap="xs" align="center">
+          <Text size="md">{t("AI Chat")}</Text>
+          <Badge color="gray" variant="light" size="sm" radius="sm">
+            {t("Beta")}
+          </Badge>
+        </Group>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Enable AI Chat to allow users to have multi-turn conversations with AI about your workspace content.",
+          )}
+        </Text>
+      </div>
+
+      <AiChatToggle />
+    </Group>
+  );
+}
+
+function AiChatToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.chat);
+  const hasAccess = useHasFeature(Feature.AI);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ aiChat: value } as any);
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err: any) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+      <Switch
+        defaultChecked={checked}
+        onChange={handleChange}
+        disabled={!hasAccess}
+        aria-label={t("Toggle AI Chat")}
+      />
+    </Tooltip>
+  );
+}

apps/client/src/ee/ai-chat/hooks/use-chat-stream.ts

@@ -0,0 +1,227 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { sendChatMessage } from "../services/ai-chat-service";
+import type {
+  AiChatMessage,
+  AiChatStreamEvent,
+  AiChatToolCall,
+  ChatAttachment,
+  PageMention,
+} from "../types/ai-chat.types";
+
+type ChatStreamOptions = {
+  onChatCreated?: (chatId: string) => void;
+};
+
+export function useChatStream(
+  chatId: string | undefined,
+  options?: ChatStreamOptions,
+) {
+  const [messages, setMessages] = useState<AiChatMessage[]>([]);
+  const [streamingContent, setStreamingContent] = useState("");
+  const [streamingToolCalls, setStreamingToolCalls] = useState<AiChatToolCall[]>(
+    [],
+  );
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
+  const [isRetryable, setIsRetryable] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+  const currentChatIdRef = useRef(chatId);
+  currentChatIdRef.current = chatId;
+  // Tracks which chatId the local `messages` state currently represents.
+  // Set when we seed from a server fetch AND when we optimistically own a
+  // freshly-created chat after `chat_created`. This is the single authority
+  // marker that keeps server-state effects from clobbering in-flight streams.
+  const hydratedChatIdRef = useRef<string | undefined>(undefined);
+
+  // Reset local state when the consumer switches to a different chat.
+  // Skip the reset if the new chatId is one the hook itself already claimed
+  // during a new-chat flow — in that case our optimistic state is the truth.
+  useEffect(() => {
+    if (chatId && chatId === hydratedChatIdRef.current) return;
+    hydratedChatIdRef.current = undefined;
+    setMessages([]);
+    setError(null);
+    setErrorCode(null);
+    setIsRetryable(false);
+  }, [chatId]);
+
+  const hydrateFromServer = useCallback((msgs: AiChatMessage[]) => {
+    const forId = currentChatIdRef.current;
+    if (!forId) return;
+    if (hydratedChatIdRef.current === forId) return;
+    hydratedChatIdRef.current = forId;
+    setMessages(msgs);
+  }, []);
+
+  const sendMessage = useCallback(
+    (content: string, mentions: PageMention[] = [], attachments: ChatAttachment[] = [], contextPageId?: string) => {
+      if (isStreaming || (!content.trim() && attachments.length === 0)) return;
+
+      setError(null);
+      setErrorCode(null);
+      setIsRetryable(false);
+      setIsStreaming(true);
+      setStreamingContent("");
+      setStreamingToolCalls([]);
+
+      const metadata: Record<string, unknown> = {};
+      if (mentions.length) {
+        metadata.mentionedPageIds = mentions.map((m) => m.id);
+      }
+      if (attachments.length) {
+        metadata.attachments = attachments.map((a) => ({
+          id: a.id,
+          fileName: a.fileName,
+          fileExt: a.fileExt,
+        }));
+      }
+
+      const userMessage: AiChatMessage = {
+        id: `temp-${Date.now()}`,
+        chatId: currentChatIdRef.current || "",
+        role: "user",
+        content,
+        toolCalls: null,
+        metadata: Object.keys(metadata).length ? metadata : null,
+        createdAt: new Date().toISOString(),
+      };
+
+      setMessages((prev) => [...prev, userMessage]);
+
+      const attachmentIds = attachments.map((a) => a.id);
+
+      const abortController = sendChatMessage(
+        {
+          chatId: currentChatIdRef.current,
+          content,
+          mentionedPageIds: mentions.map((m) => m.id),
+          ...(contextPageId && { contextPageId }),
+          ...(attachmentIds.length && { attachmentIds }),
+        },
+        (event: AiChatStreamEvent) => {
+          switch (event.type) {
+            case "chat_created":
+              currentChatIdRef.current = event.chatId;
+              // Claim authority over this new chatId so when the consumer's
+              // prop catches up via navigation/onChatCreated, the reset effect
+              // sees a match and preserves our optimistic messages.
+              hydratedChatIdRef.current = event.chatId;
+              if (options?.onChatCreated) {
+                options.onChatCreated(event.chatId);
+              } else {
+                navigate(`/ai/chat/${event.chatId}`, { replace: true });
+              }
+              queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+              break;
+            case "content":
+              setStreamingContent((prev) => prev + event.text);
+              break;
+            case "tool_call":
+              setStreamingToolCalls((prev) => [
+                ...prev,
+                {
+                  id: event.id,
+                  name: event.name,
+                  args: event.args,
+                },
+              ]);
+              break;
+            case "tool_result":
+              setStreamingToolCalls((prev) =>
+                prev.map((tc) =>
+                  tc.id === event.id ? { ...tc, result: event.result } : tc,
+                ),
+              );
+              break;
+            case "done": {
+              setStreamingContent((currentContent) => {
+                setStreamingToolCalls((currentToolCalls) => {
+                  const assistantMessage: AiChatMessage = {
+                    id: event.messageId,
+                    chatId: currentChatIdRef.current || "",
+                    role: "assistant",
+                    content: currentContent || null,
+                    toolCalls: currentToolCalls.length
+                      ? currentToolCalls
+                      : null,
+                    metadata: event.usage ? { tokenUsage: event.usage } : null,
+                    createdAt: new Date().toISOString(),
+                  };
+
+                  setMessages((prev) => [...prev, assistantMessage]);
+                  return [];
+                });
+                return "";
+              });
+              setIsStreaming(false);
+              queryClient.invalidateQueries({
+                queryKey: ["ai-chat", currentChatIdRef.current],
+              });
+              break;
+            }
+            case "error":
+              setError(event.message);
+              setErrorCode(event.code || null);
+              setIsRetryable(event.retryable || false);
+              setIsStreaming(false);
+              break;
+          }
+        },
+        (errorMsg) => {
+          setError(errorMsg);
+          setIsStreaming(false);
+        },
+        () => {
+          setIsStreaming(false);
+        },
+      );
+
+      abortRef.current = abortController;
+    },
+    [isStreaming, navigate, queryClient],
+  );
+
+  const stopGeneration = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+
+    setStreamingContent((currentContent) => {
+      setStreamingToolCalls((currentToolCalls) => {
+        if (currentContent || currentToolCalls.length > 0) {
+          const partialMessage: AiChatMessage = {
+            id: `stopped-${Date.now()}`,
+            chatId: currentChatIdRef.current || "",
+            role: "assistant",
+            content: currentContent || null,
+            toolCalls: currentToolCalls.length ? currentToolCalls : null,
+            metadata: null,
+            createdAt: new Date().toISOString(),
+          };
+          setMessages((prev) => [...prev, partialMessage]);
+        }
+        return [];
+      });
+      return "";
+    });
+
+    setIsStreaming(false);
+  }, []);
+
+  return {
+    messages,
+    streamingContent,
+    streamingToolCalls,
+    isStreaming,
+    error,
+    errorCode,
+    isRetryable,
+    sendMessage,
+    stopGeneration,
+    hydrateFromServer,
+  };
+}

apps/client/src/ee/ai-chat/pages/ai-chat.tsx

@@ -0,0 +1,39 @@
+import { useParams } from "react-router-dom";
+import { ErrorBoundary } from "react-error-boundary";
+import { Button } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import AiChatLayout from "../components/ai-chat-layout";
+import { EmptyState } from "@/components/ui/empty-state.tsx";
+import classes from "../styles/ai-chat.module.css";
+
+export default function AiChat() {
+  const { t } = useTranslation();
+  const { chatId } = useParams<{ chatId: string }>();
+
+  return (
+    <div className={classes.layout}>
+      <ErrorBoundary
+        resetKeys={[chatId]}
+        fallbackRender={({ resetErrorBoundary }) => (
+          <EmptyState
+            icon={IconAlertTriangle}
+            title={t("Failed to load chat. An error occurred.")}
+            action={
+              <Button
+                variant="default"
+                size="sm"
+                mt="xs"
+                onClick={resetErrorBoundary}
+              >
+                {t("Try again")}
+              </Button>
+            }
+          />
+        )}
+      >
+        <AiChatLayout />
+      </ErrorBoundary>
+    </div>
+  );
+}

apps/client/src/ee/ai-chat/queries/ai-chat-query.ts

@@ -0,0 +1,61 @@
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  useInfiniteQuery,
+} from "@tanstack/react-query";
+import {
+  listChats,
+  getChatInfo,
+  deleteChat,
+  updateChatTitle,
+  searchChats,
+} from "../services/ai-chat-service";
+
+export function useChatsQuery() {
+  return useInfiniteQuery({
+    queryKey: ["ai-chats"],
+    queryFn: ({ pageParam }) =>
+      listChats({ cursor: pageParam, limit: 30 }),
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) =>
+      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+  });
+}
+
+export function useChatInfoQuery(chatId: string | undefined) {
+  return useQuery({
+    queryKey: ["ai-chat", chatId],
+    queryFn: () => getChatInfo(chatId!),
+    enabled: !!chatId,
+  });
+}
+
+export function useDeleteChatMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (chatId: string) => deleteChat(chatId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+    },
+  });
+}
+
+export function useUpdateChatTitleMutation() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ chatId, title }: { chatId: string; title: string }) =>
+      updateChatTitle(chatId, title),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ai-chats"] });
+    },
+  });
+}
+
+export function useSearchChatsQuery(query: string) {
+  return useQuery({
+    queryKey: ["ai-chats-search", query],
+    queryFn: () => searchChats(query),
+    enabled: query.length > 0,
+  });
+}

apps/client/src/ee/ai-chat/services/ai-chat-service.ts

@@ -0,0 +1,144 @@
+import api from "@/lib/api-client.ts";
+import type {
+  AiChat,
+  AiChatMessage,
+  AiChatStreamEvent,
+  ChatAttachment,
+} from "../types/ai-chat.types";
+import { IPagination } from "@/lib/types.ts";
+
+export async function createChat(): Promise<AiChat> {
+  const req = await api.post<AiChat>("/ai/chats/create");
+  return req.data;
+}
+
+export async function listChats(params?: {
+  limit?: number;
+  cursor?: string;
+}): Promise<IPagination<AiChat>> {
+  const req = await api.post("/ai/chats", params);
+  return req.data;
+}
+
+export async function getChatInfo(
+  chatId: string,
+): Promise<{ chat: AiChat; messages: AiChatMessage[] }> {
+  const req = await api.post("/ai/chats/info", { chatId });
+  return req.data;
+}
+
+export async function deleteChat(chatId: string): Promise<void> {
+  await api.post("/ai/chats/delete", { chatId });
+}
+
+export async function updateChatTitle(
+  chatId: string,
+  title: string,
+): Promise<void> {
+  await api.post("/ai/chats/update", { chatId, title });
+}
+
+export async function searchChats(query: string): Promise<AiChat[]> {
+  const req = await api.post("/ai/chats/search", { query });
+  return req.data;
+}
+
+export async function uploadChatFile(
+  file: File,
+  chatId?: string,
+): Promise<ChatAttachment> {
+  const formData = new FormData();
+  formData.append("file", file);
+  if (chatId) {
+    formData.append("chatId", chatId);
+  }
+  return await api.post("/ai/chats/upload", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+}
+
+export function sendChatMessage(
+  params: {
+    chatId?: string;
+    content: string;
+    mentionedPageIds?: string[];
+    contextPageId?: string;
+    attachmentIds?: string[];
+  },
+  onEvent: (event: AiChatStreamEvent) => void,
+  onError?: (error: string) => void,
+  onComplete?: () => void,
+): AbortController {
+  const abortController = new AbortController();
+
+  (async () => {
+    try {
+      const response = await fetch("/api/ai/chats/send", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(params),
+        signal: abortController.signal,
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        const errorBody = await response.text();
+        let errorMessage = `HTTP error ${response.status}`;
+        try {
+          const parsed = JSON.parse(errorBody);
+          errorMessage = parsed.message || errorMessage;
+        } catch {
+          // use default
+        }
+        onError?.(errorMessage);
+        return;
+      }
+
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+
+      if (!reader) {
+        onError?.("Response body is not readable");
+        return;
+      }
+
+      let buffer = "";
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const data = line.slice(6);
+              if (data === "[DONE]") {
+                onComplete?.();
+                return;
+              }
+              try {
+                const parsed = JSON.parse(data) as AiChatStreamEvent;
+                onEvent(parsed);
+              } catch {
+                // Skip invalid JSON
+              }
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock();
+      }
+
+      onComplete?.();
+    } catch (error: any) {
+      if (error.name !== "AbortError") {
+        onError?.(error.message);
+      }
+    }
+  })();
+
+  return abortController;
+}

apps/client/src/ee/ai-chat/styles/ai-chat.module.css

@@ -0,0 +1,171 @@
+.layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 45px - 2 * var(--mantine-spacing-md));
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.messageListWrapper {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.messageList {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
+}
+
+.messageErrorFallback {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-bottom: var(--mantine-spacing-lg);
+  border-radius: var(--mantine-radius-sm);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.scrollToBottomButton {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  cursor: pointer;
+  padding: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+  z-index: 2;
+}
+
+.scrollToBottomButton:hover {
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-3));
+}
+
+.scrollToBottomButton:active {
+  transform: translateX(-50%) scale(0.95);
+}
+
+.inputArea {
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
+}
+
+/* Empty state - Notion AI style centered layout */
+.emptyState {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-lg);
+}
+
+.emptyStateIcon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: var(--mantine-spacing-sm);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.emptyStateBrand {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--mantine-color-dimmed);
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.emptyStateTitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  margin-top: 0;
+  margin-bottom: var(--mantine-spacing-xl);
+  text-align: center;
+}
+
+.emptyStateInput {
+  width: 100%;
+  max-width: 600px;
+  margin-bottom: var(--mantine-spacing-xl);
+  padding: 6px 0;
+}
+
+.suggestionsSection {
+  width: 100%;
+  max-width: 600px;
+}
+
+.suggestionsLabel {
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  color: var(--mantine-color-dimmed);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 0;
+  margin-bottom: var(--mantine-spacing-sm);
+}
+
+.suggestionsGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--mantine-spacing-sm);
+}
+
+.suggestionCard {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-md);
+  cursor: pointer;
+  background: transparent;
+  transition: background-color 150ms, border-color 150ms;
+  text-align: left;
+  width: 100%;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.suggestionIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  margin-top: 1px;
+}
+
+.suggestionText {
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  line-height: 1.4;
+}

apps/client/src/ee/ai-chat/styles/aside-chat-panel.module.css

@@ -0,0 +1,139 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 0 var(--mantine-spacing-sm) 0;
+  border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.toolbarSpacer {
+  flex: 1;
+}
+
+.titleButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 500;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  max-width: 60%;
+  min-width: 0;
+}
+
+.titleButton:hover {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+}
+
+.titleText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--mantine-spacing-sm) 0;
+  scroll-behavior: smooth;
+}
+
+.inputArea {
+  padding-top: var(--mantine-spacing-sm);
+}
+
+.emptyState {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mantine-spacing-md);
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-sm);
+}
+
+.emptyStateIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.emptyStateTitle {
+  font-size: var(--mantine-font-size-lg);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  text-align: center;
+}
+
+.quickActions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+}
+
+.quickAction {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: var(--mantine-radius-md);
+  cursor: pointer;
+  background: transparent;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  text-align: left;
+  width: 100%;
+  transition: background-color 150ms, border-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.quickActionIcon {
+  flex-shrink: 0;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.historyList {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.historyItem {
+  display: flex;
+  align-items: center;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  cursor: pointer;
+  border-radius: var(--mantine-radius-sm);
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  transition: background-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  &[data-active] {
+    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+}
+
+.historyItemTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

apps/client/src/ee/ai-chat/styles/chat-input.module.css

@@ -0,0 +1,242 @@
+.inputWrapper {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: 16px;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  box-shadow: light-dark(
+    0 2px 40px 4px rgba(0, 0, 0, 0.07),
+    0 2px 40px 4px rgba(0, 0, 0, 0.5)
+  );
+  transition:
+    border-color 150ms,
+    box-shadow 150ms;
+
+  &:focus-within {
+    border-color: light-dark(
+      var(--mantine-color-gray-3),
+      var(--mantine-color-dark-4)
+    );
+    box-shadow: light-dark(
+      0 4px 48px 6px rgba(0, 0, 0, 0.09),
+      0 4px 48px 6px rgba(0, 0, 0, 0.6)
+    );
+  }
+}
+
+.inputWrapperFlat {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  border-radius: 12px;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  box-shadow: none;
+  transition: border-color 150ms;
+
+  &:focus-within {
+    border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  }
+}
+
+.disclaimer {
+  margin-top: 6px;
+  text-align: center;
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+}
+
+.attachmentChips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 10px 14px 0;
+}
+
+.attachmentChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border-radius: 8px;
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-xs);
+  max-width: 200px;
+}
+
+.attachmentChipUploading {
+  opacity: 0.55;
+}
+
+.attachmentChipName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attachmentChipRemove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 2px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  border-radius: 50%;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+  }
+}
+
+.editorContent {
+  overflow: hidden;
+
+  :global(.ProseMirror) {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    padding: 14px 18px 8px;
+    font-size: 15px;
+    line-height: 1.6;
+    max-height: 200px;
+    overflow-y: auto;
+    min-height: 24px;
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  }
+
+  :global(.ProseMirror p) {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  :global(.ProseMirror p.is-editor-empty:first-child::before) {
+    color: var(--mantine-color-placeholder);
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 12px 10px;
+  gap: var(--mantine-spacing-xs);
+}
+
+.sendButton {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms, opacity 150ms;
+  background: light-dark(var(--mantine-color-dark-9), var(--mantine-color-gray-0));
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-9));
+
+  &:disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+
+  @mixin hover {
+    &:not(:disabled) {
+      opacity: 0.85;
+    }
+  }
+}
+
+.attachButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 2px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  transition: color 150ms;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  }
+}
+
+.plusButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  background: none;
+  cursor: pointer;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+  transition: color 150ms, background-color 150ms;
+
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+}
+
+.plusMenuItem {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border: none;
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-sm);
+  transition: background-color 150ms;
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background: none;
+  }
+}
+
+.plusMenuIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
+
+.stopButton {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  cursor: pointer;
+  transition: background-color 150ms;
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+
+  @mixin hover {
+    background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
+  }
+}

apps/client/src/ee/ai-chat/styles/chat-message.module.css

@@ -0,0 +1,286 @@
+.message {
+  margin-bottom: var(--mantine-spacing-lg);
+}
+
+.userMessage {
+  composes: message;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.userBubble {
+  max-width: 75%;
+  padding: 10px 16px;
+  border-radius: 18px;
+  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+  font-size: 15px;
+  line-height: 1.6;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+[data-aside-chat] .userBubble {
+  background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+}
+
+.userBubble p {
+  margin: 0;
+}
+
+.messageAttachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.messageAttachmentChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
+  font-size: var(--mantine-font-size-xs);
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistantMessage {
+  composes: message;
+}
+
+.messageContent {
+  font-size: 15px;
+  line-height: 1.7;
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-1));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.messageContent p {
+  margin: 0 0 0.75em 0;
+}
+
+.messageContent p:last-child {
+  margin-bottom: 0;
+}
+
+.messageContent ul,
+.messageContent ol {
+  margin: 0.5em 0 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.messageContent li {
+  margin-bottom: 0.3em;
+}
+
+.messageContent h1,
+.messageContent h2,
+.messageContent h3 {
+  margin: 1em 0 0.5em 0;
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+}
+
+.messageContent h1 {
+  font-size: 1.4em;
+}
+
+.messageContent h2 {
+  font-size: 1.2em;
+}
+
+.messageContent h3 {
+  font-size: 1.05em;
+}
+
+.messageContent pre {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  border-radius: var(--mantine-radius-md);
+  overflow-x: auto;
+  font-size: var(--mantine-font-size-sm);
+  margin: 0.75em 0;
+}
+
+.messageContent code {
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.88em;
+}
+
+.messageContent pre code {
+  background: none;
+  padding: 0;
+}
+
+.messageContent blockquote {
+  border-left: 3px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  padding-left: var(--mantine-spacing-md);
+  margin: 0.75em 0;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
+}
+
+.messageContent a {
+  color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-4));
+  text-decoration: none;
+
+  @mixin hover {
+    text-decoration: underline;
+  }
+}
+
+.messageContent a[href^="/s/"],
+.messageContent a[href^="/p/"] {
+  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-1));
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+
+  @mixin light {
+    border-bottom: 0.05em solid var(--mantine-color-dark-0);
+  }
+
+  @mixin dark {
+    border-bottom: 0.05em solid var(--mantine-color-dark-2);
+  }
+
+  @mixin hover {
+    text-decoration: none;
+    @mixin light {
+      border-bottom-color: var(--mantine-color-dark-2);
+    }
+    @mixin dark {
+      border-bottom-color: var(--mantine-color-dark-0);
+    }
+  }
+}
+
+.messageContent hr {
+  border: none;
+  border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+  margin: 1em 0;
+}
+
+.toolGroup {
+  margin: 6px 0;
+  font-size: var(--mantine-font-size-xs);
+}
+
+.toolGroupHeader {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  line-height: 1.4;
+  transition: color 120ms ease;
+}
+
+.toolGroupHeader:hover {
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.toolGroupLabel {
+  font-weight: 500;
+}
+
+.toolGroupSteps {
+  margin-top: 4px;
+  padding-left: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toolStep {
+  font-size: var(--mantine-font-size-xs);
+}
+
+.toolStepRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  user-select: none;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+  line-height: 1.5;
+  transition: color 120ms ease;
+}
+
+.toolStepRow:hover {
+  color: light-dark(var(--mantine-color-gray-8), var(--mantine-color-dark-0));
+}
+
+.toolStepBullet {
+  display: inline-block;
+  width: 8px;
+  text-align: center;
+  opacity: 0.6;
+}
+
+.toolStepDetails {
+  margin-top: 4px;
+  margin-left: 18px;
+  padding: 6px 10px;
+  border-radius: var(--mantine-radius-sm);
+  background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.messageActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.processingIndicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  font-size: var(--mantine-font-size-sm);
+}
+
+.processingSpinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.streamingCursor {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+  margin-left: 1px;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}

apps/client/src/ee/ai-chat/styles/chat-sidebar.module.css

@@ -0,0 +1,147 @@
+.sidebar {
+  height: 100%;
+  width: 100%;
+  padding: var(--mantine-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--mantine-spacing-xs);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--mantine-spacing-xs);
+}
+
+.title {
+  margin: 0;
+  font-weight: 600;
+  font-size: var(--mantine-font-size-sm);
+}
+
+.searchInput {
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.chatList {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chatGroup + .chatGroup {
+  margin-top: var(--mantine-spacing-sm);
+}
+
+.chatGroupLabel {
+  margin: 0;
+  padding: 4px var(--mantine-spacing-xs);
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  color: var(--mantine-color-dimmed);
+  user-select: none;
+}
+
+.chatListEmpty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mantine-spacing-xl) var(--mantine-spacing-md);
+  text-align: center;
+  gap: 4px;
+  user-select: none;
+}
+
+.chatListEmptyIcon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.chatListEmptyTitle {
+  font-size: var(--mantine-font-size-sm);
+  font-weight: 600;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+}
+
+.chatListEmptyHint {
+  font-size: var(--mantine-font-size-xs);
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-3));
+  line-height: 1.4;
+}
+
+.chatItem {
+  display: flex;
+  align-items: center;
+  padding: 8px var(--mantine-spacing-xs);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  text-decoration: none;
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  user-select: none;
+  gap: var(--mantine-spacing-xs);
+
+  @mixin hover {
+    background-color: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+  }
+
+  &[data-active] {
+    background-color: light-dark(
+      var(--mantine-color-gray-2),
+      var(--mantine-color-dark-6)
+    );
+  }
+}
+
+.chatItemTitle {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatItemDate {
+  font-size: var(--mantine-font-size-xs);
+  color: var(--mantine-color-dimmed);
+  white-space: nowrap;
+  transition: opacity 150ms;
+}
+
+.chatItemRenameInput {
+  font-size: var(--mantine-font-size-sm);
+  padding: 0;
+  height: auto;
+  min-height: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.chatItem:hover .chatItemDate,
+.chatItem:focus-within .chatItemDate {
+  opacity: 0;
+}
+
+.chatItemActions {
+  position: absolute;
+  right: var(--mantine-spacing-xs);
+  opacity: 0;
+  transition: opacity 150ms;
+}
+
+.chatItem {
+  position: relative;
+}
+
+.chatItem:hover .chatItemActions,
+.chatItem:focus-within .chatItemActions {
+  opacity: 1;
+}
+
+.chatItemActions :global(.mantine-ActionIcon-root):focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}

apps/client/src/ee/ai-chat/types/ai-chat.types.ts

@@ -0,0 +1,49 @@
+export type AiChat = {
+  id: string;
+  workspaceId: string;
+  creatorId: string;
+  title: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type AiChatToolCall = {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  result?: unknown;
+};
+
+export type AiChatMessage = {
+  id: string;
+  chatId: string;
+  role: 'user' | 'assistant' | 'tool';
+  content: string | null;
+  toolCalls: AiChatToolCall[] | null;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+};
+
+export type AiChatStreamEvent =
+  | { type: 'chat_created'; chatId: string }
+  | { type: 'content'; text: string }
+  | { type: 'tool_call'; id: string; name: string; args: Record<string, unknown> }
+  | { type: 'tool_result'; id: string; result: unknown }
+  | { type: 'done'; messageId: string; usage?: Record<string, number> }
+  | { type: 'error'; message: string; code?: string; retryable?: boolean };
+
+export type PageMention = {
+  id: string;
+  title: string;
+  slugId: string;
+  spaceSlug?: string;
+  icon?: string;
+};
+
+export type ChatAttachment = {
+  id: string;
+  fileName: string;
+  fileExt: string;
+  fileSize: number;
+  mimeType: string;
+};

apps/client/src/ee/ai-chat/utils/group-chats-by-age.ts

@@ -0,0 +1,45 @@
+import type { AiChat } from "../types/ai-chat.types";
+
+export type ChatGroup = { key: string; label: string; chats: AiChat[] };
+
+export function groupChatsByAge(
+  chats: AiChat[],
+  t: (key: string) => string,
+): ChatGroup[] {
+  if (chats.length === 0) return [];
+
+  const now = new Date();
+  const startOfToday = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime();
+  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
+  const startOfLast7 = startOfToday - 7 * 24 * 60 * 60 * 1000;
+  const startOfLast30 = startOfToday - 30 * 24 * 60 * 60 * 1000;
+
+  const buckets: Record<string, ChatGroup> = {
+    today: { key: "today", label: t("Today"), chats: [] },
+    yesterday: { key: "yesterday", label: t("Yesterday"), chats: [] },
+    last7: { key: "last7", label: t("Previous 7 days"), chats: [] },
+    last30: { key: "last30", label: t("Previous 30 days"), chats: [] },
+    older: { key: "older", label: t("Older"), chats: [] },
+  };
+
+  for (const chat of chats) {
+    const ts = new Date(chat.updatedAt).getTime();
+    if (ts >= startOfToday) buckets.today.chats.push(chat);
+    else if (ts >= startOfYesterday) buckets.yesterday.chats.push(chat);
+    else if (ts >= startOfLast7) buckets.last7.chats.push(chat);
+    else if (ts >= startOfLast30) buckets.last30.chats.push(chat);
+    else buckets.older.chats.push(chat);
+  }
+
+  return [
+    buckets.today,
+    buckets.yesterday,
+    buckets.last7,
+    buckets.last30,
+    buckets.older,
+  ].filter((b) => b.chats.length > 0);
+}

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.module.css

@@ -0,0 +1,61 @@
+.aiMenu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  min-height: 2.25rem;
+}
+
+.aiInput {
+  width: 100%;
+
+  & input {
+    height: 44px;
+    border-radius: 22px;
+    padding-left: 20px;
+    padding-right: 40px;
+    border: 1px solid
+      light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    font-size: var(--mantine-font-size-sm);
+
+    &:focus {
+      border-color: light-dark(
+        var(--mantine-color-gray-4),
+        var(--mantine-color-dark-3)
+      );
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    }
+  }
+}
+.menuItemSelected {
+  background-color: var(--mantine-color-gray-1);
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.resultPreview {
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
+  border: 1px solid
+    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.resultPreviewWrapper {
+  font-size: var(--mantine-font-size-md);
+  line-height: 1.6;
+  padding: var(--mantine-spacing-md);
+
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
+}

apps/client/src/ee/ai/components/editor/ai-menu/ai-menu.tsx

@@ -0,0 +1,349 @@
+import { Editor } from "@tiptap/react";
+import { ActionIcon, TextInput } from "@mantine/core";
+import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAtom } from "jotai";
+import { IconArrowUp } from "@tabler/icons-react";
+import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms.ts";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiAction } from "@/ee/ai/types/ai.types.ts";
+import { CommandItem, commandItems, CommandSet } from "./command-items.ts";
+import { CommandSelector } from "./command-selector.tsx";
+import { ResultPreview } from "./result-preview.tsx";
+import classes from "./ai-menu.module.css";
+import { marked } from "marked";
+import { DOMSerializer } from "@tiptap/pm/model";
+import { copyToClipboard, htmlToMarkdown } from "@docmost/editor-ext";
+import { useLocation } from "react-router-dom";
+
+interface EditorAiMenuProps {
+  editor: Editor | null;
+}
+
+const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
+  const aiGenerateStreamMutation = useAiGenerateStreamMutation();
+  const location = useLocation();
+  const isSmBreakpoint = useMediaQuery("(max-width: 48em)");
+  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [prompt, setPrompt] = useState("");
+  const [output, setOutput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [activeCommandSet, setActiveCommandSet] = useState<CommandSet>("main");
+  const [lastAction, setLastAction] = useState<CommandItem | null>(null);
+  const [menuPlacement, setMenuPlacement] = useState<{
+    top: number;
+    left: number;
+    width: number;
+  }>({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const currentItems = useMemo(() => {
+    return commandItems[activeCommandSet].filter((item) => {
+      return item.name.toLowerCase().includes(prompt.toLowerCase());
+    });
+  }, [prompt, output, activeCommandSet]);
+  const updateMenuPlacement = useCallback(() => {
+    if (!editor || !showAiMenu) return;
+
+    const { view } = editor;
+    const { from, to } = editor.state.selection;
+    const editorRect = view.dom.getBoundingClientRect();
+    const fromCoords = view.coordsAtPos(from);
+    const toCoords = view.coordsAtPos(to);
+    const topOffset = 8;
+    const editorPadding = isSmBreakpoint ? 16 : 48;
+
+    const anchorBottom =
+      toCoords.bottom > 0 && toCoords.bottom < window.innerHeight
+        ? toCoords.bottom
+        : fromCoords.bottom;
+
+    const menuMaxWidth = 600;
+    const editorLeft = editorRect.left + editorPadding;
+    const editorRight = editorRect.right - editorPadding;
+    const availableWidth = editorRight - editorLeft;
+    const menuWidth = Math.min(menuMaxWidth, availableWidth);
+
+    let menuLeft = Math.max(editorLeft, fromCoords.left);
+    if (menuLeft + menuWidth > editorRight) {
+      menuLeft = editorRight - menuWidth;
+    }
+    menuLeft = Math.max(editorLeft, menuLeft);
+
+    setMenuPlacement({
+      top: anchorBottom + topOffset + window.scrollY,
+      left: menuLeft + window.scrollX,
+      width: menuWidth,
+    });
+  }, [editor, showAiMenu, isSmBreakpoint]);
+  const resetMenu = useCallback(() => {
+    setPrompt("");
+    setOutput("");
+    setActiveCommandSet("main");
+    setLastAction(null);
+    aiGenerateStreamMutation.reset();
+  }, [aiGenerateStreamMutation.reset]);
+  const debouncedUpdateMenuPlacement = useDebouncedCallback(
+    updateMenuPlacement,
+    60,
+  );
+  const handleGenerate = useCallback(
+    (item?: CommandItem) => {
+      if (!editor || isLoading) return;
+
+      let command: CommandItem | null = item || null;
+
+      if (!command) {
+        if (!prompt) return;
+
+        command = {
+          id: "custom",
+          name: "Custom",
+          action: AiAction.CUSTOM,
+          prompt,
+        };
+      }
+
+      const { from, to } = editor.state.selection;
+      const slice = editor.state.doc.slice(from, to);
+      const serializer = DOMSerializer.fromSchema(editor.schema);
+      const fragment = serializer.serializeFragment(slice.content);
+      const wrapper = document.createElement("div");
+      wrapper.appendChild(fragment);
+      const content = htmlToMarkdown(wrapper.innerHTML);
+
+      setOutput("");
+      setIsLoading(true);
+      aiGenerateStreamMutation.mutate({
+        action: command.action,
+        prompt: command.prompt,
+        content,
+        onChunk: (chunk) => {
+          setOutput((output) => output + chunk.content);
+        },
+        onComplete: () => {
+          setPrompt("");
+          setIsLoading(false);
+          setActiveCommandSet("result");
+        },
+        onError: () => {
+          setIsLoading(false);
+          resetMenu();
+        },
+      });
+      setLastAction(command);
+    },
+    [
+      editor,
+      prompt,
+      isLoading,
+      aiGenerateStreamMutation.mutateAsync,
+      resetMenu,
+    ],
+  );
+  const handleCommand = useCallback(
+    (item?: CommandItem) => {
+      setPrompt("");
+
+      if (!item) {
+        return handleGenerate();
+      }
+      if (item.id === "back") {
+        return setActiveCommandSet("main");
+      }
+      if (item.id === "result-replace") {
+        const chain = editor.chain().focus();
+
+        if (lastAction.action === AiAction.CONTINUE_WRITING) {
+          chain.setTextSelection(editor.state.selection.to);
+        }
+
+        const html = (marked.parse(output) as string).trim();
+        const isSingleParagraph =
+          html.startsWith("<p>") &&
+          html.endsWith("</p>") &&
+          html.lastIndexOf("<p>") === 0;
+
+        // Strip <p> wrapper for single-paragraph output to preserve inline context,
+        // then decode HTML entities via DOMParser since TipTap would otherwise
+        // treat the tagless string as plain text and insert entities literally.
+        const content = isSingleParagraph
+          ? new DOMParser().parseFromString(html.slice(3, -4), "text/html")
+              .body.innerHTML
+          : html;
+
+        chain.insertContent(content).run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-insert-below") {
+        editor
+          .chain()
+          .focus()
+          .setTextSelection(editor.state.selection.to)
+          .insertContent(marked.parse(output))
+          .run();
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-copy") {
+        copyToClipboard(output);
+
+        return setShowAiMenu(false);
+      }
+      if (item.id === "result-discard") {
+        setOutput("");
+
+        return resetMenu();
+      }
+      if (item.id === "result-try-again" && lastAction) {
+        return handleGenerate(lastAction);
+      }
+      if (item.subCommandSet) {
+        return setActiveCommandSet(item.subCommandSet);
+      }
+
+      return handleGenerate(item);
+    },
+    [editor, output, lastAction, handleGenerate, resetMenu],
+  );
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      const totalItems = currentItems.length;
+      const cycleSize = totalItems + 1;
+
+      if (event.key === "Escape") {
+        return setShowAiMenu(false);
+      }
+
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+
+        return setSelectedIndex((selectedIndex) => {
+          const direction = event.key === "ArrowDown" ? 1 : -1;
+          const newIndex = selectedIndex + direction;
+
+          if (newIndex < -1) return cycleSize - 1;
+          if (newIndex >= cycleSize) return 0;
+
+          return newIndex;
+        });
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+
+        return handleCommand(currentItems[selectedIndex]);
+      }
+    },
+    [currentItems, selectedIndex],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleClose = () => setShowAiMenu(false);
+    const observer = new ResizeObserver(() => {
+      debouncedUpdateMenuPlacement();
+    });
+
+    updateMenuPlacement();
+    editor.on("focus", handleClose);
+    editor.on("blur", handleClose);
+    window.addEventListener("resize", debouncedUpdateMenuPlacement);
+    window.addEventListener("scroll", debouncedUpdateMenuPlacement, true);
+    observer.observe(editor.view.dom);
+
+    return () => {
+      editor.off("focus", handleClose);
+      editor.off("blur", handleClose);
+      window.removeEventListener("resize", debouncedUpdateMenuPlacement);
+      window.removeEventListener("scroll", debouncedUpdateMenuPlacement, true);
+      observer.disconnect();
+    };
+  }, [editor, updateMenuPlacement, debouncedUpdateMenuPlacement]);
+
+  useEffect(() => {
+    setShowAiMenu(false);
+  }, [location]);
+  useEffect(() => {
+    if (showAiMenu) {
+      resetMenu();
+    }
+  }, [showAiMenu, resetMenu]);
+  useEffect(() => {
+    // Focus input when menu opens or command set changes
+    requestAnimationFrame(() => {
+      inputRef.current?.focus({ preventScroll: true });
+    });
+  }, [showAiMenu, isLoading, currentItems]);
+  useEffect(() => {
+    if (!currentItems.length) {
+      setSelectedIndex(-1);
+    }
+    setSelectedIndex(prompt || activeCommandSet !== "main" ? 0 : -1);
+  }, [prompt, activeCommandSet, currentItems]);
+
+  if (!showAiMenu) return null;
+
+  return createPortal(
+    <div
+      style={{
+        zIndex: 199,
+        position: "absolute",
+        top: menuPlacement.top,
+        left: menuPlacement.left,
+        width: menuPlacement.width,
+        pointerEvents: "none",
+      }}
+    >
+      <div
+        className={classes.aiMenu}
+        style={{ pointerEvents: "auto" }}
+        tabIndex={0}
+        ref={containerRef}
+      >
+        <ResultPreview output={output} isLoading={isLoading} />
+        <CommandSelector
+          selectedIndex={selectedIndex}
+          isLoading={isLoading}
+          output={output}
+          currentItems={currentItems}
+          handleCommand={handleCommand}
+        >
+          <TextInput
+            ref={inputRef}
+            className={classes.aiInput}
+            placeholder="Ask AI..."
+            data-autofocus
+            value={prompt}
+            disabled={isLoading}
+            onChange={(e) => setPrompt(e.currentTarget.value)}
+            rightSection={
+              <ActionIcon
+                disabled={!prompt || isLoading}
+                variant="filled"
+                color="blue"
+                radius="xl"
+                size="sm"
+                onClick={() => handleGenerate()}
+              >
+                <IconArrowUp size={14} stroke={2.5} />
+              </ActionIcon>
+            }
+            onKeyDown={handleKeyDown}
+          />
+        </CommandSelector>
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+export { EditorAiMenu };

apps/client/src/ee/ai/components/editor/ai-menu/command-items.ts

@@ -0,0 +1,219 @@
+import { AiAction } from "@/ee/ai/types/ai.types.ts";
+import {
+  IconSparkles,
+  IconArrowsMaximize,
+  IconArrowsMinimize,
+  IconWriting,
+  IconHelp,
+  IconList,
+  IconMoodSmile,
+  IconLanguage,
+  IconTrash,
+  IconRefresh,
+  IconChevronLeft,
+  IconCheck,
+  IconArrowDownLeft,
+  IconCopy,
+  IconTextPlus,
+  IconAlignJustified,
+} from "@tabler/icons-react";
+
+interface CommandItem {
+  name: string;
+  id: string;
+  icon?: typeof IconSparkles;
+  action?: AiAction;
+  prompt?: string;
+  subCommandSet?: CommandSet;
+}
+
+type CommandSet = "main" | "tone" | "translate" | "result";
+
+const mainItems: CommandItem[] = [
+  {
+    id: "improve-writing",
+    name: "Improve writing",
+    icon: IconSparkles,
+    action: AiAction.IMPROVE_WRITING,
+  },
+  {
+    id: "fix-spelling-grammar",
+    name: "Fix spelling & grammar",
+    icon: IconCheck,
+    action: AiAction.FIX_SPELLING_GRAMMAR,
+  },
+  {
+    id: "make-longer",
+    name: "Make longer",
+    icon: IconTextPlus,
+    action: AiAction.MAKE_LONGER,
+  },
+  {
+    id: "make-shorter",
+    name: "Make shorter",
+    icon: IconAlignJustified,
+    action: AiAction.MAKE_SHORTER,
+  },
+  {
+    id: "continue-writing",
+    name: "Continue writing",
+    icon: IconWriting,
+    action: AiAction.CONTINUE_WRITING,
+  },
+  {
+    id: "explain",
+    name: "Explain",
+    icon: IconHelp,
+    action: AiAction.EXPLAIN,
+  },
+  {
+    id: "summarize",
+    name: "Summarize",
+    icon: IconList,
+    action: AiAction.SUMMARIZE,
+  },
+  {
+    id: "change-tone",
+    name: "Change tone",
+    icon: IconMoodSmile,
+    subCommandSet: "tone",
+  },
+  {
+    id: "translate",
+    name: "Translate",
+    icon: IconLanguage,
+    subCommandSet: "translate",
+  },
+];
+const toneItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "tone-professional",
+    name: "Professional",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Professional",
+  },
+  {
+    id: "tone-casual",
+    name: "Casual",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Casual",
+  },
+  {
+    id: "tone-friendly",
+    name: "Friendly",
+    icon: IconMoodSmile,
+    action: AiAction.CHANGE_TONE,
+    prompt: "Friendly",
+  },
+];
+const translateItems: CommandItem[] = [
+  {
+    id: "back",
+    name: "Back",
+    icon: IconChevronLeft,
+  },
+  {
+    id: "translate-english",
+    name: "English",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "English",
+  },
+  {
+    id: "translate-spanish",
+    name: "Spanish",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Spanish",
+  },
+  {
+    id: "translate-german",
+    name: "German",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "German",
+  },
+  {
+    id: "translate-french",
+    name: "French",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "French",
+  },
+  {
+    id: "translate-dutch",
+    name: "Dutch",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Dutch",
+  },
+  {
+    id: "translate-portuguese",
+    name: "Portuguese",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Portuguese",
+  },
+  {
+    id: "translate-italian",
+    name: "Italian",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Italian",
+  },
+  {
+    id: "translate-japanese",
+    name: "Japanese",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Japanese",
+  },
+  {
+    id: "translate-korean",
+    name: "Korean",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Korean",
+  },
+  {
+    id: "translate-swedish",
+    name: "Swedish",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Swedish",
+  },
+  {
+    id: "translate-chinese",
+    name: "Chinese (Simplified)",
+    icon: IconLanguage,
+    action: AiAction.TRANSLATE,
+    prompt: "Simplified Chinese",
+  },
+];
+const resultItems: CommandItem[] = [
+  { id: "result-replace", name: "Replace", icon: IconCheck },
+  { id: "result-insert-below", name: "Insert below", icon: IconArrowDownLeft },
+  { id: "result-copy", name: "Copy", icon: IconCopy },
+  { id: "result-discard", name: "Discard", icon: IconTrash },
+  {
+    id: "result-try-again",
+    name: "Try again",
+    icon: IconRefresh,
+  },
+];
+const commandItems: Record<CommandSet, CommandItem[]> = {
+  main: mainItems,
+  tone: toneItems,
+  translate: translateItems,
+  result: resultItems,
+};
+
+export type { CommandItem, CommandSet };
+export { commandItems };

apps/client/src/ee/ai/components/editor/ai-menu/command-selector.tsx

@@ -0,0 +1,72 @@
+import { Loader, Menu, ScrollArea } from "@mantine/core";
+import { IconChevronRight } from "@tabler/icons-react";
+import { ReactNode } from "react";
+import { CommandItem } from "./command-items.ts";
+import classes from "./ai-menu.module.css";
+
+interface CommandSelectorProps {
+  selectedIndex: number;
+
+  isLoading: boolean;
+  output: string;
+  currentItems: CommandItem[];
+  children: ReactNode;
+  handleCommand(item: CommandItem): void;
+}
+
+const CommandSelector = ({
+  selectedIndex,
+  children,
+  isLoading,
+  output,
+  currentItems,
+  handleCommand,
+}: CommandSelectorProps) => {
+  return (
+    <Menu
+      opened={!isLoading && currentItems.length > 0}
+      middlewares={{ flip: false }}
+      position="bottom-start"
+      offset={4}
+      width={250}
+      trapFocus={false}
+      shadow="lg"
+    >
+      <Menu.Target>{children}</Menu.Target>
+      <Menu.Dropdown>
+        <ScrollArea.Autosize type="scroll" scrollbarSize={5} mah={300}>
+          {currentItems.map((item, index) => {
+            const isSelected = selectedIndex === index;
+            const showLoader =
+              isLoading && output === "" && !item.subCommandSet;
+
+            return (
+              <Menu.Item
+                key={item.id}
+                className={isSelected ? classes.menuItemSelected : undefined}
+                leftSection={
+                  showLoader ? (
+                    <Loader size={14} />
+                  ) : item.icon ? (
+                    <item.icon size={16} />
+                  ) : undefined
+                }
+                rightSection={
+                  item.subCommandSet ? (
+                    <IconChevronRight size={14} />
+                  ) : undefined
+                }
+                onClick={() => handleCommand(item)}
+                disabled={isLoading}
+              >
+                {item.name}
+              </Menu.Item>
+            );
+          })}
+        </ScrollArea.Autosize>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
+export { CommandSelector };

apps/client/src/ee/ai/components/editor/ai-menu/result-preview.tsx

@@ -0,0 +1,32 @@
+import { Loader, Paper, ScrollArea } from "@mantine/core";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { memo } from "react";
+import classes from "./ai-menu.module.css";
+
+interface ResultPreviewProps {
+  output: string;
+  isLoading: boolean;
+}
+const ResultPreview = memo(({ output, isLoading }: ResultPreviewProps) => {
+  if (!output && !isLoading) return;
+
+  const parsedOutput = `${marked.parse(output)}`;
+
+  return (
+    <Paper mb={4} shadow="lg" radius="md" className={classes.resultPreview}>
+      <ScrollArea.Autosize mah={300} type="scroll" scrollbarSize={5}>
+        <div className={classes.resultPreviewWrapper}>
+          {parsedOutput && (
+            <div
+              dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(parsedOutput) }}
+            />
+          )}
+          {isLoading && <Loader size={12} ml="xs" display="inline-block" />}
+        </div>
+      </ScrollArea.Autosize>
+    </Paper>
+  );
+});
+
+export { ResultPreview };

apps/client/src/ee/ai/components/enable-ai-search.tsx

@@ -1,12 +1,13 @@
-import { Group, Text, Switch, MantineSize, Title } from "@mantine/core";
+import { Group, Text, Switch, MantineSize, Tooltip } from "@mantine/core";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
 import { notifications } from "@mantine/notifications";
-import { isCloud } from "@/lib/config.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
-import useLicense from "@/ee/hooks/use-license.tsx";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
 
 export default function EnableAiSearch() {
   const { t } = useTranslation();
@@ -15,7 +16,7 @@ export default function EnableAiSearch() {
     <>
       <Group justify="space-between" wrap="nowrap" gap="xl">
         <div>
-          <Text size="md">{t("AI-powered search (Ask AI)")}</Text>
+          <Text size="md">{t("AI-powered search (AI Answers)")}</Text>
           <Text size="sm" c="dimmed">
             {t(
               "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.",
@@ -37,9 +38,8 @@ export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
   const { t } = useTranslation();
   const [workspace, setWorkspace] = useAtom(workspaceAtom);
   const [checked, setChecked] = useState(workspace?.settings?.ai?.search);
-  const { hasLicenseKey } = useLicense();
+  const hasAccess = useHasFeature(Feature.AI);
-
+  const upgradeLabel = useUpgradeLabel();
-  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
 
   const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.checked;
@@ -56,6 +56,7 @@ export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
   };
 
   return (
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
       <Switch
         size={size}
         label={label}
@@ -65,5 +66,6 @@ export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
         disabled={!hasAccess}
         aria-label={t("Toggle AI search")}
       />
+    </Tooltip>
   );
 }

apps/client/src/ee/ai/components/enable-generative-ai.tsx

@@ -0,0 +1,53 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+export default function EnableGenerativeAi() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.generative);
+  const hasAccess = useHasFeature(Feature.AI);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ generativeAi: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Generative AI (Ask AI)")}</Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.",
+          )}
+        </Text>
+      </div>
+
+      <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+        <Switch
+          defaultChecked={checked}
+          onChange={handleChange}
+          disabled={!hasAccess}
+        />
+      </Tooltip>
+    </Group>
+  );
+}

apps/client/src/ee/ai/components/mcp-settings.tsx

@@ -0,0 +1,156 @@
+import {
+  Anchor,
+  Group,
+  List,
+  Text,
+  Switch,
+  TextInput,
+  ActionIcon,
+  Tooltip,
+  Stack,
+  Alert,
+} from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import React, { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+import { getAppUrl } from "@/lib/config.ts";
+import { IconCheck, IconCopy, IconInfoCircle } from "@tabler/icons-react";
+import { CopyButton } from "@/components/common/copy-button.tsx";
+
+export default function McpSettings() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.mcp);
+  const hasAccess = useHasFeature(Feature.MCP);
+  const upgradeLabel = useUpgradeLabel();
+
+  const mcpUrl = `${getAppUrl()}/mcp`;
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({ mcpEnabled: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Stack gap="lg">
+      {!hasAccess && (
+        <Alert icon={<IconInfoCircle />} title={upgradeLabel} color="blue">
+          {t(
+            "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+          )}
+        </Alert>
+      )}
+
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="md">{t("Model Context Protocol (MCP)")}</Text>
+          <Text size="sm" c="dimmed">
+            {t(
+              "Enable the MCP server to allow AI assistants and tools to interact with your workspace content.",
+            )}{" "}
+            <Trans
+              i18nKey="View the <anchor>MCP documentation</anchor>."
+              components={{
+                anchor: <Anchor href="https://docmost.com/docs/user-guide/mcp" target="_blank" size="sm" />,
+              }}
+            />
+          </Text>
+        </div>
+
+        <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+          <Switch
+            defaultChecked={checked}
+            onChange={handleChange}
+            disabled={!hasAccess}
+          />
+        </Tooltip>
+      </Group>
+
+      {checked && (
+        <div>
+          <Text size="sm" fw={500} mb={4}>
+            {t("MCP Server URL")}
+          </Text>
+          <Group gap="xs">
+            <TextInput value={mcpUrl} readOnly style={{ flex: 1 }} />
+            <CopyButton value={mcpUrl} timeout={2000}>
+              {({ copied, copy }) => (
+                <Tooltip
+                  label={copied ? t("Copied") : t("Copy")}
+                  withArrow
+                  position="right"
+                >
+                  <ActionIcon
+                    color={copied ? "teal" : "gray"}
+                    variant="subtle"
+                    onClick={copy}
+                  >
+                    {copied ? <IconCheck size={16} /> : <IconCopy size={16} />}
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </CopyButton>
+          </Group>
+          <Text size="sm" c="dimmed" mt="xs">
+            {t(
+              "Use your API key for authentication. You can manage API keys in your account settings.",
+            )}
+          </Text>
+
+          <div>
+            <Text size="sm" fw={500} mt="md" mb={4}>
+              {t("Supported tools")}
+            </Text>
+            <List size="sm" spacing={2}>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  search_pages, get_page, create_page, update_page
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  list_pages, list_child_pages, duplicate_page
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  copy_page_to_space, move_page, move_page_to_space
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  get_space, list_spaces, create_space, update_space
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  get_comments, create_comment, update_comment
+                </Text>
+              </List.Item>
+              <List.Item>
+                <Text size="sm" c="dimmed" span>
+                  search_attachments, list_workspace_members, get_current_user
+                </Text>
+              </List.Item>
+            </List>
+          </div>
+        </div>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/ai/hooks/use-ai-search.ts

@@ -1,6 +1,6 @@
 import { useMutation, UseMutationResult } from "@tanstack/react-query";
 import { useState, useCallback } from "react";
-import { askAi, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
+import { aiAnswers, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
 import { IPageSearchParams } from "@/features/search/types/search.types.ts";
 
 // @ts-ignore
@@ -26,7 +26,7 @@ export function useAiSearch(): UseAiSearchResult {
 
       const { contentType, ...apiParams } = params;
 
-      return await askAi(apiParams, (chunk) => {
+      return await aiAnswers(apiParams, (chunk) => {
         if (chunk.content) {
           setStreamingAnswer((prev) => prev + chunk.content);
         }

apps/client/src/ee/ai/pages/ai-settings.tsx

@@ -1,36 +1,65 @@
 import { Helmet } from "react-helmet-async";
-import { getAppName, isCloud } from "@/lib/config.ts";
+import { getAppName } from "@/lib/config.ts";
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import React from "react";
 import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
-import useLicense from "@/ee/hooks/use-license.tsx";
 import EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
-import { Alert } from "@mantine/core";
+import EnableGenerativeAi from "@/ee/ai/components/enable-generative-ai.tsx";
+import EnableAiChat from "@/ee/ai-chat/components/enable-ai-chat.tsx";
+import McpSettings from "@/ee/ai/components/mcp-settings.tsx";
+import { Alert, Stack, Tabs } from "@mantine/core";
 import { IconInfoCircle } from "@tabler/icons-react";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+import { isCloud } from "@/lib/config.ts";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export default function AiSettings() {
   const { t } = useTranslation();
   const { isAdmin } = useUserRole();
-  const { hasLicenseKey } = useLicense();
+  const hasAccess = useHasFeature(Feature.AI);
+  const upgradeLabel = useUpgradeLabel();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const activeTab = location.pathname.endsWith("/mcp") ? "mcp" : "ai";
 
   if (!isAdmin) {
     return null;
   }
 
-  const hasAccess = isCloud() || (!isCloud() && hasLicenseKey);
+  const handleTabChange = (value: string | null) => {
+    if (value === "mcp") {
+      navigate("/settings/ai/mcp");
+    } else {
+      navigate("/settings/ai");
+    }
+  };
 
   return (
     <>
       <Helmet>
-        <title>AI - {getAppName()}</title>
+        <title>AI settings - {getAppName()}</title>
       </Helmet>
       <SettingsTitle title={t("AI settings")} />
 
+      <Tabs color="dark" value={activeTab} onChange={handleTabChange}>
+        <Tabs.List>
+          <Tabs.Tab fw={500} value="ai">
+            {t("AI")}
+          </Tabs.Tab>
+          <Tabs.Tab fw={500} value="mcp">
+            {t("MCP")}
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="ai" pt="md">
           {!hasAccess && (
             <Alert
               icon={<IconInfoCircle />}
-          title={t("Enterprise feature")}
+              title={upgradeLabel}
               color="blue"
               mb="lg"
             >
@@ -40,7 +69,17 @@ export default function AiSettings() {
             </Alert>
           )}
 
-      <EnableAiSearch />
+          <Stack gap="md">
+            {!isCloud() && <EnableAiSearch />}
+            <EnableGenerativeAi />
+            <EnableAiChat />
+          </Stack>
+        </Tabs.Panel>
+
+        <Tabs.Panel value="mcp" pt="md">
+          <McpSettings />
+        </Tabs.Panel>
+      </Tabs>
     </>
   );
 }

apps/client/src/ee/ai/services/ai-search-service.ts

@@ -15,11 +15,11 @@ export interface IAiSearchResponse {
   }>;
 }
 
-export async function askAi(
+export async function aiAnswers(
   params: IPageSearchParams,
   onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
 ): Promise<IAiSearchResponse> {
-  const response = await fetch("/api/ai/ask", {
+  const response = await fetch("/api/ai/answers", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",

apps/client/src/ee/ai/services/ai-service.ts

@@ -43,13 +43,16 @@ export async function generateAiContentStream(
     }
 
     const processStream = async () => {
+      let buffer = "";
       try {
         while (true) {
           const { done, value } = await reader.read();
           if (done) break;
 
-          const chunk = decoder.decode(value, { stream: true });
+          buffer += decoder.decode(value, { stream: true });
-          const lines = chunk.split("\n");
+          const lines = buffer.split("\n");
+
+          buffer = lines.pop() || "";
 
           for (const line of lines) {
             if (line.startsWith("data: ")) {
@@ -66,7 +69,7 @@ export async function generateAiContentStream(
                   onChunk(parsed);
                 }
               } catch (e) {
-                // Ignore parse errors for incomplete chunks
+                // Skip invalid JSON
               }
             }
           }

apps/client/src/ee/ai/types/ai.types.ts

@@ -6,6 +6,7 @@ export enum AiAction {
   SIMPLIFY = "simplify",
   CHANGE_TONE = "change_tone",
   SUMMARIZE = "summarize",
+  EXPLAIN = "explain",
   CONTINUE_WRITING = "continue_writing",
   TRANSLATE = "translate",
   CUSTOM = "custom",

apps/client/src/ee/api-key/components/api-key-created-modal.tsx

@@ -31,8 +31,9 @@ export function ApiKeyCreatedModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("API key created")}
+      title={t("{{credential}} created", { credential: t("API key") })}
       size="lg"
+      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Alert
@@ -41,7 +42,8 @@ export function ApiKeyCreatedModal({
           color="red"
         >
           {t(
-            "Make sure to copy your API key now. You won't be able to see it again!",
+            "Make sure to copy your {{credential}} now. You won't be able to see it again!",
+            { credential: t("API key") },
           )}
         </Alert>
 
@@ -64,7 +66,7 @@ export function ApiKeyCreatedModal({
         </div>
 
         <Button fullWidth onClick={onClose} mt="md">
-          {t("I've saved my API key")}
+          {t("I've saved my {{credential}}", { credential: t("API key") })}
         </Button>
       </Stack>
     </Modal>

apps/client/src/ee/api-key/components/api-key-table.tsx

@@ -44,7 +44,7 @@ export function ApiKeyTable({
             <Table.Th>{t("Last used")}</Table.Th>
             <Table.Th>{t("Expires")}</Table.Th>
             <Table.Th>{t("Created")}</Table.Th>
-            <Table.Th></Table.Th>
+            <Table.Th aria-label={t("Action")} />
           </Table.Tr>
         </Table.Thead>
 
@@ -106,7 +106,11 @@ export function ApiKeyTable({
                 <Table.Td>
                   <Menu position="bottom-end" withinPortal>
                     <Menu.Target>
-                      <ActionIcon variant="subtle" color="gray">
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label={t("API key menu")}
+                      >
                         <IconDots size={16} />
                       </ActionIcon>
                     </Menu.Target>

apps/client/src/ee/api-key/components/create-api-key-modal.tsx

@@ -1,8 +1,8 @@
 import { lazy, Suspense, useState } from "react";
 import { Modal, TextInput, Button, Group, Stack, Select } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { zod4Resolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
+import { z } from "zod/v4";
 import { useTranslation } from "react-i18next";
 import { useCreateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
 import { IconCalendar } from "@tabler/icons-react";
@@ -36,7 +36,7 @@ export function CreateApiKeyModal({
   const createApiKeyMutation = useCreateApiKeyMutation();
 
   const form = useForm<FormValues>({
-    validate: zodResolver(formSchema),
+    validate: zod4Resolver(formSchema),
     initialValues: {
       name: "",
       expiresAt: "",
@@ -105,8 +105,9 @@ export function CreateApiKeyModal({
     <Modal
       opened={opened}
       onClose={handleClose}
-      title={t("Create API Key")}
+      title={t("Create {{credential}}", { credential: t("API key") })}
       size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/api-key/components/restrict-api-to-admins.tsx

@@ -0,0 +1,71 @@
+import { Text, Switch, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import {
+  ResponsiveSettingsRow,
+  ResponsiveSettingsContent,
+  ResponsiveSettingsControl,
+} from "@/components/ui/responsive-settings-row";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
+
+export default function RestrictApiToAdmins() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(
+    workspace?.settings?.api?.restrictToAdmins === true,
+  );
+  const hasAccess = useHasFeature(Feature.API_KEYS);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        restrictApiToAdmins: value,
+      });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <ResponsiveSettingsRow>
+      <ResponsiveSettingsContent>
+        <Text size="md">
+          {t("Restrict API key creation to admins")}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Only admins and owners can create new API keys. Existing member keys will continue to work.",
+          )}
+        </Text>
+      </ResponsiveSettingsContent>
+
+      <ResponsiveSettingsControl>
+        <Tooltip
+          label={upgradeLabel}
+          disabled={hasAccess}
+          refProp="rootRef"
+        >
+          <Switch
+            checked={checked}
+            onChange={handleChange}
+            disabled={!hasAccess}
+            aria-label={t("Toggle restrict API keys to admins")}
+          />
+        </Tooltip>
+      </ResponsiveSettingsControl>
+    </ResponsiveSettingsRow>
+  );
+}

apps/client/src/ee/api-key/components/revoke-api-key-modal.tsx

@@ -30,12 +30,15 @@ export function RevokeApiKeyModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("Revoke API key")}
+      title={t("Revoke {{credential}}", { credential: t("API key") })}
       size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <Stack gap="md">
         <Text>
-          {t("Are you sure you want to revoke this API key")}{" "}
+          {t("Are you sure you want to revoke this {{credential}}", {
+            credential: t("API key"),
+          })}{" "}
           <strong>{apiKey?.name}</strong>?
         </Text>
         <Text size="sm" c="dimmed">

apps/client/src/ee/api-key/components/update-api-key-modal.tsx

@@ -1,7 +1,7 @@
 import { Modal, TextInput, Button, Group, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { zodResolver } from "mantine-form-zod-resolver";
+import { zod4Resolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
+import { z } from "zod/v4";
 import { useTranslation } from "react-i18next";
 import { useUpdateApiKeyMutation } from "@/ee/api-key/queries/api-key-query";
 import { IApiKey } from "@/ee/api-key";
@@ -27,7 +27,7 @@ export function UpdateApiKeyModal({
   const updateApiKeyMutation = useUpdateApiKeyMutation();
 
   const form = useForm<FormValues>({
-    validate: zodResolver(formSchema),
+    validate: zod4Resolver(formSchema),
     initialValues: {
       name: "",
     },
@@ -53,8 +53,9 @@ export function UpdateApiKeyModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t("Update API key")}
+      title={t("Update {{credential}}", { credential: t("API key") })}
       size="md"
+      closeButtonProps={{ "aria-label": t("Close") }}
     >
       <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
         <Stack gap="md">

apps/client/src/ee/api-key/pages/user-api-keys.tsx

@@ -1,28 +1,37 @@
 import React, { useState } from "react";
-import { Button, Group, Space } from "@mantine/core";
+import { Anchor, Alert, Button, Group, Space, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 import { Helmet } from "react-helmet-async";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import SettingsTitle from "@/components/settings/settings-title";
-import { getAppName } from "@/lib/config";
+import { getAppName, getAppUrl } from "@/lib/config";
 import { ApiKeyTable } from "@/ee/api-key/components/api-key-table";
 import { CreateApiKeyModal } from "@/ee/api-key/components/create-api-key-modal";
 import { ApiKeyCreatedModal } from "@/ee/api-key/components/api-key-created-modal";
 import { UpdateApiKeyModal } from "@/ee/api-key/components/update-api-key-modal";
 import { RevokeApiKeyModal } from "@/ee/api-key/components/revoke-api-key-modal";
 import Paginate from "@/components/common/paginate";
-import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search";
+import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetApiKeysQuery } from "@/ee/api-key/queries/api-key-query.ts";
 import { IApiKey } from "@/ee/api-key";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import useUserRole from "@/hooks/use-user-role.tsx";
 
 export default function UserApiKeys() {
   const { t } = useTranslation();
-  const { page, setPage } = usePaginateAndSearch();
+  const { cursor, goNext, goPrev } = useCursorPaginate();
   const [createModalOpened, setCreateModalOpened] = useState(false);
   const [createdApiKey, setCreatedApiKey] = useState<IApiKey | null>(null);
   const [updateModalOpened, setUpdateModalOpened] = useState(false);
   const [revokeModalOpened, setRevokeModalOpened] = useState(false);
   const [selectedApiKey, setSelectedApiKey] = useState<IApiKey | null>(null);
-  const { data, isLoading } = useGetApiKeysQuery({ page });
+  const { data, isLoading } = useGetApiKeysQuery({ cursor });
+  const [workspace] = useAtom(workspaceAtom);
+  const { isAdmin } = useUserRole();
+  const mcpEnabled = workspace?.settings?.ai?.mcp === true;
+  const restrictToAdmins = workspace?.settings?.api?.restrictToAdmins === true;
+  const canCreate = !restrictToAdmins || isAdmin;
 
   const handleCreateSuccess = (response: IApiKey) => {
     setCreatedApiKey(response);
@@ -48,11 +57,51 @@ export default function UserApiKeys() {
 
       <SettingsTitle title={t("API keys")} />
 
+      <Text size="sm" c="dimmed" mb="md">
+        <Trans
+          i18nKey="View the <anchor>API documentation</anchor> for usage details."
+          components={{
+            anchor: <Anchor href="https://docmost.com/api-docs" target="_blank" size="sm" />,
+          }}
+        />
+      </Text>
+
+      {mcpEnabled && canCreate && (
+        <Alert variant="light" color="blue" mb="md" p="sm" icon={<IconInfoCircle />}>
+          <Text size="sm">
+            {t(
+              "Your workspace has MCP enabled. Use your API key to connect AI assistants.",
+            )}{" "}
+            <Anchor
+              href="https://docmost.com/docs/user-guide/mcp"
+              target="_blank"
+              size="sm"
+            >
+              {t("Learn more")}
+            </Anchor>
+          </Text>
+          <Text size="sm" mt={4}>
+            {t("MCP server URL:")}{" "}
+            <Text size="sm" fw={500} span ff="monospace">
+              {`${getAppUrl()}/mcp`}
+            </Text>
+          </Text>
+        </Alert>
+      )}
+
+      {canCreate ? (
         <Group justify="flex-end" mb="md">
           <Button onClick={() => setCreateModalOpened(true)}>
             {t("Create API Key")}
           </Button>
         </Group>
+      ) : restrictToAdmins ? (
+        <Alert variant="light" color="yellow" mb="md" p="sm" icon={<IconInfoCircle />}>
+          <Text size="sm">
+            {t("API key creation is restricted to admins by your workspace administrator.")}
+          </Text>
+        </Alert>
+      ) : null}
 
       <ApiKeyTable
         apiKeys={data?.items || []}
@@ -65,10 +114,10 @@ export default function UserApiKeys() {
 
       {data?.items.length > 0 && (
         <Paginate
-          currentPage={page}
+          hasPrevPage={data?.meta?.hasPrevPage}
-          hasPrevPage={data?.meta.hasPrevPage}
+          hasNextPage={data?.meta?.hasNextPage}
-          hasNextPage={data?.meta.hasNextPage}
+          onNext={() => goNext(data?.meta?.nextCursor)}
-          onPageChange={setPage}
+          onPrev={goPrev}
         />
       )}