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,19 +1,22 @@
-FROM node:22-alpine AS base
+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
 
 FROM base AS installer
 
-RUN apk add --no-cache curl bash
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends curl bash \
+  && rm -rf /var/lib/apt/lists/*
 
 WORKDIR /app
 
@@ -29,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,85 +1,95 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.23.2",
+  "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",
-    "@casl/react": "^4.0.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
+    "@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",
-    "@emoji-mart/react": "^1.1.1",
-    "@excalidraw/excalidraw": "0.18.0-864353b",
-    "@mantine/core": "^8.1.3",
-    "@mantine/form": "^8.1.3",
-    "@mantine/hooks": "^8.1.3",
-    "@mantine/modals": "^8.1.3",
-    "@mantine/notifications": "^8.1.3",
-    "@mantine/spotlight": "^8.1.3",
-    "@tabler/icons-react": "^3.34.0",
-    "@tanstack/react-query": "^5.80.6",
-    "@tiptap/extension-character-count": "^2.10.3",
-    "alfaaz": "^1.1.0",
-    "axios": "^1.9.0",
-    "clsx": "^2.1.1",
-    "emoji-mart": "^5.6.0",
-    "file-saver": "^2.0.5",
-    "highlightjs-sap-abap": "^0.3.0",
-    "i18next": "^23.14.0",
-    "i18next-http-backend": "^2.6.1",
-    "jotai": "^2.12.5",
-    "jotai-optics": "^0.4.0",
-    "js-cookie": "^3.0.5",
-    "jwt-decode": "^4.0.0",
-    "katex": "0.16.22",
-    "lowlight": "^3.3.0",
-    "mantine-form-zod-resolver": "^1.3.0",
-    "mermaid": "^11.11.0",
-    "mitt": "^3.0.1",
-    "posthog-js": "^1.255.1",
-    "react": "^18.3.1",
-    "react-arborist": "3.4.0",
-    "react-clear-modal": "^2.0.15",
+    "@excalidraw/excalidraw": "0.18.0-3a5ef40",
+    "@mantine/core": "8.3.18",
+    "@mantine/dates": "8.3.18",
+    "@mantine/form": "8.3.18",
+    "@mantine/hooks": "8.3.18",
+    "@mantine/modals": "8.3.18",
+    "@mantine/notifications": "8.3.18",
+    "@mantine/spotlight": "8.3.18",
+    "@slidoapp/emoji-mart": "5.8.7",
+    "@slidoapp/emoji-mart-data": "1.2.4",
+    "@slidoapp/emoji-mart-react": "1.1.5",
+    "@tabler/icons-react": "3.40.0",
+    "@tanstack/react-query": "5.90.17",
+    "@tanstack/react-virtual": "3.13.24",
+    "alfaaz": "1.1.0",
+    "axios": "1.16.0",
+    "blueimp-load-image": "5.16.0",
+    "clsx": "2.1.1",
+    "file-saver": "2.0.5",
+    "highlightjs-sap-abap": "0.3.0",
+    "i18next": "25.10.1",
+    "i18next-http-backend": "3.0.6",
+    "jotai": "2.18.1",
+    "jotai-optics": "0.4.0",
+    "js-cookie": "3.0.5",
+    "jwt-decode": "4.0.0",
+    "katex": "0.16.40",
+    "lowlight": "3.3.0",
+    "mantine-form-zod-resolver": "1.3.0",
+    "mermaid": "11.15.0",
+    "mitt": "3.0.1",
+    "posthog-js": "1.372.2",
+    "react": "18.3.1",
+    "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "^1.0.1",
-    "react-error-boundary": "^4.1.2",
-    "react-helmet-async": "^2.0.5",
-    "react-i18next": "^15.0.1",
-    "react-router-dom": "^7.0.1",
-    "semver": "^7.7.2",
-    "socket.io-client": "^4.8.1",
-    "tippy.js": "^6.3.7",
-    "tiptap-extension-global-drag-handle": "^0.1.18",
-    "zod": "^3.25.56"
+    "react-drawio": "1.0.7",
+    "react-error-boundary": "6.1.1",
+    "react-helmet-async": "3.0.0",
+    "react-i18next": "16.5.8",
+    "react-router-dom": "7.13.1",
+    "semver": "7.7.4",
+    "socket.io-client": "4.8.3",
+    "zod": "4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
-    "@tanstack/eslint-plugin-query": "^5.62.1",
-    "@types/file-saver": "^2.0.7",
-    "@types/js-cookie": "^3.0.6",
-    "@types/katex": "^0.16.7",
-    "@types/node": "22.10.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.13.0",
-    "optics-ts": "^2.4.1",
-    "postcss": "^8.4.49",
-    "postcss-preset-mantine": "^1.17.0",
-    "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.4.1",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^6.3.5"
+    "@eslint/js": "9.28.0",
+    "@tanstack/eslint-plugin-query": "5.94.4",
+    "@testing-library/jest-dom": "6.6.0",
+    "@testing-library/react": "16.1.0",
+    "@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-dom": "18.3.1",
+    "@vitejs/plugin-react": "6.0.1",
+    "eslint": "9.28.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.2",
+    "globals": "15.13.0",
+    "jsdom": "25.0.0",
+    "optics-ts": "2.4.1",
+    "postcss": "8.5.14",
+    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "7.0.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "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",
@@ -533,5 +632,457 @@
   "Remove image": "Remove image",
   "Failed to remove image": "Failed to remove image",
   "Image exceeds 10MB limit.": "Image exceeds 10MB limit.",
-  "Image removed successfully": "Image removed successfully"
+  "Image removed successfully": "Image removed successfully",
+  "API key": "API key",
+  "API keys": "API keys",
+  "API management": "API management",
+  "Custom expiration date": "Custom expiration date",
+  "Enter a descriptive token name": "Enter a descriptive token name",
+  "Expiration": "Expiration",
+  "Expired": "Expired",
+  "Expires": "Expires",
+  "Last use": "Last Used",
+  "No API keys found": "No API keys found",
+  "No expiration": "No expiration",
+  "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": "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 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",
+  "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",
+  "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/public/locales/it-IT/translation.json

@@ -7,6 +7,7 @@
   "Add members": "Aggiungi membri",
   "Add to groups": "Aggiungi ai gruppi",
   "Add space members": "Aggiungi membri allo spazio",
+  "Add to favorites": "Aggiungi ai preferiti",
   "Admin": "Amministratore",
   "Are you sure you want to delete this group? Members will lose access to resources this group has access to.": "Sei sicuro di voler eliminare questo gruppo? I membri perderanno l'accesso alle risorse accessibili da questo gruppo.",
   "Are you sure you want to delete this page?": "Sei sicuro di voler eliminare questa pagina?",
@@ -29,6 +30,7 @@
   "Choose your preferred interface language.": "Scegli la lingua da utilizzare per l'interfaccia.",
   "Choose your preferred page width.": "Scegli la larghezza della pagina che preferisci.",
   "Confirm": "Conferma",
+  "Copy as Markdown": "Copia come Markdown",
   "Copy link": "Copia link",
   "Create": "Crea",
   "Create group": "Crea gruppo",
@@ -46,19 +48,19 @@
   "e.g ACME": "es. ACME",
   "e.g ACME Inc": "es. ACME Inc",
   "e.g Developers": "es. Sviluppatori",
-  "e.g Group for developers": "es. Gruppo per gli sviluppatori",
+  "e.g Group for developers": "es. Gruppo per sviluppatori",
   "e.g product": "es. prodotto",
-  "e.g Product Team": "es. Team di Prodotto",
+  "e.g Product Team": "es. Team di prodotto",
   "e.g Sales": "es. Vendite",
   "e.g Space for product team": "es. Spazio per il team di prodotto",
-  "e.g Space for sales team to collaborate": "es. Spazio per la collaborazione del team di vendita",
+  "e.g Space for sales team to collaborate": "es. Spazio per la collaborazione del team vendite",
   "Edit": "Modifica",
   "Read": "Leggi",
   "Edit group": "Modifica gruppo",
   "Email": "Email",
   "Enter a strong password": "Inserisci una password sicura",
   "Enter valid email addresses separated by comma or space max_50": "Inserisci degli indirizzi email validi separati da virgola o spazio [max: 50]",
-  "enter valid emails addresses": "inserisci degli indirizzi email validi",
+  "enter valid emails addresses": "inserisci indirizzi email validi",
   "Enter your current password": "Inserisci la tua password attuale",
   "enter your full name": "inserisci il tuo nome completo",
   "Enter your new password": "Inserisci la tua nuova password",
@@ -69,10 +71,14 @@
   "Export": "Esporta",
   "Failed to create page": "Impossibile creare la pagina",
   "Failed to delete page": "Impossibile eliminare la pagina",
+  "Failed to restore page": "Impossibile ripristinare la pagina",
   "Failed to fetch recent pages": "Impossibile recuperare le pagine recenti",
   "Failed to import pages": "Impossibile importare le pagine",
   "Failed to load page. An error occurred.": "Il caricamento della pagina è fallito. Si è verificato un errore.",
   "Failed to update data": "Impossibile aggiornare i dati",
+  "Favorite spaces": "Spazi preferiti",
+  "Favorite spaces appear here": "Gli spazi preferiti appariranno qui",
+  "Favorites": "Preferiti",
   "Full access": "Accesso completo",
   "Full page width": "Pagina a larghezza intera",
   "Full width": "Larghezza intera",
@@ -91,6 +97,7 @@
   "Invite by email": "Invita tramite email",
   "Invite members": "Invita membri",
   "Invite new members": "Invita nuovi membri",
+  "Invite People": "Invita persone",
   "Invited members who are yet to accept their invitation will appear here.": "I membri invitati che non hanno ancora accettato il loro invito appariranno qui.",
   "Invited members will be granted access to spaces the groups can access": "I membri invitati avranno accesso agli spazi a cui i gruppi possono accedere",
   "Join the workspace": "Unisciti all'area di lavoro",
@@ -115,6 +122,7 @@
   "No group found": "Nessun gruppo trovato",
   "No page history saved yet.": "La pagina non ha una cronologia per ora.",
   "No pages yet": "Nessuna pagina per ora",
+  "No shared pages": "Nessuna pagina condivisa.",
   "No results found...": "Nessun risultato trovato...",
   "No user found": "Nessun utente trovato",
   "Overview": "Panoramica",
@@ -122,11 +130,14 @@
   "page": "pagina",
   "Page deleted successfully": "Pagina eliminata con successo",
   "Page history": "Cronologia della pagina",
+  "Select version": "Seleziona versione",
+  "Highlight changes": "Evidenzia modifiche",
   "Page import is in progress. Please do not close this tab.": "L'importazione della pagina è in corso. Si prega di non chiudere questa scheda.",
   "Pages": "Pagine",
   "pages": "pagine",
   "Password": "Password",
   "Password changed successfully": "Password cambiata con successo",
+  "People": "Persone",
   "Pending": "In sospeso",
   "Please confirm your action": "Si prega di confermare la propria azione",
   "Preferences": "Preferenze",
@@ -134,6 +145,7 @@
   "Profile": "Profilo",
   "Recently updated": "Aggiornato di recente",
   "Remove": "Rimuovi",
+  "Remove from favorites": "Rimuovi dai preferiti",
   "Remove group member": "Rimuovi membro dal gruppo",
   "Remove space member": "Rimuovi membro dallo spazio",
   "Restore": "Ripristina",
@@ -144,55 +156,56 @@
   "Search for users": "Cerca un utente",
   "Search for users and groups": "Cerca un utente o un gruppo",
   "Search...": "Cerca...",
-  "Select language": "Seleziona una lingua",
-  "Select role": "Seleziona un ruolo",
+  "Select language": "Seleziona lingua",
+  "Select role": "Seleziona ruolo",
   "Select role to assign to all invited members": "Seleziona il ruolo da assegnare a tutti i membri invitati",
-  "Select theme": "Seleziona un tema",
+  "Select theme": "Seleziona tema",
   "Send invitation": "Invia invito",
   "Invitation sent": "Invito inviato",
   "Settings": "Impostazioni",
-  "Setup workspace": "Configura l'area di lavoro",
+  "Setup workspace": "Configura workspace",
   "Sign In": "Accedi",
   "Sign Up": "Registrati",
   "Slug": "Slug",
   "Space": "Spazio",
   "Space description": "Descrizione dello spazio",
-  "Space menu": "Menu spazio",
+  "Space menu": "Menu dello spazio",
   "Space name": "Nome dello spazio",
   "Space settings": "Impostazioni dello spazio",
   "Space slug": "Slug dello spazio",
   "Spaces": "Spazi",
-  "Spaces you belong to": "Spazi a cui appartieni",
+  "Spaces you belong to": "Spazi di cui fai parte",
   "No space found": "Nessuno spazio trovato",
-  "Search for spaces": "Cerca uno spazio",
+  "Search for spaces": "Cerca spazi",
   "Start typing to search...": "Inizia a digitare per cercare...",
   "Status": "Stato",
   "Successfully imported": "Importato con successo",
   "Successfully restored": "Ripristinato con successo",
   "System settings": "Impostazioni di sistema",
+  "Templates": "Modelli",
   "Theme": "Tema",
   "To change your email, you have to enter your password and new email.": "Per cambiare la tua email, devi inserire la tua password e la nuova email.",
-  "Toggle full page width": "Attiva/disattiva pagina a larghezza intera",
+  "Toggle full page width": "Attiva/disattiva larghezza completa della pagina",
   "Unable to import pages. Please try again.": "Impossibile importare le pagine. Riprova.",
   "untitled": "senza titolo",
   "Untitled": "Senza titolo",
   "Updated successfully": "Aggiornato con successo",
   "User": "Utente",
-  "Workspace": "Area di lavoro",
-  "Workspace Name": "Nome dell'area di lavoro",
-  "Workspace settings": "Impostazioni dell'area di lavoro",
+  "Workspace": "Workspace",
+  "Workspace Name": "Nome del workspace",
+  "Workspace settings": "Impostazioni del workspace",
   "You can change your password here.": "Qui puoi cambiare la tua password.",
   "Your Email": "La tua email",
   "Your import is complete.": "La tua importazione è completata.",
   "Your name": "Il tuo nome",
-  "Your Name": "Il Tuo Nome",
+  "Your Name": "Il tuo nome",
   "Your password": "La tua password",
   "Your password must be a minimum of 8 characters.": "La tua password deve contenere almeno 8 caratteri.",
   "Sidebar toggle": "Attiva/disattiva barra laterale",
   "Comments": "Commenti",
   "404 page not found": "404 pagina non trovata",
   "Sorry, we can't find the page you are looking for.": "Siamo spiacenti, non riusciamo a trovare la pagina che stai cercando.",
-  "Take me back to homepage": "Torna all'homepage",
+  "Take me back to homepage": "Torna alla homepage",
   "Forgot password": "Password dimenticata",
   "Forgot your password?": "Hai dimenticato la password?",
   "A password reset link has been sent to your email. Please check your inbox.": "Un link per il reset della password è stato inviato al tuo indirizzo email. Per favore, controlla la tua casella di posta.",
@@ -204,9 +217,14 @@
   "Reply...": "Rispondi...",
   "Error loading comments.": "Si è verificato un errore durante il caricamento dei commenti.",
   "No comments yet.": "Nessun commento per ora.",
+  "No open comments.": "Nessun commento aperto.",
+  "No resolved comments.": "Nessun commento risolto.",
+  "Add a comment...": "Aggiungi un commento...",
   "Edit comment": "Modifica commento",
   "Delete comment": "Elimina commento",
   "Are you sure you want to delete this comment?": "Sei sicuro di voler eliminare questo commento?",
+  "Delete chat": "Elimina chat",
+  "Are you sure you want to delete '{{title}}'? This action cannot be undone.": "Sei sicuro di voler eliminare '{{title}}'? Questa azione non può essere annullata.",
   "Comment created successfully": "Commento creato con successo",
   "Error creating comment": "Si è verificato un errore durante la creazione del commento",
   "Comment updated successfully": "Commento aggiornato con successo",
@@ -215,17 +233,16 @@
   "Failed to delete comment": "Impossibile eliminare il commento",
   "Comment resolved successfully": "Commento risolto con successo",
   "Comment re-opened successfully": "Commento riaperto con successo",
-  "Comment unresolved successfully": "Commento non risolto con successo",
+  "Comment unresolved successfully": "Commento contrassegnato come non risolto con successo",
   "Failed to resolve comment": "Impossibile risolvere il commento",
   "Resolve comment": "Risolvi commento",
-  "Unresolve comment": "Annulla risoluzione commento",
-  "Resolve Comment Thread": "Risolvi discussione commenti",
-  "Unresolve Comment Thread": "Annulla risoluzione discussione commenti",
+  "Unresolve comment": "Segna commento come non risolto",
+  "Resolve Comment Thread": "Risolvi discussione del commento",
+  "Unresolve Comment Thread": "Segna discussione del commento come non risolta",
   "Are you sure you want to resolve this comment thread? This will mark it as completed.": "Sei sicuro di voler risolvere questa discussione di commenti? Questo la contrassegnerà come completata.",
   "Are you sure you want to unresolve this comment thread?": "Sei sicuro di voler annullare la risoluzione di questa discussione di commenti?",
   "Resolved": "Risolto",
   "No active comments.": "Nessun commento attivo.",
-  "No resolved comments.": "Nessun commento risolto.",
   "Revoke invitation": "Revoca invito",
   "Revoke": "Revoca",
   "Don't": "Non",
@@ -244,7 +261,7 @@
   "Are you sure you want to delete this space?": "Sei sicuro di voler eliminare questo spazio?",
   "Delete this space with all its pages and data.": "Elimina questo spazio con tutte le sue pagine e i suoi dati.",
   "All pages, comments, attachments and permissions in this space will be deleted irreversibly.": "Tutte le pagine, i commenti, gli allegati e i permessi di questo spazio verranno eliminati irreversibilmente.",
-  "Confirm space name": "Conferma nome spazio",
+  "Confirm space name": "Conferma nome dello spazio",
   "Type the space name <b>{{spaceName}}</b> to confirm your action.": "Digita il nome dello spazio <b>{{spaceName}}</b> per confermare la tua azione.",
   "Format": "Formato",
   "Include subpages": "Includi sottopagine",
@@ -253,12 +270,16 @@
   "Export failed:": "Esportazione fallita:",
   "export error": "errore di esportazione",
   "Export page": "Esporta pagina",
+  "Export successful": "Esportazione riuscita",
   "Export space": "Esporta spazio",
   "Export {{type}}": "Esporta {{type}}",
   "File exceeds the {{limit}} attachment limit": "Il file supera il limite per gli allegati di {{limit}}",
   "Align left": "Allinea a sinistra",
   "Align right": "Allinea a destra",
   "Align center": "Allinea al centro",
+  "Alt text": "Testo alternativo",
+  "Describe this for accessibility.": "Descrivi questo contenuto per l'accessibilità.",
+  "Add a description": "Aggiungi una descrizione",
   "Justify": "Giustifica",
   "Merge cells": "Unisci celle",
   "Split cell": "Dividi cella",
@@ -269,7 +290,21 @@
   "Add row above": "Aggiungi riga sopra",
   "Add row below": "Aggiungi riga sotto",
   "Delete table": "Elimina tabella",
+  "Add column left": "Aggiungi colonna a sinistra",
+  "Add column right": "Aggiungi colonna a destra",
+  "Clear cell": "Cancella cella",
+  "Clear cells": "Cancella celle",
+  "Toggle header cell": "Attiva/disattiva cella di intestazione",
+  "Toggle header column": "Attiva/disattiva colonna di intestazione",
+  "Toggle header row": "Attiva/disattiva riga di intestazione",
+  "Move column left": "Sposta colonna a sinistra",
+  "Move column right": "Sposta colonna a destra",
+  "Move row down": "Sposta riga in basso",
+  "Move row up": "Sposta riga in alto",
+  "Sort A → Z": "Ordina A → Z",
+  "Sort Z → A": "Ordina Z → A",
   "Info": "Informazioni",
+  "Note": "Nota",
   "Success": "Successo",
   "Warning": "Avviso",
   "Danger": "Pericolo",
@@ -280,6 +315,11 @@
   "Save & Exit": "Salva ed esci",
   "Double-click to edit Excalidraw diagram": "Fai doppio clic per modificare il diagramma di Excalidraw",
   "Paste link": "Incolla link",
+  "Paste link or search pages": "Incolla il link o cerca le pagine",
+  "Link to web page": "Collega a una pagina web",
+  "Recents": "Recenti",
+  "Page or URL": "Pagina o URL",
+  "Link title": "Titolo del link",
   "Edit link": "Modifica link",
   "Remove link": "Rimuovi link",
   "Add link": "Aggiungi link",
@@ -298,7 +338,7 @@
   "Pink": "Rosa",
   "Gray": "Grigio",
   "Embed link": "Incorpora collegamento",
-  "Invalid {{provider}} embed link": "Link di incorporamento {{provider}} non valido",
+  "Invalid {{provider}} embed link": "Link incorporato {{provider}} non valido",
   "Embed {{provider}}": "Incorpora {{provider}}",
   "Enter {{provider}} link to embed": "Inserisci il link {{provider}} per incorporare",
   "Bold": "Grassetto",
@@ -325,33 +365,62 @@
   "Create block quote.": "Crea blocco citazione.",
   "Insert code snippet.": "Inserisci frammento di codice.",
   "Insert horizontal rule divider": "Inserisci divisore di regola orizzontale",
+  "Page break": "Interruzione di pagina",
+  "Insert a page break for printing.": "Inserisci un'interruzione di pagina per la stampa.",
   "Upload any image from your device.": "Carica un'immagine dal tuo dispositivo.",
   "Upload any video from your device.": "Carica qualsiasi video dal tuo dispositivo.",
+  "Upload any audio from your device.": "Carica qualsiasi audio dal tuo dispositivo.",
   "Upload any file from your device.": "Carica qualsiasi file dal tuo dispositivo.",
+  "Uploading {{name}}": "Caricamento di {{name}}",
+  "Uploading file": "Caricamento file",
   "Table": "Tabella",
   "Insert a table.": "Inserisci una tabella.",
   "Insert collapsible block.": "Inserisci blocco comprimibile.",
   "Video": "Video",
-  "Divider": "Divisore",
-  "Quote": "Preventivo",
+  "Divider": "Separatore",
+  "Quote": "Citazione",
   "Image": "Immagine",
+  "Audio": "Audio",
+  "Embed PDF": "Incorpora PDF",
+  "Upload and embed a PDF file.": "Carica e incorpora un file PDF.",
+  "Embed as PDF": "Incorpora come PDF",
+  "Failed to load PDF": "Caricamento del PDF non riuscito",
+  "Convert to attachment": "Converti in allegato",
   "File attachment": "Allegato file",
-  "Toggle block": "Attiva blocco",
-  "Callout": "Avviso",
+  "Toggle block": "Blocco a comparsa",
+  "Callout": "Riquadro evidenziato",
   "Insert callout notice.": "Inserisci avviso di richiamo.",
-  "Math inline": "Matematica in linea",
+  "Math inline": "Formula matematica in linea",
   "Insert inline math equation.": "Inserisci equazione matematica in linea.",
   "Math block": "Blocco matematico",
   "Insert math equation": "Inserisci equazione matematica",
-  "Mermaid diagram": "Diagramma di Mermaid",
-  "Insert mermaid diagram": "Inserisci un diagramma di Mermaid",
+  "Mermaid diagram": "Diagramma Mermaid",
+  "Insert mermaid diagram": "Inserisci diagramma Mermaid",
   "Insert and design Drawio diagrams": "Inserisci e progetta diagrammi Drawio",
-  "Insert current date": "Inserisci la data corrente",
-  "Draw and sketch excalidraw diagrams": "Disegna e schizza diagrammi excalidraw",
+  "Insert current date": "Inserisci data corrente",
+  "Draw and sketch excalidraw diagrams": "Disegna e abbozza diagrammi Excalidraw",
   "Multiple": "Multiplo",
+  "Turn into": "Trasforma in",
+  "Text align": "Allinea testo",
+  "This page may have been deleted, moved, or you may not have access.": "Questa pagina potrebbe essere stata eliminata o spostata, oppure potresti non avere accesso.",
+  "Go to homepage": "Vai alla pagina principale",
+  "Pages you create will show up here.": "Le pagine che crei appariranno qui.",
   "Heading {{level}}": "Intestazione {{level}}",
   "Toggle title": "Attiva/disattiva titolo",
-  "Write anything. Enter \"/\" for commands": "Scrivi qualcosa. Digita \"/\" per i comandi",
+  "Write anything. Enter \"/\" for commands": "Scrivi qualsiasi cosa. Digita \"/\" per i comandi",
+  "Write...": "Scrivi...",
+  "Column count": "Numero di colonne",
+  "{{count}} Columns": "{{count}} colonne",
+  "{{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": "Colonne uguali",
+  "Left sidebar": "Barra laterale sinistra",
+  "Right sidebar": "Barra laterale destra",
+  "Wide center": "Centro ampio",
+  "Left wide": "Ampia a sinistra",
+  "Right wide": "Ampia a destra",
   "Names do not match": "I nomi non corrispondono",
   "Today, {{time}}": "Oggi, {{time}}",
   "Yesterday, {{time}}": "Ieri, {{time}}",
@@ -363,75 +432,103 @@
   "Member role updated successfully": "Ruolo del membro aggiornato con successo",
   "Created by: <b>{{creatorName}}</b>": "Creato da: <b>{{creatorName}}</b>",
   "Created at: {{time}}": "Creato il: {{time}}",
-  "Edited by {{name}} {{time}}": "Modificato da {{name}} il {{time}}",
+  "Edited by {{name}} {{time}}": "Modificato da {{name}} {{time}}",
   "Word count: {{wordCount}}": "Conteggio parole: {{wordCount}}",
   "Character count: {{characterCount}}": "Conteggio caratteri: {{characterCount}}",
   "New update": "Nuovo aggiornamento",
   "{{latestVersion}} is available": "{{latestVersion}} è disponibile",
-  "Default page edit mode": "Modalità di modifica pagina predefinita",
+  "Default page edit mode": "Modalità di modifica predefinita della pagina",
   "Choose your preferred page edit mode. Avoid accidental edits.": "Scegli la tua modalità di modifica della pagina preferita. Evita modifiche accidentali.",
+  "Choose {{format}} file": "Scegli file {{format}}",
   "Reading": "Lettura",
   "Delete member": "Elimina membro",
   "Member deleted successfully": "Membro eliminato con successo",
   "Are you sure you want to delete this workspace member? This action is irreversible.": "Sei sicuro di voler eliminare questo membro del workspace? Questa azione è irreversibile.",
+  "Deactivate member": "Disattiva membro",
+  "Activate member": "Attiva membro",
+  "Are you sure you want to deactivate this workspace member? They will no longer be able to access this workspace.": "Sei sicuro di voler disattivare questo membro dello spazio di lavoro? Non potrà più accedere a questo spazio di lavoro.",
+  "Are you sure you want to activate this workspace member?": "Sei sicuro di voler attivare questo membro dello spazio di lavoro?",
+  "Deactivate": "Disattiva",
+  "Activate": "Attiva",
+  "Deactivated": "Disattivato",
   "Move": "Sposta",
   "Move page": "Sposta pagina",
   "Move page to a different space.": "Sposta la pagina in un altro spazio.",
   "Real-time editor connection lost. Retrying...": "Connessione all'editor in tempo reale persa. Riprovo...",
-  "Table of contents": "Indice dei contenuti",
+  "Table of contents": "Indice",
   "Add headings (H1, H2, H3) to generate a table of contents.": "Aggiungi intestazioni (H1, H2, H3) per generare un sommario.",
   "Share": "Condividi",
   "Public sharing": "Condivisione pubblica",
   "Shared by": "Condiviso da",
   "Shared at": "Condiviso il",
   "Inherits public sharing from": "Eredita la condivisione pubblica da",
-  "Share to web": "Condividi su web",
-  "Shared to web": "Condiviso su web",
+  "Share to web": "Condividi sul web",
+  "Shared to web": "Condiviso sul web",
   "Anyone with the link can view this page": "Chiunque abbia il link può visualizzare questa pagina",
   "Make this page publicly accessible": "Rendi questa pagina accessibile pubblicamente",
-  "Include sub-pages": "Includi sotto-pagine",
-  "Make sub-pages public too": "Rendi pubbliche anche le sotto-pagine",
-  "Allow search engines to index page": "Permetti ai motori di ricerca di indicizzare la pagina",
+  "Include sub-pages": "Includi sottopagine",
+  "Make sub-pages public too": "Rendi pubbliche anche le sottopagine",
+  "Allow search engines to index page": "Consenti ai motori di ricerca di indicizzare la pagina",
   "Open page": "Apri pagina",
   "Page": "Pagina",
-  "Delete public share link": "Elimina il link di condivisione pubblica",
+  "Delete public share link": "Elimina link di condivisione pubblica",
   "Delete share": "Elimina condivisione",
   "Are you sure you want to delete this shared link?": "Sei sicuro di voler eliminare questo link condiviso?",
-  "Publicly shared pages from spaces you are a member of will appear here": "Le pagine condivise pubblicamente dagli spazi di cui sei membro appariranno qui",
+  "Publicly shared pages from spaces you are a member of will appear here": "Le pagine condivise pubblicamente degli spazi di cui fai parte appariranno qui",
   "Share deleted successfully": "Condivisione eliminata con successo",
   "Share not found": "Condivisione non trovata",
-  "Failed to share page": "Condivisione della pagina fallita",
+  "Failed to share page": "Condivisione della pagina non riuscita",
+  "Disable public sharing": "Disabilita la condivisione pubblica",
+  "Prevent members from sharing pages publicly.": "Impedisci ai membri di condividere pubblicamente le pagine.",
+  "Toggle public sharing": "Attiva/disattiva la condivisione pubblica",
+  "Toggle space public sharing": "Attiva/disattiva la condivisione pubblica nello spazio",
+  "Allow viewers to comment": "Consenti agli utenti di commentare",
+  "Allow viewers to add comments on pages in this space.": "Consenti agli utenti di aggiungere commenti alle pagine in questo spazio.",
+  "Toggle viewer comments": "Attiva/disattiva i commenti degli utenti",
+  "Public sharing is disabled at the workspace level": "La condivisione pubblica è disabilitata a livello di area di lavoro",
+  "Prevent pages in this space from being shared publicly.": "Impedisci che le pagine in questo spazio vengano condivise pubblicamente.",
+  "Page permissions": "Autorizzazioni della pagina.",
+  "Control who can view and edit individual pages. Available with an enterprise license.": "Controlla chi può visualizzare e modificare le singole pagine. Disponibile con una licenza Enterprise.",
+  "Enable public sharing": "Abilita la condivisione pubblica",
+  "Are you sure you want to enable public sharing? Members will be able to share pages publicly.": "Sei sicuro di voler abilitare la condivisione pubblica? I membri potranno condividere le pagine pubblicamente.",
+  "Are you sure you want to disable public sharing? All existing shared links in this workspace will be deleted.": "Sei sicuro di voler disabilitare la condivisione pubblica? Tutti i link condivisi esistenti in questa area di lavoro verranno eliminati.",
+  "Are you sure you want to enable public sharing for this space?": "Sei sicuro di voler abilitare la condivisione pubblica per questo spazio?",
+  "Are you sure you want to disable public sharing? All existing shared links in this space will be deleted.": "Sei sicuro di voler disabilitare la condivisione pubblica? Tutti i link condivisi esistenti in questo spazio verranno eliminati.",
+  "Public sharing is disabled": "La condivisione pubblica è disabilitata",
+  "Public sharing has been disabled at the workspace level.": "La condivisione pubblica è stata disabilitata a livello di area di lavoro.",
+  "Public sharing has been disabled for this space.": "La condivisione pubblica è stata disabilitata per questo spazio.",
   "Copy page": "Copia pagina",
   "Copy page to a different space.": "Copia pagina in un altro spazio.",
   "Page copied successfully": "Pagina copiata con successo",
   "Page duplicated successfully": "Pagina duplicata con successo",
   "Find": "Trova",
   "Not found": "Non trovato",
-  "Previous Match (Shift+Enter)": "Corrispondenza precedente (Shift+Invio)",
+  "Previous Match (Shift+Enter)": "Corrispondenza precedente (Maiusc+Invio)",
   "Next match (Enter)": "Corrispondenza successiva (Invio)",
-  "Match case (Alt+C)": "Maiuscole/minuscole (Alt+C)",
+  "Match case (Alt+C)": "Distingui maiuscole/minuscole (Alt+C)",
   "Replace": "Sostituisci",
   "Close (Escape)": "Chiudi (Esc)",
   "Replace (Enter)": "Sostituisci (Invio)",
   "Replace all (Ctrl+Alt+Enter)": "Sostituisci tutto (Ctrl+Alt+Invio)",
   "Replace all": "Sostituisci tutto",
+  "View all": "Visualizza tutto",
   "View all spaces": "Visualizza tutti gli spazi",
   "Error": "Errore",
-  "Failed to disable MFA": "Disabilitazione MFA non riuscita",
-  "Disable two-factor authentication": "Disabilita autenticazione a due fattori",
+  "Failed to disable MFA": "Disattivazione MFA non riuscita",
+  "Disable two-factor authentication": "Disattiva autenticazione a due fattori",
   "Disabling two-factor authentication will make your account less secure. You'll only need your password to sign in.": "Disabilitare l'autenticazione a due fattori renderà il tuo account meno sicuro. Avrai bisogno solo della tua password per accedere.",
   "Please enter your password to disable two-factor authentication:": "Inserisci la tua password per disabilitare l'autenticazione a due fattori:",
-  "Two-factor authentication has been enabled": "Autenticazione a due fattori abilitata",
-  "Two-factor authentication has been disabled": "Autenticazione a due fattori disabilitata",
+  "Two-factor authentication has been enabled": "L'autenticazione a due fattori è stata abilitata",
+  "Two-factor authentication has been disabled": "L'autenticazione a due fattori è stata disabilitata",
   "2-step verification": "Verifica in 2 passaggi",
   "Protect your account with an additional verification layer when signing in.": "Proteggi il tuo account con un ulteriore livello di verifica durante l'accesso.",
   "Two-factor authentication is active on your account.": "L'autenticazione a due fattori è attiva sul tuo account.",
   "Add 2FA method": "Aggiungi metodo 2FA",
   "Backup codes": "Codici di backup",
-  "Disable": "Disabilita",
+  "Disable": "Disattiva",
   "Invalid verification code": "Codice di verifica non valido",
-  "New backup codes have been generated": "Nuovi codici di backup generati",
-  "Failed to regenerate backup codes": "Rigenerazione codici di backup non riuscita",
+  "New backup codes have been generated": "Sono stati generati nuovi codici di backup",
+  "Failed to regenerate backup codes": "Rigenerazione dei codici di backup non riuscita",
   "About backup codes": "Informazioni sui codici di backup",
   "Backup codes can be used to access your account if you lose access to your authenticator app. Each code can only be used once.": "I codici di backup possono essere utilizzati per accedere al tuo account se perdi l'accesso alla tua app di autenticazione. Ogni codice può essere usato solo una volta.",
   "You can regenerate new backup codes at any time. This will invalidate all existing codes.": "Puoi rigenerare nuovi codici di backup in qualsiasi momento. Questo invaliderà tutti i codici esistenti.",
@@ -441,9 +538,9 @@
   "Make sure to save these codes in a secure place. Your old backup codes are no longer valid.": "Assicurati di salvare questi codici in un luogo sicuro. I tuoi vecchi codici di backup non sono più validi.",
   "Your new backup codes": "I tuoi nuovi codici di backup",
   "I've saved my backup codes": "Ho salvato i miei codici di backup",
-  "Failed to setup MFA": "Impostazione MFA non riuscita",
-  "Setup & Verify": "Imposta e Verifica",
-  "Add to authenticator": "Aggiungi ad authenticator",
+  "Failed to setup MFA": "Configurazione MFA non riuscita",
+  "Setup & Verify": "Configura e verifica",
+  "Add to authenticator": "Aggiungi all'autenticatore",
   "1. Scan this QR code with your authenticator app": "1. Scansiona questo codice QR con la tua app di autenticazione",
   "Can't scan the code?": "Non riesci a scansionare il codice?",
   "Enter this code manually in your authenticator app:": "Inserisci questo codice manualmente nella tua app di autenticazione:",
@@ -457,17 +554,17 @@
   "Print": "Stampa",
   "Two-factor authentication has been set up. Please log in again.": "L'autenticazione a due fattori è stata impostata. Effettua nuovamente l'accesso, per favore.",
   "Two-Factor authentication required": "Autenticazione a due fattori richiesta",
-  "Your workspace requires two-factor authentication for all users": "Il tuo spazio di lavoro richiede l'autenticazione a due fattori per tutti gli utenti",
+  "Your workspace requires two-factor authentication for all users": "Il tuo workspace richiede l'autenticazione a due fattori per tutti gli utenti",
   "To continue accessing your workspace, you must set up two-factor authentication. This adds an extra layer of security to your account.": "Per continuare ad accedere al tuo spazio di lavoro, devi impostare l'autenticazione a due fattori. Questo aggiunge un ulteriore livello di sicurezza al tuo account.",
-  "Set up two-factor authentication": "Imposta l'autenticazione a due fattori",
-  "Cancel and logout": "Annulla e disconnetti",
+  "Set up two-factor authentication": "Configura l'autenticazione a due fattori",
+  "Cancel and logout": "Annulla e disconnettiti",
   "Your workspace requires two-factor authentication. Please set it up to continue.": "Il tuo spazio di lavoro richiede l'autenticazione a due fattori. Impostala per continuare.",
   "This adds an extra layer of security to your account by requiring a verification code from your authenticator app.": "Questo aggiunge un ulteriore livello di sicurezza al tuo account richiedendo un codice di verifica dalla tua app di autenticazione.",
-  "Password is required": "La password è richiesta",
-  "Password must be at least 8 characters": "La password deve essere di almeno 8 caratteri",
-  "Please enter a 6-digit code": "Inserisci un codice a 6 cifre",
+  "Password is required": "La password è obbligatoria",
+  "Password must be at least 8 characters": "La password deve contenere almeno 8 caratteri",
+  "Please enter a 6-digit code": "Inserisci un codice di 6 cifre",
   "Code must be exactly 6 digits": "Il codice deve essere esattamente di 6 cifre",
-  "Enter the 6-digit code found in your authenticator app": "Inserisci il codice a 6 cifre trovato nella tua app di autenticazione",
+  "Enter the 6-digit code found in your authenticator app": "Inserisci il codice di 6 cifre presente nella tua app di autenticazione",
   "Need help authenticating?": "Hai bisogno di aiuto per autenticarti?",
   "MFA QR Code": "Codice QR MFA",
   "Account created successfully. Please log in to set up two-factor authentication.": "Account creato con successo. Effettua l'accesso per impostare l'autenticazione a due fattori.",
@@ -475,7 +572,7 @@
   "Password reset successful. Please log in with your new password to set up two-factor authentication.": "Reimpostazione della password riuscita. Accedi con la tua nuova password per impostare l'autenticazione a due fattori.",
   "Password reset was successful. Please log in with your new password.": "Reimpostazione della password riuscita. Accedi con la tua nuova password.",
   "Two-factor authentication": "Autenticazione a due fattori",
-  "Use authenticator app instead": "Usa l'app di autenticazione invece",
+  "Use authenticator app instead": "Usa invece l'app di autenticazione",
   "Verify backup code": "Verifica codice di backup",
   "Use backup code": "Usa codice di backup",
   "Enter one of your backup codes": "Inserisci uno dei tuoi codici di backup",
@@ -483,7 +580,7 @@
   "Enter one of your backup codes. Each backup code can only be used once.": "Inserisci uno dei tuoi codici di backup. Ogni codice di backup può essere utilizzato solo una volta.",
   "Verify": "Verifica",
   "Trash": "Cestino",
-  "Pages in trash will be permanently deleted after 30 days.": "Le pagine nel cestino verranno eliminate definitivamente dopo 30 giorni.",
+  "Pages in trash will be permanently deleted after {{count}} days.": "Le pagine nel cestino verranno eliminate definitivamente dopo {{count}} giorni.",
   "Deleted": "Eliminato",
   "No pages in trash": "Nessuna pagina nel cestino",
   "Permanently delete page?": "Eliminare definitivamente la pagina?",
@@ -492,6 +589,8 @@
   "Move to trash": "Sposta nel cestino",
   "Move this page to trash?": "Spostare questa pagina nel cestino?",
   "Restore page": "Ripristina pagina",
+  "Permanently delete": "Elimina definitivamente",
+  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> ha spostato questa pagina nel Cestino {{time}}.",
   "Page moved to trash": "Pagina spostata nel cestino",
   "Page restored successfully": "Pagina ripristinata con successo",
   "Deleted by": "Eliminato da",
@@ -508,24 +607,482 @@
   "Find a space": "Trova uno spazio",
   "Search in all your spaces": "Cerca in tutti i tuoi spazi",
   "Type": "Tipo",
-  "Enterprise": "Impresa",
+  "Enterprise": "Enterprise",
   "Download attachment": "Scarica allegato",
   "Allowed email domains": "Domini email consentiti",
-  "Only users with email addresses from these domains can signup via SSO.": "Solo gli utenti con indirizzi email provenienti da questi domini possono registrarsi tramite SSO.",
-  "Enter valid domain names separated by comma or space": "Inserisci nomi di dominio validi separati da virgole o spazi",
-  "Enforce two-factor authentication": "Imponi l'autenticazione a due fattori",
+  "Only users with email addresses from these domains can signup via SSO.": "Solo gli utenti con indirizzi email di questi domini possono registrarsi tramite SSO.",
+  "Enter valid domain names separated by comma or space": "Inserisci nomi di dominio validi separati da virgola o spazio",
+  "Enforce two-factor authentication": "Rendi obbligatoria l'autenticazione a due fattori",
   "Once enforced, all members must enable two-factor authentication to access the workspace.": "Una volta impostata, tutti i membri devono abilitare l'autenticazione a due fattori per accedere all'area di lavoro.",
-  "Toggle MFA enforcement": "Attiva disattiva l'applicazione MFA",
+  "Toggle MFA enforcement": "Attiva/disattiva obbligatorietà MFA",
   "Display name": "Nome visualizzato",
-  "Allow signup": "Consenti iscrizione",
+  "Allow signup": "Consenti registrazione",
   "Enabled": "Abilitato",
   "Advanced Settings": "Impostazioni avanzate",
   "Enable TLS/SSL": "Abilita TLS/SSL",
-  "Use secure connection to LDAP server": "Usa connessione sicura al server LDAP",
+  "Use secure connection to LDAP server": "Usa una connessione sicura al server LDAP",
   "Group sync": "Sincronizzazione gruppi",
   "No SSO providers found.": "Nessun provider SSO trovato.",
   "Delete SSO provider": "Elimina provider SSO",
   "Are you sure you want to delete this SSO provider?": "Sei sicuro di voler eliminare questo provider SSO?",
   "Action": "Azione",
-  "{{ssoProviderType}} configuration": "Configurazione {{ssoProviderType}}"
+  "{{ssoProviderType}} configuration": "Configurazione {{ssoProviderType}}",
+  "Icon": "Icona",
+  "Upload image": "Carica immagine",
+  "Remove image": "Rimuovi immagine",
+  "Failed to remove image": "Rimozione immagine fallita",
+  "Image exceeds 10MB limit.": "L'immagine supera il limite di 10MB.",
+  "Image removed successfully": "Immagine rimossa con successo",
+  "API key": "Chiave API",
+  "API keys": "Chiavi API",
+  "API management": "Gestione API",
+  "Custom expiration date": "Data di scadenza personalizzata",
+  "Enter a descriptive token name": "Inserisci un nome descrittivo del token",
+  "Expiration": "Scadenza",
+  "Expired": "Scaduto",
+  "Expires": "Scade",
+  "Last use": "Ultimo utilizzo",
+  "No API keys found": "Nessuna chiave API trovata",
+  "No expiration": "Nessuna scadenza",
+  "Revoked successfully": "Revocata con successo",
+  "Select expiration date": "Seleziona la data di scadenza",
+  "This action cannot be undone. Any applications using this API key will stop working.": "Questa azione non può essere annullata. Qualsiasi applicazione che utilizza questa chiave API smetterà di funzionare.",
+  "Update": "Aggiorna",
+  "Update {{credential}}": "Aggiorna {{credential}}",
+  "Manage API keys for all users in the workspace": "Gestisci le chiavi API per tutti gli utenti nell'area di lavoro",
+  "Restrict API key creation to admins": "Limita la creazione delle chiavi API agli amministratori",
+  "Only admins and owners can create new API keys. Existing member keys will continue to work.": "Solo gli amministratori e i proprietari possono creare nuove chiavi API. Le chiavi dei membri esistenti continueranno a funzionare.",
+  "Toggle restrict API keys to admins": "Attiva/disattiva la limitazione delle chiavi API agli amministratori",
+  "API key creation is restricted to admins by your workspace administrator.": "La creazione delle chiavi API è limitata agli amministratori dal tuo amministratore dello spazio di lavoro.",
+  "AI settings": "Impostazioni AI",
+  "AI search": "Ricerca AI",
+  "AI Answer": "Risposta AI",
+  "Ask AI": "Chiedi all'AI",
+  "AI is thinking...": "L'AI sta pensando...",
+  "Thinking": "Sto pensando",
+  "Ask a question...": "Fai una domanda...",
+  "AI Answers": "Risposte AI",
+  "AI-powered search (AI Answers)": "Ricerca con AI (Risposte AI)",
+  "AI search uses vector embeddings to provide semantic search capabilities across your workspace content.": "La ricerca AI utilizza embeddings vettoriali per fornire capacità di ricerca semantica nel contenuto della tua area di lavoro.",
+  "Toggle AI search": "Attiva/disattiva ricerca AI",
+  "Generative AI (Ask AI)": "AI generativa (Chiedi AI)",
+  "Enable AI-powered content generation in the editor. Allows users to generate, improve, translate and transform text.": "Abilita la generazione di contenuti con AI nell'editor. Consente agli utenti di generare, migliorare, tradurre e trasformare il testo.",
+  "Toggle generative AI": "Attiva/Disattiva AI generativa",
+  "Upgrade your plan": "Aggiorna il tuo piano",
+  "Available with a paid license": "Disponibile con una licenza a pagamento",
+  "Upgrade your license tier.": "Aggiorna il livello della tua licenza.",
+  "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.": "L'IA è disponibile solo nell'edizione Enterprise di Docmost. Contatta sales@docmost.com.",
+  "AI & MCP": "IA e MCP",
+  "AI": "IA",
+  "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.": "Abilita il server MCP per consentire ad assistenti e strumenti IA di interagire con i contenuti del tuo spazio di lavoro.",
+  "MCP is only available in the Docmost enterprise edition. Contact sales@docmost.com.": "MCP è disponibile solo nell'edizione Enterprise di Docmost. Contatta sales@docmost.com.",
+  "MCP Server URL": "URL del server MCP",
+  "Use your API key for authentication. You can manage API keys in your account settings.": "Usa la tua chiave API per l'autenticazione. Puoi gestire le chiavi API nelle impostazioni del tuo account.",
+  "Supported tools": "Strumenti supportati",
+  "Your workspace has MCP enabled. Use your API key to connect AI assistants.": "Il tuo spazio di lavoro ha MCP abilitato. Usa la tua chiave API per collegare gli assistenti IA.",
+  "MCP server URL:": "URL del server MCP:",
+  "Learn more": "Scopri di più",
+  "Manage API keys for all users in the workspace. View the <anchor>API documentation</anchor> for usage details.": "Gestisci le API key per tutti gli utenti nello spazio di lavoro. Consulta la <anchor>documentazione API</anchor> per i dettagli sull'utilizzo.",
+  "View the <anchor>API documentation</anchor> for usage details.": "Consulta la <anchor>documentazione API</anchor> per i dettagli sull'utilizzo.",
+  "View the <anchor>MCP documentation</anchor>.": "Consulta la <anchor>documentazione MCP</anchor>.",
+  "Sources": "Fonti",
+  "AI Answers not available for attachments": "Risposte AI non disponibili per gli allegati",
+  "No answer available": "Nessuna risposta disponibile",
+  "Background color": "Colore di sfondo",
+  "Highlight color": "Colore evidenziato",
+  "Remove color": "Rimuovi colore",
+  "Notifications": "Notifiche",
+  "No notifications": "Nessuna notifica",
+  "No unread notifications": "Nessuna notifica non letta",
+  "All notifications": "Tutte le notifiche",
+  "Unread only": "Solo non lette",
+  "Mark all as read": "Segna tutto come letto",
+  "Mark as read": "Segna come letto",
+  "More options": "Altre opzioni",
+  "<bold>{{name}}</bold> mentioned you in a comment": "<bold>{{name}}</bold> ti ha menzionato in un commento",
+  "<bold>{{name}}</bold> commented on a page": "<bold>{{name}}</bold> ha commentato una pagina",
+  "<bold>{{name}}</bold> resolved a comment": "<bold>{{name}}</bold> ha risolto un commento",
+  "<bold>{{name}}</bold> mentioned you on a page": "<bold>{{name}}</bold> ti ha menzionato in una pagina",
+  "<bold>{{name}}</bold> gave you edit access to a page": "<bold>{{name}}</bold> ti ha dato accesso in modifica a una pagina",
+  "<bold>{{name}}</bold> gave you view access to a page": "<bold>{{name}}</bold> ti ha dato accesso in visualizzazione a una pagina",
+  "<bold>{{name}}</bold> updated a page": "<bold>{{name}}</bold> ha aggiornato una pagina",
+  "Watch page": "Segui pagina",
+  "Stop watching": "Smetti di seguire",
+  "Watch space": "Segui spazio",
+  "Stop watching space": "Smetti di seguire lo spazio",
+  "Email notifications": "Notifiche email",
+  "Page updates": "Aggiornamenti pagina",
+  "Get notified when pages you watch are updated.": "Ricevi una notifica quando le pagine che segui vengono aggiornate.",
+  "Page mentions": "Menzioni nella pagina",
+  "Get notified when someone mentions you on a page.": "Ricevi una notifica quando qualcuno ti menziona su una pagina.",
+  "Comment mentions": "Menzioni nei commenti",
+  "Get notified when someone mentions you in a comment.": "Ricevi una notifica quando qualcuno ti menziona in un commento.",
+  "New comments": "Nuovi commenti",
+  "Get notified about new comments on threads you participate in.": "Ricevi una notifica sui nuovi commenti nelle discussioni a cui partecipi.",
+  "Resolved comments": "Commenti risolti",
+  "Get notified when your comment is resolved.": "Ricevi una notifica quando il tuo commento viene risolto.",
+  "You are now watching this page": "Ora stai seguendo questa pagina",
+  "You are no longer watching this page": "Non stai più seguendo questa pagina",
+  "You are now watching this space": "Ora stai seguendo questo spazio",
+  "You are no longer watching this space": "Non stai più seguendo questo spazio",
+  "Direct": "Diretto",
+  "Updates": "Aggiornamenti",
+  "Today": "Oggi",
+  "Yesterday": "Ieri",
+  "This week": "Questa settimana",
+  "Older": "Più vecchie",
+  "Restricted page": "Pagina con accesso ristretto",
+  "Restricted pages cannot be shared publicly.": "Le pagine con accesso ristretto non possono essere condivise pubblicamente.",
+  "Restricted by parent": "Limitata dalla pagina genitore",
+  "Restricted": "Limitata",
+  "Open": "Aperta",
+  "Inherits restrictions from ancestor page": "Eredita le restrizioni dalla pagina genitore",
+  "Only people listed below can access this page": "Solo le persone elencate di seguito possono accedere a questa pagina",
+  "Everyone in this space can access": "Chiunque in questo spazio può accedere",
+  "No additional restrictions on this page": "Nessuna restrizione aggiuntiva su questa pagina",
+  "Only specific people can access": "Solo persone specifiche possono accedere",
+  "Use only inherited restrictions": "Usa solo le restrizioni ereditate",
+  "Add restrictions on top of inherited": "Aggiungi restrizioni oltre a quelle ereditate",
+  "Inherited restriction": "Restrizione ereditata",
+  "Access limited by": "Accesso limitato da",
+  "Restrict access to control who can view and edit this page": "Limita l'accesso per controllare chi può visualizzare e modificare questa pagina",
+  "Add additional restrictions specific to this page": "Aggiungi restrizioni aggiuntive specifiche per questa pagina",
+  "Access": "Accesso",
+  "People with access": "Persone con accesso",
+  "Remove all": "Rimuovi tutto",
+  "Remove access": "Rimuovi accesso",
+  "Remove all access": "Rimuovi tutti gli accessi",
+  "Are you sure you want to remove this member's access to the page?": "Sei sicuro di voler rimuovere l'accesso di questo membro alla pagina?",
+  "Are you sure you want to remove all specific access? This will make the page open to everyone in the space.": "Sei sicuro di voler rimuovere tutti gli accessi specifici? Questo renderà la pagina accessibile a tutti nello spazio.",
+  "Trash retention": "Conservazione del cestino",
+  "Pages in trash will be permanently deleted after this period.": "Le pagine nel cestino verranno eliminate definitivamente dopo questo periodo.",
+  "Trash retention updated": "Conservazione del cestino aggiornata",
+  "Failed to update trash retention": "Impossibile aggiornare la conservazione del cestino",
+  "Removed page restriction": "Restrizione della pagina rimossa",
+  "Added page permission": "Permesso sulla pagina aggiunto",
+  "Removed page permission": "Permesso sulla pagina rimosso",
+  "day": "giorno",
+  "days": "giorni",
+  "week": "settimana",
+  "weeks": "settimane",
+  "month": "mese",
+  "months": "mesi",
+  "year": "anno",
+  "years": "anni",
+  "Period": "Periodo",
+  "Fixed date": "Data fissa",
+  "Indefinitely": "A tempo indeterminato",
+  "Days": "Giorni",
+  "Weeks": "Settimane",
+  "Months": "Mesi",
+  "Years": "Anni",
+  "Pick a date": "Scegli una data",
+  "Maximum is {{max}} {{unit}} for this unit": "Il massimo consentito è {{max}} {{unit}} per questa unità",
+  "Never expires. Verifiers can re-verify at any time.": "Non scade mai. I verificatori possono verificare nuovamente in qualsiasi momento.",
+  "Verified": "Verificato",
+  "Review needed": "Revisione necessaria",
+  "Verification expired": "Verifica scaduta",
+  "Draft": "Bozza",
+  "In Approval": "In approvazione",
+  "In approval": "In approvazione",
+  "Approved": "Approvato",
+  "Obsolete": "Obsoleto",
+  "Expiring": "In scadenza",
+  "Set up verification": "Configura la verifica",
+  "Verify page": "Verifica la pagina",
+  "Page verification": "Verifica della pagina",
+  "Add verification": "Aggiungi verifica",
+  "Edit verification": "Modifica verifica",
+  "Search by title": "Cerca per titolo",
+  "Choose how this page should stay accurate.": "Scegli come mantenere accurata questa pagina.",
+  "Recurring verification": "Verifica ricorrente",
+  "Verifiers re-confirm this page on a schedule.": "I verificatori riconfermano questa pagina secondo una pianificazione.",
+  "Re-verify on a schedule (e.g every 30 days )": "Verifica nuovamente secondo una pianificazione (ad es. ogni 30 giorni)",
+  "Page stays editable at all times": "La pagina resta sempre modificabile",
+  "Best for runbooks, FAQs, living documentation": "Ideale per runbook, FAQ e documentazione dinamica",
+  "Approval workflow": "Flusso di approvazione",
+  "Formal document lifecycle with named approvers.": "Ciclo di vita formale del documento con approvatori nominati.",
+  "Draft → In approval → Approved → Obsolete": "Bozza → In approvazione → Approvato → Obsoleto",
+  "Locked once approved, with full history": "Bloccato una volta approvato, con cronologia completa",
+  "Designed for ISO 9001, ISO 13485, and FDA": "Progettato per ISO 9001, ISO 13485 e FDA",
+  "Best for SOPs and controlled documents": "Ideale per SOP e documenti controllati",
+  "Back": "Indietro",
+  "Quality management": "Gestione della qualità",
+  "Recurring": "Ricorrente",
+  "Pages move through draft, approval, and approved stages.": "Le pagine passano attraverso le fasi di bozza, approvazione e approvato.",
+  "Verifiers": "Verificatori",
+  "Add verifier": "Aggiungi verificatore",
+  "I've reviewed this page for accuracy": "Ho controllato l'accuratezza di questa pagina",
+  "Set up": "Configura",
+  "Remove verification": "Rimuovi verifica",
+  "Are you sure you want to remove verification from this page?": "Sei sicuro di voler rimuovere la verifica da questa pagina?",
+  "Assigned verifiers must periodically re-verify this page.": "I verificatori assegnati devono verificare nuovamente questa pagina periodicamente.",
+  "Last verified by {{name}} {{time}} (expired)": "Ultima verifica effettuata da {{name}} {{time}} (scaduta)",
+  "The fixed expiration date has passed.": "La data di scadenza fissa è trascorsa.",
+  "Verified by {{name}} {{time}}": "Verificato da {{name}} {{time}}",
+  "Expires {{date}}": "Scade il {{date}}",
+  "Expired {{date}}": "Scaduto il {{date}}",
+  "Mark as obsolete": "Contrassegna come obsoleto",
+  "Mark obsolete": "Contrassegna come obsoleto",
+  "Returned by {{name}} {{time}}": "Restituito da {{name}} {{time}}",
+  "No approval has been requested yet.": "Non è stata ancora richiesta alcuna approvazione.",
+  "Submitted by {{name}} {{time}}": "Inviato da {{name}} {{time}}",
+  "Someone": "Qualcuno",
+  "Approved by {{name}} {{time}}": "Approvato da {{name}} {{time}}",
+  "This document has been marked as obsolete.": "Questo documento è stato contrassegnato come obsoleto.",
+  "Rejection comment": "Commento di rifiuto",
+  "Reason for returning this document...": "Motivo della restituzione di questo documento...",
+  "Confirm rejection": "Conferma rifiuto",
+  "Submit for approval": "Invia per approvazione",
+  "Reject": "Rifiuta",
+  "Approve": "Approva",
+  "Re-submit for approval": "Invia nuovamente per approvazione",
+  "Verified until": "Verificato fino al",
+  "QMS": "QMS",
+  "Verified pages": "Pagine verificate",
+  "Search pages...": "Cerca pagine...",
+  "Filter by space": "Filtra per spazio",
+  "Filter by type": "Filtra per tipo",
+  "<bold>{{name}}</bold> verified a page": "<bold>{{name}}</bold> ha verificato una pagina",
+  "<bold>{{name}}</bold> submitted a page for your approval": "<bold>{{name}}</bold> ha inviato una pagina per la tua approvazione",
+  "<bold>{{name}}</bold> returned a page for revision": "<bold>{{name}}</bold> ha restituito una pagina per la revisione",
+  "Page verification expires soon": "La verifica della pagina scadrà presto",
+  "Page verification has expired": "La verifica della pagina è scaduta",
+  "Verifying your email": "Verifica della tua email in corso",
+  "Please wait...": "Attendere...",
+  "Verification failed. The link may have expired.": "Verifica non riuscita. Il link potrebbe essere scaduto.",
+  "Check your email": "Controlla la tua email",
+  "We sent a verification link to {{email}}.": "Abbiamo inviato un link di verifica a {{email}}.",
+  "We sent a verification link to your email.": "Abbiamo inviato un link di verifica alla tua email.",
+  "Click the link to verify your email and access your workspace.": "Clicca sul link per verificare la tua email e accedere al tuo workspace.",
+  "Resend verification email": "Invia nuovamente email di verifica",
+  "Verification email sent. Please check your inbox.": "Email di verifica inviata. Controlla la tua casella di posta.",
+  "Failed to resend verification email. Please try again.": "Invio dell'email di verifica non riuscito. Si prega di riprovare.",
+  "We've sent you an email with your associated workspaces.": "Ti abbiamo inviato un'email con i workspace associati.",
+  "Load more": "Carica altro",
+  "Log out of all devices": "Disconnetti da tutti i dispositivi",
+  "Log out of all sessions except this device": "Disconnetti da tutte le sessioni tranne questo dispositivo",
+  "This Device": "Questo dispositivo",
+  "Unknown device": "Dispositivo sconosciuto",
+  "No active sessions": "Nessuna sessione attiva",
+  "Session revoked": "Sessione revocata",
+  "All other sessions revoked": "Tutte le altre sessioni sono state revocate",
+  "Last used": "Ultimo utilizzo",
+  "Created": "Creato",
+  "Rename": "Rinomina",
+  "Publish": "Pubblica",
+  "Security": "Sicurezza",
+  "Enforce SSO": "Rendi obbligatorio SSO",
+  "Once enforced, members will not be able to login with email and password.": "Una volta reso obbligatorio, i membri non potranno accedere con email e password.",
+  "AI-generated content may not be accurate.": "I contenuti generati dall'IA potrebbero non essere accurati.",
+  "AI Chat": "Chat IA",
+  "Analyze for insights": "Analizza per ottenere approfondimenti",
+  "Ask anything...": "Chiedi qualsiasi cosa...",
+  "Assistant said:": "L'assistente ha detto:",
+  "Chat history": "Cronologia chat",
+  "Chat name": "Nome chat",
+  "Chat transcript": "Trascrizione della chat",
+  "Close": "Chiudi",
+  "Copy assistant response": "Copia risposta dell'assistente",
+  "Docmost AI": "Docmost AI",
+  "Failed to load chat. An error occurred.": "Caricamento della chat non riuscito. Si è verificato un errore.",
+  "Failed to render this message.": "Impossibile visualizzare questo messaggio.",
+  "How can I help you today?": "Come posso aiutarti oggi?",
+  "New chat": "Nuova chat",
+  "No chat history": "Nessuna cronologia chat",
+  "No chats found": "Nessuna chat trovata",
+  "No conversations yet": "Nessuna conversazione al momento",
+  "Open full page": "Apri pagina completa",
+  "Scroll to bottom": "Scorri in basso",
+  "You said:": "Hai detto:",
+  "Previous 7 days": "Ultimi 7 giorni",
+  "Previous 30 days": "Ultimi 30 giorni",
+  "Search chats...": "Cerca nelle chat...",
+  "Search chats": "Cerca nelle chat",
+  "Ask anything... Use @ to mention pages": "Chiedi qualsiasi cosa... Usa @ per menzionare le pagine",
+  "Ask anything or search your workspace": "Chiedi qualsiasi cosa o cerca nel tuo spazio di lavoro",
+  "Welcome to {{name}}": "Benvenuto in {{name}}",
+  "Add files": "Aggiungi file",
+  "Mention a page": "Menziona una pagina",
+  "Start a new chat to see it here.": "Avvia una nuova chat per vederla qui.",
+  "Summarize this page": "Riassumi questa pagina",
+  "Toggle AI Chat": "Attiva/disattiva Chat IA",
+  "Translate this page": "Traduci questa pagina",
+  "Try a different search term.": "Prova un termine di ricerca diverso.",
+  "Try again": "Riprova",
+  "Untitled chat": "Chat senza titolo",
+  "What can I help you with?": "Con cosa posso aiutarti?",
+  "Are you sure you want to revoke this {{credential}}": "Sei sicuro di voler revocare questa {{credential}}",
+  "Automatically provision users and groups from your identity provider via SCIM.": "Esegui automaticamente il provisioning di utenti e gruppi dal tuo provider di identità tramite SCIM.",
+  "Configure your identity provider with this URL to provision users and groups.": "Configura il tuo provider di identità con questo URL per eseguire il provisioning di utenti e gruppi.",
+  "Create {{credential}}": "Crea {{credential}}",
+  "{{credential}} created": "{{credential}} creata",
+  "{{credential}} created successfully": "{{credential}} creata con successo",
+  "Created by": "Creata da",
+  "Custom": "Personalizzato",
+  "Enable SCIM": "Abilita SCIM",
+  "Enter a descriptive name": "Inserisci un nome descrittivo",
+  "I've saved my {{credential}}": "Ho salvato la mia {{credential}}",
+  "Important": "Importante",
+  "Make sure to copy your {{credential}} now. You won't be able to see it again!": "Assicurati di copiare subito la tua {{credential}}. Non potrai più visualizzarla!",
+  "Never": "Mai",
+  "Revoke {{credential}}": "Revoca {{credential}}",
+  "SCIM endpoint URL": "URL dell'endpoint SCIM",
+  "SCIM provisioning": "Provisioning SCIM",
+  "SCIM takes precedence over SSO group sync while enabled.": "SCIM ha la precedenza sulla sincronizzazione dei gruppi SSO quando è abilitato.",
+  "You have reached the maximum of {{max}} SCIM tokens. Delete an existing token to create a new one.": "Hai raggiunto il numero massimo di {{max}} token SCIM. Elimina un token esistente per crearne uno nuovo.",
+  "SCIM token": "Token SCIM",
+  "SCIM tokens": "Token SCIM",
+  "This action cannot be undone. Your identity provider will stop syncing immediately.": "Questa azione non può essere annullata. Il tuo provider di identità smetterà di sincronizzarsi immediatamente.",
+  "Toggle SCIM provisioning": "Attiva/disattiva il provisioning SCIM",
+  "Token": "Token",
+  "Page menu": "Menu della pagina",
+  "Expand": "Espandi",
+  "Collapse": "Comprimi",
+  "Comment menu": "Menu dei commenti",
+  "Group menu": "Menu del gruppo",
+  "Show hidden breadcrumbs": "Mostra breadcrumb nascosti",
+  "Breadcrumbs": "Breadcrumb",
+  "Page actions": "Azioni della pagina",
+  "Pick emoji": "Scegli emoji",
+  "Template menu": "Menu del modello",
+  "Use": "Usa",
+  "Use template": "Usa modello",
+  "Preview template: {{title}}": "Anteprima modello: {{title}}",
+  "Use a template": "Usa un modello",
+  "Search templates...": "Cerca modelli...",
+  "Search spaces...": "Cerca spazi...",
+  "No templates found": "Nessun modello trovato",
+  "No spaces found": "Nessuno spazio trovato",
+  "Browse all templates": "Sfoglia tutti i modelli",
+  "This space": "Questo spazio",
+  "All templates": "Tutti i modelli",
+  "Global": "Globale",
+  "New template": "Nuovo modello",
+  "Edit template": "Modifica modello",
+  "Are you sure you want to delete this template?": "Sei sicuro di voler eliminare questo modello?",
+  "Template scope updated": "Ambito del modello aggiornato",
+  "Choose which space this template belongs to": "Scegli a quale spazio appartiene questo modello",
+  "Scope": "Ambito",
+  "Select scope": "Seleziona ambito",
+  "Title": "Titolo",
+  "Saving...": "Salvataggio...",
+  "Saved": "Salvato",
+  "Save failed. Retry": "Salvataggio non riuscito. Riprova",
+  "By {{name}}": "Di {{name}}",
+  "Updated {{time}}": "Aggiornato {{time}}",
+  "Choose destination": "Scegli destinazione",
+  "Search pages and spaces...": "Cerca pagine e spazi...",
+  "No results found": "Nessun risultato trovato",
+  "You don't have permission to create pages here": "Non hai l'autorizzazione per creare pagine qui",
+  "Chat menu": "Menu della chat",
+  "API key menu": "Menu della chiave API",
+  "Jump to comment selection": "Vai alla selezione dei commenti",
+  "Slash commands": "Comandi slash",
+  "Mention suggestions": "Suggerimenti di menzione",
+  "Link suggestions": "Suggerimenti di link",
+  "Diagram editor": "Editor di diagrammi",
+  "Add comment": "Aggiungi commento",
+  "Find and replace": "Trova e sostituisci",
+  "Main navigation": "Navigazione principale",
+  "Space navigation": "Navigazione dello spazio",
+  "Settings navigation": "Navigazione delle impostazioni",
+  "AI navigation": "Navigazione AI",
+  "Breadcrumb": "Percorso di navigazione",
+  "Synced block": "Blocco sincronizzato",
+  "Create a block that stays in sync across pages.": "Crea un blocco che rimanga sincronizzato tra le pagine.",
+  "Editing original": "Modifica originale",
+  "Copy synced block": "Copia blocco sincronizzato",
+  "Unsync": "Annulla sincronizzazione",
+  "Delete synced block": "Elimina blocco sincronizzato",
+  "Synced to {{count}} other page_one": "Synced to {{count}} other page",
+  "Synced to {{count}} other page_other": "Synced to {{count}} other pages",
+  "ORIGINAL": "ORIGINALE",
+  "THIS PAGE": "QUESTA PAGINA",
+  "No pages": "Nessuna pagina",
+  "The original synced block no longer exists": "Il blocco sincronizzato originale non esiste più",
+  "You don't have access to this synced block": "Non hai accesso a questo blocco sincronizzato",
+  "Failed to load this synced block": "Impossibile caricare questo blocco sincronizzato",
+  "Fixed editor toolbar": "Barra degli strumenti dell'editor fissa",
+  "Show a formatting toolbar above the editor with quick access to common actions.": "Mostra una barra degli strumenti di formattazione sopra l'editor con accesso rapido alle azioni comuni.",
+  "Toggle fixed editor toolbar": "Attiva/disattiva barra degli strumenti dell'editor fissa",
+  "Normal text": "Testo normale",
+  "More inline formatting": "Altra formattazione in linea",
+  "Subscript": "Pedice",
+  "Superscript": "Apice",
+  "Inline code": "Codice in linea",
+  "Insert media": "Inserisci contenuti multimediali",
+  "Mention": "Menzione",
+  "Emoji": "Emoji",
+  "Columns": "Colonne",
+  "More inserts": "Altri inserimenti",
+  "Embeds": "Incorporamenti",
+  "Diagrams": "Diagrammi",
+  "Advanced": "Avanzate",
+  "Utility": "Utilità",
+  "Decrease indent": "Riduci rientro",
+  "Increase indent": "Aumenta rientro",
+  "Clear formatting": "Cancella formattazione",
+  "Code block": "Blocco di codice",
+  "Experimental": "Sperimentale",
+  "Strikethrough": "Barrato",
+  "Undo": "Annulla",
+  "Redo": "Ripeti",
+  "Backlinks": "Backlink",
+  "Last updated by": "Ultimo aggiornamento di",
+  "Last updated": "Ultimo aggiornamento",
+  "Stats": "Statistiche",
+  "Word count": "Conteggio parole",
+  "Characters": "Caratteri",
+  "Incoming links": "Link in entrata",
+  "Outgoing links": "Link in uscita",
+  "Incoming links ({{count}})": "Link in entrata ({{count}})",
+  "Outgoing links ({{count}})": "Link in uscita ({{count}})",
+  "No pages link here yet.": "Nessuna pagina rimanda ancora qui.",
+  "This page doesn't link to other pages yet.": "Questa pagina non rimanda ancora ad altre pagine.",
+  "Verified until {{date}}": "Verificato fino al {{date}}",
+  "Labels": "Etichette",
+  "Add label": "Aggiungi etichetta",
+  "No labels yet": "Nessuna etichetta per ora",
+  "Already added": "Già aggiunto",
+  "Invalid label name": "Nome etichetta non valido",
+  "No matches": "Nessuna corrispondenza",
+  "Search or create…": "Cerca o crea…",
+  "Remove label {{name}}": "Rimuovi etichetta {{name}}",
+  "Failed to add label": "Impossibile aggiungere l'etichetta",
+  "Failed to remove label": "Impossibile rimuovere l'etichetta",
+  "No pages with this label": "Nessuna pagina con questa etichetta",
+  "Pages tagged with this label will appear here.": "Le pagine contrassegnate con questa etichetta appariranno qui.",
+  "No pages match your search.": "Nessuna pagina corrisponde alla tua ricerca.",
+  "Updated {{date}}": "Aggiornato il {{date}}",
+  "Cell actions": "Azioni cella",
+  "Column actions": "Azioni colonna",
+  "Row actions": "Azioni riga",
+  "Filter": "Filtro",
+  "Page title": "Titolo pagina",
+  "Page content": "Contenuto della pagina",
+  "Member actions": "Azioni membro",
+  "Toggle password visibility": "Attiva/disattiva visibilità password",
+  "Send comment": "Invia commento",
+  "Token actions": "Azioni token",
+  "Template settings": "Impostazioni modello",
+  "Edit diagram": "Modifica diagramma",
+  "Edit embed": "Modifica incorporamento",
+  "Edit drawing": "Modifica disegno",
+  "Delete equation": "Elimina equazione",
+  "Invite actions": "Azioni invito",
+  "Get started": "Inizia",
+  "* indicates required fields": "* indica i campi obbligatori",
+  "List of spaces in this workspace": "Elenco degli spazi in questo spazio di lavoro",
+  "Active sessions": "Sessioni attive",
+  "Add {{name}} to favorites": "Aggiungi {{name}} ai preferiti",
+  "Remove {{name}} from favorites": "Rimuovi {{name}} dai preferiti",
+  "Added to favorites": "Aggiunto ai preferiti",
+  "Removed from favorites": "Rimosso dai preferiti",
+  "Added {{name}} to favorites": "{{name}} aggiunto ai preferiti",
+  "Removed {{name}} from favorites": "{{name}} rimosso dai preferiti",
+  "Page menu for {{name}}": "Menu della pagina per {{name}}",
+  "Create subpage of {{name}}": "Crea sottopagina di {{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";
@@ -35,6 +35,17 @@ import SpacesPage from "@/pages/spaces/spaces.tsx";
 import { MfaChallengePage } from "@/ee/mfa/pages/mfa-challenge-page";
 import { MfaSetupRequiredPage } from "@/ee/mfa/pages/mfa-setup-required-page";
 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();
@@ -60,6 +71,7 @@ export default function App() {
           <>
             <Route path={"/create"} element={<CreateWorkspace />} />
             <Route path={"/select"} element={<CloudLogin />} />
+            <Route path={"/verify-email"} element={<VerifyEmail />} />
           </>
         )}
 
@@ -71,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={
-              <ErrorBoundary
-                fallback={<>{t("Failed to load page. An error occurred.")}</>}
-              >
-                <Page />
-              </ErrorBoundary>
-            }
+            element={<Page />}
           />
 
           <Route path={"/settings"}>
@@ -96,13 +112,19 @@ export default function App() {
               path={"account/preferences"}
               element={<AccountPreferences />}
             />
+            <Route path={"account/api-keys"} element={<UserApiKeys />} />
             <Route path={"workspace"} element={<WorkspaceSettings />} />
             <Route path={"members"} element={<WorkspaceMembers />} />
+            <Route path={"api-keys"} element={<WorkspaceApiKeys />} />
             <Route path={"groups"} element={<Groups />} />
             <Route path={"groups/:groupId"} element={<GroupInfo />} />
             <Route path={"spaces"} element={<Spaces />} />
             <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/no-table-results.tsx

@@ -4,14 +4,15 @@ import { useTranslation } from "react-i18next";
 
 interface NoTableResultsProps {
   colSpan: number;
+  text?: string;
 }
-export default function NoTableResults({ colSpan }: NoTableResultsProps) {
+export default function NoTableResults({ colSpan, text }: NoTableResultsProps) {
   const { t } = useTranslation();
   return (
     <Table.Tr>
       <Table.Td colSpan={colSpan}>
         <Text fw={500} c="dimmed" ta="center">
-          {t("No results found...")}
+          {text || t("No results found...")}
         </Text>
       </Table.Td>
     </Table.Tr>

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,83 +4,110 @@ import {
   UnstyledButton,
   Badge,
   Table,
-  ActionIcon,
-} from '@mantine/core';
-import {Link} from 'react-router-dom';
-import PageListSkeleton from '@/components/ui/page-list-skeleton.tsx';
-import { buildPageUrl } from '@/features/page/page.utils.ts';
-import { formattedDate } from '@/lib/time.ts';
-import { useRecentChangesQuery } from '@/features/page/queries/page-query.ts';
-import { IconFileDescription } from '@tabler/icons-react';
-import { getSpaceUrl } from '@/lib/config.ts';
+  ThemeIcon,
+  Button,
+} from "@mantine/core";
+import { Link } from "react-router-dom";
+import PageListSkeleton from "@/components/ui/page-list-skeleton.tsx";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { formattedDate } from "@/lib/time.ts";
+import { useRecentChangesQuery } from "@/features/page/queries/page-query.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;
 }
 
-export default function RecentChanges({spaceId}: 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/>;
+    return <PageListSkeleton />;
   }
 
   if (isError) {
     return <Text>{t("Failed to fetch recent pages")}</Text>;
   }
 
-  return pages && pages.items.length > 0 ? (
-    <Table.ScrollContainer minWidth={500}>
-      <Table highlightOnHover verticalSpacing="sm">
-        <Table.Tbody>
-          {pages.items.map((page) => (
-            <Table.Tr key={page.id}>
-              <Table.Td>
-                <UnstyledButton
-                  component={Link}
-                  to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
-                >
-                  <Group wrap="nowrap">
-                    {page.icon || (
-                      <ActionIcon variant='transparent' color='gray' size={18}>
-                        <IconFileDescription size={18}/>
-                      </ActionIcon>
-                    )}
-
-                    <Text fw={500} size="md" lineClamp={1}>
-                      {page.title || t("Untitled")}
-                    </Text>
-                  </Group>
-                </UnstyledButton>
-              </Table.Td>
-              {!spaceId && (
+  return pages.length > 0 ? (
+    <>
+      <Table.ScrollContainer minWidth={500}>
+        <Table highlightOnHover verticalSpacing="sm">
+          <Table.Tbody>
+            {pages.map((page) => (
+              <Table.Tr key={page.id} className={rowClasses.row}>
                 <Table.Td>
-                  <Badge
-                    color="blue"
-                    variant="light"
+                  <UnstyledButton
+                    className={rowClasses.link}
                     component={Link}
-                    to={getSpaceUrl(page?.space.slug)}
-                    style={{cursor: 'pointer'}}
+                    to={buildPageUrl(page?.space.slug, page.slugId, page.title)}
                   >
-                    {page?.space.name}
-                  </Badge>
+                    <Group wrap="nowrap">
+                      {page.icon || (
+                        <ThemeIcon variant="transparent" color="gray" size={18}>
+                          <IconFileDescription size={18} />
+                        </ThemeIcon>
+                      )}
+
+                      <Text fw={500} size="md" lineClamp={1}>
+                        {page.title || t("Untitled")}
+                      </Text>
+                    </Group>
+                  </UnstyledButton>
                 </Table.Td>
-              )}
-              <Table.Td>
-                <Text c="dimmed" style={{whiteSpace: 'nowrap'}} size="xs" fw={500}>
-                  {formattedDate(page.updatedAt)}
-                </Text>
-              </Table.Td>
-            </Table.Tr>
-          ))}
-        </Table.Tbody>
-      </Table>
-    </Table.ScrollContainer>
+                {!spaceId && (
+                  <Table.Td>
+                    <Badge
+                      color={getInitialsColor(page?.space.name)}
+                      variant="light"
+                      component={Link}
+                      to={getSpaceUrl(page?.space.slug)}
+                      style={{ cursor: "pointer" }}
+                    >
+                      {page?.space.name}
+                    </Badge>
+                  </Table.Td>
+                )}
+                <Table.Td>
+                  <Text
+                    c="dimmed"
+                    style={{ whiteSpace: "nowrap" }}
+                    size="xs"
+                    fw={500}
+                  >
+                    {formattedDate(page.updatedAt)}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ))}
+          </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">
-      {t("No pages yet")}
-    </Text>
+    <EmptyState
+      icon={IconFiles}
+      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 isSpacesRoute = location.pathname === "/spaces";
-  const hideSidebar = isHomeRoute || isSpacesRoute;
+  const isPageRoute = location.pathname.includes("/p/");
 
   const items = links.map((link) => (
     <Link key={link.label} to={link.link} className={classes.link}>
@@ -48,39 +64,44 @@ 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")}
-                  opened={mobileOpened}
-                  onClick={toggleMobile}
-                  hiddenFrom="sm"
-                  size="sm"
-                />
-              </Tooltip>
+          <Tooltip label={t("Sidebar toggle")}>
+            <SidebarToggle
+              aria-label={t("Sidebar toggle")}
+              opened={mobileOpened}
+              onClick={toggleMobile}
+              hiddenFrom="sm"
+              size="sm"
+            />
+          </Tooltip>
 
-              <Tooltip label={t("Sidebar toggle")}>
-                <SidebarToggle
-                  aria-label={t("Sidebar toggle")}
-                  opened={desktopOpened}
-                  onClick={toggleDesktop}
-                  visibleFrom="sm"
-                  size="sm"
-                />
-              </Tooltip>
-            </>
-          )}
+          <Tooltip label={t("Sidebar toggle")}>
+            <SidebarToggle
+              aria-label={t("Sidebar toggle")}
+              opened={desktopOpened}
+              onClick={toggleDesktop}
+              visibleFrom="sm"
+              size="sm"
+            />
+          </Tooltip>
 
-          <Text
-            size="lg"
-            fw={600}
-            style={{ cursor: "pointer", userSelect: "none" }}
-            component={Link}
-            to="/home"
-          >
-            Docmost
-          </Text>
+          <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={{ userSelect: "none" }}
+              visibleFrom="sm"
+            >
+              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}>
-            {t(title)}
-          </Text>
+          {tab !== "chat" && (
+            <Group justify="space-between" wrap="nowrap" mb="md">
+              <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" ? (
-            <CommentListWithTabs />
+          {tab === "comments" || tab === "chat" ? (
+            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 isSpacesRoute = location.pathname === "/spaces";
+  const isAiRoute = location.pathname.startsWith("/ai");
   const isPageRoute = location.pathname.includes("/p/");
-  const hideSidebar = isHomeRoute || isSpacesRoute;
+  const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
-    <AppShell
+    <>
+      <SkipToMain />
+      <AppShell
       header={{ height: 45 }}
-      navbar={
-        !hideSidebar && {
-          width: isSpaceRoute ? sidebarWidth : 300,
-          breakpoint: "sm",
-          collapsed: {
-            mobile: !mobileOpened,
-            desktop: !desktopOpened,
-          },
-        }
-      }
+      navbar={{
+        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}
-        >
+      <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 />}
-        </AppShell.Navbar>
-      )}
-      <AppShell.Main>
+        )}
+        {isSpaceRoute && <SpaceSidebar />}
+        {isSettingsRoute && <SettingsSidebar />}
+        {isAiRoute && <AiChatSidebar />}
+        {showGlobalSidebar && <GlobalSidebar />}
+      </AppShell.Navbar>
+      <AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
         {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

@@ -10,9 +10,13 @@ import { getWorkspaceMembers } from "@/features/workspace/services/workspace-ser
 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),
@@ -21,15 +25,15 @@ export const prefetchWorkspaceMembers = () => {
 
 export const prefetchSpaces = () => {
   queryClient.prefetchQuery({
-    queryKey: ["spaces", { page: 1 }],
-    queryFn: () => getSpaces({ page: 1 }),
+    queryKey: ["spaces", {}],
+    queryFn: () => getSpaces({}),
   });
 };
 
 export const prefetchGroups = () => {
   queryClient.prefetchQuery({
-    queryKey: ["groups", { page: 1 }],
-    queryFn: () => getGroups({ page: 1 }),
+    queryKey: ["groups", {}],
+    queryFn: () => getGroups({}),
   });
 };
 
@@ -61,7 +65,44 @@ export const prefetchSsoProviders = () => {
 
 export const prefetchShares = () => {
   queryClient.prefetchQuery({
-    queryKey: ["share-list", { page: 1 }],
-    queryFn: () => getShares({ page: 1, limit: 100 }),
+    queryKey: ["share-list", {}],
+    queryFn: () => getShares({}),
+  });
+};
+
+export const prefetchApiKeys = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["api-key-list", {}],
+    queryFn: () => getApiKeys({}),
+  });
+};
+
+export const prefetchApiKeyManagement = () => {
+  queryClient.prefetchQuery({
+    queryKey: ["api-key-list", { 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

@@ -12,43 +12,51 @@ import {
   IconLock,
   IconKey,
   IconWorld,
+  IconSparkles,
+  IconHistory,
+  IconShieldCheck,
 } from "@tabler/icons-react";
 import { Link, useLocation } from "react-router-dom";
 import classes from "./settings.module.css";
 import { useTranslation } from "react-i18next";
 import { isCloud } from "@/lib/config.ts";
 import useUserRole from "@/hooks/use-user-role.tsx";
-import { useAtom } from "jotai/index";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useAtom } from "jotai";
+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;
-  isEnterprise?: boolean;
-  isAdmin?: boolean;
-  isSelfhosted?: boolean;
-  showDisabledInNonEE?: boolean;
-}
+  feature?: string;
+  role?: "admin" | "owner";
+  env?: "cloud" | "selfhosted";
+};
 
-interface DataGroup {
+type DataGroup = {
   heading: string;
   items: DataItem[];
-}
+};
 
 const groupedData: DataGroup[] = [
   {
@@ -60,36 +68,63 @@ const groupedData: DataGroup[] = [
         icon: IconBrush,
         path: "/settings/account/preferences",
       },
+      {
+        label: "API keys",
+        icon: IconKey,
+        path: "/settings/account/api-keys",
+        feature: Feature.API_KEYS,
+      },
     ],
   },
   {
     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,
-        isAdmin: true,
+        role: "admin",
+        env: "cloud",
       },
       {
         label: "Security & SSO",
         icon: IconLock,
         path: "/settings/security",
-        isCloud: true,
-        isEnterprise: true,
-        isAdmin: true,
-        showDisabledInNonEE: true,
+        feature: Feature.SECURITY_SETTINGS,
+        role: "admin",
       },
       { 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",
+        feature: Feature.API_KEYS,
+        role: "admin",
+      },
+      {
+        label: "AI settings",
+        icon: IconSparkles,
+        path: "/settings/ai",
+        role: "admin",
+      },
+      {
+        label: "Audit log",
+        icon: IconHistory,
+        path: "/settings/audit",
+        feature: Feature.AUDIT_LOGS,
+        role: "owner",
+        env: "selfhosted",
+      },
     ],
   },
   {
@@ -109,8 +144,9 @@ export default function SettingsSidebar() {
   const location = useLocation();
   const [active, setActive] = useState(location.pathname);
   const { goBack } = useSettingsNavigation();
-  const { isAdmin } = useUserRole();
-  const [workspace] = useAtom(workspaceAtom);
+  const { isAdmin, isOwner } = useUserRole();
+  const [entitlements] = useAtom(entitlementAtom);
+  const upgradeLabel = useUpgradeLabel();
   const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
   const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
 
@@ -118,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) {
-      // Check admin permission regardless of license
-      return item.isAdmin ? isAdmin : true;
-    }
-
-    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;
-    }
-
+    if (item.env === "cloud" && !isCloud()) return false;
+    if (item.env === "selfhosted" && isCloud()) return false;
+    if (item.role === "admin" && !isAdmin) return false;
+    if (item.role === "owner" && !isOwner) return false;
     return true;
   };
 
   const isItemDisabled = (item: DataItem) => {
-    if (item.showDisabledInNonEE && item.isEnterprise) {
-      return !(isCloud() || workspace?.hasLicenseKey);
-    }
-    return false;
+    if (!item.feature) return false;
+    return !hasFeature(item.feature);
   };
 
   const menuItems = groupedData.map((group) => {
@@ -185,62 +200,80 @@ 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;
               break;
+            case "API keys":
+              prefetchHandler = prefetchApiKeys;
+              break;
+            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}
-              onClick={(e) => {
-                if (isDisabled) {
-                  e.preventDefault();
-                  return;
-                }
+              to={item.path}
+              onClick={() => {
                 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>
     );
@@ -258,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/ai-search-result.tsx

@@ -0,0 +1,113 @@
+import React, { useMemo } from "react";
+import { Paper, Text, Group, Stack, Loader, Box } from "@mantine/core";
+import { IconSparkles, IconFileText } from "@tabler/icons-react";
+import { Link } from "react-router-dom";
+import { IAiSearchResponse } from "../services/ai-search-service.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { markdownToHtml } from "@docmost/editor-ext";
+import DOMPurify from "dompurify";
+import { useTranslation } from "react-i18next";
+
+interface AiSearchResultProps {
+  result?: IAiSearchResponse;
+  isLoading?: boolean;
+  streamingAnswer?: string;
+  streamingSources?: any[];
+}
+
+export function AiSearchResult({
+  result,
+  isLoading,
+  streamingAnswer = "",
+  streamingSources = [],
+}: AiSearchResultProps) {
+  const { t } = useTranslation();
+
+  // Use streaming data if available, otherwise fall back to result
+  const answer = streamingAnswer || result?.answer || "";
+  const sources =
+    streamingSources.length > 0 ? streamingSources : result?.sources || [];
+
+  // Deduplicate sources by pageId, keeping the one with highest similarity
+  const deduplicatedSources = useMemo(() => {
+    if (!sources || sources.length === 0) return [];
+
+    const pageMap = new Map();
+    sources.forEach((source) => {
+      const existing = pageMap.get(source.pageId);
+      if (!existing || source.similarity > existing.similarity) {
+        pageMap.set(source.pageId, source);
+      }
+    });
+
+    return Array.from(pageMap.values());
+  }, [sources]);
+
+  if (isLoading && !answer) {
+    return (
+      <Paper p="md" radius="md" withBorder>
+        <Group>
+          <Loader size="sm" />
+          <Text size="sm">{t("AI is thinking...")}</Text>
+        </Group>
+      </Paper>
+    );
+  }
+
+  if (!answer && !isLoading) {
+    return null;
+  }
+
+  return (
+    <Stack gap="md" p="md">
+      <Paper p="md" radius="md" withBorder>
+        <Group gap="xs" mb="sm">
+          <IconSparkles size={20} color="var(--mantine-color-blue-6)" />
+          <Text fw={600} size="sm">
+            {t("AI Answer")}
+          </Text>
+          {isLoading && <Loader size="xs" />}
+        </Group>
+        <div
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(markdownToHtml(answer) as string),
+          }}
+        />
+      </Paper>
+
+      {deduplicatedSources.length > 0 && (
+        <Stack gap="xs">
+          <Text size="xs" fw={600} c="dimmed">
+            {t("Sources")}
+          </Text>
+          {deduplicatedSources.map((source) => (
+            <Box
+              key={source.pageId}
+              component={Link}
+              to={buildPageUrl(source.spaceSlug, source.slugId, source.title)}
+              style={{
+                textDecoration: "none",
+                color: "inherit",
+                display: "block",
+              }}
+            >
+              <Paper
+                p="xs"
+                radius="sm"
+                withBorder
+                style={{ cursor: "pointer" }}
+              >
+                <Group gap="xs">
+                  <IconFileText size={16} />
+                  <Text size="sm" truncate>
+                    {source.title}
+                  </Text>
+                </Group>
+              </Paper>
+            </Box>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,71 @@
+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 { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+export default function EnableAiSearch() {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <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.",
+            )}
+          </Text>
+        </div>
+
+        <AiSearchToggle />
+      </Group>
+    </>
+  );
+}
+
+interface AiSearchToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function AiSearchToggle({ size, label }: AiSearchToggleProps) {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(workspace?.settings?.ai?.search);
+  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({ aiSearch: value });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Tooltip label={upgradeLabel} disabled={hasAccess} refProp="rootRef">
+      <Switch
+        size={size}
+        label={label}
+        labelPosition="left"
+        defaultChecked={checked}
+        onChange={handleChange}
+        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

@@ -0,0 +1,46 @@
+import { useMutation, UseMutationResult } from "@tanstack/react-query";
+import { useState, useCallback } from "react";
+import { aiAnswers, IAiSearchResponse } from "@/ee/ai/services/ai-search-service.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+// @ts-ignore
+interface UseAiSearchResult extends UseMutationResult<IAiSearchResponse, Error, IPageSearchParams> {
+  streamingAnswer: string;
+  streamingSources: any[];
+  clearStreaming: () => void;
+}
+
+export function useAiSearch(): UseAiSearchResult {
+  const [streamingAnswer, setStreamingAnswer] = useState("");
+  const [streamingSources, setStreamingSources] = useState<any[]>([]);
+
+  const clearStreaming = useCallback(() => {
+    setStreamingAnswer("");
+    setStreamingSources([]);
+  }, []);
+
+  const mutation = useMutation({
+    mutationFn: async (params: IPageSearchParams & { contentType?: string }) => {
+      setStreamingAnswer("");
+      setStreamingSources([]);
+
+      const { contentType, ...apiParams } = params;
+
+      return await aiAnswers(apiParams, (chunk) => {
+        if (chunk.content) {
+          setStreamingAnswer((prev) => prev + chunk.content);
+        }
+        if (chunk.sources) {
+          setStreamingSources(chunk.sources);
+        }
+      });
+    },
+  });
+
+  return {
+    ...mutation,
+    streamingAnswer,
+    streamingSources,
+    clearStreaming,
+  };
+}

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

@@ -0,0 +1,61 @@
+import { useState, useCallback, useRef } from "react";
+import { useAiGenerateStreamMutation } from "@/ee/ai/queries/ai-query.ts";
+import { AiGenerateDto } from "@/ee/ai/types/ai.types.ts";
+
+export function useAiStream() {
+  const [content, setContent] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const mutation = useAiGenerateStreamMutation();
+
+  const startStream = useCallback(
+    async (data: AiGenerateDto) => {
+      setContent("");
+      setIsStreaming(true);
+
+      try {
+        const controller = await mutation.mutateAsync({
+          ...data,
+          onChunk: (chunk) => {
+            setContent((prev) => prev + chunk.content);
+          },
+          onError: (error) => {
+            console.error("AI stream error:", error);
+            setIsStreaming(false);
+          },
+          onComplete: () => {
+            setIsStreaming(false);
+          },
+        });
+
+        abortControllerRef.current = controller;
+      } catch (error) {
+        console.error("Failed to start stream:", error);
+        setIsStreaming(false);
+      }
+    },
+    [mutation]
+  );
+
+  const stopStream = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+      setIsStreaming(false);
+    }
+  }, []);
+
+  const resetContent = useCallback(() => {
+    setContent("");
+  }, []);
+
+  return {
+    content,
+    isStreaming,
+    startStream,
+    stopStream,
+    resetContent,
+    isLoading: mutation.isPending,
+    error: mutation.error,
+  };
+}

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

@@ -0,0 +1,85 @@
+import { Helmet } from "react-helmet-async";
+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 EnableAiSearch from "@/ee/ai/components/enable-ai-search.tsx";
+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 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 handleTabChange = (value: string | null) => {
+    if (value === "mcp") {
+      navigate("/settings/ai/mcp");
+    } else {
+      navigate("/settings/ai");
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <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={upgradeLabel}
+              color="blue"
+              mb="lg"
+            >
+              {t(
+                "AI is only available in the Docmost enterprise edition. Contact sales@docmost.com.",
+              )}
+            </Alert>
+          )}
+
+          <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/queries/ai-query.ts

@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  UseMutationResult,
+  useQuery,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  generateAiContent,
+  generateAiContentStream,
+} from "@/ee/ai/services/ai-service.ts";
+import {
+  AiConfigResponse,
+  AiContentResponse,
+  AiGenerateDto,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export function useAiGenerateMutation(): UseMutationResult<
+  AiContentResponse,
+  Error,
+  AiGenerateDto
+> {
+  return useMutation({
+    mutationFn: (data: AiGenerateDto) => generateAiContent(data),
+  });
+}
+
+interface StreamCallbacks {
+  onChunk: (chunk: AiStreamChunk) => void;
+  onError?: (error: AiStreamError) => void;
+  onComplete?: () => void;
+}
+
+export function useAiGenerateStreamMutation(): UseMutationResult<
+  AbortController,
+  Error,
+  AiGenerateDto & StreamCallbacks
+> {
+  return useMutation({
+    mutationFn: ({ onChunk, onError, onComplete, ...data }) =>
+      generateAiContentStream(data, onChunk, onError, onComplete),
+  });
+}

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

@@ -0,0 +1,83 @@
+import api from "@/lib/api-client.ts";
+import { IPageSearchParams } from "@/features/search/types/search.types.ts";
+
+export interface IAiSearchResponse {
+  answer: string;
+  sources?: Array<{
+    pageId: string;
+    title: string;
+    slugId: string;
+    spaceSlug: string;
+    similarity: number;
+    distance: number;
+    chunkIndex: number;
+    excerpt: string;
+  }>;
+}
+
+export async function aiAnswers(
+  params: IPageSearchParams,
+  onChunk?: (chunk: { content?: string; sources?: any[] }) => void,
+): Promise<IAiSearchResponse> {
+  const response = await fetch("/api/ai/answers", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  const reader = response.body?.getReader();
+  const decoder = new TextDecoder();
+
+  let answer = "";
+  let sources: any[] = [];
+  let buffer = "";
+
+  if (reader) {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split("\n");
+
+      // Keep the last incomplete line in the buffer
+      buffer = lines.pop() || "";
+
+      for (const line of lines) {
+        if (line.startsWith("data: ")) {
+          const data = line.slice(6);
+          if (data === "[DONE]") break;
+
+          try {
+            const parsed = JSON.parse(data);
+            if (parsed.error) {
+              throw new Error(parsed.error);
+            }
+            if (parsed.content) {
+              answer += parsed.content;
+              onChunk?.({ content: parsed.content });
+            }
+            if (parsed.sources) {
+              sources = parsed.sources;
+              onChunk?.({ sources: parsed.sources });
+            }
+          } catch (e) {
+            if (e instanceof Error) {
+              throw e;
+            }
+            // Skip invalid JSON
+          }
+        }
+      }
+    }
+  }
+
+  return { answer, sources };
+}

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

@@ -0,0 +1,92 @@
+import api from "@/lib/api-client.ts";
+import {
+  AiGenerateDto,
+  AiContentResponse,
+  AiStreamChunk,
+  AiStreamError,
+} from "@/ee/ai/types/ai.types.ts";
+
+export async function generateAiContent(
+  data: AiGenerateDto,
+): Promise<AiContentResponse> {
+  const req = await api.post<AiContentResponse>("/ai/generate", data);
+  return req.data;
+}
+
+export async function generateAiContentStream(
+  data: AiGenerateDto,
+  onChunk: (chunk: AiStreamChunk) => void,
+  onError?: (error: AiStreamError) => void,
+  onComplete?: () => void,
+): Promise<AbortController> {
+  const abortController = new AbortController();
+  try {
+    const response = await fetch("/api/ai/generate/stream", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      signal: abortController.signal,
+      credentials: "include", // This ensures cookies are sent, matching axios withCredentials
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    const decoder = new TextDecoder();
+
+    if (!reader) {
+      throw new Error("Response body is not readable");
+    }
+
+    const processStream = async () => {
+      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);
+                if (parsed.error) {
+                  onError?.(parsed);
+                } else {
+                  onChunk(parsed);
+                }
+              } catch (e) {
+                // Skip invalid JSON
+              }
+            }
+          }
+        }
+      } catch (error) {
+        if (error.name !== "AbortError") {
+          onError?.({ error: error.message });
+        }
+      } finally {
+        reader.releaseLock();
+      }
+    };
+
+    processStream();
+  } catch (error) {
+    onError?.({ error: error.message });
+  }
+
+  return abortController;
+}

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

@@ -0,0 +1,41 @@
+export enum AiAction {
+  IMPROVE_WRITING = "improve_writing",
+  FIX_SPELLING_GRAMMAR = "fix_spelling_grammar",
+  MAKE_SHORTER = "make_shorter",
+  MAKE_LONGER = "make_longer",
+  SIMPLIFY = "simplify",
+  CHANGE_TONE = "change_tone",
+  SUMMARIZE = "summarize",
+  EXPLAIN = "explain",
+  CONTINUE_WRITING = "continue_writing",
+  TRANSLATE = "translate",
+  CUSTOM = "custom",
+}
+
+export interface AiGenerateDto {
+  action?: AiAction;
+  content: string;
+  prompt?: string;
+}
+
+export interface AiContentResponse {
+  content: string;
+  usage?: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+}
+
+export interface AiConfigResponse {
+  configured: boolean;
+  availableActions: AiAction[];
+}
+
+export interface AiStreamChunk {
+  content: string;
+}
+
+export interface AiStreamError {
+  error: string;
+}

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

@@ -0,0 +1,74 @@
+import {
+  Modal,
+  Text,
+  Stack,
+  Alert,
+  Group,
+  Button,
+  TextInput,
+} from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { IApiKey } from "@/ee/api-key";
+import CopyTextButton from "@/components/common/copy.tsx";
+
+interface ApiKeyCreatedModalProps {
+  opened: boolean;
+  onClose: () => void;
+  apiKey: IApiKey;
+}
+
+export function ApiKeyCreatedModal({
+  opened,
+  onClose,
+  apiKey,
+}: ApiKeyCreatedModalProps) {
+  const { t } = useTranslation();
+
+  if (!apiKey) return null;
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("{{credential}} created", { credential: t("API key") })}
+      size="lg"
+      closeButtonProps={{ "aria-label": t("Close") }}
+    >
+      <Stack gap="md">
+        <Alert
+          icon={<IconAlertTriangle size={16} />}
+          title={t("Important")}
+          color="red"
+        >
+          {t(
+            "Make sure to copy your {{credential}} now. You won't be able to see it again!",
+            { credential: t("API key") },
+          )}
+        </Alert>
+
+        <div>
+          <Text size="sm" fw={500} mb="xs">
+            {t("API key")}
+          </Text>
+          <Group gap="xs" wrap="nowrap">
+            <TextInput
+              variant="filled"
+              style={{
+                flex: 1,
+              }}
+              value={apiKey.token}
+              readOnly
+            />
+
+            <CopyTextButton text={apiKey.token} />
+          </Group>
+        </div>
+
+        <Button fullWidth onClick={onClose} mt="md">
+          {t("I've saved my {{credential}}", { credential: t("API key") })}
+        </Button>
+      </Stack>
+    </Modal>
+  );
+}

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

@@ -0,0 +1,147 @@
+import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
+import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
+import { format } from "date-fns";
+import { useTranslation } from "react-i18next";
+import { IApiKey } from "@/ee/api-key";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import React from "react";
+import NoTableResults from "@/components/common/no-table-results";
+
+interface ApiKeyTableProps {
+  apiKeys: IApiKey[];
+  isLoading?: boolean;
+  showUserColumn?: boolean;
+  onUpdate?: (apiKey: IApiKey) => void;
+  onRevoke?: (apiKey: IApiKey) => void;
+}
+
+export function ApiKeyTable({
+  apiKeys,
+  isLoading,
+  showUserColumn = false,
+  onUpdate,
+  onRevoke,
+}: ApiKeyTableProps) {
+  const { t } = useTranslation();
+
+  const formatDate = (date: Date | string | null) => {
+    if (!date) return t("Never");
+    return format(new Date(date), "MMM dd, yyyy");
+  };
+
+  const isExpired = (expiresAt: string | null) => {
+    if (!expiresAt) return false;
+    return new Date(expiresAt) < new Date();
+  };
+
+  return (
+    <Table.ScrollContainer minWidth={500}>
+      <Table highlightOnHover verticalSpacing="sm">
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>{t("Name")}</Table.Th>
+            {showUserColumn && <Table.Th>{t("User")}</Table.Th>}
+            <Table.Th>{t("Last used")}</Table.Th>
+            <Table.Th>{t("Expires")}</Table.Th>
+            <Table.Th>{t("Created")}</Table.Th>
+            <Table.Th aria-label={t("Action")} />
+          </Table.Tr>
+        </Table.Thead>
+
+        <Table.Tbody>
+          {apiKeys && apiKeys.length > 0 ? (
+            apiKeys.map((apiKey: IApiKey, index: number) => (
+              <Table.Tr key={index}>
+                <Table.Td>
+                  <Text fz="sm" fw={500}>
+                    {apiKey.name}
+                  </Text>
+                </Table.Td>
+
+                {showUserColumn && apiKey.creator && (
+                  <Table.Td>
+                    <Group gap="4" wrap="nowrap">
+                      <CustomAvatar
+                        avatarUrl={apiKey.creator?.avatarUrl}
+                        name={apiKey.creator.name}
+                        size="sm"
+                      />
+                      <Text fz="sm" lineClamp={1}>
+                        {apiKey.creator.name}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                )}
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(apiKey.lastUsedAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  {apiKey.expiresAt ? (
+                    isExpired(apiKey.expiresAt) ? (
+                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                        {t("Expired")}
+                      </Text>
+                    ) : (
+                      <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                        {formatDate(apiKey.expiresAt)}
+                      </Text>
+                    )
+                  ) : (
+                    <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                      {t("Never")}
+                    </Text>
+                  )}
+                </Table.Td>
+
+                <Table.Td>
+                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
+                    {formatDate(apiKey.createdAt)}
+                  </Text>
+                </Table.Td>
+
+                <Table.Td>
+                  <Menu position="bottom-end" withinPortal>
+                    <Menu.Target>
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        aria-label={t("API key menu")}
+                      >
+                        <IconDots size={16} />
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown>
+                      {onUpdate && (
+                        <Menu.Item
+                          leftSection={<IconEdit size={16} />}
+                          onClick={() => onUpdate(apiKey)}
+                        >
+                          {t("Rename")}
+                        </Menu.Item>
+                      )}
+                      {onRevoke && (
+                        <Menu.Item
+                          leftSection={<IconTrash size={16} />}
+                          color="red"
+                          onClick={() => onRevoke(apiKey)}
+                        >
+                          {t("Revoke")}
+                        </Menu.Item>
+                      )}
+                    </Menu.Dropdown>
+                  </Menu>
+                </Table.Td>
+              </Table.Tr>
+            ))
+          ) : (
+            <NoTableResults colSpan={showUserColumn ? 6 : 5} />
+          )}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}

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

@@ -0,0 +1,154 @@
+import { lazy, Suspense, useState } from "react";
+import { Modal, TextInput, Button, Group, Stack, Select } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { zod4Resolver } from "mantine-form-zod-resolver";
+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";
+import { IApiKey } from "@/ee/api-key";
+
+const DateInput = lazy(() =>
+  import("@mantine/dates").then((module) => ({
+    default: module.DateInput,
+  })),
+);
+
+interface CreateApiKeyModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onSuccess: (response: IApiKey) => void;
+}
+
+const formSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  expiresAt: z.string().optional(),
+});
+type FormValues = z.infer<typeof formSchema>;
+
+export function CreateApiKeyModal({
+  opened,
+  onClose,
+  onSuccess,
+}: CreateApiKeyModalProps) {
+  const { t } = useTranslation();
+  const [expirationOption, setExpirationOption] = useState<string>("30");
+  const createApiKeyMutation = useCreateApiKeyMutation();
+
+  const form = useForm<FormValues>({
+    validate: zod4Resolver(formSchema),
+    initialValues: {
+      name: "",
+      expiresAt: "",
+    },
+  });
+
+  const getExpirationDate = (): string | undefined => {
+    if (expirationOption === "never") {
+      return undefined;
+    }
+    if (expirationOption === "custom") {
+      return form.values.expiresAt;
+    }
+    const days = parseInt(expirationOption);
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    return date.toISOString();
+  };
+
+  const getExpirationLabel = (days: number) => {
+    const date = new Date();
+    date.setDate(date.getDate() + days);
+    const formatted = date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
+    });
+    return `${days} days (${formatted})`;
+  };
+
+  const expirationOptions = [
+    { value: "30", label: getExpirationLabel(30) },
+    { value: "60", label: getExpirationLabel(60) },
+    { value: "90", label: getExpirationLabel(90) },
+    { value: "365", label: getExpirationLabel(365) },
+    { value: "custom", label: t("Custom") },
+    { value: "never", label: t("No expiration") },
+  ];
+
+  const handleSubmit = async (data: {
+    name?: string;
+    expiresAt?: string | Date;
+  }) => {
+    const groupData = {
+      name: data.name,
+      expiresAt: getExpirationDate(),
+    };
+
+    try {
+      const createdKey = await createApiKeyMutation.mutateAsync(groupData);
+      onSuccess(createdKey);
+      form.reset();
+      onClose();
+    } catch (err) {
+      //
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    setExpirationOption("30");
+    onClose();
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={handleClose}
+      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">
+          <TextInput
+            label={t("Name")}
+            placeholder={t("Enter a descriptive name")}
+            data-autofocus
+            required
+            {...form.getInputProps("name")}
+          />
+
+          <Select
+            label={t("Expiration")}
+            data={expirationOptions}
+            value={expirationOption}
+            onChange={(value) => setExpirationOption(value || "30")}
+            leftSection={<IconCalendar size={16} />}
+            allowDeselect={false}
+          />
+
+          {expirationOption === "custom" && (
+            <Suspense fallback={null}>
+              <DateInput
+                label={t("Custom expiration date")}
+                placeholder={t("Select expiration date")}
+                minDate={new Date()}
+                {...form.getInputProps("expiresAt")}
+              />
+            </Suspense>
+          )}
+
+          <Group justify="flex-end" mt="md">
+            <Button variant="default" onClick={handleClose}>
+              {t("Cancel")}
+            </Button>
+            <Button type="submit" loading={createApiKeyMutation.isPending}>
+              {t("Create")}
+            </Button>
+          </Group>
+        </Stack>
+      </form>
+    </Modal>
+  );
+}