feat(portal): structure discussion replies (#12216) (#12308)

Co-authored-by: tobiu <tobiasuhlig78@gmail.com>

Author: neo-gpt

ai/services/github-workflow/sync/CONTENT_GRAMMAR.md

@@ -35,8 +35,9 @@ Verified against the emit code (`PullRequestSyncer.mjs`, `DiscussionSyncer.mjs`,
 - Frontmatter: `number, title, author, category` (`Ideas`|`General`|`Q&A`|…), `createdAt, updatedAt, closed` (boolean), `closedAt`. No `state`, no `labels`.
 - Sections: `## Description`, then `## Comments`.
 - `## Comments` entries: `` ### `@user` commented on <ISO_Z> `` — the backtick form, **like PRs, not** the issue `- <ts> @user` event form.
-- Threaded replies follow their parent comment, each headed `` > **Reply by `@user`** on <ISO_Z> `` with the reply body as `> `-blockquoted lines (flattened; parent→child depth is not yet structured — see #12216).
-- An accepted answer is **not yet emitted** — see #12215 (gate any answer affordance to `category === 'Q&A'`).
+- Threaded replies follow their parent comment, each headed `` #### Reply depth=<N> by `@user` on <ISO_Z> `` with raw reply markdown after the header. Parent association is lexical: a reply belongs to the preceding top-level comment until the next top-level `` ### `@user` commented on <ISO_Z> `` header.
+- Legacy flattened reply blocks headed `` > **Reply by `@user`** on <ISO_Z> `` remain readable as part of the parent comment body; consumers must not split on those legacy blockquotes.
+- Accepted answers are emitted as GitHub-style callouts (`> [!ANSWER]`) before accepted top-level comments or accepted replies.
 
 ## Quick reference — entry header by type
 
@@ -47,6 +48,7 @@ Verified against the emit code (`PullRequestSyncer.mjs`, `DiscussionSyncer.mjs`,
 | PR comment | `## Comments` | `` ### `@user` commented on <ISO_Z> `` |
 | PR review | `## Reviews` | `` ### `@user` (<STATE>) reviewed on <ISO_Z> `` |
 | Discussion comment | `## Comments` | `` ### `@user` commented on <ISO_Z> `` |
+| Discussion reply | Parent discussion comment | `` #### Reply depth=<N> by `@user` on <ISO_Z> `` |
 
 ## Consumers
 

ai/services/github-workflow/sync/DiscussionSyncer.mjs

@@ -277,12 +277,11 @@ class DiscussionSyncer extends Base {
                         // Parse replies if any
                         if (comment.replies && comment.replies.nodes && comment.replies.nodes.length > 0) {
                             for (const reply of comment.replies.nodes) {
+                                body += `#### Reply depth=1 by \`@${reply.author?.login || 'unknown'}\` on ${reply.createdAt}\n\n`;
                                 if (reply.isAnswer) {
-                                    body += '> [!ANSWER]\n>\n';
+                                    body += '> [!ANSWER]\n\n';
                                 }
-                                body += `> **Reply by \`@${reply.author?.login || 'unknown'}\`** on ${reply.createdAt}\n>\n`;
-                                const blockquotedReply = reply.body.split('\n').map(l => `> ${l}`).join('\n');
-                                body += `${blockquotedReply}\n\n`;
+                                body += `${reply.body}\n\n`;
                             }
                         }
                         body += '---\n\n';

apps/portal/view/news/discussions/Component.mjs

@@ -5,7 +5,8 @@ const
     regexComments      = /\n## Comments\s*\n([\s\S]*)$/,
     regexCommentHeader = /^### `@([^`]+)` commented on ([\dTZ:.-]+)$/,
     regexFrontMatter   = /^---\n([\s\S]*?)\n---\n/,
-    regexH1            = /(<h1[^>]*>.*?<\/h1>)/;
+    regexH1            = /(<h1[^>]*>.*?<\/h1>)/,
+    regexReplyHeader   = /^#### Reply depth=(\d+) by `?@([^`]+)`? on ([\dTZ:.-]+)$/;
 
 /**
  * @summary The Markdown transformer for GitHub Discussions.
@@ -236,18 +237,20 @@ ${fullHtml}
      * @summary Parses the Discussion `## Comments` body into stable comment entries.
      *
      * The synced Discussion grammar uses backtick-wrapped `@user` headings as the durable entry
-     * boundary. Separator rules (`---`) are emitted between comments, but comment bodies can also
-     * contain their own `###` headings and horizontal rules, so this method splits only on the
-     * full comment header and trims just the trailing separator before the next entry.
+     * boundary and `#### Reply depth=N by @user on <timestamp>` headings as lexical children of
+     * the preceding top-level comment. Separator rules (`---`) are emitted between comments, but
+     * comment and reply bodies can also contain their own headings and horizontal rules, so this
+     * method splits only on the full comment/reply headers and trims just the trailing separator.
      * @param {String} content
-     * @returns {Object[]} `[{user, date, body}]`
+     * @returns {Object[]} `[{user, date, body, replies: [{depth, user, date, body}]}]`
      */
     parseComments(content) {
-        let lines   = content.split('\n'),
-            entries = [],
-            current = null,
-            i       = 0,
-            len     = lines.length,
+        let lines        = content.split('\n'),
+            entries      = [],
+            current      = null,
+            currentReply = null,
+            i            = 0,
+            len          = lines.length,
             line, match;
 
         const trimTrailingDelimiter = (rows) => {
@@ -264,20 +267,43 @@ ${fullHtml}
             }
         };
 
+        const flushReply = () => {
+            if (!currentReply) return;
+
+            trimTrailingDelimiter(currentReply.bodyLines);
+
+            let body = currentReply.bodyLines.join('\n').trim();
+
+            if (body) {
+                current.replies.push({
+                    depth: currentReply.depth,
+                    user : currentReply.user,
+                    date : currentReply.date,
+                    body
+                })
+            }
+
+            currentReply = null
+        };
+
         const flushComment = () => {
             if (!current) return;
 
+            flushReply();
             trimTrailingDelimiter(current.bodyLines);
 
             let body = current.bodyLines.join('\n').trim();
 
-            if (body) {
+            if (body || current.replies.length) {
                 entries.push({
-                    user: current.user,
-                    date: current.date,
-                    body
+                    user   : current.user,
+                    date   : current.date,
+                    body,
+                    replies: current.replies
                 })
             }
+
+            current = null
         };
 
         for (; i < len; i++) {
@@ -286,9 +312,18 @@ ${fullHtml}
 
             if (match) {
                 flushComment();
-                current = {user: match[1], date: match[2], bodyLines: []}
+                current = {user: match[1], date: match[2], bodyLines: [], replies: []}
             } else if (current) {
-                current.bodyLines.push(line)
+                match = line.match(regexReplyHeader);
+
+                if (match) {
+                    flushReply();
+                    currentReply = {depth: Number(match[1]), user: match[2], date: match[3], bodyLines: []}
+                } else if (currentReply) {
+                    currentReply.bodyLines.push(line)
+                } else {
+                    current.bodyLines.push(line)
+                }
             }
         }
 
@@ -326,13 +361,42 @@ ${fullHtml}
                                 <a class="neo-timeline-user" href="${repoUserUrl}${comment.user}" target="_blank">${comment.user}</a>
                                 <span class="neo-timeline-date">commented on ${me.formatTimestamp(comment.date)}</span>
                             </div>
-                            <div class="neo-timeline-body">${marked.parse(comment.body)}</div>
+                            <div class="neo-timeline-body">
+                                ${marked.parse(comment.body)}
+                                ${me.renderReplies(comment.replies)}
+                            </div>
                         </div>
                     </div>`
         });
 
         return html
     }
+
+    /**
+     * @summary Renders structured Discussion replies inside the parent comment bubble.
+     *
+     * Replies intentionally do not add records to `timelineData`: the shared timeline/canvas
+     * contract remains top-level comments plus description, while reply identity stays visible
+     * as nested DOM inside the owning comment.
+     * @param {Object[]} replies
+     * @returns {String}
+     */
+    renderReplies(replies = []) {
+        let {repoUserUrl} = this;
+
+        if (!replies.length) {
+            return ''
+        }
+
+        return `<div class="neo-discussion-replies">${replies.map(reply => `
+            <div class="neo-discussion-reply depth-${reply.depth}">
+                <div class="neo-discussion-reply-header">
+                    <a class="neo-timeline-user" href="${repoUserUrl}${reply.user}" target="_blank">${reply.user}</a>
+                    <span class="neo-timeline-date">replied on ${this.formatTimestamp(reply.date)}</span>
+                </div>
+                <div class="neo-discussion-reply-body">${marked.parse(reply.body)}</div>
+            </div>`).join('')}</div>`
+    }
 }
 
 export default Neo.setupClass(Component);

resources/scss/src/apps/portal/news/discussions/Component.scss

@@ -18,4 +18,26 @@
             padding-left: 12px;
         }
     }
+
+    .neo-discussion-replies {
+        border-left : 2px solid var(--gh-timeline-border);
+        margin-top  : 12px;
+        padding-left: 14px;
+    }
+
+    .neo-discussion-reply {
+        margin-top: 12px;
+
+        .neo-discussion-reply-header {
+            align-items: baseline;
+            display    : flex;
+            flex-wrap  : wrap;
+            gap        : 8px;
+            margin     : 0 0 6px;
+        }
+
+        .neo-discussion-reply-body > :last-child {
+            margin-bottom: 0;
+        }
+    }
 }

test/playwright/unit/ai/services/github-workflow/DiscussionSyncer.spec.mjs

@@ -153,11 +153,56 @@ test.describe('Neo.ai.services.github-workflow.sync.DiscussionSyncer', () => {
             'Accepted answer body.'
         ].join('\n'));
         expect(content).toContain([
+            '#### Reply depth=1 by `@neo-reply-answer` on 2026-05-02T03:00:00Z',
+            '',
             '> [!ANSWER]',
-            '>',
-            '> **Reply by `@neo-reply-answer`** on 2026-05-02T03:00:00Z',
-            '>',
-            '> Nested accepted answer.'
+            '',
+            'Nested accepted answer.'
+        ].join('\n'));
+    });
+
+    test('emits structured reply markers that preserve parent comment identity', async () => {
+        const discussion = buildDiscussion(24005, {
+            comments: {nodes: [{
+                author: {login: 'neo-parent'},
+                body: 'Parent comment body.',
+                createdAt: '2026-05-02T01:00:00Z',
+                replies: {nodes: [{
+                    author: {login: 'neo-child'},
+                    body: [
+                        'Reply body.',
+                        '',
+                        '### Inner heading remains reply markdown.'
+                    ].join('\n'),
+                    createdAt: '2026-05-02T02:00:00Z'
+                }]}
+            }]}
+        });
+
+        GraphqlService.query = async () => ({
+            repository: {
+                discussions: {
+                    nodes: [discussion],
+                    pageInfo: {hasNextPage: false, endCursor: null}
+                }
+            }
+        });
+
+        await DiscussionSyncer.syncDiscussions({discussions: {}});
+
+        const targetPath = path.join(aiConfig.issueSync.discussionsDir, 'chunk-1', 'discussion-24005.md');
+        const content = await fs.readFile(targetPath, 'utf8');
+
+        expect(content).toContain([
+            '### `@neo-parent` commented on 2026-05-02T01:00:00Z',
+            '',
+            'Parent comment body.',
+            '',
+            '#### Reply depth=1 by `@neo-child` on 2026-05-02T02:00:00Z',
+            '',
+            'Reply body.',
+            '',
+            '### Inner heading remains reply markdown.'
         ].join('\n'));
     });
 

test/playwright/unit/apps/portal/view/news/discussions/Component.spec.mjs

@@ -16,10 +16,11 @@ import Component      from '../../../../../../../../apps/portal/view/news/discus
  *
  * The view inherits the shared timeline/canvas contract from the ticket content stack; these tests pin
  * only the irreducibly Discussion-specific pieces: folded YAML titles, the backtick-`@user` comment
- * entry boundary, and category / closed-state badges. `parseComments` and the badge helpers are tested
- * directly on the prototype to avoid constructing the full state-provider-backed content component.
+ * entry boundary, structured reply parsing, and category / closed-state badges. Parser and badge
+ * helpers are tested directly on the prototype to avoid constructing the full state-provider-backed
+ * content component.
  */
-const {parseFrontMatter, parseComments, getClosedBadgeHtml, getCategoryBadgeHtml} = Component.prototype;
+const {parseFrontMatter, parseComments, renderReplies, getClosedBadgeHtml, getCategoryBadgeHtml} = Component.prototype;
 
 test.describe('Portal.view.news.discussions.Component - Discussion markdown parser', () => {
     test('parses folded and literal frontmatter block scalars used by discussion titles', () => {
@@ -76,6 +77,87 @@ test.describe('Portal.view.news.discussions.Component - Discussion markdown pars
         })
     });
 
+    test('parses structured replies as children of the preceding top-level comment', () => {
+        const commentsRaw = [
+            '### `@parent` commented on 2026-05-20T17:39:52Z',
+            '',
+            'Parent body.',
+            '',
+            '#### Reply depth=1 by `@child` on 2026-05-20T18:00:00Z',
+            '',
+            '> [!ANSWER]',
+            '',
+            'Reply body.',
+            '',
+            '### Nested reply heading stays in reply markdown.',
+            '',
+            '---',
+            '',
+            '### `@next` commented on 2026-05-20T19:00:00Z',
+            '',
+            'Next comment.'
+        ].join('\n');
+
+        const entries = parseComments(commentsRaw);
+
+        expect(entries).toHaveLength(2);
+        expect(entries[0]).toMatchObject({
+            user: 'parent',
+            date: '2026-05-20T17:39:52Z',
+            body: 'Parent body.'
+        });
+        expect(entries[0].replies).toHaveLength(1);
+        expect(entries[0].replies[0]).toMatchObject({
+            depth: 1,
+            user : 'child',
+            date : '2026-05-20T18:00:00Z'
+        });
+        expect(entries[0].replies[0].body).toContain('> [!ANSWER]');
+        expect(entries[0].replies[0].body).toContain('### Nested reply heading stays in reply markdown.');
+        expect(entries[0].replies[0].body).not.toMatch(/\n---$/);
+        expect(entries[1]).toMatchObject({
+            user: 'next',
+            body: 'Next comment.'
+        })
+    });
+
+    test('legacy flattened reply blockquotes remain parent-body markdown', () => {
+        const commentsRaw = [
+            '### `@parent` commented on 2026-05-20T17:39:52Z',
+            '',
+            'Parent body.',
+            '',
+            '> **Reply by `@legacy-child`** on 2026-05-20T18:00:00Z',
+            '>',
+            '> Legacy reply body.'
+        ].join('\n');
+
+        const entries = parseComments(commentsRaw);
+
+        expect(entries).toHaveLength(1);
+        expect(entries[0].replies).toHaveLength(0);
+        expect(entries[0].body).toContain('> **Reply by `@legacy-child`** on 2026-05-20T18:00:00Z');
+        expect(entries[0].body).toContain('> Legacy reply body.')
+    });
+
+    test('renders replies inside the parent comment bubble without timeline section records', () => {
+        const html = renderReplies.call({
+            repoUserUrl    : 'https://github.com/',
+            formatTimestamp: value => value
+        }, [{
+            depth: 1,
+            user : 'child',
+            date : '2026-05-20T18:00:00Z',
+            body : 'Reply body.'
+        }]);
+
+        expect(html).toContain('neo-discussion-replies');
+        expect(html).toContain('neo-discussion-reply depth-1');
+        expect(html).toContain('https://github.com/child');
+        expect(html).toContain('replied on 2026-05-20T18:00:00Z');
+        expect(html).toContain('<p>Reply body.</p>')
+    });
+
     test('category and closed-state badges render stable semantic classes', () => {
         const category = getCategoryBadgeHtml('Ideas'),
               closed   = getClosedBadgeHtml(true),