feat(rich-editor): Tab accepts a suggestion; unify list keyboard nav; match chip styling

- Extract useSuggestionKeyboard: one hook owns the @/ menus' active-row state,
  scroll-into-view, and arrow/enter/tab handling (removes the duplication between
  the two list components)
- Tab now accepts the active item like Enter, matching the chat composer
- Render the mention chip like the chat input's mention token: borderless inline
  icon + label (no pill), 12px icon with brand color via getBareIconStyle, so the
  styling is consistent across surfaces

Author: waleedlatif1

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

@@ -23,6 +23,7 @@ const items: MentionItem[] = [
 
 const arrowDown = { event: new KeyboardEvent('keydown', { key: 'ArrowDown' }) }
 const enter = { event: new KeyboardEvent('keydown', { key: 'Enter' }) }
+const tab = { event: new KeyboardEvent('keydown', { key: 'Tab' }) }
 
 describe('MentionList keyboard nav', () => {
   let container: HTMLElement
@@ -69,6 +70,24 @@ describe('MentionList keyboard nav', () => {
     expect(command).toHaveBeenCalledWith(items[1])
   })
 
+  it('accepts the active item on Tab, like Enter', () => {
+    const ref = createRef<MentionListHandle>()
+    const command = vi.fn()
+    const store = createMentionStore()
+
+    act(() => {
+      root.render(<MentionList ref={ref} query='' command={command} store={store} />)
+    })
+    act(() => store.set(items))
+
+    let handled: boolean | undefined
+    act(() => {
+      handled = ref.current?.onKeyDown(tab)
+    })
+    expect(handled).toBe(true)
+    expect(command).toHaveBeenCalledWith(items[0])
+  })
+
   it('exposes a working onKeyDown through ReactRenderer (the suggestion plugin path)', async () => {
     const editor = new Editor({ extensions: createMarkdownEditorExtensions({ placeholder: '' }) })
     act(() => {

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

@@ -1,25 +1,19 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from 'react'
+import { forwardRef, useImperativeHandle, useMemo, useRef, useSyncExternalStore } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import {
   SUGGESTION_GROUP_LABEL_CLASS,
   SUGGESTION_ITEM_CLASS,
   SUGGESTION_SCROLL_CLASS,
   SUGGESTION_SURFACE_CLASS,
 } from '../menus/suggestion-menu-chrome'
+import {
+  type SuggestionKeyDownHandler,
+  useSuggestionKeyboard,
+} from '../menus/use-suggestion-keyboard'
 import type { MentionStore } from './mention-store'
 import type { MentionItem } from './types'
 
-export interface MentionListHandle {
-  onKeyDown: (props: { event: KeyboardEvent }) => boolean
-}
+export type MentionListHandle = SuggestionKeyDownHandler
 
 interface MentionListProps {
   /** The text typed after `@`, used to filter. */
@@ -54,7 +48,6 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
   ref
 ) {
   const rawItems = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
-  const [activeIndex, setActiveIndex] = useState(0)
   const containerRef = useRef<HTMLDivElement>(null)
 
   /** Filtered, group-capped, flattened in category order; `index` is the flat position for nav. */
@@ -80,44 +73,12 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
     return { flat, groups: ordered }
   }, [rawItems, query])
 
-  useEffect(() => {
-    setActiveIndex(0)
-  }, [flat])
-
-  useEffect(() => {
-    containerRef.current
-      ?.querySelector<HTMLElement>(`[data-index="${activeIndex}"]`)
-      ?.scrollIntoView({ block: 'nearest' })
-  }, [activeIndex])
-
-  const latest = useRef({ flat, activeIndex, command })
-  latest.current = { flat, activeIndex, command }
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      onKeyDown: ({ event }) => {
-        const { flat, activeIndex, command } = latest.current
-        if (flat.length === 0) return false
-        if (event.key === 'ArrowUp') {
-          setActiveIndex((i) => (i + flat.length - 1) % flat.length)
-          return true
-        }
-        if (event.key === 'ArrowDown') {
-          setActiveIndex((i) => (i + 1) % flat.length)
-          return true
-        }
-        if (event.key === 'Enter') {
-          const item = flat[activeIndex]
-          if (!item) return false
-          command(item)
-          return true
-        }
-        return false
-      },
-    }),
-    []
+  const { activeIndex, setActiveIndex, onKeyDown } = useSuggestionKeyboard(
+    flat,
+    command,
+    containerRef
   )
+  useImperativeHandle(ref, () => ({ onKeyDown }), [onKeyDown])
 
   if (flat.length === 0) {
     return (

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

@@ -4,7 +4,7 @@ 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 { getBareIconStyle, type StyleableIcon } from '@/blocks/icon-color'
 import { mentionIcon } from './mention-icon'
 import { simLinkPath, toSimHref } from './sim-link'
 import type { MentionKind } from './types'
@@ -103,16 +103,25 @@ export const MarkdownMention = Node.create({
   },
 })
 
+/**
+ * Mirrors the home chat input's mention rendering (the textarea mirror overlay
+ * in `prompt-editor.tsx`): a borderless inline icon + label that flows with the
+ * surrounding prose — no pill background, no padding, normal weight, body text
+ * color, and a 12px icon. Integration icons keep their brand color via
+ * {@link getBareIconStyle} (see {@link MentionChipView}); other kinds stay
+ * monochrome through the `--text-icon` fallback below.
+ */
 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)]'
+  'mx-px inline-flex items-center gap-1 align-middle text-[var(--text-primary)] leading-[1.5] cursor-pointer select-none [&>svg]:size-[12px] [&>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 Icon = mentionIcon(kind, id) as StyleableIcon | undefined
+  const iconStyle = Icon ? getBareIconStyle(Icon) : undefined
 
   const handleClick = (event: MouseEvent) => {
     if (!(event.metaKey || event.ctrlKey) || !workspaceId) return
@@ -123,8 +132,8 @@ function MentionChipView({ node }: ReactNodeViewProps) {
   }
 
   return (
-    <NodeViewWrapper as='span' className={cn(CHIP_CLASS)} onClick={handleClick} title={label}>
-      {Icon && <Icon />}
+    <NodeViewWrapper as='span' className={CHIP_CLASS} onClick={handleClick} title={label}>
+      {Icon && <Icon style={iconStyle} />}
       <span>{label}</span>
     </NodeViewWrapper>
   )

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

@@ -0,0 +1,69 @@
+import {
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+/** The imperative `onKeyDown` every suggestion list forwards from the popup. */
+export interface SuggestionKeyDownHandler {
+  onKeyDown: (props: { event: KeyboardEvent }) => boolean
+}
+
+interface SuggestionKeyboard extends SuggestionKeyDownHandler {
+  activeIndex: number
+  setActiveIndex: Dispatch<SetStateAction<number>>
+}
+
+/**
+ * Shared arrow/enter/tab navigation for the `/` and `@` suggestion lists. Owns the active-row state,
+ * resets it when the items change, scrolls the active row into view, and exposes an `onKeyDown` handle
+ * for the suggestion plugin. Up/Down wrap; Enter and Tab both accept the active item (Tab matches the
+ * chat composer). The handle is stable and reads live values through a ref, because the suggestion
+ * plugin captures it once via `ReactRenderer.ref` while the items may still be loading.
+ */
+export function useSuggestionKeyboard<T>(
+  items: T[],
+  onSelect: (item: T) => void,
+  containerRef: RefObject<HTMLElement | null>
+): SuggestionKeyboard {
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  useEffect(() => {
+    setActiveIndex(0)
+  }, [items])
+
+  useEffect(() => {
+    containerRef.current
+      ?.querySelector<HTMLElement>(`[data-index="${activeIndex}"]`)
+      ?.scrollIntoView({ block: 'nearest' })
+  }, [activeIndex, containerRef])
+
+  const latest = useRef({ items, activeIndex, onSelect })
+  latest.current = { items, activeIndex, onSelect }
+
+  const onKeyDown = useCallback(({ event }: { event: KeyboardEvent }) => {
+    const { items, activeIndex, onSelect } = latest.current
+    if (items.length === 0) return false
+    if (event.key === 'ArrowUp') {
+      setActiveIndex((i) => (i + items.length - 1) % items.length)
+      return true
+    }
+    if (event.key === 'ArrowDown') {
+      setActiveIndex((i) => (i + 1) % items.length)
+      return true
+    }
+    if (event.key === 'Enter' || event.key === 'Tab') {
+      const item = items[activeIndex]
+      if (!item) return false
+      onSelect(item)
+      return true
+    }
+    return false
+  }, [])
+
+  return { activeIndex, setActiveIndex, onKeyDown }
+}

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

@@ -1,16 +1,18 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
 import { cn } from '@/lib/core/utils/cn'
 import {
   SUGGESTION_GROUP_LABEL_CLASS,
   SUGGESTION_ITEM_CLASS,
   SUGGESTION_SCROLL_CLASS,
   SUGGESTION_SURFACE_CLASS,
 } from '../menus/suggestion-menu-chrome'
+import {
+  type SuggestionKeyDownHandler,
+  useSuggestionKeyboard,
+} from '../menus/use-suggestion-keyboard'
 import type { SlashCommandItem } from './commands'
 
-export interface SlashCommandListHandle {
-  onKeyDown: (props: { event: KeyboardEvent }) => boolean
-}
+export type SlashCommandListHandle = SuggestionKeyDownHandler
 
 interface SlashCommandListProps {
   items: SlashCommandItem[]
@@ -24,47 +26,13 @@ interface SlashCommandListProps {
  */
 export const SlashCommandList = forwardRef<SlashCommandListHandle, SlashCommandListProps>(
   function SlashCommandList({ items, command }, ref) {
-    const [activeIndex, setActiveIndex] = useState(0)
     const containerRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-      setActiveIndex(0)
-    }, [items])
-
-    useEffect(() => {
-      containerRef.current
-        ?.querySelector<HTMLElement>(`[data-index="${activeIndex}"]`)
-        ?.scrollIntoView({ block: 'nearest' })
-    }, [activeIndex])
-
-    const latest = useRef({ items, activeIndex, command })
-    latest.current = { items, activeIndex, command }
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        onKeyDown: ({ event }) => {
-          const { items, activeIndex, command } = latest.current
-          if (items.length === 0) return false
-          if (event.key === 'ArrowUp') {
-            setActiveIndex((i) => (i + items.length - 1) % items.length)
-            return true
-          }
-          if (event.key === 'ArrowDown') {
-            setActiveIndex((i) => (i + 1) % items.length)
-            return true
-          }
-          if (event.key === 'Enter') {
-            const item = items[activeIndex]
-            if (!item) return false
-            command(item)
-            return true
-          }
-          return false
-        },
-      }),
-      []
+    const { activeIndex, setActiveIndex, onKeyDown } = useSuggestionKeyboard(
+      items,
+      command,
+      containerRef
     )
+    useImperativeHandle(ref, () => ({ onKeyDown }), [onKeyDown])
 
     const groups = useMemo(() => {
       const ordered: { group: string; items: { item: SlashCommandItem; index: number }[] }[] = []