fix(web): preserve angle-bracketed text in chat user questions (#932)

* Revert "Prompt angle bracket visibility (#929)"

This reverts commit b4d7721.

* fix(web): preserve angle-bracketed text in chat user questions

Add a remarkPreserveHtml remark plugin that converts HTML MDAST nodes
to text nodes before the references plugin runs. This prevents text
like <id> from being parsed as HTML tags and stripped by sanitization,
while keeping @file:{...} reference rendering intact.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add changelog entry for angle bracket visibility fix

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: restore #929 reference in changelog entry

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: msukkari

CHANGELOG.md

@@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Hide version upgrade toast for askgithub deployment (`EXPERIMENT_ASK_GH_ENABLED`). [#931](https://github.com/sourcebot-dev/sourcebot/pull/931)
 
 ### Fixed
-- Fixed text inside angle brackets (e.g., `<id>`) being hidden in chat prompt display due to HTML parsing. [#929](https://github.com/sourcebot-dev/sourcebot/pull/929)
+- Fixed text inside angle brackets (e.g., `<id>`) being hidden in chat prompt display due to HTML parsing. [#929](https://github.com/sourcebot-dev/sourcebot/pull/929) [#932](https://github.com/sourcebot-dev/sourcebot/pull/932)
 
 ## [4.11.7] - 2026-02-23
 

packages/web/src/features/chat/components/chatThread/chatThreadListItem.tsx

@@ -334,7 +334,7 @@ const ChatThreadListItemComponent = forwardRef<HTMLDivElement, ChatThreadListIte
                             <MarkdownRenderer
                                 content={userQuestion.trim()}
                                 className="prose-p:m-0"
-                                disableRawHtml={true}
+                                escapeHtml={true}
                             />
                         </div>
 

packages/web/src/features/chat/components/chatThread/markdownRenderer.tsx

@@ -80,6 +80,27 @@ function remarkReferencesPlugin() {
     }
 }
 
+/**
+ * A remark plugin that converts `html` MDAST nodes into `text` nodes,
+ * preserving angle-bracketed content like `<id>` as visible text. Without this,
+ * `<id>` is parsed as an HTML tag and then stripped by sanitization.
+ *
+ * This plugin must run BEFORE remarkReferencesPlugin so that the file-reference
+ * HTML nodes created by that plugin are left intact for rehypeRaw to process.
+ */
+function remarkPreserveHtml() {
+    return function (tree: Nodes) {
+        visit(tree, 'html', (node, index, parent) => {
+            if (index !== undefined && parent && 'children' in parent) {
+                (parent.children as Nodes[])[index] = {
+                    type: 'text',
+                    value: (node as { value: string }).value,
+                };
+            }
+        });
+    };
+}
+
 const remarkTocExtractor = () => {
     return function (tree: Nodes) {
         visit(tree, 'heading', (node: Heading) => {
@@ -102,32 +123,27 @@ interface MarkdownRendererProps {
     content: string;
     className?: string;
     /**
-     * When true, disables raw HTML parsing. This prevents text like `<id>` from
-     * being interpreted as HTML tags. Use this for user-provided content that
-     * shouldn't contain embedded HTML.
+     * When true, angle-bracketed text like `<id>` is preserved as visible text
+     * instead of being parsed as HTML. File references (@file:{...}) are unaffected.
      */
-    disableRawHtml?: boolean;
+    escapeHtml?: boolean;
 }
 
-const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererProps>(({ content, className, disableRawHtml = false }, ref) => {
+const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererProps>(({ content, className, escapeHtml = false }, ref) => {
     const router = useRouter();
 
     const remarkPlugins = useMemo((): PluggableList => {
         return [
             remarkGfm,
+            ...(escapeHtml ? [remarkPreserveHtml] : []),
             remarkReferencesPlugin,
             remarkTocExtractor,
         ];
-    }, []);
+    }, [escapeHtml]);
 
     const rehypePlugins = useMemo((): PluggableList => {
-        const plugins: PluggableList = [];
-
-        if (!disableRawHtml) {
-            plugins.push(rehypeRaw);
-        }
-
-        plugins.push(
+        return [
+            rehypeRaw,
             [
                 rehypeSanitize,
                 {
@@ -140,10 +156,8 @@ const MarkdownRendererComponent = forwardRef<HTMLDivElement, MarkdownRendererPro
                 } satisfies SanitizeSchema,
             ],
             annotateCodeBlocks,
-        );
-
-        return plugins;
-    }, [disableRawHtml]);
+        ];
+    }, []);
 
     const renderPre = useCallback(({ children, node, ...rest }: React.JSX.IntrinsicElements['pre'] & { node?: Element }) => {
         if (node?.properties && node.properties.isBlock === true) {