feat(rich-editor): render mentions as icon chips + menu/limit polish

- Render @ mentions as an inline chip node (entity icon + label) instead of a
  blue link; still serializes to the portable [label](sim:kind/id) markdown so
  it round-trips and stays agent-readable (shared mentionIcon resolver)
- Cap the mention/slash menu height + width and scroll it, matching the chat menu
- Give the version description editor more height; lift the 2000-char limit to a
  high anti-abuse cap (client + contract) and drop the visible counter

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions.ts

@@ -17,7 +17,7 @@ import { MarkdownImage, ResizableImage } from './image'
 import { RichMarkdownKeymap } from './keymap'
 import { MarkdownLinkInputRule } from './link-input-rule'
 import { MarkdownPaste } from './markdown-paste'
-import { Mention, SIM_LINK_SCHEME } from './mention'
+import { MarkdownMention, Mention, MentionChip, SIM_LINK_SCHEME } from './mention'
 import { SlashCommand } from './slash-command/slash-command'
 
 /**
@@ -94,6 +94,7 @@ export function createMarkdownContentExtensions({
     InlineCode,
     codeBlock,
     (nodeViews ? ResizableImage : MarkdownImage).configure({ allowBase64: true }),
+    nodeViews ? MentionChip : MarkdownMention,
     TaskList,
     TaskItem.configure({ nested: true }),
     PipeSafeTable.configure({ resizable: true }),

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/index.ts

@@ -1,4 +1,5 @@
 export { Mention, type MentionStorage } from './mention'
+export { MarkdownMention, MentionChip } from './mention-node'
 export { parseSimHref, SIM_LINK_SCHEME, simLinkPath, toSimHref } from './sim-link'
 export type { MentionItem, MentionKind } from './types'
 export { useEditorMentions } from './use-editor-mentions'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-icon.ts

@@ -0,0 +1,26 @@
+import type { ComponentType } from 'react'
+import { Database, File, Folder, Sparkles, Table, Workflow } from 'lucide-react'
+import { getBlock } from '@/blocks/registry'
+import type { MentionKind } from './types'
+
+/** Icon component shape both the lucide kind-icons and the brand block icons satisfy. */
+export type MentionIcon = ComponentType<{ className?: string }>
+
+const KIND_ICONS: Record<Exclude<MentionKind, 'integration'>, MentionIcon> = {
+  file: File,
+  folder: Folder,
+  table: Table,
+  knowledge: Database,
+  workflow: Workflow,
+  skill: Sparkles,
+}
+
+/**
+ * Resolves the icon for a mention. Integrations use their brand icon from the block registry (keyed by
+ * blockType, which is the mention `id`); every other kind uses a lucide category icon. Shared by the
+ * menu rows and the inserted chip so both render the same icon.
+ */
+export function mentionIcon(kind: MentionKind, id: string): MentionIcon | undefined {
+  if (kind === 'integration') return getBlock(id)?.icon as MentionIcon | undefined
+  return KIND_ICONS[kind]
+}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-node.test.ts

@@ -0,0 +1,43 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * The `@`-mention is stored as a portable `[label](sim:<kind>/<id>)` markdown link but parses into a
+ * dedicated `mention` node (rendered live as a chip). These guard that the parse → node → serialize
+ * cycle is lossless, so the chat-portable wire format and the chip rendering stay in sync.
+ */
+import type { JSONContent } from '@tiptap/core'
+import { describe, expect, it } from 'vitest'
+import { parseMarkdownToDoc, serializeMarkdownBody } from '../markdown-parse'
+
+function findMention(node: JSONContent): JSONContent | null {
+  if (node.type === 'mention') return node
+  for (const child of node.content ?? []) {
+    const found = findMention(child)
+    if (found) return found
+  }
+  return null
+}
+
+describe('mention node round-trip', () => {
+  it('parses a sim: link into a mention node with kind/id/label', () => {
+    const doc = parseMarkdownToDoc('See [Airweave](sim:integration/airweave) here')
+    const mention = findMention(doc)
+    expect(mention).not.toBeNull()
+    expect(mention?.attrs).toEqual({ kind: 'integration', id: 'airweave', label: 'Airweave' })
+  })
+
+  it('serializes a mention node back to the portable sim: link', () => {
+    for (const input of [
+      'See [Airweave](sim:integration/airweave) here',
+      '[my-skill](sim:skill/abc-123)',
+      'a [Spec.md](sim:file/xyz_789) b',
+    ]) {
+      expect(serializeMarkdownBody(input).trim()).toBe(input)
+    }
+  })
+
+  it('leaves a normal http link as a link, not a mention', () => {
+    const doc = parseMarkdownToDoc('[Sim](https://sim.ai)')
+    expect(findMention(doc)).toBeNull()
+  })
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-node.tsx

@@ -0,0 +1,121 @@
+import type { MouseEvent } from 'react'
+import type { JSONContent, MarkdownToken } from '@tiptap/core'
+import { Node } from '@tiptap/core'
+import type { ReactNodeViewProps } from '@tiptap/react'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import { useParams, useRouter } from 'next/navigation'
+import { cn } from '@/lib/core/utils/cn'
+import { mentionIcon } from './mention-icon'
+import { simLinkPath, toSimHref } from './sim-link'
+import type { MentionKind } from './types'
+
+interface MentionAttrs {
+  kind: MentionKind
+  id: string
+  label: string
+}
+
+/** The markdown form of a mention — the chat's portable `[label](sim:<kind>/<id>)` link. */
+const MENTION_MD_RE = /^\[([^\]]+)\]\(sim:([a-z_]+)\/([^)\s]+)\)/
+
+/** Custom fields the mention tokenizer hangs on the marked token (all optional, like the image token). */
+interface MentionTokenFields {
+  label?: string
+  kind?: string
+  id?: string
+}
+
+/**
+ * Inline atom node for an `@`-mention. Renders (live) as a chip with the entity's icon, but serializes
+ * to the portable `[label](sim:<kind>/<id>)` markdown link — so the saved content is identical to a
+ * plain link (agent-readable, round-trips through the chat's `chip-clipboard-codec`) while the editor
+ * shows it as a chip rather than a blue link. Shared by the headless round-trip path (no node view)
+ * and the live {@link MentionChip}, mirroring the image node's split.
+ */
+export const MarkdownMention = Node.create({
+  name: 'mention',
+  inline: true,
+  group: 'inline',
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes() {
+    return {
+      kind: { default: '' },
+      id: { default: '' },
+      label: { default: '' },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-mention]',
+        getAttrs: (element) => ({
+          kind: element.getAttribute('data-kind') ?? '',
+          id: element.getAttribute('data-id') ?? '',
+          label: element.textContent ?? '',
+        }),
+      },
+    ]
+  },
+
+  renderHTML({ node }) {
+    const { kind, id, label } = node.attrs as MentionAttrs
+    return ['span', { 'data-mention': '', 'data-kind': kind, 'data-id': id }, label]
+  },
+
+  markdownTokenizer: {
+    name: 'mention',
+    level: 'inline' as const,
+    start: (src: string) => src.indexOf('['),
+    tokenize: (src: string): (MentionTokenFields & { type: string; raw: string }) | undefined => {
+      const match = MENTION_MD_RE.exec(src)
+      if (!match) return undefined
+      return { type: 'mention', raw: match[0], label: match[1], kind: match[2], id: match[3] }
+    },
+  },
+  parseMarkdown: (token: MarkdownToken): JSONContent => {
+    const { kind, id, label } = token as MentionTokenFields
+    return { type: 'mention', attrs: { kind: kind ?? '', id: id ?? '', label: label ?? '' } }
+  },
+  renderMarkdown: (node: JSONContent): string => {
+    const { kind, id, label } = (node.attrs ?? {}) as MentionAttrs
+    return `[${label}](${toSimHref(kind, id)})`
+  },
+})
+
+const CHIP_CLASS =
+  'mx-px inline-flex items-center gap-1 rounded-[4px] bg-[var(--surface-4)] px-1 align-middle font-medium text-[var(--text-primary)] leading-[1.5] cursor-pointer select-none [&>svg]:size-[14px] [&>svg]:shrink-0 [&>svg]:text-[var(--text-icon)]'
+
+/** Live chip: the entity icon + label. Cmd/Ctrl-click navigates to the resource. */
+function MentionChipView({ node }: ReactNodeViewProps) {
+  const router = useRouter()
+  const params = useParams()
+  const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : undefined
+  const { kind, id, label } = node.attrs as MentionAttrs
+  const Icon = mentionIcon(kind, id)
+
+  const handleClick = (event: MouseEvent) => {
+    if (!(event.metaKey || event.ctrlKey) || !workspaceId) return
+    const path = simLinkPath(workspaceId, kind, id)
+    if (!path) return
+    event.preventDefault()
+    router.push(path)
+  }
+
+  return (
+    <NodeViewWrapper as='span' className={cn(CHIP_CLASS)} onClick={handleClick} title={label}>
+      {Icon && <Icon />}
+      <span>{label}</span>
+    </NodeViewWrapper>
+  )
+}
+
+/** Live mention node with the chip view; same schema + markdown output as the headless one. */
+export const MentionChip = MarkdownMention.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionChipView)
+  },
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts

@@ -4,7 +4,6 @@ import Suggestion from '@tiptap/suggestion'
 import { createSuggestionPopupRenderer } from '../menus/suggestion-popup'
 import { MentionList } from './mention-list'
 import { createMentionStore, type MentionStore } from './mention-store'
-import { toSimHref } from './sim-link'
 import type { MentionItem } from './types'
 
 /** Distinct from the `/` slash command's default `suggestion` key — two plugins can't share one key. */
@@ -63,13 +62,12 @@ export const Mention = Extension.create<Record<string, never>, MentionStorage>({
         // Items are sourced reactively from the store inside MentionList; this only gates the plugin.
         items: () => [],
         command: ({ editor, range, props }) => {
-          const href = toSimHref(props.kind, props.id)
           editor
             .chain()
             .focus()
             .deleteRange(range)
             .insertContent([
-              { type: 'text', text: props.label, marks: [{ type: 'link', attrs: { href } }] },
+              { type: 'mention', attrs: { kind: props.kind, id: props.id, label: props.label } },
               { type: 'text', text: ' ' },
             ])
             .run()

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-markdown-mentions.ts

@@ -1,12 +1,12 @@
 import { useMemo } from 'react'
-import { Database, File, Folder, Sparkles, Table, Workflow } from 'lucide-react'
 import { listIntegrations } from '@/blocks/integration-matcher'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
 import { useSkills } from '@/hooks/queries/skills'
 import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFileFolders } from '@/hooks/queries/workspace-file-folders'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
+import { mentionIcon } from './mention-icon'
 import type { MentionItem } from './types'
 
 /**
@@ -41,7 +41,7 @@ export function useMarkdownMentions(
       id: integration.blockType,
       label: integration.name,
       group: 'Integrations',
-      icon: integration.icon,
+      icon: mentionIcon('integration', integration.blockType),
     }))
   }, [active])
 
@@ -50,40 +50,52 @@ export function useMarkdownMentions(
     const items: MentionItem[] = []
 
     for (const file of files.data ?? [])
-      items.push({ kind: 'file', id: file.id, label: file.name, group: 'Files', icon: File })
+      items.push({
+        kind: 'file',
+        id: file.id,
+        label: file.name,
+        group: 'Files',
+        icon: mentionIcon('file', file.id),
+      })
     for (const folder of folders.data ?? [])
       items.push({
         kind: 'folder',
         id: folder.id,
         label: folder.name,
         group: 'Folders',
-        icon: Folder,
+        icon: mentionIcon('folder', folder.id),
       })
     for (const table of tables.data ?? [])
-      items.push({ kind: 'table', id: table.id, label: table.name, group: 'Tables', icon: Table })
+      items.push({
+        kind: 'table',
+        id: table.id,
+        label: table.name,
+        group: 'Tables',
+        icon: mentionIcon('table', table.id),
+      })
     for (const kb of knowledgeBases.data ?? [])
       items.push({
         kind: 'knowledge',
         id: kb.id,
         label: kb.name,
         group: 'Knowledge bases',
-        icon: Database,
+        icon: mentionIcon('knowledge', kb.id),
       })
     for (const workflow of workflows.data ?? [])
       items.push({
         kind: 'workflow',
         id: workflow.id,
         label: workflow.name,
         group: 'Workflows',
-        icon: Workflow,
+        icon: mentionIcon('workflow', workflow.id),
       })
     for (const skill of skills.data ?? [])
       items.push({
         kind: 'skill',
         id: skill.id,
         label: skill.name,
         group: 'Skills',
-        icon: Sparkles,
+        icon: mentionIcon('skill', skill.id),
       })
     items.push(...integrationItems)
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/suggestion-menu-chrome.ts

@@ -4,13 +4,15 @@
  * class strings per consumer.
  */
 
-/** The floating panel: bordered card with the enter animation. */
+/** The floating panel: bordered card with the enter animation, width-capped like the chat mention menu. */
 export const SUGGESTION_SURFACE_CLASS =
-  'min-w-[220px] origin-top-left animate-in rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 shadow-sm duration-100 fade-in-0 zoom-in-95 slide-in-from-top-2 motion-reduce:animate-none'
+  'min-w-[220px] max-w-[min(300px,calc(100vw-32px))] origin-top-left animate-in rounded-xl border border-[var(--border)] bg-[var(--bg)] p-1.5 shadow-sm duration-100 fade-in-0 zoom-in-95 slide-in-from-top-2 motion-reduce:animate-none'
 
-/** A scrollable list body (hidden scrollbar), added alongside {@link SUGGESTION_SURFACE_CLASS}. */
-export const SUGGESTION_SCROLL_CLASS =
-  'max-h-[330px] scroll-py-1.5 overflow-y-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+/**
+ * A scrollable list body, added alongside {@link SUGGESTION_SURFACE_CLASS}. Caps the height and scrolls
+ * — matching the chat composer's `@` menu — so a long workspace list never overflows its container.
+ */
+export const SUGGESTION_SCROLL_CLASS = 'max-h-[240px] scroll-py-1.5 overflow-y-auto overscroll-none'
 
 /** A selectable row: icon + label, 14px icon in `--text-icon`, truncating label. */
 export const SUGGESTION_ITEM_CLASS =

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -21,7 +21,7 @@ import {
   splitFrontmatter,
 } from './markdown-fidelity'
 import { parseMarkdownToDoc } from './markdown-parse'
-import { parseSimHref, simLinkPath, useEditorMentions } from './mention'
+import { useEditorMentions } from './mention'
 import { EditorBubbleMenu } from './menus/bubble-menu'
 import { LinkHoverCard } from './menus/link-hover-card'
 import { normalizeMarkdownContent } from './normalize-content'
@@ -261,14 +261,6 @@ export function LoadedRichMarkdownEditor({
           })
           return true
         }
-        // A `@`-mention link (`sim:<kind>/<id>`) navigates to the referenced resource in-app.
-        if (href.startsWith('sim:')) {
-          const parsed = parseSimHref(href)
-          const path = parsed && simLinkPath(workspaceId, parsed.kind, parsed.id)
-          if (!path) return false
-          routerRef.current.push(path)
-          return true
-        }
         const normalized = normalizeLinkHref(href)
         if (!normalized) return false
         // A same-origin in-app path navigates within the SPA (same tab); external URLs open a new tab.