@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/styled/community/CommunityPostDetail.tsx

@@ -5,15 +5,29 @@ import { useCommunityThread } from "../../headless/community/useCommunityThread"
 import { findReplyNode, type ReplyNode } from "../../headless/community/replyTree";
 import {
   communityMemberName,
+  isCommunityContentPending,
   useReportCommunityContent,
   type CommunityReply,
 } from "../../../data/queries/useCommunity";
 import { Loading } from "../Loading";
 import { CommunityComposer } from "./CommunityComposer";
 import { CommunityMediaGallery } from "./CommunityMediaGallery";
+import { CommunityPollCard } from "./CommunityPollCard";
+import { CommunityLinkPreview } from "./CommunityLinkPreview";
+import { CommunityModeratorMenu } from "./CommunityModeratorMenu";
+import { CommunityPendingBadge, CommunityRemovedNotice } from "./CommunityModerationState";
 import { CommunityReactionBar } from "./CommunityReactionBar";
 import { CommunityRichText } from "./CommunityRichText";
 import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+import {
+  CommunityAgentAvatar,
+  CommunityAgentFeedback,
+  CommunityAgentName,
+  CommunityAgentThinking,
+  CommunityCatchMeUp,
+} from "./CommunityAgent";
+import { useCommunityAgent } from "../../../data/queries/useCommunityAgent";
+import { CATCH_ME_UP_MIN_REPLIES, useCommunityAgentAnswerRatings } from "../../headless/community/useCommunityAgent";
 import { timeAgo } from "./util";
 
 /** How many nesting levels are RENDERED before "Continue this thread". The
@@ -33,6 +47,14 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
   const t = useThemeTokens();
   const thread = useCommunityThread(postId);
   const report = useReportCommunityContent();
+  // The community AI: the "Catch me up" panel and the name on its thinking line.
+  const { agent } = useCommunityAgent();
+  // The viewer's own ratings on the AI answers here: who may rate, and how they did.
+  const agentAnswerIds = useMemo(
+    () => thread.replies.filter((r) => r.agentAuthor).map((r) => r.id),
+    [thread.replies],
+  );
+  const ratings = useCommunityAgentAnswerRatings("community_reply", agentAnswerIds);
   const border = `1px solid ${t.border}`;
 
   // "Continue thread" re-roots the rendered tree on a deep reply (Reddit-style).
@@ -58,6 +80,8 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
 
   const post = thread.post;
   const locked = post.isLocked;
+  // The author's own held post: no replies or reactions until it is approved.
+  const pending = isCommunityContentPending(post);
 
   const doReport = (entityId: string, entityType: "community_post" | "community_reply") => {
     if (reported.has(entityId)) return;
@@ -106,32 +130,37 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
   const renderNode = (node: ReplyNode, renderedDepth: number): React.ReactNode => {
     const reply = node.reply;
     const capped = renderedDepth >= REPLY_DISPLAY_DEPTH - 1 && node.children.length > 0;
+    const replyPending = isCommunityContentPending(reply);
 
     return (
       <div key={reply.id} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
         <ReplyItem
           reply={reply}
+          showFeedback={!!reply.agentAuthor && ratings.canRate(reply.id)}
+          savedRating={ratings.ratingOf(reply.id)}
           onOpenProfile={onOpenProfile}
           onReact={(emoji) => thread.react("community_reply", reply.id, emoji)}
           extraActions={
-            <>
-              {!locked && (
-                <button
-                  onClick={() => setReplyingTo((prev) => (prev === reply.id ? null : reply.id))}
-                  style={{
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    color: t.muted,
-                    fontSize: 12,
-                    padding: "2px 4px",
-                  }}
-                >
-                  Reply
-                </button>
-              )}
-              {reportButton(reply.id, "community_reply")}
-            </>
+            replyPending ? null : (
+              <>
+                {!locked && (
+                  <button
+                    onClick={() => setReplyingTo((prev) => (prev === reply.id ? null : reply.id))}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      color: t.muted,
+                      fontSize: 12,
+                      padding: "2px 4px",
+                    }}
+                  >
+                    Reply
+                  </button>
+                )}
+                {reportButton(reply.id, "community_reply")}
+              </>
+            )
           }
         />
 
@@ -143,7 +172,7 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
             <CommunityComposer
               compact
               autoFocus
-              placeholder={`Reply to ${communityMemberName(reply.author)}…`}
+              placeholder={`Reply to ${reply.agentAuthor ? reply.agentAuthor.name : communityMemberName(reply.author)}…`}
               submitLabel="Reply"
               onSubmit={submitReply}
               onCancel={() => setReplyingTo(null)}
@@ -198,48 +227,69 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
         </button>
       )}
 
-      {/* Post */}
-      <article style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 18 }}>
-        <header style={{ display: "flex", alignItems: "center", gap: 10 }}>
-          <MemberAvatar member={post.author} size={40} onClick={() => post.author && onOpenProfile?.(post.author.accountId)} />
-          <div style={{ minWidth: 0, flex: 1 }}>
-            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-              <button
-                onClick={() => post.author && onOpenProfile?.(post.author.accountId)}
-                style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 700, fontSize: 15 }}
-              >
-                {communityMemberName(post.author)}
-              </button>
-              <LevelBadge level={post.author?.level} />
+      {/* Post. Just removed by this moderator: the undo, in its place. */}
+      {post.archivedAt ? (
+        <CommunityRemovedNotice target={{ type: "post", post }} />
+      ) : (
+        <article style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 18 }}>
+          <header style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            {post.agentAuthor ? (
+              <CommunityAgentAvatar agent={post.agentAuthor} size={40} />
+            ) : (
+              <MemberAvatar member={post.author} size={40} onClick={() => post.author && onOpenProfile?.(post.author.accountId)} />
+            )}
+            <div style={{ minWidth: 0, flex: 1 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                {post.agentAuthor ? (
+                  <CommunityAgentName agent={post.agentAuthor} fontSize={15} fontWeight={700} />
+                ) : (
+                  <>
+                    <button
+                      onClick={() => post.author && onOpenProfile?.(post.author.accountId)}
+                      style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 700, fontSize: 15 }}
+                    >
+                      {communityMemberName(post.author)}
+                    </button>
+                    <LevelBadge level={post.author?.level} />
+                  </>
+                )}
+              </div>
+              <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(post.createdAt)}</div>
             </div>
-            <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(post.createdAt)}</div>
-          </div>
-          {locked && (
-            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: t.muted }}>
-              <Lock size={12} /> Locked
-            </span>
-          )}
-        </header>
+            {pending && <CommunityPendingBadge />}
+            {locked && (
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: t.muted }}>
+                <Lock size={12} /> Locked
+              </span>
+            )}
+            <CommunityModeratorMenu target={{ type: "post", post }} />
+          </header>
 
-        {post.title && (
-          <h2 style={{ margin: "12px 0 6px", fontSize: 20, fontFamily: t.headingFontFamily, color: t.text }}>{post.title}</h2>
-        )}
-        <div style={{ marginTop: post.title ? 0 : 12 }}>
-          <CommunityRichText body={post.body} />
-        </div>
-        <CommunityMediaGallery media={post.media ?? []} />
+          {post.title && (
+            <h2 style={{ margin: "12px 0 6px", fontSize: 20, fontFamily: t.headingFontFamily, color: t.text }}>{post.title}</h2>
+          )}
+          <div style={{ marginTop: post.title ? 0 : 12 }}>
+            <CommunityRichText body={post.body} linkify={!!post.agentAuthor} />
+          </div>
+          <CommunityMediaGallery media={post.media ?? []} />
+          <CommunityLinkPreview preview={post.linkPreview} />
+          {post.poll && <CommunityPollCard post={post} disabled={pending} />}
 
-        <footer style={{ marginTop: 14 }}>
-          <CommunityReactionBar reactions={post.reactions ?? []} onToggle={(emoji) => thread.react("community_post", post.id, emoji)}>
-            {reportButton(post.id, "community_post")}
-          </CommunityReactionBar>
-        </footer>
-      </article>
+          {!pending && (
+            <footer style={{ marginTop: 14 }}>
+              <CommunityReactionBar reactions={post.reactions ?? []} onToggle={(emoji) => thread.react("community_post", post.id, emoji)}>
+                {reportButton(post.id, "community_post")}
+              </CommunityReactionBar>
+            </footer>
+          )}
+        </article>
+      )}
 
       {/* Top-level composer: closed until asked for, and hidden rather than
           unmounted while a nested reply box is open, so a half-written
-          top-level reply survives the detour of replying to someone else. */}
-      {locked ? (
+          top-level reply survives the detour of replying to someone else.
+          None at all on a held or just-removed post. */}
+      {pending || post.archivedAt ? null : locked ? (
         <div style={{ border, borderRadius: t.cornerRadius, padding: 14, textAlign: "center", color: t.muted, fontSize: 14 }}>
           <Lock size={13} style={{ verticalAlign: -2, marginRight: 6 }} />
           This post is locked: replies are closed.
@@ -273,6 +323,11 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
           )}
         </div>
 
+        {/* A private summary of a long thread, for this member only. */}
+        {agent && !pending && !post.archivedAt && post.replyCount >= CATCH_ME_UP_MIN_REPLIES && (
+          <CommunityCatchMeUp postId={post.id} agent={agent} />
+        )}
+
         {thread.repliesLoading && !thread.replies.length ? (
           <Loading />
         ) : (
@@ -281,6 +336,8 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
           </div>
         )}
 
+        {thread.agentThinking && <CommunityAgentThinking name={agent?.name} />}
+
         {thread.hasMore && (
           <button
             onClick={() => thread.fetchNextPage()}
@@ -312,39 +369,68 @@ function ReplyItem({
   onOpenProfile,
   onReact,
   extraActions,
+  showFeedback = false,
+  savedRating = null,
 }: {
   reply: CommunityReply;
   onOpenProfile?: (accountId: string) => void;
   onReact: (emoji: string) => void;
   extraActions?: React.ReactNode;
+  /** An AI answer to this viewer's own question: offer thumbs up / down. */
+  showFeedback?: boolean;
+  /** Their saved rating on it. */
+  savedRating?: 1 | -1 | null;
 }) {
   const t = useThemeTokens();
+  const pending = isCommunityContentPending(reply);
+  // The community AI wrote it: its name and badge, never the "Member" fallback.
+  const agent = reply.agentAuthor ?? null;
+
+  // Just removed by this moderator: the undo, in its place. Its children stay
+  // visible beneath it, as the thread renders them.
+  if (reply.archivedAt) return <CommunityRemovedNotice target={{ type: "reply", reply }} />;
 
   return (
-    <div style={{ display: "flex", gap: 10 }}>
-      <MemberAvatar member={reply.author} size={32} onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)} />
+    <div style={{ display: "flex", gap: 10 }} data-testid={agent ? "community-agent-reply" : undefined}>
+      {agent ? (
+        <CommunityAgentAvatar agent={agent} size={32} />
+      ) : (
+        <MemberAvatar member={reply.author} size={32} onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)} />
+      )}
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
-          <button
-            onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)}
-            style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 600, fontSize: 13 }}
-          >
-            {communityMemberName(reply.author)}
-          </button>
-          <LevelBadge level={reply.author?.level} />
+        <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
+          {agent ? (
+            <CommunityAgentName agent={agent} fontSize={13} />
+          ) : (
+            <>
+              <button
+                onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)}
+                style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 600, fontSize: 13 }}
+              >
+                {communityMemberName(reply.author)}
+              </button>
+              <LevelBadge level={reply.author?.level} />
+            </>
+          )}
           <span style={{ fontSize: 11, color: t.muted }}>{timeAgo(reply.createdAt)}</span>
+          {pending && <CommunityPendingBadge />}
+          <CommunityModeratorMenu target={{ type: "reply", reply }} className="fg:ml-auto" />
         </div>
 
         <div style={{ marginTop: 2 }}>
-          <CommunityRichText body={reply.body} />
+          <CommunityRichText body={reply.body} linkify={!!agent} />
         </div>
         <CommunityMediaGallery media={reply.media ?? []} />
 
-        <div style={{ marginTop: 6 }}>
-          <CommunityReactionBar reactions={reply.reactions ?? []} onToggle={onReact}>
-            {extraActions}
-          </CommunityReactionBar>
-        </div>
+        {/* A held reply takes no reactions until it is approved. */}
+        {!pending && (
+          <div style={{ marginTop: 6 }}>
+            <CommunityReactionBar reactions={reply.reactions ?? []} onToggle={onReact}>
+              {extraActions}
+              {showFeedback && <CommunityAgentFeedback entityType="community_reply" entityId={reply.id} saved={savedRating} />}
+            </CommunityReactionBar>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ui/styled/community/CommunityRichText.tsx

@@ -1,24 +1,64 @@
+import { createContext, useContext, type ReactNode } from "react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import type { LexicalNodeJson } from "../../headless/community/lexical";
+import { lexicalNodeText, parseWikiContent, wikiImageSource } from "../../headless/communities/useCommunityWiki";
+import { linkifyText } from "../../headless/community/useCommunityAgent";
+
+/** A private Knowledge Base image (`kbmedia:<id>`) handed to the caller to resolve. */
+export interface CommunityRichTextPrivateImage {
+  mediaId: string;
+  alt: string;
+  /** Sits inside a paragraph rather than on its own line. */
+  inline: boolean;
+}
+
+/** Set only by a caller that can resolve private images (the wiki page view). */
+const PrivateImageContext = createContext<((image: CommunityRichTextPrivateImage) => ReactNode) | null>(null);
+
+/** Set for plain-text bodies whose addresses should be clickable (the community AI's answers). */
+const LinkifyContext = createContext(false);
 
 export interface CommunityRichTextProps {
-  /** Lexical editor state JSON (community_posts.body / community_replies.body). */
+  /** Lexical editor state JSON (community_posts.body / community_replies.body, or a wiki page). */
   body: unknown;
   /** Truncate to a preview (clamps lines via CSS). */
   clampLines?: number;
+  /**
+   * Anchor ids for the top-level headings, in document order, skipping empty
+   * ones (what `extractWikiToc` returns), so a table of contents can link to them.
+   */
+  headingIds?: string[];
+  /**
+   * Renders a PRIVATE Knowledge Base image (`kbmedia:<id>`). Only the wiki page
+   * view passes it, because only it can ask for a signed address. Without it a
+   * private image renders nothing; a plain http(s) image always renders.
+   */
+  renderPrivateImage?: (image: CommunityRichTextPrivateImage) => ReactNode;
+  /**
+   * Make bare http(s) addresses in the text clickable and keep line breaks.
+   * For the community AI's answers, written as plain text with a "Sources:"
+   * list of addresses; a member's own text is never rewritten.
+   */
+  linkify?: boolean;
 }
 
 /**
- * Dependency-free renderer for the Lexical states community posts store.
- * Handles the node set our composer emits (paragraph/text/mention/linebreak)
- * plus the common rich nodes an admin-side Lexical editor could produce
- * (heading/quote/list/listitem/link/code). Unknown nodes fall back to their
- * children/text so content never disappears.
+ * Dependency-free renderer for Lexical states: community posts and replies,
+ * and wiki pages written in the Knowledge Base editor. Handles the node set our
+ * composer emits (paragraph/text/mention/linebreak) plus the rich nodes the
+ * Knowledge Base editor produces (heading, quote, list, link, code, divider,
+ * table, image). Unknown nodes fall back to their children/text so content
+ * never disappears.
  */
-export function CommunityRichText({ body, clampLines }: CommunityRichTextProps) {
+export function CommunityRichText({ body, clampLines, headingIds, renderPrivateImage, linkify = false }: CommunityRichTextProps) {
   const t = useThemeTokens();
-  const root = extractRoot(body);
+  const root = parseWikiContent(body)?.root ?? null;
   if (!root) return null;
+  let headingIndex = 0;
+  const anchorFor = (node: LexicalNodeJson): string | undefined => {
+    if (!headingIds || node.type !== "heading" || !lexicalNodeText(node).trim()) return undefined;
+    return headingIds[headingIndex++];
+  };
 
   const clampStyle: React.CSSProperties = clampLines
     ? {
@@ -30,23 +70,63 @@ export function CommunityRichText({ body, clampLines }: CommunityRichTextProps)
     : {};
 
   return (
-    <div style={{ color: t.text, fontSize: 15, lineHeight: 1.55, wordBreak: "break-word", ...clampStyle }}>
-      {(root.children ?? []).map((node, i) => (
-        <BlockNode key={i} node={node} />
-      ))}
-    </div>
+    <PrivateImageContext.Provider value={renderPrivateImage ?? null}>
+      <LinkifyContext.Provider value={linkify}>
+        <div
+          style={{
+            color: t.text,
+            fontSize: 15,
+            lineHeight: 1.55,
+            wordBreak: "break-word",
+            ...(linkify ? { whiteSpace: "pre-line" as const } : {}),
+            ...clampStyle,
+          }}
+        >
+          {(root.children ?? []).map((node, i) => (
+            <BlockNode key={i} node={node} anchorId={anchorFor(node)} />
+          ))}
+        </div>
+      </LinkifyContext.Provider>
+    </PrivateImageContext.Provider>
   );
 }
 
-function extractRoot(body: unknown): LexicalNodeJson | null {
-  if (!body || typeof body !== "object") return null;
-  const maybe = body as { root?: LexicalNodeJson; children?: LexicalNodeJson[] };
-  if (maybe.root) return maybe.root;
-  if (Array.isArray(maybe.children)) return maybe as LexicalNodeJson;
+/**
+ * A Knowledge Base image. A plain http(s) address renders as it is; a private
+ * `kbmedia:` reference goes to the caller's resolver, or renders nothing; any
+ * other `src` never renders.
+ */
+function RichImage({ node, inline }: { node: LexicalNodeJson; inline: boolean }) {
+  const t = useThemeTokens();
+  const renderPrivate = useContext(PrivateImageContext);
+  const source = wikiImageSource(node.src);
+  const alt = typeof node.altText === "string" ? node.altText : "";
+  if (!source) return null;
+  if (source.kind === "private")
+    return renderPrivate ? <>{renderPrivate({ mediaId: source.mediaId, alt, inline })}</> : null;
+  return (
+    <img
+      src={source.url}
+      alt={alt}
+      loading="lazy"
+      style={
+        inline
+          ? { maxWidth: "100%", height: "auto", borderRadius: t.cornerRadius, verticalAlign: "middle" }
+          : { display: "block", maxWidth: "100%", height: "auto", margin: "0.6em 0", borderRadius: t.cornerRadius }
+      }
+    />
+  );
+}
+
+/** Only web and mail links render as links; anything else (`javascript:` and friends) is dropped. */
+function safeHref(url: unknown): string | null {
+  if (typeof url !== "string" || !url.trim()) return null;
+  const value = url.trim();
+  if (/^(https?:|mailto:|tel:)/i.test(value) || value.startsWith("/") || value.startsWith("#")) return value;
   return null;
 }
 
-function BlockNode({ node }: { node: LexicalNodeJson }) {
+function BlockNode({ node, anchorId }: { node: LexicalNodeJson; anchorId?: string }) {
   const t = useThemeTokens();
   const children = (node.children ?? []).map((child, i) => <InlineNode key={i} node={child} />);
 
@@ -62,7 +142,47 @@ function BlockNode({ node }: { node: LexicalNodeJson }) {
         | "h4"
         | "h5"
         | "h6";
-      return <Tag style={{ margin: "0.4em 0", fontFamily: t.headingFontFamily }}>{children}</Tag>;
+      return (
+        <Tag id={anchorId} style={{ margin: "0.4em 0", fontFamily: t.headingFontFamily, scrollMarginTop: 16 }}>
+          {children}
+        </Tag>
+      );
+    }
+    case "horizontalrule":
+      return <hr style={{ border: "none", borderTop: `1px solid ${t.border}`, margin: "1em 0" }} />;
+    case "kb-image":
+    case "image":
+      return <RichImage node={node} inline={false} />;
+    case "table":
+      return (
+        <div style={{ overflowX: "auto", margin: "0.6em 0" }}>
+          <table style={{ borderCollapse: "collapse", minWidth: "100%", fontSize: 14 }}>
+            <tbody>
+              {(node.children ?? []).map((row, i) => (
+                <BlockNode key={i} node={row} />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    case "tablerow":
+      return (
+        <tr>
+          {(node.children ?? []).map((cell, i) => (
+            <BlockNode key={i} node={cell} />
+          ))}
+        </tr>
+      );
+    case "tablecell": {
+      const header = typeof node.headerState === "number" && node.headerState > 0;
+      const Cell = header ? "th" : "td";
+      return (
+        <Cell style={{ border: `1px solid ${t.border}`, padding: "6px 10px", textAlign: "left", verticalAlign: "top" }}>
+          {(node.children ?? []).map((child, i) => (
+            <BlockNode key={i} node={child} />
+          ))}
+        </Cell>
+      );
     }
     case "quote":
       return (
@@ -76,7 +196,14 @@ function BlockNode({ node }: { node: LexicalNodeJson }) {
       return <ListTag style={{ margin: "0.4em 0", paddingLeft: 22 }}>{children}</ListTag>;
     }
     case "listitem":
-      return <li>{children}</li>;
+      // A nested list sits inside a list item as a block, not as inline text.
+      return (
+        <li>
+          {(node.children ?? []).map((child, i) =>
+            child.type === "list" ? <BlockNode key={i} node={child} /> : <InlineNode key={i} node={child} />,
+          )}
+        </li>
+      );
     case "code":
       return (
         <pre
@@ -93,16 +220,20 @@ function BlockNode({ node }: { node: LexicalNodeJson }) {
         </pre>
       );
     default:
-      // Unknown block — render inline content so nothing is lost.
+      // Unknown block: render inline content so nothing is lost.
       return <p style={{ margin: "0 0 0.6em" }}>{children.length ? children : <InlineNode node={node} />}</p>;
   }
 }
 
 function InlineNode({ node }: { node: LexicalNodeJson }) {
   const t = useThemeTokens();
+  const linkify = useContext(LinkifyContext);
 
   if (node.type === "linebreak") return <br />;
 
+  // An image the editor left inside a paragraph.
+  if (node.type === "kb-image" || node.type === "image") return <RichImage node={node} inline />;
+
   if (node.type === "mention") {
     const name =
       typeof node.mentionName === "string"
@@ -110,20 +241,23 @@ function InlineNode({ node }: { node: LexicalNodeJson }) {
         : typeof node.text === "string"
           ? (node.text as string).replace(/^@/, "")
           : "member";
-    return (
-      <span style={{ color: t.primary, fontWeight: 600 }}>
-        @{name}
-      </span>
-    );
+    return <span style={{ color: t.primary, fontWeight: 600 }}>@{name}</span>;
   }
 
   if (node.type === "link" || node.type === "autolink") {
-    const url = typeof node.url === "string" ? node.url : "#";
+    const url = safeHref(node.url);
+    const inner = (node.children ?? []).map((child, i) => <InlineNode key={i} node={child} />);
+    if (!url) return <>{inner}</>;
+    // An in-page anchor stays in the page; anything else opens a new tab.
+    const external = !url.startsWith("#");
     return (
-      <a href={url} target="_blank" rel="noopener noreferrer" style={{ color: t.primary, textDecoration: "underline" }}>
-        {(node.children ?? []).map((child, i) => (
-          <InlineNode key={i} node={child} />
-        ))}
+      <a
+        href={url}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        style={{ color: t.primary, textDecoration: "underline" }}
+      >
+        {inner}
       </a>
     );
   }
@@ -132,6 +266,17 @@ function InlineNode({ node }: { node: LexicalNodeJson }) {
     // Lexical text format bitmask: 1 bold, 2 italic, 8 underline, 4 strikethrough, 16 code.
     const format = typeof node.format === "number" ? node.format : 0;
     let el: React.ReactNode = node.text as string;
+    if (linkify && /https?:\/\//.test(node.text as string)) {
+      el = linkifyText(node.text as string).map((segment, i) =>
+        segment.kind === "link" ? (
+          <a key={i} href={segment.url} target="_blank" rel="noopener noreferrer" style={{ color: t.primary, textDecoration: "underline" }}>
+            {segment.text}
+          </a>
+        ) : (
+          <span key={i}>{segment.text}</span>
+        ),
+      );
+    }
     if (format & 16)
       el = (
         <code style={{ background: `${t.text}0d`, borderRadius: 4, padding: "0 4px", fontSize: "0.9em" }}>{el}</code>