feat(integrations): add integration framework with link unfurling

2026-08-30 02:25:01 +08:00 · 2026-08-13 21:51:02 +01:00
parent ea59912c7e
commit adbbf4775a
92 changed files with 7248 additions and 6 deletions
@@ -14,6 +14,7 @@
  "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.": "Are you sure you want to remove this user from the group? The user will lose access to resources this group has access to.",
  "Are you sure you want to remove this user from the space? The user will lose all access to this space.": "Are you sure you want to remove this user from the space? The user will lose all access to this space.",
  "Are you sure you want to restore this version? Any changes not versioned will be lost.": "Are you sure you want to restore this version? Any changes not versioned will be lost.",
+  "Assigned to {{name}}": "Assigned to {{name}}",
  "Can become members of groups and spaces in workspace": "Can become members of groups and spaces in workspace",
  "Can create and edit pages in space.": "Can create and edit pages in space.",
  "Can edit": "Can edit",
@@ -22,6 +23,7 @@
  "Can view": "Can view",
  "Can view pages in space but not edit.": "Can view pages in space but not edit.",
  "Cancel": "Cancel",
+  "Card": "Card",
  "Change email": "Change email",
  "Change password": "Change password",
  "Change photo": "Change photo",
@@ -30,6 +32,8 @@
  "Choose your preferred interface language.": "Choose your preferred interface language.",
  "Choose your preferred page width.": "Choose your preferred page width.",
  "Confirm": "Confirm",
+  "Connect to {{name}} to preview": "Connect to {{name}} to preview",
+  "Connected as {{label}}": "Connected as {{label}}",
  "Copy as Markdown": "Copy as Markdown",
  "Copy link": "Copy link",
  "Create": "Create",
@@ -41,6 +45,16 @@
  "Dark": "Dark",
  "Date": "Date",
  "Delete": "Delete",
+  "Initiative": "Initiative",
+  "Last modified by {{name}}": "Last modified by {{name}}",
+  "Open in Slack": "Open in Slack",
+  "Paid": "Paid",
+  "Paste as": "Paste as",
+  "Project": "Project",
+  "Uninstall {{name}}": "Uninstall {{name}}",
+  "Disconnect {{name}}": "Disconnect {{name}}",
+  "This disconnects your {{name}} account. Links are not enriched for you until you reconnect.": "This disconnects your {{name}} account. Links are not enriched for you until you reconnect.",
+  "This disables the {{name}} integration for the entire workspace. Members' connections are removed and links are not enriched.": "This disables the {{name}} integration for the entire workspace. Members' connections are removed and links are not enriched.",
  "Remove from page": "Remove from page",
  "Base options": "Base options",
  "Delete group": "Delete group",
@@ -150,6 +164,8 @@
  "page": "page",
  "Page deleted successfully": "Page deleted successfully",
  "Page history": "Page history",
+  "replies": "replies",
+  "reply": "reply",
  "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.",
@@ -184,6 +200,8 @@
  "Invitation sent": "Invitation sent",
  "Settings": "Settings",
  "Setup workspace": "Setup workspace",
+  "show less": "show less",
+  "show more": "show more",
  "Sign In": "Sign In",
  "Sign Up": "Sign Up",
  "Slug": "Slug",
@@ -206,7 +224,9 @@
  "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",
+  "Toggle {{name}} integration": "Toggle {{name}} integration",
  "Unable to import pages. Please try again.": "Unable to import pages. Please try again.",
+  "Unassigned": "Unassigned",
  "untitled": "untitled",
  "Untitled": "Untitled",
  "Updated successfully": "Updated successfully",
@@ -38,6 +38,9 @@ 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 Integrations from "@/features/integration/pages/integrations.tsx";
+import Connections from "@/features/integration/pages/connections.tsx";
+import SlackLinkPage from "@/features/integration/pages/slack-link.tsx";
 import BasePage from "@/ee/base/pages/base-page.tsx";
 import AuditLogs from "@/ee/audit/pages/audit-logs.tsx";
 import VerifiedPages from "@/ee/page-verification/pages/verified-pages.tsx";
@@ -87,6 +90,7 @@ export default function App() {
        <Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
        <Route path={"/share/:shareId"} element={<ShareRedirect />} />
        <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
+        <Route path={"/integrations/slack/link"} element={<SlackLinkPage />} />

        <Route element={<Layout />}>
          <Route path={"/home"} element={<Home />} />
@@ -116,6 +120,7 @@ export default function App() {
              element={<AccountPreferences />}
            />
            <Route path={"account/api-keys"} element={<UserApiKeys />} />
+            <Route path={"account/connections"} element={<Connections />} />
            <Route path={"workspace"} element={<WorkspaceSettings />} />
            <Route path={"members"} element={<WorkspaceMembers />} />
            <Route path={"api-keys"} element={<WorkspaceApiKeys />} />
@@ -128,6 +133,7 @@ export default function App() {
            <Route path={"ai/mcp"} element={<AiSettings />} />
            <Route path={"audit"} element={<AuditLogs />} />
            <Route path={"verifications"} element={<VerifiedPages />} />
+            <Route path={"integrations"} element={<Integrations />} />
            {!isCloud() && <Route path={"license"} element={<License />} />}
            {isCloud() && <Route path={"billing"} element={<Billing />} />}
          </Route>
@@ -0,0 +1,22 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GithubIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,32 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GitlabIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="93.97 97.52 192.05 184.99"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="#e24329"
+        d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04"
+      />
+      <path
+        fill="#fc6d26"
+        d="m282.83 170.73-.27-.69a88.3 88.3 0 0 0-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0 0 16.1-56.08"
+      />
+      <path
+        fill="#fca326"
+        d="m153.43 256.89 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91S209.55 244 190 229.25c-19.55 14.75-36.57 27.64-36.57 27.64"
+      />
+      <path
+        fill="#fc6d26"
+        d="M132.58 185.84A88.2 88.2 0 0 0 97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82L190 229.21Z"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,28 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GoogleDocsIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 47 65"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="#4285F4"
+        d="M29.375 0H4.406C1.983 0 0 1.994 0 4.432v56.136C0 63.006 1.983 65 4.406 65h38.188C45.017 65 47 63.006 47 60.568v-42.84L36.719 10.34z"
+      />
+      <path
+        fill="#A1C2FA"
+        d="M29.375 0v13.295c0 2.449 1.972 4.432 4.406 4.432H47z"
+      />
+      <path
+        fill="#F1F1F1"
+        d="M11.75 47.273h23.5v-2.955h-23.5zm0 5.909h17.625v-2.955H11.75zm0-20.682v2.955h23.5V32.5zm0 8.864h23.5v-2.955h-23.5z"
+      />
+    </svg>
+  );
+}
@@ -1,10 +1,16 @@
 export { AirtableIcon } from "./airtable-icon.tsx";
 export { FigmaIcon } from "./figma-icon.tsx";
+export { GithubIcon } from "./github-icon.tsx";
+export { GitlabIcon } from "./gitlab-icon.tsx";
+export { GoogleDocsIcon } from "./google-docs-icon.tsx";
+export { GoogleDriveIcon } from "./google-drive-icon.tsx";
+export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
+export { JiraIcon } from "./jira-icon.tsx";
+export { LinearIcon } from "./linear-icon.tsx";
 export { TypeformIcon } from "./typeform-icon.tsx";
 export { VimeoIcon } from "./vimeo-icon.tsx";
 export { MiroIcon } from "./miro-icon.tsx";
-export { GoogleDriveIcon } from "./google-drive-icon.tsx";
-export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
+export { SlackIcon } from "./slack-icon.tsx";
 export { FramerIcon } from "./framer-icon.tsx";
 export { LoomIcon } from "./loom-icon.tsx";
 export { YoutubeIcon } from "./youtube-icon.tsx";
@@ -0,0 +1,38 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function JiraIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <defs>
+        <linearGradient id="jira-a" x1="380.896" x2="279.145" y1="390.609" y2="282.574" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
+          <stop offset=".176" stopColor="#0052cc" />
+          <stop offset="1" stopColor="#2684ff" />
+        </linearGradient>
+        <linearGradient id="jira-b" x1="265.965" x2="148.117" y1="270.661" y2="152.607" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
+          <stop offset=".176" stopColor="#0052cc" />
+          <stop offset="1" stopColor="#2684ff" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="#2684ff"
+        d="M490.6 7.4H243.9c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V28.1c.1-11.7-9.2-20.7-21.3-20.7"
+      />
+      <path
+        fill="url(#jira-a)"
+        d="M368.7 126.5H121.9c0 59.6 49.9 108 111.2 108h45.6v42.9c0 59.6 49.9 108 111.2 108V147.3c.2-11.1-9.1-20.8-21.2-20.8"
+      />
+      <path
+        fill="url(#jira-b)"
+        d="M246.7 246.3H0c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V267.1c.1-11.8-9.9-20.8-21.3-20.8"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,21 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function LinearIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 100 100"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="currentColor"
+        d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6684-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"
+      />
+    </svg>
+  );
+}
@@ -8,11 +8,20 @@ export function MiroIcon({ size }: Props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
+      fill="none"
+      viewBox="3 2 395 395"
      style={{ width: rem(size), height: rem(size) }}
    >
      <path
-        d="M17.392 0H13.9L17 4.808 10.444 0H6.949l3.102 6.3L3.494 0H0l3.05 8.131L0 24h3.494L10.05 6.985 6.949 24h3.494L17 5.494 13.899 24h3.493L24 3.672 17.392 0z" />
+        fill="#FFDD33"
+        d="M3 100.754C3 46.2604 47.2435 2 101.754 2H299.246C353.756 2 398 46.2435 398 100.754V298.246C398 352.756 353.756 397 299.246 397H101.754C47.2435 397 3 352.756 3 298.246V100.754Z"
+      />
+      <path
+        fill="#1C1C1E"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M265.573 77.3491H229.74L259.629 129.85L193.906 77.3491H158.072L190.934 141.468L122.238 77.3491H86.4041L122.238 159.031L86.4041 322.377H122.238L190.934 147.396L158.072 322.377H193.906L259.629 135.693L229.74 322.377H265.573L331.297 118.232L265.573 77.4335V77.3491Z"
+      />
    </svg>
  );
 }
@@ -0,0 +1,32 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function SlackIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        d="M107.9 323.6c0 29.7-24 53.8-53.8 53.8S.3 353.4.3 323.6c0-29.7 24-53.8 53.8-53.8h53.8zm26.9 0c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8V458c0 29.7-24 53.8-53.8 53.8s-53.8-24-53.8-53.8z"
+        fill="#e01e5a"
+      />
+      <path
+        d="M188.6 107.7c-29.7 0-53.8-24-53.8-53.8S158.8.1 188.6.1s53.8 24 53.8 53.8v53.8zm0 27.3c29.7 0 53.8 24 53.8 53.8s-24 53.8-53.8 53.8H53.8C24 242.6 0 218.5 0 188.8S24 135 53.8 135z"
+        fill="#36c5f0"
+      />
+      <path
+        d="M404.1 188.8c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8-24 53.8-53.8 53.8h-53.8zm-26.9 0c0 29.7-24 53.8-53.8 53.8-29.7 0-53.8-24-53.8-53.8V54c0-29.7 24-53.8 53.8-53.8s53.8 24 53.8 53.8z"
+        fill="#2eb67d"
+      />
+      <path
+        d="M323.4 404.3c29.7 0 53.8 24 53.8 53.8 0 29.7-24 53.8-53.8 53.8-29.7 0-53.8-24-53.8-53.8v-53.8zm0-26.9c-29.7 0-53.8-24-53.8-53.8s24-53.8 53.8-53.8h134.8c29.7 0 53.8 24 53.8 53.8 0 29.7-24 53.8-53.8 53.8z"
+        fill="#ecb22e"
+      />
+    </svg>
+  );
+}
@@ -13,6 +13,7 @@ import {
  IconKey,
  IconWorld,
  IconSparkles,
+  IconPlug,
  IconHistory,
  IconShieldCheck,
 } from "@tabler/icons-react";
@@ -74,6 +75,11 @@ const groupedData: DataGroup[] = [
        path: "/settings/account/api-keys",
        feature: Feature.API_KEYS,
      },
+      {
+        label: "Connections",
+        icon: IconPlug,
+        path: "/settings/account/connections",
+      },
    ],
  },
  {
@@ -125,6 +131,12 @@ const groupedData: DataGroup[] = [
        role: "owner",
        env: "selfhosted",
      },
+      {
+        label: "Integrations",
+        icon: IconPlug,
+        path: "/settings/integrations",
+        role: "admin",
+      },
    ],
  },
  {
@@ -22,4 +22,5 @@ export const Feature = {
  PERSONAL_SPACES: 'spaces:personal',
  DOCX_EXPORT: 'export:docx',
  BASES: 'bases',
+  INTEGRATIONS: 'integrations',
 } as const;
@@ -5,6 +5,10 @@ import { uploadPdfAction } from "../pdf/upload-pdf-action";
 import { createMentionAction } from "@/features/editor/components/link/internal-link-paste.ts";
 import { INTERNAL_LINK_REGEX } from "@/lib/constants.ts";
 import { Editor } from "@tiptap/core";
+import { matchIntegrationLink } from "@docmost/editor-ext";
+import { integrationPasteMenuKey } from "@/features/editor/extensions/integration-paste-menu";
+import { queryClient } from "@/main.tsx";
+import { Integration } from "@/features/integration/types/integration.types";
 import {
  getAttachmentInfo,
  uploadFile,
@@ -22,6 +26,16 @@ const ATTACHMENT_NODE_TYPES = [

 const ATTACHMENT_URL_RE = /\/api\/files\/([0-9a-f-]+)\//;

+// Only installed providers get card treatment; anything else pastes as an
+// ordinary link. The cache is prefetched when the page editor mounts;
+// a cold cache also means ordinary link.
+function isIntegrationInstalled(provider: string): boolean {
+  const installed = queryClient.getQueryData<Integration[]>([
+    "installed-integrations",
+  ]);
+  return Boolean(installed?.some((i) => i.type === provider));
+}
+
 export const handlePaste = (
  editor: Editor,
  event: ClipboardEvent,
@@ -30,6 +44,59 @@ export const handlePaste = (
 ) => {
  const clipboardData = event.clipboardData.getData("text/plain");

+  const integrationMatch = matchIntegrationLink(clipboardData.trim());
+  if (
+    integrationMatch &&
+    editor.state.selection.empty &&
+    isIntegrationInstalled(integrationMatch.provider)
+  ) {
+    event.preventDefault();
+    const pastedUrl = clipboardData.trim();
+    editor
+      .chain()
+      .focus()
+      .setIntegrationLink({
+        url: pastedUrl,
+        provider: integrationMatch.provider,
+      })
+      // Anchor the "Paste as" menu to the inserted node, in the SAME
+      // transaction: BubbleMenu ignores meta-only transactions (it only
+      // re-evaluates when the doc or selection changed). Locate the node via
+      // the range this transaction's own steps touched, never by url, so a
+      // duplicate of the same link elsewhere in the doc can't steal the menu.
+      .command(({ tr }) => {
+        let start: number | null = null;
+        let end: number | null = null;
+        tr.mapping.maps.forEach((map, index) => {
+          const rest = tr.mapping.slice(index + 1);
+          map.forEach((_oldStart, _oldEnd, newStart, newEnd) => {
+            const mappedStart = rest.map(newStart, -1);
+            const mappedEnd = rest.map(newEnd, 1);
+            start = start === null ? mappedStart : Math.min(start, mappedStart);
+            end = end === null ? mappedEnd : Math.max(end, mappedEnd);
+          });
+        });
+        if (start === null || end === null) return true;
+
+        let pastedPos: number | null = null;
+        tr.doc.nodesBetween(
+          start,
+          Math.min(end, tr.doc.content.size),
+          (node, pos) => {
+            if (node.type.name === "integrationLink") {
+              pastedPos = pos;
+            }
+          },
+        );
+        if (pastedPos !== null) {
+          tr.setMeta(integrationPasteMenuKey, { pos: pastedPos });
+        }
+        return true;
+      })
+      .run();
+    return true;
+  }
+
  if (INTERNAL_LINK_REGEX.test(clipboardData)) {
    // we have to do this validation here to allow the default link extension to takeover if needs be
    event.preventDefault();
@@ -0,0 +1,49 @@
+// Light-scheme text per hue, measured to pass 4.5:1 on the light-variant
+// badge background; hexes are darkened .9 shades for hues whose scale
+// never gets dark enough.
+const BADGE_TEXT_LIGHT: Record<string, string> = {
+  dark: "var(--mantine-color-dark-9)",
+  gray: "var(--mantine-color-gray-9)",
+  red: "var(--mantine-color-red-9)",
+  pink: "var(--mantine-color-pink-9)",
+  grape: "var(--mantine-color-grape-9)",
+  violet: "var(--mantine-color-violet-9)",
+  indigo: "var(--mantine-color-indigo-9)",
+  blue: "var(--mantine-color-blue-9)",
+  cyan: "var(--mantine-color-cyan-9)",
+  teal: "var(--mantine-color-teal-9)",
+  green: "#277c38",
+  lime: "#4e7e0b",
+  yellow: "#ad5900",
+  orange: "#c3410e",
+};
+
+export function badgeTextColor(color?: string): string | undefined {
+  if (!color) return undefined;
+  const light = BADGE_TEXT_LIGHT[color];
+  if (!light) return undefined;
+  // Dark scheme keeps Mantine's own light-variant text.
+  return `light-dark(${light}, var(--mantine-color-${color}-light-color))`;
+}
+
+export function toBadgeColor(raw?: string): string {
+  if (!raw) return "gray";
+  const hex = raw.toLowerCase().replace("#", "");
+  if (/^[0-9a-f]{6}$/.test(hex)) {
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2 / 255;
+    if (max - min < 30) return l > 0.6 ? "gray" : "dark";
+    if (r > g && r > b) return g > 160 ? "orange" : "red";
+    if (g > r && g > b) return r > 160 ? "lime" : "green";
+    if (b > r && b > g) return r > 100 ? "violet" : "blue";
+    if (r > 200 && g > 200) return "yellow";
+    if (r > 200 && b > 200) return "pink";
+    if (g > 200 && b > 200) return "cyan";
+    return "gray";
+  }
+  return raw;
+}
@@ -0,0 +1,65 @@
+.card {
+  max-width: 100%;
+  cursor: pointer;
+  transition: background-color 150ms ease;
+  margin: 4px 0;
+}
+
+.card:hover {
+  background-color: var(--mantine-color-gray-0);
+}
+
+:global([data-mantine-color-scheme="dark"]) .card:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+
+.thumbnail {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: cover;
+  background-color: var(--mantine-color-gray-0);
+}
+
+:global([data-mantine-color-scheme="dark"]) .thumbnail {
+  background-color: var(--mantine-color-dark-6);
+}
+
+.mention {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  vertical-align: text-bottom;
+  text-decoration: none;
+  color: inherit;
+  border-radius: var(--mantine-radius-sm);
+}
+
+:global(.node-integrationMention) .mention {
+  border-bottom: none !important;
+  font-weight: 400;
+}
+
+.mention:hover {
+  background-color: var(--mantine-color-gray-0);
+}
+
+:global([data-mantine-color-scheme="dark"]) .mention:hover {
+  background-color: var(--mantine-color-dark-5);
+}
+
+.mentionText {
+  text-decoration: underline;
+  text-decoration-color: var(--mantine-color-gray-4);
+  text-underline-offset: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 340px;
+  font-weight: 500;
+}
+
+.mentionIcon {
+  flex-shrink: 0;
+}
@@ -0,0 +1,525 @@
+import { NodeViewWrapper } from "@tiptap/react";
+import {
+  Card,
+  Group,
+  Text,
+  Badge,
+  Avatar,
+  Skeleton,
+  Anchor,
+  Stack,
+  Button,
+} from "@mantine/core";
+import { useCallback, useState, memo } from "react";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import { describeIntegrationLink } from "@docmost/editor-ext";
+import { getIntegrationIcon } from "@/features/integration/components/integration-icons";
+import { getOAuthAuthorizeUrl } from "@/features/integration/services/integration-service";
+import { timeAgo } from "@/lib/time";
+import { useUnfurl } from "./use-unfurl";
+import { badgeTextColor, toBadgeColor } from "./badge-color";
+import classes from "./integration-link-view.module.css";
+
+const SLACK_TEXT_CLAMP_LINES = 4;
+
+function SlackMessageCard({
+  url,
+  unfurlData,
+}: {
+  url: string;
+  unfurlData: Record<string, any>;
+}) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  const meta = unfurlData.metadata ?? {};
+  const postedAt = meta.ts ? new Date(parseFloat(meta.ts) * 1000) : null;
+  const text: string = unfurlData.description ?? "";
+  const isLong =
+    text.length > 280 || text.split("\n").length > SLACK_TEXT_CLAMP_LINES;
+
+  const footer = [
+    meta.replyCount
+      ? `${meta.replyCount} ${meta.replyCount === 1 ? t("reply") : t("replies")}`
+      : null,
+    unfurlData.status,
+    meta.teamName,
+  ]
+    .filter(Boolean)
+    .join(" • ");
+
+  return (
+    <NodeViewWrapper data-drag-handle="">
+      <Card className={classes.card} withBorder padding="sm" radius="sm">
+        <Group gap="sm" wrap="nowrap" align="flex-start">
+          <Avatar
+            src={unfurlData.authorAvatarUrl}
+            size={28}
+            radius="xl"
+            style={{ flexShrink: 0 }}
+          >
+            {(unfurlData.author ?? "?").charAt(0)}
+          </Avatar>
+
+          <Stack gap={4} style={{ flex: 1, minWidth: 0 }}>
+            <Group gap={6} wrap="nowrap">
+              <Text size="sm" fw={600} truncate>
+                {unfurlData.author}
+              </Text>
+              {postedAt && (
+                <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                  {timeAgo(postedAt)}
+                </Text>
+              )}
+            </Group>
+
+            {text && (
+              <Text
+                size="sm"
+                lineClamp={expanded ? undefined : SLACK_TEXT_CLAMP_LINES}
+                style={{ whiteSpace: "pre-wrap" }}
+              >
+                {text}
+              </Text>
+            )}
+
+            {isLong && (
+              <Text
+                size="xs"
+                fw={600}
+                role="button"
+                tabIndex={0}
+                aria-expanded={expanded}
+                style={{ cursor: "pointer", width: "fit-content" }}
+                onClick={() => setExpanded((v) => !v)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setExpanded((v) => !v);
+                  }
+                }}
+              >
+                {expanded ? t("show less") : t("show more")}
+              </Text>
+            )}
+
+            {footer && (
+              <Text size="xs" c="dimmed" truncate>
+                {footer}
+              </Text>
+            )}
+          </Stack>
+
+          <Anchor
+            href={url}
+            target="_blank"
+            rel="noopener"
+            aria-label={t("Open in Slack")}
+            style={{ flexShrink: 0, lineHeight: 0 }}
+          >
+            {getIntegrationIcon("slack", 18)}
+          </Anchor>
+        </Group>
+      </Card>
+    </NodeViewWrapper>
+  );
+}
+
+function JiraIssueCard({
+  url,
+  unfurlData,
+}: {
+  url: string;
+  unfurlData: Record<string, any>;
+}) {
+  const { t } = useTranslation();
+  const meta = unfurlData.metadata ?? {};
+
+  const infoLine = [
+    meta.issueKey,
+    unfurlData.author
+      ? t("Assigned to {{name}}", { name: unfurlData.author })
+      : t("Unassigned"),
+    meta.updatedAt
+      ? t("Updated {{time}}", { time: timeAgo(new Date(meta.updatedAt)) })
+      : null,
+  ]
+    .filter(Boolean)
+    .join(" • ");
+
+  return (
+    <NodeViewWrapper data-drag-handle="">
+      <Card
+        className={classes.card}
+        withBorder
+        padding="sm"
+        radius="sm"
+        component="a"
+        href={url}
+        target="_blank"
+        rel="noopener"
+        style={{ textDecoration: "none", color: "inherit" }}
+      >
+        <Group gap="sm" wrap="nowrap">
+          {unfurlData.authorAvatarUrl ? (
+            <Avatar
+              src={unfurlData.authorAvatarUrl}
+              size={28}
+              radius="xl"
+              style={{ flexShrink: 0 }}
+            />
+          ) : (
+            <div style={{ flexShrink: 0 }}>{getIntegrationIcon("jira", 28)}</div>
+          )}
+
+          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+            <Group gap="xs" wrap="nowrap">
+              <Text size="sm" fw={600} truncate>
+                {unfurlData.title}
+              </Text>
+              {unfurlData.status && (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color={toBadgeColor(unfurlData.statusColor)}
+                  c={badgeTextColor(toBadgeColor(unfurlData.statusColor))}
+                  style={{ flexShrink: 0 }}
+                >
+                  {unfurlData.status}
+                </Badge>
+              )}
+            </Group>
+
+            <Group gap={4} wrap="nowrap">
+              {meta.issueTypeIconUrl && (
+                <img
+                  src={meta.issueTypeIconUrl}
+                  width={14}
+                  height={14}
+                  alt=""
+                  style={{ flexShrink: 0 }}
+                />
+              )}
+              <Text size="xs" c="dimmed" truncate>
+                {infoLine}
+              </Text>
+            </Group>
+          </Stack>
+
+          <div style={{ flexShrink: 0, alignSelf: "center" }}>
+            {getIntegrationIcon("jira", 18)}
+          </div>
+        </Group>
+      </Card>
+    </NodeViewWrapper>
+  );
+}
+
+function FigmaFileCard({
+  url,
+  unfurlData,
+}: {
+  url: string;
+  unfurlData: Record<string, any>;
+}) {
+  const { t } = useTranslation();
+  // Figma thumbnail links are pre-signed and expire; drop the preview rather
+  // than render a broken image.
+  const [thumbnailFailed, setThumbnailFailed] = useState(false);
+  const meta = unfurlData.metadata ?? {};
+  const thumbnailUrl: string | undefined = meta.thumbnailUrl;
+  const showThumbnail = Boolean(thumbnailUrl) && !thumbnailFailed;
+
+  const subtitle = [
+    unfurlData.author
+      ? t("Last modified by {{name}}", { name: unfurlData.author })
+      : unfurlData.description,
+    meta.lastModified ? timeAgo(new Date(meta.lastModified)) : null,
+  ]
+    .filter(Boolean)
+    .join(" • ");
+
+  return (
+    <NodeViewWrapper data-drag-handle="">
+      <Card
+        className={classes.card}
+        withBorder
+        padding="sm"
+        radius="sm"
+        component="a"
+        href={url}
+        target="_blank"
+        rel="noopener"
+        style={{ textDecoration: "none", color: "inherit" }}
+      >
+        {showThumbnail && (
+          <Card.Section withBorder>
+            <img
+              src={thumbnailUrl}
+              alt=""
+              loading="lazy"
+              className={classes.thumbnail}
+              onError={() => setThumbnailFailed(true)}
+            />
+          </Card.Section>
+        )}
+
+        <Group gap="sm" wrap="nowrap" mt={showThumbnail ? "sm" : undefined}>
+          <Avatar
+            src={unfurlData.authorAvatarUrl}
+            size={28}
+            radius="xl"
+            style={{ flexShrink: 0 }}
+          >
+            {(unfurlData.author ?? unfurlData.title ?? "F").charAt(0)}
+          </Avatar>
+
+          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {unfurlData.title}
+            </Text>
+            {subtitle && (
+              <Text size="xs" c="dimmed" truncate>
+                {subtitle}
+              </Text>
+            )}
+          </Stack>
+
+          <div style={{ flexShrink: 0, alignSelf: "center" }}>
+            {getIntegrationIcon("figma", 18)}
+          </div>
+        </Group>
+      </Card>
+    </NodeViewWrapper>
+  );
+}
+
+function IntegrationLinkView(props: any) {
+  const { node } = props;
+  const { url, provider } = node.attrs;
+  const { t } = useTranslation();
+
+  const unfurl = useUnfurl(url);
+  const [connecting, setConnecting] = useState(false);
+
+  const needsConnection =
+    unfurl.state === "needsConnection" ? unfurl.needsConnection : null;
+
+  const handleConnect = useCallback(
+    async (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!needsConnection) return;
+
+      setConnecting(true);
+      try {
+        const result = await getOAuthAuthorizeUrl({
+          integrationId: needsConnection.integrationId,
+          returnPath: window.location.pathname,
+        });
+        window.location.href = result.authorizationUrl;
+      } catch (error) {
+        setConnecting(false);
+        notifications.show({
+          message:
+            error?.["response"]?.data?.message ||
+            t("Failed to start OAuth connection"),
+          color: "red",
+        });
+      }
+    },
+    [needsConnection, t],
+  );
+
+  if (needsConnection) {
+    return (
+      <NodeViewWrapper data-drag-handle="">
+        <Card
+          className={classes.card}
+          withBorder
+          padding="sm"
+          radius="sm"
+          component="a"
+          href={url}
+          target="_blank"
+          rel="noopener"
+          style={{ textDecoration: "none", color: "inherit" }}
+        >
+          <Group gap="sm" wrap="nowrap">
+            <div style={{ flexShrink: 0 }}>
+              {getIntegrationIcon(provider, 28)}
+            </div>
+
+            <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+              <Text size="sm" fw={600} truncate>
+                {needsConnection.title}
+              </Text>
+              {needsConnection.description && (
+                <Text size="xs" c="dimmed" lineClamp={1}>
+                  {needsConnection.description}
+                </Text>
+              )}
+            </Stack>
+
+            {needsConnection.oauthConnect ? (
+              <Button
+                size="xs"
+                variant="filled"
+                color="dark"
+                loading={connecting}
+                onClick={handleConnect}
+                style={{ flexShrink: 0 }}
+              >
+                {t("Connect to {{name}} to preview", {
+                  name: needsConnection.integrationName,
+                })}
+              </Button>
+            ) : (
+              <Text size="xs" c="dimmed" style={{ flexShrink: 0 }}>
+                {t("Use")} <code>/docmost help</code> {t("in")}{" "}
+                {needsConnection.integrationName} {t("to link your account.")}
+              </Text>
+            )}
+          </Group>
+        </Card>
+      </NodeViewWrapper>
+    );
+  }
+
+  if (unfurl.state === "loading") {
+    return (
+      <NodeViewWrapper data-drag-handle="">
+        <Card className={classes.card} withBorder padding="sm" radius="sm">
+          <Group gap="sm">
+            <Skeleton circle height={24} />
+            <Stack gap={4} style={{ flex: 1 }}>
+              <Skeleton height={14} width="60%" />
+              <Skeleton height={10} width="80%" />
+            </Stack>
+          </Group>
+        </Card>
+      </NodeViewWrapper>
+    );
+  }
+
+  if (unfurl.state !== "loaded") {
+    // anonymous or error: no third-party data, only what the url itself says
+    const described = describeIntegrationLink(url);
+    if (described) {
+      return (
+        <NodeViewWrapper data-drag-handle="">
+          <Card
+            className={classes.card}
+            withBorder
+            padding="sm"
+            radius="sm"
+            component="a"
+            href={url}
+            target="_blank"
+            rel="noopener"
+            style={{ textDecoration: "none", color: "inherit" }}
+          >
+            <Group gap="sm" wrap="nowrap">
+              <div style={{ flexShrink: 0 }}>
+                {getIntegrationIcon(provider, 28)}
+              </div>
+              <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+                <Text size="sm" fw={600} truncate>
+                  {described.title}
+                </Text>
+                {described.description && (
+                  <Text size="xs" c="dimmed" lineClamp={1}>
+                    {described.description}
+                  </Text>
+                )}
+              </Stack>
+            </Group>
+          </Card>
+        </NodeViewWrapper>
+      );
+    }
+    return (
+      <NodeViewWrapper data-drag-handle="">
+        <Card className={classes.card} withBorder padding="sm" radius="sm">
+          <Anchor href={url} target="_blank" rel="noopener" size="sm">
+            {url}
+          </Anchor>
+        </Card>
+      </NodeViewWrapper>
+    );
+  }
+
+  const unfurlData = unfurl.data;
+
+  // metadata.ts marks legacy message unfurls stored before metadata.type existed.
+  const slackMeta = provider === "slack" ? unfurlData.metadata : null;
+  if (slackMeta?.type === "message" || (slackMeta && !slackMeta.type && slackMeta.ts)) {
+    return <SlackMessageCard url={url} unfurlData={unfurlData} />;
+  }
+
+  if (provider === "jira" && unfurlData.metadata?.issueKey) {
+    return <JiraIssueCard url={url} unfurlData={unfurlData} />;
+  }
+
+  if (provider === "figma") {
+    return <FigmaFileCard url={url} unfurlData={unfurlData} />;
+  }
+
+  return (
+    <NodeViewWrapper data-drag-handle="">
+      <Card
+        className={classes.card}
+        withBorder
+        padding="sm"
+        radius="sm"
+        component="a"
+        href={url}
+        target="_blank"
+        rel="noopener"
+        style={{ textDecoration: "none", color: "inherit" }}
+      >
+        <Group gap="sm" wrap="nowrap">
+          {unfurlData.authorAvatarUrl ? (
+            <Avatar src={unfurlData.authorAvatarUrl} size={28} radius="xl" style={{ flexShrink: 0 }} />
+          ) : (
+            <div style={{ flexShrink: 0 }}>{getIntegrationIcon(provider, 28)}</div>
+          )}
+
+          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
+            <Group gap="xs" wrap="nowrap">
+              <Text size="sm" fw={600} truncate>
+                {unfurlData.title}
+              </Text>
+              {unfurlData.status && (
+                <Badge
+                  size="xs"
+                  variant="light"
+                  color={toBadgeColor(unfurlData.statusColor)}
+                  c={badgeTextColor(toBadgeColor(unfurlData.statusColor))}
+                  style={{ flexShrink: 0 }}
+                >
+                  {unfurlData.status}
+                </Badge>
+              )}
+            </Group>
+
+            {unfurlData.description && (
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {unfurlData.description}
+              </Text>
+            )}
+          </Stack>
+
+          {provider && (
+            <div style={{ flexShrink: 0, alignSelf: "center" }}>
+              {getIntegrationIcon(provider, 18)}
+            </div>
+          )}
+        </Group>
+      </Card>
+    </NodeViewWrapper>
+  );
+}
+
+export default memo(IntegrationLinkView);
@@ -0,0 +1,253 @@
+import { NodeViewWrapper } from "@tiptap/react";
+import {
+  Avatar,
+  Badge,
+  Button,
+  Group,
+  HoverCard,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { memo, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import { describeIntegrationLink } from "@docmost/editor-ext";
+import { getIntegrationIcon } from "@/features/integration/components/integration-icons";
+import { getOAuthAuthorizeUrl } from "@/features/integration/services/integration-service";
+import { useUnfurl } from "./use-unfurl";
+import { badgeTextColor, toBadgeColor } from "./badge-color";
+import classes from "./integration-link-view.module.css";
+
+function shortUrl(url: string): string {
+  try {
+    const parsed = new URL(url);
+    return `${parsed.host}${parsed.pathname}`;
+  } catch {
+    return url;
+  }
+}
+
+function IntegrationMentionView(props: any) {
+  const { node } = props;
+  const { url, provider } = node.attrs;
+  const { t } = useTranslation();
+
+  const unfurl = useUnfurl(url);
+  const data = unfurl.state === "loaded" ? unfurl.data : null;
+  const needsConnection =
+    unfurl.state === "needsConnection" ? unfurl.needsConnection : null;
+  const [connecting, setConnecting] = useState(false);
+
+  const handleConnect = useCallback(
+    async (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!needsConnection) return;
+
+      setConnecting(true);
+      try {
+        const result = await getOAuthAuthorizeUrl({
+          integrationId: needsConnection.integrationId,
+          returnPath: window.location.pathname,
+        });
+        window.location.href = result.authorizationUrl;
+      } catch (error) {
+        setConnecting(false);
+        notifications.show({
+          message:
+            error?.["response"]?.data?.message ||
+            t("Failed to start OAuth connection"),
+          color: "red",
+        });
+      }
+    },
+    [needsConnection, t],
+  );
+  const meta = data?.metadata ?? {};
+  const isSlackMessage =
+    provider === "slack" && (meta.type === "message" || (!meta.type && meta.ts));
+  const issueNumber = meta.iid ?? meta.number;
+  const typeLabel =
+    meta.type === "project"
+      ? t("Project")
+      : meta.type === "initiative"
+        ? t("Initiative")
+        : null;
+
+  const statusBadge = data?.status ? (
+    <Badge
+      size="xs"
+      variant="light"
+      color={toBadgeColor(data.statusColor)}
+      c={badgeTextColor(toBadgeColor(data.statusColor))}
+      className={classes.mentionIcon}
+    >
+      {data.status}
+    </Badge>
+  ) : null;
+
+  let content;
+  if (!data) {
+    // anonymous / loading / error / needs-connection: a compact link chip.
+    // With no unfurl response, fall back to what the url text itself says.
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <span className={classes.mentionText}>
+          {needsConnection?.title ??
+            describeIntegrationLink(url)?.title ??
+            shortUrl(url)}
+        </span>
+      </>
+    );
+  } else if (isSlackMessage) {
+    content = (
+      <>
+        <Avatar
+          src={data.authorAvatarUrl}
+          size={16}
+          radius="xl"
+          className={classes.mentionIcon}
+        >
+          {(data.author ?? "?").charAt(0)}
+        </Avatar>
+        {data.author && (
+          <Text component="span" size="sm" c="dimmed">
+            {data.author}
+          </Text>
+        )}
+        <span className={classes.mentionText}>
+          {(data.description ?? "").split("\n")[0] || shortUrl(url)}
+        </span>
+        {getIntegrationIcon("slack", 14)}
+        {data.status && (
+          <Badge
+            size="xs"
+            variant="light"
+            color="gray"
+            c={badgeTextColor("gray")}
+            tt="none"
+            className={classes.mentionIcon}
+          >
+            {data.status}
+          </Badge>
+        )}
+      </>
+    );
+  } else if (meta.issueKey) {
+    // Jira: type icon leads, provider icon trails.
+    content = (
+      <>
+        {meta.issueTypeIconUrl ? (
+          <img
+            src={meta.issueTypeIconUrl}
+            width={14}
+            height={14}
+            alt=""
+            className={classes.mentionIcon}
+          />
+        ) : (
+          getIntegrationIcon(provider, 14)
+        )}
+        <Text component="span" size="sm" c="dimmed">
+          {meta.issueKey}
+        </Text>
+        <span className={classes.mentionText}>{data.title}</span>
+        {statusBadge}
+        {meta.issueTypeIconUrl && getIntegrationIcon(provider, 14)}
+      </>
+    );
+  } else if (issueNumber) {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <Text component="span" size="sm" c="dimmed">
+          #{issueNumber}
+        </Text>
+        <span className={classes.mentionText}>{data.title}</span>
+        {statusBadge}
+      </>
+    );
+  } else if (typeLabel) {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <Text component="span" size="sm" c="dimmed">
+          {typeLabel}
+        </Text>
+        <span className={classes.mentionText}>{data.title}</span>
+        {statusBadge}
+      </>
+    );
+  } else {
+    content = (
+      <>
+        {getIntegrationIcon(provider, 14)}
+        <span className={classes.mentionText}>{data.title || shortUrl(url)}</span>
+        {statusBadge}
+      </>
+    );
+  }
+
+  const anchor = (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener"
+      title={url}
+      className={classes.mention}
+    >
+      {content}
+    </a>
+  );
+
+  return (
+    <NodeViewWrapper as="span" style={{ display: "inline" }}>
+      {needsConnection ? (
+        <HoverCard
+          position="bottom-start"
+          shadow="md"
+          radius="md"
+          openDelay={150}
+          closeDelay={150}
+        >
+          <HoverCard.Target>{anchor}</HoverCard.Target>
+          <HoverCard.Dropdown p="sm">
+            <Stack gap="xs">
+              <Group gap={6} wrap="nowrap">
+                {getIntegrationIcon(provider, 16)}
+                <Text size="sm" fw={500}>
+                  {needsConnection.integrationName}
+                </Text>
+              </Group>
+              {needsConnection.oauthConnect ? (
+                <Button
+                  size="xs"
+                  variant="filled"
+                  color="dark"
+                  leftSection={getIntegrationIcon(provider, 16)}
+                  loading={connecting}
+                  onClick={handleConnect}
+                >
+                  {t("Connect to {{name}} to preview", {
+                    name: needsConnection.integrationName,
+                  })}
+                </Button>
+              ) : (
+                <Text size="xs" c="dimmed">
+                  {t("Use")} <code>/docmost help</code> {t("in")}{" "}
+                  {needsConnection.integrationName}{" "}
+                  {t("to link your account.")}
+                </Text>
+              )}
+            </Stack>
+          </HoverCard.Dropdown>
+        </HoverCard>
+      ) : (
+        anchor
+      )}
+    </NodeViewWrapper>
+  );
+}
+
+export default memo(IntegrationMentionView);
@@ -0,0 +1,205 @@
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { posToDOMRect, useEditorState } from "@tiptap/react";
+import { useCallback, useEffect, useState } from "react";
+import {
+  Button,
+  Paper,
+  Stack,
+  Text,
+  VisuallyHidden,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
+import { integrationPasteMenuKey } from "@/features/editor/extensions/integration-paste-menu";
+
+const INTEGRATION_NODE_TYPES = ["integrationLink", "integrationMention"];
+
+type PasteTarget = "card" | "mention" | "url";
+
+const PASTE_OPTIONS: { target: PasteTarget; label: string }[] = [
+  { target: "card", label: "Card" },
+  { target: "mention", label: "Mention" },
+  { target: "url", label: "URL" },
+];
+
+export function IntegrationPasteMenu({ editor }: EditorMenuProps) {
+  const { t } = useTranslation();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const menuState = useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return null;
+      return integrationPasteMenuKey.getState(ctx.editor.state) ?? null;
+    },
+  });
+
+  const findTarget = useCallback(() => {
+    const state = integrationPasteMenuKey.getState(editor.state);
+    if (!state) return null;
+    const node = editor.state.doc.nodeAt(state.pos);
+    if (!node || !INTEGRATION_NODE_TYPES.includes(node.type.name)) return null;
+    return { node, pos: state.pos };
+  }, [editor]);
+
+  const shouldShow = useCallback(() => Boolean(findTarget()), [findTarget]);
+
+  const getReferencedVirtualElement = useCallback(() => {
+    const target = findTarget();
+    if (!target) return undefined;
+    const dom = editor.view.nodeDOM(target.pos) as HTMLElement | null;
+    const domRect =
+      dom?.getBoundingClientRect?.() ??
+      posToDOMRect(
+        editor.view,
+        target.pos,
+        target.pos + target.node.nodeSize,
+      );
+    return {
+      getBoundingClientRect: () => domRect,
+      getClientRects: () => [domRect],
+    };
+  }, [editor, findTarget]);
+
+  const dismiss = useCallback(() => {
+    editor.view.dispatch(
+      editor.state.tr.setMeta(integrationPasteMenuKey, null),
+    );
+  }, [editor]);
+
+  const convert = useCallback(
+    (target: PasteTarget) => {
+      const found = findTarget();
+      if (!found) {
+        dismiss();
+        return;
+      }
+      const { node, pos } = found;
+      const attrs = { ...node.attrs };
+      const from = pos;
+      const to = pos + node.nodeSize;
+      const isBlock = node.type.name === "integrationLink";
+
+      // Always replace, even when the node is already in the requested form:
+      // the menu closes via the doc change, and BubbleMenu never re-evaluates
+      // on meta-only transactions, so a bare dismiss would leave it stuck.
+      let content: Record<string, any>;
+      if (target === "card") {
+        content = { type: "integrationLink", attrs };
+      } else if (target === "mention") {
+        const mention = { type: "integrationMention", attrs };
+        content = isBlock
+          ? {
+              type: "paragraph",
+              content: [mention, { type: "text", text: " " }],
+            }
+          : mention;
+      } else {
+        const linkText = {
+          type: "text",
+          text: attrs.url,
+          marks: [{ type: "link", attrs: { href: attrs.url } }],
+        };
+        content = isBlock
+          ? { type: "paragraph", content: [linkText] }
+          : linkText;
+      }
+
+      editor
+        .chain()
+        .focus(undefined, { scrollIntoView: false })
+        .deleteRange({ from, to })
+        .insertContentAt(from, content)
+        .run();
+    },
+    [editor, findTarget, dismiss],
+  );
+
+  useEffect(() => {
+    if (menuState) setSelectedIndex(0);
+  }, [menuState]);
+
+  // DOM focus stays in the editor (as with the slash menu); keys are handled
+  // here. Capture phase, because ProseMirror itself consumes arrow keys next
+  // to atom nodes (gap cursor / node selection) before they would bubble.
+  useEffect(() => {
+    if (!menuState) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        dismiss();
+        return;
+      }
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        const delta = event.key === "ArrowDown" ? 1 : -1;
+        setSelectedIndex(
+          (prev) =>
+            (prev + delta + PASTE_OPTIONS.length) % PASTE_OPTIONS.length,
+        );
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        event.stopPropagation();
+        convert(PASTE_OPTIONS[selectedIndex].target);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [menuState, dismiss, convert, selectedIndex]);
+
+  return (
+    <BaseBubbleMenu
+      editor={editor}
+      pluginKey="integration-paste-menu"
+      updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{ placement: "bottom-start", flip: true }}
+      shouldShow={shouldShow}
+    >
+      {/* Content is gated on the plugin state too: meta-only dismissals
+          (Escape) are invisible to BubbleMenu's update cycle. */}
+      {menuState ? (
+      <Paper
+        shadow="md"
+        radius="md"
+        withBorder
+        p={4}
+        miw={140}
+        role="listbox"
+        aria-label={t("Paste as")}
+        aria-activedescendant={`integration-paste-option-${PASTE_OPTIONS[selectedIndex].target}`}
+      >
+        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+          {t(PASTE_OPTIONS[selectedIndex].label)}
+        </VisuallyHidden>
+        <Text size="xs" c="dimmed" px={8} py={4}>
+          {t("Paste as")}
+        </Text>
+        <Stack gap={2}>
+          {PASTE_OPTIONS.map((option, index) => (
+            <Button
+              key={option.target}
+              id={`integration-paste-option-${option.target}`}
+              role="option"
+              aria-selected={index === selectedIndex}
+              variant={index === selectedIndex ? "light" : "subtle"}
+              color="gray"
+              size="compact-sm"
+              fullWidth
+              justify="flex-start"
+              onMouseEnter={() => setSelectedIndex(index)}
+              onClick={() => convert(option.target)}
+            >
+              {t(option.label)}
+            </Button>
+          ))}
+        </Stack>
+      </Paper>
+      ) : null}
+    </BaseBubbleMenu>
+  );
+}
@@ -0,0 +1,119 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createStore, Provider } from "jotai";
+import { ReactNode } from "react";
+import { useUnfurl } from "./use-unfurl";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { unfurlUrl } from "@/features/integration/services/integration-service";
+import {
+  UnfurlNeedsConnection,
+  UnfurlResult,
+} from "@/features/integration/types/integration.types";
+
+vi.mock("@/features/integration/services/integration-service", () => ({
+  unfurlUrl: vi.fn(),
+}));
+
+const mockedUnfurlUrl = vi.mocked(unfurlUrl);
+
+const ISSUE_URL = "https://github.com/acme/repo/issues/42";
+
+const loadedResult: UnfurlResult = {
+  title: "Fix race condition in file watcher",
+  url: ISSUE_URL,
+  provider: "github",
+  status: "open",
+};
+
+const needsConnectionResult: UnfurlNeedsConnection = {
+  needsConnection: true,
+  integrationId: "int-1",
+  integrationType: "github",
+  integrationName: "GitHub",
+  oauthConnect: true,
+  title: "GitHub link",
+  description: "github.com/acme/repo/issues/42",
+};
+
+function createWrapper(loggedIn: boolean) {
+  const store = createStore();
+  if (loggedIn) {
+    store.set(currentUserAtom, { user: { id: "user-1" } } as any);
+  }
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </Provider>
+  );
+}
+
+describe("useUnfurl", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.resetAllMocks();
+  });
+
+  it("never fetches for anonymous viewers and reports anonymous", () => {
+    const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
+      wrapper: createWrapper(false),
+    });
+
+    expect(result.current.state).toBe("anonymous");
+    expect(mockedUnfurlUrl).not.toHaveBeenCalled();
+  });
+
+  it("starts loading then exposes the unfurl result", async () => {
+    mockedUnfurlUrl.mockResolvedValue(loadedResult);
+
+    const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
+      wrapper: createWrapper(true),
+    });
+
+    expect(result.current.state).toBe("loading");
+    await waitFor(() => expect(result.current.state).toBe("loaded"));
+    expect(
+      result.current.state === "loaded" && result.current.data,
+    ).toEqual(loadedResult);
+    expect(mockedUnfurlUrl).toHaveBeenCalledWith({ url: ISSUE_URL });
+  });
+
+  it("maps a needsConnection response without treating it as an error", async () => {
+    mockedUnfurlUrl.mockResolvedValue(needsConnectionResult);
+
+    const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
+      wrapper: createWrapper(true),
+    });
+
+    await waitFor(() =>
+      expect(result.current.state).toBe("needsConnection"),
+    );
+    expect(
+      result.current.state === "needsConnection" &&
+        result.current.needsConnection,
+    ).toEqual(needsConnectionResult);
+  });
+
+  it("maps a null result (no matching provider) to error", async () => {
+    mockedUnfurlUrl.mockResolvedValue(null);
+
+    const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
+      wrapper: createWrapper(true),
+    });
+
+    await waitFor(() => expect(result.current.state).toBe("error"));
+  });
+
+  it("maps a rejected request to error", async () => {
+    mockedUnfurlUrl.mockRejectedValue(new Error("boom"));
+
+    const { result } = renderHook(() => useUnfurl(ISSUE_URL), {
+      wrapper: createWrapper(true),
+    });
+
+    await waitFor(() => expect(result.current.state).toBe("error"));
+  });
+});
@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAtomValue } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import { unfurlUrl } from "@/features/integration/services/integration-service";
+import {
+  UnfurlNeedsConnection,
+  UnfurlResult,
+} from "@/features/integration/types/integration.types";
+
+const UNFURL_STALE_TIME = 5 * 60 * 1000; // mirrors the server-side Redis TTL
+
+export type UnfurlState =
+  | { state: "anonymous" }
+  | { state: "loading" }
+  | { state: "error" }
+  | { state: "needsConnection"; needsConnection: UnfurlNeedsConnection }
+  | { state: "loaded"; data: UnfurlResult };
+
+// Resolves the unfurl per viewer at render time. Nothing is written back into
+// the document, so third-party permissions are enforced on every view:
+// unconnected viewers get needsConnection and anonymous viewers never fetch.
+export function useUnfurl(url: string): UnfurlState {
+  const currentUser = useAtomValue(currentUserAtom);
+  const isAuthenticated = Boolean(currentUser?.user);
+
+  const query = useQuery({
+    queryKey: ["unfurl", url],
+    queryFn: () => unfurlUrl({ url }),
+    enabled: isAuthenticated && Boolean(url),
+    staleTime: UNFURL_STALE_TIME,
+    retry: false,
+  });
+
+  if (!isAuthenticated || !url) {
+    return { state: "anonymous" };
+  }
+  if (query.isPending) {
+    return { state: "loading" };
+  }
+  if (query.isError || !query.data) {
+    return { state: "error" };
+  }
+  if ("needsConnection" in query.data) {
+    return { state: "needsConnection", needsConnection: query.data };
+  }
+  return { state: "loaded", data: query.data };
+}
@@ -57,6 +57,8 @@ import {
  Indent,
  UniqueID,
  SharedStorage,
+  IntegrationLink,
+  IntegrationMention,
  Columns,
  Column,
  Status,
@@ -95,6 +97,9 @@ import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-v
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
+import IntegrationLinkView from "@/features/editor/components/integration-link/integration-link-view.tsx";
+import IntegrationMentionView from "@/features/editor/components/integration-link/integration-mention-view.tsx";
+import { IntegrationPasteMenuExtension } from "@/features/editor/extensions/integration-paste-menu";
 import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx";
 import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx";
 import { BaseEmbedView } from "@/features/editor/components/base-embed/base-embed-view.tsx";
@@ -387,6 +392,13 @@ export const mainExtensions = [
  Subpages.configure({
    view: SubpagesView,
  }),
+  IntegrationLink.configure({
+    view: IntegrationLinkView,
+  }),
+  IntegrationMention.configure({
+    view: IntegrationMentionView,
+  }),
+  IntegrationPasteMenuExtension,
  Status.configure({
    view: StatusView,
  }),
@@ -0,0 +1,44 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export type IntegrationPasteMenuState = { pos: number } | null;
+
+export const integrationPasteMenuKey = new PluginKey<IntegrationPasteMenuState>(
+  "integrationPasteMenu",
+);
+
+// Holds the position of a just-pasted integration node so the "Paste as"
+// menu can anchor to it. Any other edit or selection change dismisses it.
+export const IntegrationPasteMenuExtension = Extension.create({
+  name: "integrationPasteMenu",
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: integrationPasteMenuKey,
+        state: {
+          init: (): IntegrationPasteMenuState => null,
+          apply(tr, prev): IntegrationPasteMenuState {
+            const meta = tr.getMeta(integrationPasteMenuKey);
+            if (meta !== undefined) return meta;
+            if (!prev) return null;
+            // Clicking or typing elsewhere dismisses.
+            if (tr.selectionSet) return null;
+            // Structural follow-ups (unique-id assignment, trailing node)
+            // keep the menu anchored: remap and re-validate the position.
+            if (tr.docChanged) {
+              const pos = tr.mapping.map(prev.pos);
+              const node = tr.doc.nodeAt(pos);
+              const isIntegrationNode =
+                node &&
+                (node.type.name === "integrationLink" ||
+                  node.type.name === "integrationMention");
+              return isIntegrationNode ? { pos } : null;
+            }
+            return prev;
+          },
+        },
+      }),
+    ];
+  },
+});
@@ -75,6 +75,8 @@ import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
 import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
+import { IntegrationPasteMenu } from "@/features/editor/components/integration-link/integration-paste-menu.tsx";
+import { getInstalledIntegrations } from "@/features/integration/services/integration-service";
 import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
 import { useTranslation } from "react-i18next";
 import {
@@ -326,6 +328,18 @@ function CollabPageEditor({
    [pageId, editable, extensions],
  );

+  useEffect(() => {
+    // Warm the cache the paste handler reads to decide whether a pasted
+    // integration url becomes a card or stays an ordinary link. gcTime
+    // Infinity: no observer holds this query, and the default 5-minute gc
+    // would evict it mid-session, silently downgrading pastes to plain links.
+    queryClient.prefetchQuery({
+      queryKey: ["installed-integrations"],
+      queryFn: getInstalledIntegrations,
+      gcTime: Infinity,
+    });
+  }, []);
+
  useLayoutEffect(() => {
    if (editor && !editor.isDestroyed) {
      // @ts-ignore
@@ -454,6 +468,7 @@ function CollabPageEditor({
            <ExcalidrawMenu editor={editor} />
            <DrawioMenu editor={editor} />
            <ColumnsMenu editor={editor} />
+            <IntegrationPasteMenu editor={editor} />
          </div>
        )}
        {editor && !editorIsEditable && (editable || canComment) && (
@@ -0,0 +1,93 @@
+import { Group, Text, Button, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { IntegrationDefinition, UserConnection } from "../types/integration.types";
+import { getIntegrationIcon } from "./integration-icons";
+
+type ConnectionRowProps = {
+  definition: IntegrationDefinition;
+  connection?: UserConnection;
+  onConnect: (type: string) => void;
+  onDisconnect: (integrationId: string) => void;
+  disconnectingId?: string;
+};
+
+export default function ConnectionRow({
+  definition,
+  connection,
+  onConnect,
+  onDisconnect,
+  disconnectingId,
+}: ConnectionRowProps) {
+  const { t } = useTranslation();
+  const connectedLabel =
+    connection?.providerDisplayName || connection?.providerUserId;
+
+  return (
+    <Box
+      py="sm"
+      px="xs"
+      style={{
+        borderBottom: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="sm" wrap="nowrap">
+          {getIntegrationIcon(definition.type, 28)}
+          <div>
+            <Text size="sm" fw={500}>
+              {definition.name}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {definition.description}
+            </Text>
+          </div>
+        </Group>
+
+        <Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
+          {connection ? (
+            <>
+              {connection.invalidatedAt ? (
+                <>
+                  <Text size="xs" c="orange">
+                    {t("Connection expired")}
+                  </Text>
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="orange"
+                    onClick={() => onConnect(definition.type)}
+                  >
+                    {t("Reconnect")}
+                  </Button>
+                </>
+              ) : (
+                <Text size="xs" c="green">
+                  {connectedLabel
+                    ? t("Connected as {{label}}", { label: connectedLabel })
+                    : t("Connected")}
+                </Text>
+              )}
+              <Button
+                size="xs"
+                variant="subtle"
+                color="red"
+                onClick={() => onDisconnect(connection.integrationId)}
+                loading={disconnectingId === connection.integrationId}
+              >
+                {t("Disconnect")}
+              </Button>
+            </>
+          ) : (
+            <Button
+              size="xs"
+              variant="light"
+              onClick={() => onConnect(definition.type)}
+            >
+              {t("Connect")}
+            </Button>
+          )}
+        </Group>
+      </Group>
+    </Box>
+  );
+}
@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import {
+  FigmaIcon,
+  GithubIcon,
+  GitlabIcon,
+  GoogleDocsIcon,
+  JiraIcon,
+  LinearIcon,
+  SlackIcon,
+} from "@/components/icons";
+import { IconPuzzle } from "@tabler/icons-react";
+
+const integrationIconMap: Record<string, (size: number) => ReactNode> = {
+  github: (size) => <GithubIcon size={size} />,
+  gitlab: (size) => <GitlabIcon size={size} />,
+  slack: (size) => <SlackIcon size={size} />,
+  linear: (size) => <LinearIcon size={size} />,
+  jira: (size) => <JiraIcon size={size} />,
+  figma: (size) => <FigmaIcon size={size} />,
+  google_docs: (size) => <GoogleDocsIcon size={size} />,
+};
+
+export function getIntegrationIcon(
+  type: string,
+  size: number,
+): ReactNode {
+  const renderIcon = integrationIconMap[type];
+  if (renderIcon) return renderIcon(size);
+  return <IconPuzzle size={size} stroke={1.5} />;
+}
@@ -0,0 +1,66 @@
+import { Box, Group, Skeleton, Stack } from "@mantine/core";
+
+const TITLE_WIDTHS = [64, 52, 60, 44, 58, 96, 56];
+const DESCRIPTION_WIDTHS = [300, 250, 320, 180, 290, 270, 260];
+
+type IntegrationListSkeletonProps = {
+  rows?: number;
+  withBadges?: boolean;
+};
+
+export default function IntegrationListSkeleton({
+  rows = 7,
+  withBadges = true,
+}: IntegrationListSkeletonProps) {
+  return (
+    <Stack gap={0} aria-hidden="true">
+      {Array.from({ length: rows }, (_, index) => (
+        <Box
+          key={index}
+          py="sm"
+          px="xs"
+          style={{
+            borderBottom: "1px solid var(--mantine-color-default-border)",
+          }}
+        >
+          <Group justify="space-between" wrap="nowrap">
+            <Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+              <Skeleton height={28} circle style={{ flexShrink: 0 }} />
+              <Stack gap={2} style={{ minWidth: 0 }}>
+                <Group gap="xs" wrap="nowrap" h={20}>
+                  <Skeleton
+                    height={12}
+                    width={TITLE_WIDTHS[index % TITLE_WIDTHS.length]}
+                    radius="xs"
+                  />
+                  {withBadges && (
+                    <>
+                      <Skeleton height={16} width={52} radius="xl" />
+                      <Skeleton height={16} width={52} radius="xl" />
+                    </>
+                  )}
+                </Group>
+                <Group h={17}>
+                  <Skeleton
+                    height={10}
+                    width={
+                      DESCRIPTION_WIDTHS[index % DESCRIPTION_WIDTHS.length]
+                    }
+                    maw="100%"
+                    radius="xs"
+                  />
+                </Group>
+              </Stack>
+            </Group>
+            <Skeleton
+              height={30}
+              width={64}
+              radius="sm"
+              style={{ flexShrink: 0 }}
+            />
+          </Group>
+        </Box>
+      ))}
+    </Stack>
+  );
+}
@@ -0,0 +1,93 @@
+import {
+  Group,
+  Text,
+  Badge,
+  Button,
+  Box,
+  Stack,
+  Tooltip,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import {
+  IntegrationDefinition,
+  Integration,
+} from "../types/integration.types";
+import { getIntegrationIcon } from "./integration-icons";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";
+
+type IntegrationRowProps = {
+  definition: IntegrationDefinition;
+  installation?: Integration;
+  onInstall: (type: string) => void;
+  onUninstall: (integrationId: string) => void;
+};
+
+export default function IntegrationRow({
+  definition,
+  installation,
+  onInstall,
+  onUninstall,
+}: IntegrationRowProps) {
+  const { t } = useTranslation();
+  const isInstalled = !!installation;
+  const hasAccess = useHasFeature(Feature.INTEGRATIONS);
+  const locked = !!definition.requiresLicense && !hasAccess;
+  const upgradeLabel = useUpgradeLabel();
+
+  return (
+    <Box
+      py="sm"
+      px="xs"
+      style={{
+        borderBottom: "1px solid var(--mantine-color-default-border)",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap="sm" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
+          {getIntegrationIcon(definition.type, 28)}
+          <Stack gap={2} style={{ minWidth: 0 }}>
+            <Group gap="xs" wrap="nowrap">
+              <Text size="sm" fw={500}>
+                {definition.name}
+              </Text>
+              {locked && (
+                <Badge size="xs" variant="light" color="violet">
+                  {t("Paid")}
+                </Badge>
+              )}
+            </Group>
+            <Text size="xs" c="dimmed" truncate>
+              {definition.description}
+            </Text>
+          </Stack>
+        </Group>
+
+        <Group gap="sm" wrap="nowrap" style={{ flexShrink: 0 }}>
+          {isInstalled ? (
+            <Button
+              size="xs"
+              variant="subtle"
+              color="red"
+              onClick={() => onUninstall(installation.id)}
+            >
+              {t("Uninstall")}
+            </Button>
+          ) : (
+            <Tooltip label={upgradeLabel} disabled={!locked}>
+              <Button
+                size="xs"
+                variant="light"
+                disabled={locked}
+                onClick={() => onInstall(definition.type)}
+              >
+                {t("Install")}
+              </Button>
+            </Tooltip>
+          )}
+        </Group>
+      </Group>
+    </Box>
+  );
+}
@@ -0,0 +1,134 @@
+import { Text, Alert, Stack } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import { getAppName } from "@/lib/config";
+import SettingsTitle from "@/components/settings/settings-title";
+import ConnectionRow from "../components/connection-row";
+import IntegrationListSkeleton from "../components/integration-list-skeleton";
+import {
+  useAvailableIntegrations,
+  useInstalledIntegrations,
+  useMyConnections,
+  useDisconnectIntegration,
+} from "../queries/integration-query";
+import * as integrationService from "../services/integration-service";
+
+export default function Connections() {
+  const { t } = useTranslation();
+  const { data: available, isLoading: loadingAvailable } =
+    useAvailableIntegrations();
+  const { data: installed, isLoading: loadingInstalled } =
+    useInstalledIntegrations();
+  const { data: myConnections, isLoading: loadingConnections } =
+    useMyConnections();
+  const disconnectMutation = useDisconnectIntegration();
+
+  const isLoading = loadingAvailable || loadingInstalled || loadingConnections;
+
+  const handleConnect = async (type: string) => {
+    const integration = installed?.find((i) => i.type === type);
+    if (!integration) return;
+
+    try {
+      // Workspace-scoped providers default the OAuth return to the admin
+      // integrations page; members connecting here must come back here.
+      const result = await integrationService.getOAuthAuthorizeUrl({
+        integrationId: integration.id,
+        returnPath: "/settings/account/connections",
+      });
+      window.location.href = result.authorizationUrl;
+    } catch (error) {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to start OAuth connection"),
+        color: "red",
+      });
+    }
+  };
+
+  const handleDisconnect = (integrationId: string) => {
+    const installation = installed?.find((i) => i.id === integrationId);
+    const name =
+      available?.find((d) => d.type === installation?.type)?.name ??
+      installation?.type ??
+      "";
+    modals.openConfirmModal({
+      title: t("Disconnect {{name}}", { name }),
+      centered: true,
+      children: (
+        <Text size="sm">
+          {t(
+            "This disconnects your {{name}} account. Links are not enriched for you until you reconnect.",
+            { name },
+          )}
+        </Text>
+      ),
+      labels: { confirm: t("Disconnect"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => disconnectMutation.mutate({ integrationId }),
+    });
+  };
+
+  // Only the row being disconnected shows a loader; isPending alone is shared by every row.
+  const disconnectingId = disconnectMutation.isPending
+    ? disconnectMutation.variables?.integrationId
+    : undefined;
+
+  const error = new URLSearchParams(window.location.search).get("error");
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t("Connections")} - {getAppName()}
+        </title>
+      </Helmet>
+
+      <SettingsTitle title={t("Connections")} />
+
+      <Text size="sm" c="dimmed" mb="md">
+        {t("Manage the apps you have connected to your account.")}
+      </Text>
+
+      {error === "oauth_failed" && (
+        <Alert color="red" mb="md">
+          {t("OAuth connection failed. Please try again.")}
+        </Alert>
+      )}
+
+      {isLoading ? (
+        <IntegrationListSkeleton rows={3} withBadges={false} />
+      ) : !available?.length ? (
+        <Text c="dimmed" size="sm">
+          {t("No integrations available.")}
+        </Text>
+      ) : (
+        <Stack gap={0}>
+          {available
+            .filter((def) => {
+              if (!def.capabilities.includes("oauth")) return false;
+              return installed?.some((i) => i.type === def.type);
+            })
+            .map((def) => {
+              const connection = myConnections?.find(
+                (c) => c.type === def.type,
+              );
+
+              return (
+                <ConnectionRow
+                  key={def.type}
+                  definition={def}
+                  connection={connection}
+                  onConnect={handleConnect}
+                  onDisconnect={handleDisconnect}
+                  disconnectingId={disconnectingId}
+                />
+              );
+            })}
+        </Stack>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,126 @@
+import { Text, Alert, Stack } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+import { getAppName } from "@/lib/config";
+import SettingsTitle from "@/components/settings/settings-title";
+import IntegrationRow from "../components/integration-row";
+import IntegrationListSkeleton from "../components/integration-list-skeleton";
+import {
+  useAvailableIntegrations,
+  useInstalledIntegrations,
+  useInstallIntegration,
+  useUninstallIntegration,
+} from "../queries/integration-query";
+import { getOAuthInstallUrl } from "../services/integration-service";
+import { notifications } from "@mantine/notifications";
+
+export default function Integrations() {
+  const { t } = useTranslation();
+  const { data: available, isLoading: loadingAvailable } =
+    useAvailableIntegrations();
+  const { data: installed, isLoading: loadingInstalled } =
+    useInstalledIntegrations();
+  const installMutation = useInstallIntegration();
+  const uninstallMutation = useUninstallIntegration();
+
+  const handleInstall = useCallback(
+    async (type: string) => {
+      const definition = available?.find((d) => d.type === type);
+
+      // OAuth providers only become installed once the admin's OAuth
+      // callback succeeds; a cancelled or failed flow persists nothing.
+      if (definition?.capabilities?.includes("oauth")) {
+        try {
+          const { authorizationUrl } = await getOAuthInstallUrl({ type });
+          window.location.href = authorizationUrl;
+        } catch (err: any) {
+          notifications.show({
+            message:
+              err?.response?.data?.message ?? t("Failed to start installation"),
+            color: "red",
+          });
+        }
+        return;
+      }
+
+      installMutation.mutate({ type });
+    },
+    [installMutation, available, t],
+  );
+
+  const handleUninstall = useCallback(
+    (integrationId: string) => {
+      const installation = installed?.find((i) => i.id === integrationId);
+      const name =
+        available?.find((d) => d.type === installation?.type)?.name ??
+        installation?.type ??
+        "";
+      modals.openConfirmModal({
+        title: t("Uninstall {{name}}", { name }),
+        centered: true,
+        children: (
+          <Text size="sm">
+            {t(
+              "This disables the {{name}} integration for the entire workspace. Members' connections are removed and links are not enriched.",
+              { name },
+            )}
+          </Text>
+        ),
+        labels: { confirm: t("Uninstall"), cancel: t("Cancel") },
+        confirmProps: { color: "red" },
+        onConfirm: () => uninstallMutation.mutate({ integrationId }),
+      });
+    },
+    [uninstallMutation, installed, available, t],
+  );
+
+  const isLoading = loadingAvailable || loadingInstalled;
+  const error = new URLSearchParams(window.location.search).get("error");
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {t("Integrations")} - {getAppName()}
+        </title>
+      </Helmet>
+
+      <SettingsTitle title={t("Integrations")} />
+
+      <Text size="sm" c="dimmed" mb="md">
+        {t("Manage workspace integrations.")}
+      </Text>
+
+      {error === "oauth_failed" && (
+        <Alert color="red" mb="md">
+          {t("OAuth connection failed. Please try again.")}
+        </Alert>
+      )}
+
+      {isLoading ? (
+        <IntegrationListSkeleton />
+      ) : !available?.length ? (
+        <Text c="dimmed" size="sm">
+          {t("No integrations available.")}
+        </Text>
+      ) : (
+        <Stack gap={0}>
+          {available.map((def) => {
+            const installation = installed?.find((i) => i.type === def.type);
+            return (
+              <IntegrationRow
+                key={def.type}
+                definition={def}
+                installation={installation}
+                onInstall={handleInstall}
+                onUninstall={handleUninstall}
+              />
+            );
+          })}
+        </Stack>
+      )}
+    </>
+  );
+}
@@ -0,0 +1,112 @@
+import { useEffect, useState } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { Alert, Button, Card, Group, Loader, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import {
+  decodeSlackLinkState,
+  confirmSlackLink,
+  SlackLinkStateInfo,
+} from "../services/slack-link-service";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
+import APP_ROUTE from "@/lib/app-route";
+
+export default function SlackLinkPage() {
+  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const state = searchParams.get("state");
+  const currentUser = useAtomValue(currentUserAtom);
+
+  const [info, setInfo] = useState<SlackLinkStateInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    if (!currentUser) {
+      const redirectPath = window.location.pathname + window.location.search;
+      navigate(`${APP_ROUTE.AUTH.LOGIN}?redirect=${encodeURIComponent(redirectPath)}`);
+      return;
+    }
+
+    if (!state) {
+      setError(t("Missing state parameter"));
+      return;
+    }
+
+    decodeSlackLinkState(state)
+      .then(setInfo)
+      .catch((e) => setError(e?.response?.data?.message ?? e.message));
+  }, [state, t, currentUser, navigate]);
+
+  async function onConfirm() {
+    if (!state) return;
+    setSubmitting(true);
+    try {
+      await confirmSlackLink(state);
+      setDone(true);
+    } catch (e: any) {
+      setError(e?.response?.data?.message ?? e.message);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (done) {
+    return (
+      <Card maw={500} mx="auto" mt={80} p="lg">
+        <Stack>
+          <Text fw={600}>{t("Connected")}</Text>
+          <Text c="dimmed">{t("You can close this tab and return to Slack.")}</Text>
+        </Stack>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card maw={500} mx="auto" mt={80} p="lg">
+        <Alert color="red" title={t("Could not link account")}>
+          {error}
+        </Alert>
+      </Card>
+    );
+  }
+
+  if (!info || !currentUser) {
+    return (
+      <div style={{ display: "flex", justifyContent: "center", marginTop: 80 }}>
+        <Loader />
+      </div>
+    );
+  }
+
+  return (
+    <Card maw={500} mx="auto" mt={80} p="lg">
+      <Stack>
+        <Text fw={600}>{t("Link your Docmost account to Slack")}</Text>
+        <Text>
+          {t("Connect Docmost account")}{" "}
+          <b>{currentUser.user.email}</b>{" "}
+          {t("to Slack user")} <b>@{info.slackUserName}</b>
+          {info.slackTeamName && (
+            <>
+              {" "}
+              {t("in")} <b>{info.slackTeamName}</b>
+            </>
+          )}
+          ?
+        </Text>
+        <Group justify="flex-end">
+          <Button variant="default" onClick={() => window.close()}>
+            {t("Cancel")}
+          </Button>
+          <Button onClick={onConfirm} loading={submitting}>
+            {t("Confirm")}
+          </Button>
+        </Group>
+      </Stack>
+    </Card>
+  );
+}
@@ -0,0 +1,100 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { notifications } from "@mantine/notifications";
+import * as integrationService from "../services/integration-service";
+
+export function useAvailableIntegrations() {
+  return useQuery({
+    queryKey: ["available-integrations"],
+    queryFn: integrationService.getAvailableIntegrations,
+  });
+}
+
+export function useInstalledIntegrations() {
+  return useQuery({
+    queryKey: ["installed-integrations"],
+    queryFn: integrationService.getInstalledIntegrations,
+  });
+}
+
+export function useInstallIntegration() {
+  const qc = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: integrationService.installIntegration,
+    onSuccess: () => {
+      notifications.show({ message: t("Integration installed successfully") });
+      qc.invalidateQueries({ queryKey: ["installed-integrations"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to install integration"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUninstallIntegration() {
+  const qc = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: integrationService.uninstallIntegration,
+    onSuccess: () => {
+      notifications.show({
+        message: t("Integration uninstalled successfully"),
+      });
+      qc.invalidateQueries({ queryKey: ["installed-integrations"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to uninstall integration"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useMyConnections() {
+  return useQuery({
+    queryKey: ["my-connections"],
+    queryFn: integrationService.getMyConnections,
+  });
+}
+
+export function useConnectionStatus(integrationId: string | undefined) {
+  return useQuery({
+    queryKey: ["integration-connection", integrationId],
+    queryFn: () =>
+      integrationService.getConnectionStatus({
+        integrationId: integrationId!,
+      }),
+    enabled: !!integrationId,
+  });
+}
+
+export function useDisconnectIntegration() {
+  const qc = useQueryClient();
+  const { t } = useTranslation();
+  return useMutation({
+    mutationFn: integrationService.disconnectIntegration,
+    onSuccess: (_data, variables) => {
+      notifications.show({ message: t("Integration disconnected") });
+      qc.invalidateQueries({
+        queryKey: ["integration-connection", variables.integrationId],
+      });
+      qc.invalidateQueries({ queryKey: ["my-connections"] });
+      // removeQueries, not invalidate: refetchOnMount false leaves invalidated inactive queries unrefreshed
+      qc.removeQueries({ queryKey: ["unfurl"] });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to disconnect integration"),
+        color: "red",
+      });
+    },
+  });
+}
@@ -0,0 +1,92 @@
+import api from "@/lib/api-client";
+import {
+  IntegrationDefinition,
+  Integration,
+  ConnectionStatus,
+  UserConnection,
+  UnfurlResult,
+  UnfurlNeedsConnection,
+} from "../types/integration.types";
+
+export async function getAvailableIntegrations(): Promise<
+  IntegrationDefinition[]
+> {
+  const req = await api.post<IntegrationDefinition[]>(
+    "/integrations/available",
+  );
+  return req.data;
+}
+
+export async function getInstalledIntegrations(): Promise<Integration[]> {
+  const req = await api.post<Integration[]>("/integrations/list");
+  return req.data;
+}
+
+export async function installIntegration(data: {
+  type: string;
+}): Promise<Integration> {
+  const req = await api.post<Integration>("/integrations/install", data);
+  return req.data;
+}
+
+export async function uninstallIntegration(data: {
+  integrationId: string;
+}): Promise<void> {
+  await api.post("/integrations/uninstall", data);
+}
+
+export async function getMyConnections(): Promise<UserConnection[]> {
+  const req = await api.post<UserConnection[]>("/integrations/connections/mine");
+  return req.data;
+}
+
+export async function getConnectionStatus(data: {
+  integrationId: string;
+}): Promise<ConnectionStatus> {
+  const req = await api.post<ConnectionStatus>(
+    "/integrations/connection/status",
+    data,
+  );
+  return req.data;
+}
+
+export async function getOAuthAuthorizeUrl(data: {
+  integrationId: string;
+  returnPath?: string;
+}): Promise<{ authorizationUrl: string }> {
+  const req = await api.post<{ authorizationUrl: string }>(
+    "/integrations/oauth/authorize",
+    data,
+  );
+  return req.data;
+}
+
+/**
+ * For workspace-scoped providers: returns the authorize URL WITHOUT creating
+ * the integration row. The row is created atomically when the OAuth callback
+ * succeeds; a cancelled OAuth leaves no half-installed state.
+ */
+export async function getOAuthInstallUrl(data: {
+  type: string;
+}): Promise<{ authorizationUrl: string }> {
+  const req = await api.post<{ authorizationUrl: string }>(
+    "/integrations/oauth/install",
+    data,
+  );
+  return req.data;
+}
+
+export async function disconnectIntegration(data: {
+  integrationId: string;
+}): Promise<void> {
+  await api.post("/integrations/oauth/disconnect", data);
+}
+
+export async function unfurlUrl(data: {
+  url: string;
+}): Promise<UnfurlResult | UnfurlNeedsConnection | null> {
+  const req = await api.post<{
+    data: UnfurlResult | UnfurlNeedsConnection | null;
+  }>("/integrations/unfurl", data);
+  return req.data.data;
+}
@@ -0,0 +1,23 @@
+import api from "@/lib/api-client";
+
+export type SlackLinkStateInfo = {
+  slackUserName: string;
+  slackUserId: string;
+  slackTeamId: string;
+  slackTeamName: string | null;
+  integrationWorkspaceId: string | undefined;
+};
+
+export async function decodeSlackLinkState(
+  state: string,
+): Promise<SlackLinkStateInfo> {
+  const req = await api.post<SlackLinkStateInfo>(
+    "/integrations/slack/link/state",
+    { state },
+  );
+  return req.data;
+}
+
+export async function confirmSlackLink(state: string): Promise<void> {
+  await api.post("/integrations/slack/link", { state });
+}
@@ -0,0 +1,69 @@
+export type IntegrationCapability = "oauth" | "unfurl" | "actions";
+
+export type OAuthConfig = {
+  authUrl: string;
+  tokenUrl: string;
+  scopes: string[];
+  connectionScope?: 'workspace' | 'user';
+};
+
+export type IntegrationDefinition = {
+  type: string;
+  name: string;
+  description: string;
+  icon: string;
+  capabilities: IntegrationCapability[];
+  oauth?: OAuthConfig;
+  requiresLicense?: boolean;
+};
+
+export type Integration = {
+  id: string;
+  workspaceId: string;
+  type: string;
+  settings: Record<string, any> | null;
+  installedById: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type ConnectionStatus = {
+  connected: boolean;
+  providerUserId?: string;
+};
+
+export type UserConnection = {
+  integrationId: string;
+  type: string;
+  providerUserId: string | null;
+  providerDisplayName: string | null;
+  connectedAt: string;
+  invalidatedAt: string | null;
+};
+
+export type UnfurlResult = {
+  title: string;
+  description?: string;
+  url: string;
+  provider: string;
+  providerIcon?: string;
+  status?: string;
+  statusColor?: string;
+  author?: string;
+  authorAvatarUrl?: string;
+  metadata?: Record<string, any>;
+};
+
+// Returned when the link's provider needs a per-user connection the
+// requesting user has not authorized yet.
+export type UnfurlNeedsConnection = {
+  needsConnection: true;
+  integrationId: string;
+  integrationType: string;
+  integrationName: string;
+  // false for workspace-scoped providers (Slack): linking happens on the
+  // provider's side, so no Docmost-initiated OAuth button.
+  oauthConnect: boolean;
+  title: string;
+  description?: string;
+};
@@ -27,6 +27,7 @@ const APP_ROUTE = {
      SPACES: "/settings/spaces",
      BILLING: "/settings/billing",
      SECURITY: "/settings/security",
+      INTEGRATIONS: "/settings/integrations",
    },
  },
 };