articles: discussion threads + Related Forum Posts sidebar

ArticleComments component renders under every news + articles detail
page. Anonymous visitors see all existing comments and a Sign-in CTA;
signed-in members get a composer, threaded replies, and up/down votes.
AI personas are tagged with a small AI chip so readers know what
they're interacting with — same persona TZ rules from #63 apply.

Schema extensions on bb.article_comments: parent_comment_id self-FK
for one-level threading, denormalized author fields, vote counters,
is_ai_seeded flag, status enum. user_id relaxed to nullable so AI rows
can exist without a real user_profile; CHECK constraint enforces 'real
user OR is_ai_seeded' so anonymous comments can never sneak through.
forum_votes.target_type check expanded to include 'comment' — same
polymorphic vote table powers thread/reply/comment votes.

New Related Forum Posts sidebar on both /articles/[slug] and
/news/[slug]. getRelatedForumThreads() does title-keyword ILIKE OR
against forum_threads, ranked by reply_count + recency, with recently-
active fallback so the box is never empty. 6 threads per article.

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

src/app/articles/[slug]/ArticleDetailClient.tsx

@@ -8,11 +8,14 @@ import SidebarAdStack from "@/components/SidebarAdStack";
 import StarRating from "@/components/StarRating";
 import { createClient } from "@/lib/supabase/client";
 import type { Article } from "@/lib/articles/types";
+import type { RelatedForumThread } from "@/lib/articles/legacy-source";
+import ArticleComments from "@/components/ArticleComments";
 
 // DO NOT OVERRIDE — ArticleDetailClient interface and session tracking
 interface ArticleDetailClientProps {
   article: Article;
   relatedArticles: Article[];
+  relatedForumThreads?: RelatedForumThread[];
 }
 
 function getSessionId(): string {
@@ -25,7 +28,7 @@ function getSessionId(): string {
   return sid;
 }
 
-export default function ArticleDetailClient({ article, relatedArticles }: ArticleDetailClientProps) {
+export default function ArticleDetailClient({ article, relatedArticles, relatedForumThreads = [] }: ArticleDetailClientProps) {
   const [isSaved, setIsSaved] = useState(false);
   const [savingState, setSavingState] = useState<"idle" | "saving" | "removing">("idle");
   const [saveToast, setSaveToast] = useState<string | null>(null);
@@ -386,6 +389,10 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
                 Back to {sectionLabel}
               </Link>
             </div>
+
+            {/* Article comments — anonymous read, signed-in members can
+                post + vote + reply. AI personas participate too (tagged). */}
+            <ArticleComments articleSlug={article.slug} />
           </div>
 
           {/* Sidebar */}
@@ -424,6 +431,45 @@ export default function ArticleDetailClient({ article, relatedArticles }: Articl
               </div>
             </div>
 
+            {/* Related Forum Posts — surfaces broadcast-pro discussion
+                threads relevant to the same topic/keyword as the article.
+                Title-keyword match, recency-ordered. Falls back to most-
+                recently-active threads so the box is never empty. */}
+            {relatedForumThreads.length > 0 && (
+              <div className="bg-[#111] border border-[#222] p-5">
+                <h3 className="font-body font-bold text-xs text-[#3b82f6] uppercase tracking-widest mb-4 pb-2 border-b border-[#222]">
+                  Related Forum Posts
+                </h3>
+                <ul className="space-y-3.5">
+                  {relatedForumThreads.map((t) => (
+                    <li key={t.id}>
+                      <Link href={`/forum/thread/${t.id}`} className="group block">
+                        <p className="font-heading text-[#e0e0e0] text-xs font-bold group-hover:text-[#3b82f6] transition-colors line-clamp-2 leading-snug">
+                          {t.title}
+                        </p>
+                        <p className="flex items-center gap-2 mt-1 text-[10px] text-[#666]">
+                          {t.category_name && (
+                            <span className="text-[#3b82f6] font-body font-bold uppercase tracking-wider">
+                              {t.category_name}
+                            </span>
+                          )}
+                          <span>·</span>
+                          <span>{t.reply_count} {t.reply_count === 1 ? "reply" : "replies"}</span>
+                          {t.vote_score > 0 && <><span>·</span><span>▲ {t.vote_score}</span></>}
+                        </p>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+                <Link
+                  href="/forum"
+                  className="block mt-4 pt-3 border-t border-[#222] text-[11px] text-[#3b82f6] hover:underline font-body font-semibold uppercase tracking-wider"
+                >
+                  Browse all forum threads →
+                </Link>
+              </div>
+            )}
+
             {/* Sidebar ad stack — 300x600 + 300x250 rotating */}
             <SidebarAdStack />
           </aside>

src/app/articles/[slug]/page.tsx

@@ -6,6 +6,7 @@ import {
   getLegacyArticleBySlug,
   getLegacyRecentSlugs,
   getLegacyRelatedArticles,
+  getRelatedForumThreads, type RelatedForumThread,
 } from "@/lib/articles/legacy-source";
 
 export const revalidate = 3600;
@@ -33,11 +34,15 @@ function absoluteImage(src: string | undefined | null): string {
 async function loadArticle(slug: string): Promise<{
   article: Article | null;
   related: Article[];
+  relatedForumThreads: RelatedForumThread[];
 }> {
   const imported = await getLegacyArticleBySlug(slug);
-  if (!imported) return { article: null, related: [] };
-  const related = await getLegacyRelatedArticles(slug, imported.category, 3);
-  return { article: imported, related };
+  if (!imported) return { article: null, related: [], relatedForumThreads: [] };
+  const [related, relatedForumThreads] = await Promise.all([
+    getLegacyRelatedArticles(slug, imported.category, 3),
+    getRelatedForumThreads(imported.title, 6),
+  ]);
+  return { article: imported, related, relatedForumThreads };
 }
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
@@ -77,7 +82,7 @@ export async function generateStaticParams() {
 
 export default async function ArticlePage({ params }: PageProps) {
   const { slug } = await params;
-  const { article, related } = await loadArticle(slug);
+  const { article, related, relatedForumThreads } = await loadArticle(slug);
   if (!article) {
     // Slug isn't in any of our article tables — send the reader to the news
     // index so a click from the homepage/ticker doesn't dead-end on 404.
@@ -107,7 +112,7 @@ export default async function ArticlePage({ params }: PageProps) {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
       />
-      <ArticleDetailPage article={article} relatedArticles={related} />
+      <ArticleDetailPage article={article} relatedArticles={related} relatedForumThreads={relatedForumThreads} />
     </>
   );
 }