feat(editor): unify Tiptap editor for editing and readonly display

Replace react-markdown in comment/reply display with Tiptap readonly mode,
ensuring visual consistency between editing and viewing. Extract shared
BaseMentionExtension with MentionView NodeView used in both modes — issue
mentions render as inline cards with StatusIcon, clickable to open in new tab.
Redesign mention suggestion popup with grouped sections (Users/Issues),
agent badges, and StatusIcon for issues.

- New: mention-extension.ts (shared mention core)
- New: mention-view.tsx (shared NodeView for both modes)
- New: readonly-editor.tsx (lightweight Tiptap readonly wrapper)
- Modified: rich-text-editor.tsx (import from shared mention-extension)
- Modified: rich-text-editor.css (readonly + issue-mention overrides)
- Modified: comment-card.tsx (Markdown → ReadonlyEditor)
- Modified: mention-suggestion.tsx (grouped UI, StatusIcon, agent badge)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/components/common/rich-text-editor.css

@@ -192,6 +192,16 @@
   text-underline-offset: 2px;
 }
 
+/* Issue mention cards — override link styling */
+.rich-text-editor a.issue-mention {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rich-text-editor a.issue-mention:hover {
+  text-decoration: none;
+}
+
 /* Mentions */
 .rich-text-editor .mention {
   color: var(--primary);
@@ -214,6 +224,23 @@
   color: var(--muted-foreground);
 }
 
+/* Readonly mode overrides */
+.rich-text-editor.readonly.ProseMirror {
+  caret-color: transparent;
+  cursor: default;
+}
+
+/* Mention NodeView inline layout fix */
+.rich-text-editor [data-node-view-wrapper] {
+  display: inline;
+}
+
+/* Images in readonly mode */
+.rich-text-editor.readonly img {
+  border-radius: var(--radius);
+  margin: 0.5rem 0;
+}
+
 /* Uploading image placeholder (blob: URLs = in-flight uploads) */
 .rich-text-editor img[src^="blob:"] {
   opacity: 0.5;