initial commit: rocket.new export of broadcastbeat

src/app/forum/ForumIndexPage.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+
+const ForumIndexPage = () => {
+  React.useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.warn('Placeholder: ForumIndexPage is not implemented yet.');
+  }, []);
+  return (
+    <>
+  { /*ForumIndexPage */} 
+ </>
+  );
+};
+
+export default ForumIndexPage;

src/app/forum/ForumSEOWrapper.tsx

@@ -0,0 +1,2 @@
+// This file is intentionally minimal — SEO is handled by src/app/forum/layout.tsx
+export {};

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

@@ -0,0 +1,471 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+
+interface ForumCategory {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  icon: string;
+  thread_count: number;
+}
+
+interface ForumThread {
+  id: string;
+  title: string;
+  body: string;
+  author_name: string;
+  status: string;
+  reply_count: number;
+  view_count: number;
+  upvote_count?: number;
+  last_reply_at: string;
+  created_at: string;
+  is_ai_seeded: boolean;
+}
+
+type SortOption = 'newest' | 'top-voted' | 'unanswered';
+type TopMetric = 'upvotes' | 'replies' | 'views';
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+function TopThreadsWidget({ categoryId }: { categoryId: string }) {
+  const [activeMetric, setActiveMetric] = useState<TopMetric>('upvotes');
+  const [threads, setThreads] = useState<ForumThread[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const sortMap: Record<TopMetric, string> = {
+      upvotes: 'top-voted',
+      replies: 'most-replied',
+      views: 'most-viewed',
+    };
+    const params = new URLSearchParams({ category_id: categoryId, limit: '5', sort: sortMap[activeMetric] });
+    fetch(`/api/forum/threads?${params.toString()}`)
+      .then(r => r.json())
+      .then(d => {
+        setThreads(d.threads || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [activeMetric, categoryId]);
+
+  const metrics: { value: TopMetric; label: string; icon: string }[] = [
+    { value: 'upvotes', label: 'Top Voted', icon: '▲' },
+    { value: 'replies', label: 'Most Replies', icon: '💬' },
+    { value: 'views', label: 'Most Viewed', icon: '👁' },
+  ];
+
+  const getMetricValue = (thread: ForumThread) => {
+    if (activeMetric === 'upvotes') return { value: thread.upvote_count ?? 0, label: 'votes', color: 'text-[#22c55e]' };
+    if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#3b82f6]' };
+    return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
+  };
+
+  return (
+    <div className="bg-[#1a1a1a] border border-[#252525] rounded-xl overflow-hidden mb-6">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-[#252525]">
+        <div className="flex items-center gap-2">
+          <span className="text-lg">🏆</span>
+          <h2 className="text-white font-heading font-bold text-base">Top Performing Threads</h2>
+        </div>
+        {/* Metric Tabs */}
+        <div className="flex gap-1 bg-[#111] border border-[#2a2a2a] rounded-lg p-1">
+          {metrics.map(m => (
+            <button
+              key={m.value}
+              onClick={() => setActiveMetric(m.value)}
+              className={`px-3 py-1 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
+                activeMetric === m.value
+                  ? 'bg-[#3b82f6] text-white'
+                  : 'text-[#666] hover:text-[#aaa]'
+              }`}
+            >
+              <span className="mr-1">{m.icon}</span>
+              {m.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Thread List */}
+      <div className="divide-y divide-[#1e1e1e]">
+        {loading && (
+          <>
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3 px-5 py-3">
+                <div className="w-6 h-6 bg-[#252525] rounded animate-pulse flex-shrink-0" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-3.5 bg-[#252525] rounded animate-pulse w-3/4" />
+                  <div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
+                </div>
+                <div className="w-10 h-8 bg-[#252525] rounded animate-pulse flex-shrink-0" />
+              </div>
+            ))}
+          </>
+        )}
+        {!loading && threads.length === 0 && (
+          <div className="px-5 py-8 text-center text-[#555] font-body text-sm">
+            No threads yet. Be the first to start a discussion!
+          </div>
+        )}
+        {!loading && threads.map((thread, idx) => {
+          const metric = getMetricValue(thread);
+          return (
+            <Link
+              key={thread.id}
+              href={`/forum/thread/${thread.id}`}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-[#1e2a3a] transition-colors group"
+            >
+              {/* Rank */}
+              <span className={`flex-shrink-0 w-6 text-center font-heading font-bold text-sm ${
+                idx === 0 ? 'text-[#f59e0b]' : idx === 1 ? 'text-[#9ca3af]' : idx === 2 ? 'text-[#b45309]' : 'text-[#444]'
+              }`}>
+                {idx + 1}
+              </span>
+              {/* Thread info */}
+              <div className="flex-1 min-w-0">
+                <p className="text-white font-body text-sm font-semibold group-hover:text-[#3b82f6] transition-colors truncate leading-snug">
+                  {thread.title}
+                </p>
+                <p className="text-[#555] font-body text-xs mt-0.5">
+                  <span className="text-[#666]">{thread.author_name}</span>
+                  {' · '}{timeAgo(thread.created_at)}
+                </p>
+              </div>
+              {/* Metric value */}
+              <div className="flex-shrink-0 text-right min-w-[48px]">
+                <div className={`font-heading font-bold text-sm ${metric.color}`}>{metric.value.toLocaleString()}</div>
+                <div className="text-[#444] font-body text-xs">{metric.label}</div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default function ForumCategoryPage() {
+  const params = useParams();
+  const slug = params?.slug as string;
+
+  const [category, setCategory] = useState<ForumCategory | null>(null);
+  const [threads, setThreads] = useState<ForumThread[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [threadsLoading, setThreadsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showNewThread, setShowNewThread] = useState(false);
+  const [newTitle, setNewTitle] = useState('');
+  const [newBody, setNewBody] = useState('');
+  const [newAuthor, setNewAuthor] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sort, setSort] = useState<SortOption>('newest');
+
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), 350);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  // Load category info once
+  useEffect(() => {
+    if (!slug) return;
+    fetch('/api/forum/categories')
+      .then(r => r.json())
+      .then(d => {
+        const cat = (d.categories || []).find((c: ForumCategory) => c.slug === slug);
+        setCategory(cat || null);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Failed to load category.');
+        setLoading(false);
+      });
+  }, [slug]);
+
+  // Load threads when category/search/sort changes
+  const fetchThreads = useCallback(() => {
+    if (!category) return;
+    setThreadsLoading(true);
+    const qParams = new URLSearchParams({ category_id: category.id, limit: '50', sort });
+    if (debouncedSearch.trim()) qParams.set('search', debouncedSearch.trim());
+
+    fetch(`/api/forum/threads?${qParams.toString()}`)
+      .then(r => r.json())
+      .then(d => {
+        setThreads(d?.threads || []);
+        setThreadsLoading(false);
+      })
+      .catch(() => {
+        setError('Failed to load threads.');
+        setThreadsLoading(false);
+      });
+  }, [category, debouncedSearch, sort]);
+
+  useEffect(() => {
+    fetchThreads();
+  }, [fetchThreads]);
+
+  const handleNewThread = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newTitle.trim() || !newBody.trim() || !category) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch('/api/forum/threads', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          category_id: category.id,
+          title: newTitle,
+          body: newBody,
+          author_name: newAuthor || 'Anonymous',
+        }),
+      });
+      const data = await res.json();
+      if (data.thread) {
+        setThreads(prev => [data.thread, ...prev]);
+        setNewTitle('');
+        setNewBody('');
+        setNewAuthor('');
+        setShowNewThread(false);
+      }
+    } catch {
+      // silent
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const sortOptions: { value: SortOption; label: string }[] = [
+    { value: 'newest', label: 'Newest' },
+    { value: 'top-voted', label: 'Top Voted' },
+    { value: 'unanswered', label: 'Unanswered' },
+  ];
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen bg-[#111111]">
+        {/* Breadcrumb + Header */}
+        <div className="bg-[#1a2535] border-b border-[#2a3a50]">
+          <div className="max-w-container mx-auto px-4 py-8">
+            <nav className="text-sm font-body text-[#666] mb-3">
+              <Link href="/forum" className="hover:text-[#3b82f6] transition-colors">Forum</Link>
+              <span className="mx-2">›</span>
+              <span className="text-[#aab4c4]">{category?.name || slug}</span>
+            </nav>
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">{category?.icon || '💬'}</span>
+                <div>
+                  <h1 className="text-2xl font-heading font-bold text-white">{category?.name || 'Loading...'}</h1>
+                  {category && (
+                    <p className="text-[#aab4c4] font-body text-sm mt-0.5">{category.thread_count} threads</p>
+                  )}
+                </div>
+              </div>
+              <button
+                onClick={() => setShowNewThread(!showNewThread)}
+                className="flex-shrink-0 bg-[#3b82f6] hover:bg-[#2563eb] text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors"
+              >
+                + New Thread
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-container mx-auto px-4 py-6">
+          {/* New Thread Form */}
+          {showNewThread && (
+            <form onSubmit={handleNewThread} className="bg-[#1a2535] border border-[#2a3a50] rounded-lg p-5 mb-6">
+              <h3 className="text-white font-heading font-semibold mb-4">Start a New Thread</h3>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Your name (optional)"
+                  value={newAuthor}
+                  onChange={e => setNewAuthor(e.target.value)}
+                  className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6]"
+                />
+                <input
+                  type="text"
+                  placeholder="Thread title *"
+                  value={newTitle}
+                  onChange={e => setNewTitle(e.target.value)}
+                  required
+                  className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6]"
+                />
+                <textarea
+                  placeholder="What would you like to discuss? *"
+                  value={newBody}
+                  onChange={e => setNewBody(e.target.value)}
+                  required
+                  rows={5}
+                  className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6] resize-none"
+                />
+                <div className="flex gap-3">
+                  <button
+                    type="submit"
+                    disabled={submitting}
+                    className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
+                  >
+                    {submitting ? 'Posting...' : 'Post Thread'}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setShowNewThread(false)}
+                    className="bg-[#252525] hover:bg-[#333] text-[#aaa] font-body text-sm px-5 py-2 rounded-lg transition-colors"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </form>
+          )}
+
+          {/* Top Performing Threads Widget (shown when category is loaded) */}
+          {!loading && category && <TopThreadsWidget categoryId={category.id} />}
+
+          {/* Search + Sort Bar */}
+          <div className="flex flex-col sm:flex-row gap-3 mb-5">
+            {/* Search */}
+            <div className="relative flex-1">
+              <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#555]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+              </svg>
+              <input
+                type="text"
+                placeholder="Search threads in this category..."
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                className="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#3b82f6] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
+              />
+              {search && (
+                <button
+                  onClick={() => setSearch('')}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[#555] hover:text-[#aaa] transition-colors"
+                  aria-label="Clear search"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              )}
+            </div>
+
+            {/* Sort Options */}
+            <div className="flex gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1 flex-shrink-0">
+              {sortOptions.map(opt => (
+                <button
+                  key={opt.value}
+                  onClick={() => setSort(opt.value)}
+                  className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
+                    sort === opt.value
+                      ? 'bg-[#3b82f6] text-white'
+                      : 'text-[#888] hover:text-white'
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {(loading || threadsLoading) && (
+            <div className="space-y-2">
+              {[...Array(10)].map((_, i) => (
+                <div key={i} className="bg-[#1a1a1a] rounded-lg h-16 animate-pulse border border-[#252525]" />
+              ))}
+            </div>
+          )}
+
+          {error && (
+            <div className="bg-red-900/20 border border-red-800 rounded-lg p-4 text-red-400 font-body">
+              {error}
+            </div>
+          )}
+
+          {!loading && !threadsLoading && !error && threads.length === 0 && (
+            <div className="text-center py-16 text-[#555] font-body">
+              <p className="text-lg mb-2">
+                {search ? 'No threads match your search' : sort === 'unanswered' ? 'No unanswered threads' : 'No threads yet'}
+              </p>
+              <p className="text-sm">
+                {search ? 'Try different keywords.' : sort === 'unanswered' ? 'All threads have replies — great community!' : 'Be the first to start a discussion in this category.'}
+              </p>
+            </div>
+          )}
+
+          {!loading && !threadsLoading && threads.length > 0 && (
+            <div className="space-y-1">
+              {debouncedSearch && (
+                <p className="text-[#666] font-body text-xs mb-2">{threads.length} result{threads.length !== 1 ? 's' : ''} for &ldquo;{debouncedSearch}&rdquo;</p>
+              )}
+              {threads.map(thread => (
+                <Link
+                  key={thread.id}
+                  href={`/forum/thread/${thread.id}`}
+                  className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
+                >
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      {thread.status === 'pinned' && (
+                        <span className="text-xs bg-[#3b82f6]/20 text-[#3b82f6] px-2 py-0.5 rounded font-body font-semibold">PINNED</span>
+                      )}
+                      {thread.status === 'closed' && (
+                        <span className="text-xs bg-[#555]/20 text-[#888] px-2 py-0.5 rounded font-body">CLOSED</span>
+                      )}
+                      {thread.reply_count === 0 && (
+                        <span className="text-xs bg-[#f59e0b]/10 text-[#f59e0b] px-2 py-0.5 rounded font-body">UNANSWERED</span>
+                      )}
+                      <h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
+                        {thread.title}
+                      </h3>
+                    </div>
+                    <p className="text-[#666] font-body text-xs mt-0.5">
+                      by <span className="text-[#888]">{thread.author_name}</span>
+                      {' · '}{timeAgo(thread.created_at)}
+                    </p>
+                  </div>
+                  <div className="flex-shrink-0 text-right hidden sm:block">
+                    <div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
+                    <div className="text-[#555] font-body text-xs">replies</div>
+                  </div>
+                  {sort === 'top-voted' && (
+                    <div className="flex-shrink-0 text-right hidden md:block">
+                      <div className="text-[#22c55e] font-body text-sm font-semibold">+{thread.upvote_count ?? 0}</div>
+                      <div className="text-[#555] font-body text-xs">votes</div>
+                    </div>
+                  )}
+                  <div className="flex-shrink-0 text-right hidden md:block">
+                    <div className="text-[#666] font-body text-xs">{timeAgo(thread.last_reply_at)}</div>
+                    <div className="text-[#444] font-body text-xs">last reply</div>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/forum/layout.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Community Forum — BroadcastBeat',
+  description: 'Connect with broadcast engineering professionals. Discuss live production, IP workflows, streaming, audio, cameras, AI automation, and more.',
+  alternates: { canonical: '/forum' },
+  openGraph: {
+    title: 'Community Forum — BroadcastBeat',
+    description: 'Connect with broadcast engineering professionals. Ask questions, share expertise, and discuss broadcast technology.',
+    url: '/forum',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Community Forum — BroadcastBeat',
+    description: 'Connect with broadcast engineering professionals on BroadcastBeat.',
+  },
+};
+
+export default function ForumLayout({ children }: { children: React.ReactNode }) {
+  const schema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: 'BroadcastBeat Community Forum',
+    description: 'Community forum for broadcast engineering professionals.',
+    url: 'https://broadcastb5322.builtwithrocket.new/forum',
+    isPartOf: {
+      '@type': 'WebSite',
+      name: 'BroadcastBeat',
+      url: 'https://broadcastb5322.builtwithrocket.new',
+    },
+    breadcrumb: {
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://broadcastb5322.builtwithrocket.new' },
+        { '@type': 'ListItem', position: 2, name: 'Forum', item: 'https://broadcastb5322.builtwithrocket.new/forum' },
+      ],
+    },
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
+      />
+      {children}
+    </>
+  );
+}

src/app/forum/page.tsx

@@ -0,0 +1,575 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { createClient } from '@/lib/supabase/client';
+
+interface ForumCategory {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  icon: string;
+  thread_count: number;
+  post_count: number;
+  display_order: number;
+}
+
+interface ForumThread {
+  id: string;
+  title: string;
+  author_name: string;
+  reply_count: number;
+  view_count: number;
+  last_reply_at: string;
+  created_at: string;
+  upvote_count?: number;
+  forum_categories?: { name: string; slug: string };
+}
+
+type SortOption = 'newest' | 'top-voted' | 'unanswered';
+type TopMetric = 'upvotes' | 'replies' | 'views';
+type FeedMode = 'discover' | 'following';
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+function TopThreadsWidget({ categoryId }: { categoryId?: string }) {
+  const [activeMetric, setActiveMetric] = useState<TopMetric>('upvotes');
+  const [threads, setThreads] = useState<ForumThread[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    const sortMap: Record<TopMetric, string> = {
+      upvotes: 'top-voted',
+      replies: 'most-replied',
+      views: 'most-viewed',
+    };
+    const params = new URLSearchParams({ limit: '5', sort: sortMap[activeMetric] });
+    if (categoryId) params.set('category_id', categoryId);
+
+    fetch(`/api/forum/threads?${params.toString()}`)
+      .then(r => r.json())
+      .then(d => {
+        setThreads(d.threads || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [activeMetric, categoryId]);
+
+  const metrics: { value: TopMetric; label: string; icon: string }[] = [
+    { value: 'upvotes', label: 'Top Voted', icon: '▲' },
+    { value: 'replies', label: 'Most Replies', icon: '💬' },
+    { value: 'views', label: 'Most Viewed', icon: '👁' },
+  ];
+
+  const getMetricValue = (thread: ForumThread) => {
+    if (activeMetric === 'upvotes') return { value: thread.upvote_count ?? 0, label: 'votes', color: 'text-[#22c55e]' };
+    if (activeMetric === 'replies') return { value: thread.reply_count, label: 'replies', color: 'text-[#3b82f6]' };
+    return { value: thread.view_count, label: 'views', color: 'text-[#f59e0b]' };
+  };
+
+  return (
+    <div className="bg-[#1a1a1a] border border-[#252525] rounded-xl overflow-hidden mb-8">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-[#252525]">
+        <div className="flex items-center gap-2">
+          <span className="text-lg">🏆</span>
+          <h2 className="text-white font-heading font-bold text-base">Top Performing Threads</h2>
+        </div>
+        {/* Metric Tabs */}
+        <div className="flex gap-1 bg-[#111] border border-[#2a2a2a] rounded-lg p-1">
+          {metrics.map(m => (
+            <button
+              key={m.value}
+              onClick={() => setActiveMetric(m.value)}
+              className={`px-3 py-1 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
+                activeMetric === m.value
+                  ? 'bg-[#3b82f6] text-white'
+                  : 'text-[#666] hover:text-[#aaa]'
+              }`}
+            >
+              <span className="mr-1">{m.icon}</span>
+              {m.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Thread List */}
+      <div className="divide-y divide-[#1e1e1e]">
+        {loading && (
+          <>
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3 px-5 py-3">
+                <div className="w-6 h-6 bg-[#252525] rounded animate-pulse flex-shrink-0" />
+                <div className="flex-1 space-y-1.5">
+                  <div className="h-3.5 bg-[#252525] rounded animate-pulse w-3/4" />
+                  <div className="h-2.5 bg-[#1e1e1e] rounded animate-pulse w-1/3" />
+                </div>
+                <div className="w-10 h-8 bg-[#252525] rounded animate-pulse flex-shrink-0" />
+              </div>
+            ))}
+          </>
+        )}
+        {!loading && threads.length === 0 && (
+          <div className="px-5 py-8 text-center text-[#555] font-body text-sm">
+            No threads yet. Be the first to start a discussion!
+          </div>
+        )}
+        {!loading && threads.map((thread, idx) => {
+          const metric = getMetricValue(thread);
+          return (
+            <Link
+              key={thread.id}
+              href={`/forum/thread/${thread.id}`}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-[#1e2a3a] transition-colors group"
+            >
+              {/* Rank */}
+              <span className={`flex-shrink-0 w-6 text-center font-heading font-bold text-sm ${
+                idx === 0 ? 'text-[#f59e0b]' : idx === 1 ? 'text-[#9ca3af]' : idx === 2 ? 'text-[#b45309]' : 'text-[#444]'
+              }`}>
+                {idx + 1}
+              </span>
+              {/* Thread info */}
+              <div className="flex-1 min-w-0">
+                <p className="text-white font-body text-sm font-semibold group-hover:text-[#3b82f6] transition-colors truncate leading-snug">
+                  {thread.title}
+                </p>
+                <p className="text-[#555] font-body text-xs mt-0.5">
+                  <span className="text-[#666]">{thread.author_name}</span>
+                  {thread.forum_categories && (
+                    <> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
+                  )}
+                  {' · '}{timeAgo(thread.created_at)}
+                </p>
+              </div>
+              {/* Metric value */}
+              <div className="flex-shrink-0 text-right min-w-[48px]">
+                <div className={`font-heading font-bold text-sm ${metric.color}`}>{metric.value.toLocaleString()}</div>
+                <div className="text-[#444] font-body text-xs">{metric.label}</div>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default function ForumIndexPage() {
+  const [categories, setCategories] = useState<ForumCategory[]>([]);
+  const [threads, setThreads] = useState<ForumThread[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [threadsLoading, setThreadsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const [search, setSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [sort, setSort] = useState<SortOption>('newest');
+
+  // Feed mode: discover (default) or following
+  const [feedMode, setFeedMode] = useState<FeedMode>('discover');
+  const [followingThreads, setFollowingThreads] = useState<ForumThread[]>([]);
+  const [followingLoading, setFollowingLoading] = useState(false);
+  const [currentUserId, setCurrentUserId] = useState<string | null>(null);
+
+  // Debounced search value
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedSearch(search), 350);
+    return () => clearTimeout(t);
+  }, [search]);
+
+  // Get current user
+  useEffect(() => {
+    const supabase = createClient();
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setCurrentUserId(user?.id || null);
+    });
+  }, []);
+
+  // Load categories once
+  useEffect(() => {
+    fetch('/api/forum/categories')
+      .then(r => r.json())
+      .then(d => {
+        setCategories(d.categories || []);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Failed to load forum categories.');
+        setLoading(false);
+      });
+  }, []);
+
+  // Load following feed when tab is active
+  useEffect(() => {
+    if (feedMode !== 'following' || !currentUserId) return;
+    setFollowingLoading(true);
+    fetch('/api/forum/following-feed?limit=30')
+      .then(r => r.json())
+      .then(d => {
+        setFollowingThreads(d.threads || []);
+        setFollowingLoading(false);
+      })
+      .catch(() => setFollowingLoading(false));
+  }, [feedMode, currentUserId]);
+
+  // Load threads when search/category/sort changes
+  const isSearchMode = debouncedSearch.trim() !== '' || selectedCategory !== '' || sort !== 'newest';
+
+  useEffect(() => {
+    if (!isSearchMode) {
+      setThreads([]);
+      return;
+    }
+    setThreadsLoading(true);
+    const params = new URLSearchParams({ limit: '30', sort });
+    if (debouncedSearch.trim()) params.set('search', debouncedSearch.trim());
+    if (selectedCategory) params.set('category_id', selectedCategory);
+
+    fetch(`/api/forum/threads?${params.toString()}`)
+      .then(r => r.json())
+      .then(d => {
+        setThreads(d.threads || []);
+        setThreadsLoading(false);
+      })
+      .catch(() => setThreadsLoading(false));
+  }, [debouncedSearch, selectedCategory, sort, isSearchMode]);
+
+  const sortOptions: { value: SortOption; label: string }[] = [
+    { value: 'newest', label: 'Newest' },
+    { value: 'top-voted', label: 'Top Voted' },
+    { value: 'unanswered', label: 'Unanswered' },
+  ];
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen bg-[#111111]">
+        {/* Hero */}
+        <div className="bg-[#1a2535] border-b border-[#2a3a50]">
+          <div className="max-w-container mx-auto px-4 py-10">
+            <div className="flex items-center gap-3 mb-2">
+              <span className="text-2xl">💬</span>
+              <h1 className="text-3xl font-heading font-bold text-white">Community Forum</h1>
+            </div>
+            <p className="text-[#aab4c4] font-body text-base max-w-2xl">
+              Connect with broadcast engineering professionals. Ask questions, share expertise, and discuss the technology shaping the industry.
+            </p>
+          </div>
+        </div>
+
+        <div className="max-w-container mx-auto px-4 py-6">
+
+          {/* Feed Mode Tabs */}
+          <div className="flex items-center gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1 mb-6 w-fit">
+            <button
+              onClick={() => setFeedMode('discover')}
+              className={`px-4 py-2 rounded-md text-sm font-body font-semibold transition-colors flex items-center gap-2 ${
+                feedMode === 'discover' ? 'bg-[#3b82f6] text-white' : 'text-[#888] hover:text-white'
+              }`}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
+              </svg>
+              Discover
+            </button>
+            <button
+              onClick={() => setFeedMode('following')}
+              className={`px-4 py-2 rounded-md text-sm font-body font-semibold transition-colors flex items-center gap-2 ${
+                feedMode === 'following' ? 'bg-[#3b82f6] text-white' : 'text-[#888] hover:text-white'
+              }`}
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" />
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
+              </svg>
+              Following
+            </button>
+          </div>
+
+          {/* Following Feed */}
+          {feedMode === 'following' && (
+            <div className="mb-8">
+              {!currentUserId && (
+                <div className="bg-[#1a2535] border border-[#2a3a50] rounded-lg p-8 text-center">
+                  <p className="text-[#aab4c4] font-body text-sm mb-3">Sign in to see threads from people you follow.</p>
+                  <Link
+                    href="/login"
+                    className="inline-block bg-[#3b82f6] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#2563eb] transition-colors"
+                  >
+                    Sign In
+                  </Link>
+                </div>
+              )}
+              {currentUserId && followingLoading && (
+                <div className="space-y-2">
+                  {[...Array(6)].map((_, i) => (
+                    <div key={i} className="bg-[#1a1a1a] rounded-lg h-16 animate-pulse border border-[#252525]" />
+                  ))}
+                </div>
+              )}
+              {currentUserId && !followingLoading && followingThreads.length === 0 && (
+                <div className="bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-10 text-center">
+                  <div className="text-3xl mb-3">👥</div>
+                  <p className="text-[#aaa] font-body text-sm font-semibold mb-1">Your following feed is empty</p>
+                  <p className="text-[#555] font-body text-sm mb-4">Follow other members to see their threads here.</p>
+                  <Link
+                    href="/forum"
+                    onClick={() => setFeedMode('discover')}
+                    className="inline-block bg-[#3b82f6] text-white font-body text-sm font-bold px-5 py-2 rounded-lg hover:bg-[#2563eb] transition-colors"
+                  >
+                    Discover Members
+                  </Link>
+                </div>
+              )}
+              {currentUserId && !followingLoading && followingThreads.length > 0 && (
+                <div>
+                  <p className="text-[#666] font-body text-xs mb-3">{followingThreads.length} thread{followingThreads.length !== 1 ? 's' : ''} from people you follow</p>
+                  <div className="space-y-1">
+                    {followingThreads.map(thread => (
+                      <Link
+                        key={thread.id}
+                        href={`/forum/thread/${thread.id}`}
+                        className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
+                      >
+                        <div className="flex-1 min-w-0">
+                          <h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
+                            {thread.title}
+                          </h3>
+                          <p className="text-[#666] font-body text-xs mt-0.5">
+                            by{' '}
+                            <Link
+                              href={`/profile/${thread.author_id}`}
+                              onClick={e => e.stopPropagation()}
+                              className="text-[#3b82f6] hover:underline"
+                            >
+                              {thread.author_name}
+                            </Link>
+                            {thread.forum_categories && (
+                              <> · <span className="text-[#888]">{thread.forum_categories.name}</span></>
+                            )}
+                            {' · '}{timeAgo(thread.created_at)}
+                          </p>
+                        </div>
+                        <div className="flex-shrink-0 text-right hidden sm:block">
+                          <div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
+                          <div className="text-[#555] font-body text-xs">replies</div>
+                        </div>
+                        <div className="flex-shrink-0 text-right hidden md:block">
+                          <div className="text-[#aaa] font-body text-sm font-semibold">{thread.view_count}</div>
+                          <div className="text-[#555] font-body text-xs">views</div>
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Discover Feed */}
+          {feedMode === 'discover' && (
+            <>
+              {/* Search + Filter + Sort Bar */}
+              <div className="flex flex-col sm:flex-row gap-3 mb-6">
+                {/* Search */}
+                <div className="relative flex-1">
+                  <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#555]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" />
+                  </svg>
+                  <input
+                    type="text"
+                    placeholder="Search threads..."
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    className="w-full bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#3b82f6] rounded-lg pl-9 pr-4 py-2.5 text-white font-body text-sm placeholder-[#555] focus:outline-none transition-colors"
+                  />
+                  {search && (
+                    <button
+                      onClick={() => setSearch('')}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-[#555] hover:text-[#aaa] transition-colors"
+                      aria-label="Clear search"
+                    >
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+
+                {/* Category Filter */}
+                <div className="relative">
+                  <select
+                    value={selectedCategory}
+                    onChange={e => setSelectedCategory(e.target.value)}
+                    className="appearance-none bg-[#1a1a1a] border border-[#2a2a2a] focus:border-[#3b82f6] rounded-lg pl-3 pr-8 py-2.5 text-sm font-body text-white focus:outline-none transition-colors cursor-pointer min-w-[160px]"
+                  >
+                    <option value="">All Categories</option>
+                    {categories.map(cat => (
+                      <option key={cat.id} value={cat.id}>{cat.icon} {cat.name}</option>
+                    ))}
+                  </select>
+                  <svg className="absolute right-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[#555] pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </div>
+
+                {/* Sort Options */}
+                <div className="flex gap-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded-lg p-1">
+                  {sortOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      onClick={() => setSort(opt.value)}
+                      className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold transition-colors whitespace-nowrap ${
+                        sort === opt.value
+                          ? 'bg-[#3b82f6] text-white'
+                          : 'text-[#888] hover:text-white'
+                      }`}
+                    >
+                      {opt.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Thread Results (when searching/filtering/sorting) */}
+              {isSearchMode && (
+                <div className="mb-8">
+                  {threadsLoading && (
+                    <div className="space-y-2">
+                      {[...Array(6)].map((_, i) => (
+                        <div key={i} className="bg-[#1a1a1a] rounded-lg h-14 animate-pulse border border-[#252525]" />
+                      ))}
+                    </div>
+                  )}
+                  {!threadsLoading && threads.length === 0 && (
+                    <div className="text-center py-12 text-[#555] font-body">
+                      <p className="text-base mb-1">No threads found</p>
+                      <p className="text-sm">Try adjusting your search or filters.</p>
+                    </div>
+                  )}
+                  {!threadsLoading && threads.length > 0 && (
+                    <div className="space-y-1">
+                      <p className="text-[#666] font-body text-xs mb-2">{threads.length} thread{threads.length !== 1 ? 's' : ''} found</p>
+                      {threads.map(thread => (
+                        <Link
+                          key={thread.id}
+                          href={`/forum/thread/${thread.id}`}
+                          className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#3b82f6] rounded-lg px-4 py-3 transition-all group"
+                        >
+                          <div className="flex-1 min-w-0">
+                            <h3 className="text-white font-body font-semibold text-sm group-hover:text-[#3b82f6] transition-colors truncate">
+                              {thread.title}
+                            </h3>
+                            <p className="text-[#666] font-body text-xs mt-0.5">
+                              by <span className="text-[#888]">{thread.author_name}</span>
+                              {thread.forum_categories && (
+                                <> · <span className="text-[#3b82f6]">{thread.forum_categories.name}</span></>
+                              )}
+                              {' · '}{timeAgo(thread.created_at)}
+                            </p>
+                          </div>
+                          <div className="flex-shrink-0 text-right hidden sm:block">
+                            <div className="text-[#aaa] font-body text-sm font-semibold">{thread.reply_count}</div>
+                            <div className="text-[#555] font-body text-xs">replies</div>
+                          </div>
+                          {sort === 'top-voted' && (
+                            <div className="flex-shrink-0 text-right hidden md:block">
+                              <div className="text-[#22c55e] font-body text-sm font-semibold">+{thread.upvote_count ?? 0}</div>
+                              <div className="text-[#555] font-body text-xs">votes</div>
+                            </div>
+                          )}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Default view: Top Threads + Category Grid */}
+              {!isSearchMode && (
+                <>
+                  {/* Top Performing Threads Widget */}
+                  {!loading && <TopThreadsWidget />}
+
+                  {loading && (
+                    <div className="space-y-3 mb-8">
+                      {[...Array(8)].map((_, i) => (
+                        <div key={i} className="bg-[#1a1a1a] rounded-lg h-20 animate-pulse border border-[#252525]" />
+                      ))}
+                    </div>
+                  )}
+
+                  {error && (
+                    <div className="bg-red-900/20 border border-red-800 rounded-lg p-4 text-red-400 font-body mb-6">
+                      {error}
+                    </div>
+                  )}
+
+                  {!loading && !error && (
+                    <>
+                      <h2 className="text-white font-heading font-bold text-base mb-3">Browse Categories</h2>
+                      <div className="space-y-2">
+                        {categories.map(cat => (
+                          <Link
+                            key={cat.id}
+                            href={`/forum/${cat.slug}`}
+                            className="flex items-center gap-4 bg-[#1a1a1a] hover:bg-[#1e2a3a] border border-[#252525] hover:border-[#3b82f6] rounded-lg p-4 transition-all group"
+                          >
+                            <span className="text-3xl flex-shrink-0 w-10 text-center">{cat.icon}</span>
+                            <div className="flex-1 min-w-0">
+                              <h2 className="text-white font-heading font-semibold text-lg group-hover:text-[#3b82f6] transition-colors">
+                                {cat.name}
+                              </h2>
+                              <p className="text-[#888] font-body text-sm mt-0.5 truncate">{cat.description}</p>
+                            </div>
+                            <div className="flex-shrink-0 text-right hidden sm:block">
+                              <div className="text-white font-body font-semibold text-sm">{cat.thread_count}</div>
+                              <div className="text-[#666] font-body text-xs">threads</div>
+                            </div>
+                            <div className="flex-shrink-0 text-right hidden md:block">
+                              <div className="text-white font-body font-semibold text-sm">{cat.post_count}</div>
+                              <div className="text-[#666] font-body text-xs">posts</div>
+                            </div>
+                            <svg className="w-4 h-4 text-[#555] group-hover:text-[#3b82f6] flex-shrink-0 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                            </svg>
+                          </Link>
+                        ))}
+                      </div>
+                    </>
+                  )}
+                </>
+              )}
+            </>
+          )}
+
+          {/* Forum guidelines */}
+          <div className="mt-8 bg-[#1a2535] border border-[#2a3a50] rounded-lg p-5">
+            <h3 className="text-white font-heading font-semibold mb-2">Community Guidelines</h3>
+            <ul className="text-[#aab4c4] font-body text-sm space-y-1">
+              <li>• Be respectful and professional — this is a community of peers</li>
+              <li>• Share real-world experience and cite sources when possible</li>
+              <li>• The <span className="text-[#3b82f6]">BroadcastBeat AI</span> assistant is available in threads to help answer questions — it is clearly labeled</li>
+              <li>• No spam, self-promotion, or vendor pitches without disclosure</li>
+            </ul>
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/forum/thread/[id]/page.tsx

@@ -0,0 +1,492 @@
+'use client';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { createClient } from '@/lib/supabase/client';
+
+interface ForumThread {
+  id: string;
+  title: string;
+  body: string;
+  author_name: string;
+  status: string;
+  reply_count: number;
+  view_count: number;
+  upvotes: number;
+  downvotes: number;
+  vote_score: number;
+  created_at: string;
+  forum_categories: { id: string; name: string; slug: string };
+}
+
+interface ForumReply {
+  id: string;
+  body: string;
+  author_name: string;
+  is_ai_response: boolean;
+  upvotes: number;
+  downvotes: number;
+  vote_score: number;
+  created_at: string;
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 2) return 'just now';
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+function Avatar({ name, isAI }: { name: string; isAI: boolean }) {
+  if (isAI) {
+    return (
+      <div className="w-9 h-9 rounded-full bg-[#1e3a5f] border border-[#3b82f6] flex items-center justify-center flex-shrink-0">
+        <span className="text-[#3b82f6] text-xs font-bold">AI</span>
+      </div>
+    );
+  }
+  const initials = name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  const colors = ['#1e3a5f', '#1a3a2a', '#3a1a1a', '#2a1a3a', '#1a2a3a'];
+  const colorIdx = name.charCodeAt(0) % colors.length;
+  return (
+    <div
+      className="w-9 h-9 rounded-full flex items-center justify-center flex-shrink-0 text-white text-xs font-bold"
+      style={{ backgroundColor: colors[colorIdx] }}
+    >
+      {initials || '?'}
+    </div>
+  );
+}
+
+interface VoteButtonsProps {
+  targetType: 'thread' | 'reply';
+  targetId: string;
+  upvotes: number;
+  downvotes: number;
+  voteScore: number;
+  isAI?: boolean;
+  isAuthenticated: boolean;
+}
+
+function VoteButtons({ targetType, targetId, upvotes, downvotes, voteScore, isAI, isAuthenticated }: VoteButtonsProps) {
+  const [currentVote, setCurrentVote] = useState<1 | -1 | null>(null);
+  const [counts, setCounts] = useState({ upvotes, downvotes, vote_score: voteScore });
+  const [loading, setLoading] = useState(false);
+  const [fetched, setFetched] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthenticated || fetched) return;
+    fetch(`/api/forum/votes?target_type=${targetType}&target_id=${targetId}`)
+      .then(r => r.json())
+      .then(d => {
+        setCurrentVote(d.vote ?? null);
+        setFetched(true);
+      })
+      .catch(() => setFetched(true));
+  }, [isAuthenticated, targetType, targetId, fetched]);
+
+  const handleVote = async (value: 1 | -1) => {
+    if (!isAuthenticated || loading || isAI) return;
+    setLoading(true);
+    try {
+      const res = await fetch('/api/forum/votes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ target_type: targetType, target_id: targetId, vote_value: value }),
+      });
+      const data = await res.json();
+      if (!data.error) {
+        setCurrentVote(data.vote);
+        setCounts({ upvotes: data.upvotes, downvotes: data.downvotes, vote_score: data.vote_score });
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const scoreColor = counts.vote_score > 0 ? 'text-[#3b82f6]' : counts.vote_score < 0 ? 'text-red-400' : 'text-[#666]';
+
+  return (
+    <div className="flex items-center gap-1 mt-2">
+      {/* Upvote */}
+      <button
+        onClick={() => handleVote(1)}
+        disabled={loading || !isAuthenticated || !!isAI}
+        title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Upvote'}
+        className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
+          currentVote === 1
+            ? 'bg-[#3b82f6]/20 border-[#3b82f6] text-[#3b82f6]'
+            : 'bg-transparent border-[#2a2a2a] text-[#666] hover:border-[#3b82f6] hover:text-[#3b82f6]'
+        } disabled:opacity-40 disabled:cursor-not-allowed`}
+        aria-label="Upvote"
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill={currentVote === 1 ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+          <path d="M12 19V5M5 12l7-7 7 7" />
+        </svg>
+        <span>{counts.upvotes}</span>
+      </button>
+
+      {/* Score */}
+      <span className={`text-xs font-body font-bold px-1 min-w-[1.5rem] text-center ${scoreColor}`}>
+        {counts.vote_score > 0 ? `+${counts.vote_score}` : counts.vote_score}
+      </span>
+
+      {/* Downvote */}
+      <button
+        onClick={() => handleVote(-1)}
+        disabled={loading || !isAuthenticated || !!isAI}
+        title={!isAuthenticated ? 'Sign in to vote' : isAI ? 'Cannot vote on AI responses' : 'Downvote'}
+        className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-body font-semibold transition-colors border ${
+          currentVote === -1
+            ? 'bg-red-900/30 border-red-700 text-red-400' :'bg-transparent border-[#2a2a2a] text-[#666] hover:border-red-700 hover:text-red-400'
+        } disabled:opacity-40 disabled:cursor-not-allowed`}
+        aria-label="Downvote"
+      >
+        <svg width="12" height="12" viewBox="0 0 24 24" fill={currentVote === -1 ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+          <path d="M12 5v14M5 12l7 7 7-7" />
+        </svg>
+        <span>{counts.downvotes}</span>
+      </button>
+
+      {!isAuthenticated && (
+        <Link href="/login" className="text-xs font-body text-[#555] hover:text-[#3b82f6] ml-1 transition-colors">
+          Sign in to vote
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export default function ForumThreadPage() {
+  const params = useParams();
+  const threadId = params?.id as string;
+  const supabase = createClient();
+
+  const [thread, setThread] = useState<ForumThread | null>(null);
+  const [replies, setReplies] = useState<ForumReply[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  // Reply form
+  const [replyBody, setReplyBody] = useState('');
+  const [replyAuthor, setReplyAuthor] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // AI assistant
+  const [aiQuestion, setAiQuestion] = useState('');
+  const [aiLoading, setAiLoading] = useState(false);
+  const [aiError, setAiError] = useState<string | null>(null);
+
+  const repliesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    supabase.auth.getUser().then(({ data: { user } }) => {
+      setIsAuthenticated(!!user);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!threadId) return;
+    fetch(`/api/forum/threads/${threadId}`)
+      .then(r => r.json())
+      .then(d => {
+        if (d.error) throw new Error(d.error);
+        setThread(d.thread);
+        setReplies(d.replies || []);
+        setLoading(false);
+      })
+      .catch(e => {
+        setError(e.message || 'Failed to load thread.');
+        setLoading(false);
+      });
+  }, [threadId]);
+
+  const handleReply = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!replyBody.trim() || !threadId) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch('/api/forum/replies', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          thread_id: threadId,
+          body: replyBody,
+          author_name: replyAuthor || 'Anonymous',
+        }),
+      });
+      const data = await res.json();
+      if (data.reply) {
+        setReplies(prev => [...prev, data.reply]);
+        setReplyBody('');
+        setReplyAuthor('');
+        setTimeout(() => repliesEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
+      }
+    } catch {
+      // silent
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleAiAssist = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!aiQuestion.trim() || !thread) return;
+    setAiLoading(true);
+    setAiError(null);
+    try {
+      const res = await fetch('/api/forum/ai-assist', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          thread_id: threadId,
+          question: aiQuestion,
+          thread_title: thread.title,
+          thread_body: thread.body,
+          replies: replies.slice(-5),
+        }),
+      });
+      const data = await res.json();
+      if (data.error) throw new Error(data.error);
+      if (data.reply) {
+        setReplies(prev => [...prev, data.reply]);
+        setAiQuestion('');
+        setTimeout(() => repliesEndRef.current?.scrollIntoView({ behavior: 'smooth' }), 100);
+      }
+    } catch (err: any) {
+      setAiError(err.message || 'AI assistant unavailable. Please try again.');
+    } finally {
+      setAiLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <>
+        <Header />
+        <main className="min-h-screen bg-[#111111]">
+          <div className="max-w-container mx-auto px-4 py-10 space-y-4">
+            <div className="h-8 bg-[#1a1a1a] rounded animate-pulse w-2/3" />
+            <div className="h-32 bg-[#1a1a1a] rounded animate-pulse" />
+            <div className="h-20 bg-[#1a1a1a] rounded animate-pulse" />
+          </div>
+        </main>
+        <Footer />
+      </>
+    );
+  }
+
+  if (error || !thread) {
+    return (
+      <>
+        <Header />
+        <main className="min-h-screen bg-[#111111]">
+          <div className="max-w-container mx-auto px-4 py-10">
+            <div className="bg-red-900/20 border border-red-800 rounded-lg p-4 text-red-400 font-body">
+              {error || 'Thread not found.'}
+            </div>
+            <Link href="/forum" className="mt-4 inline-block text-[#3b82f6] hover:underline font-body text-sm">
+              ← Back to Forum
+            </Link>
+          </div>
+        </main>
+        <Footer />
+      </>
+    );
+  }
+
+  const category = thread.forum_categories;
+
+  return (
+    <>
+      <Header />
+      <main className="min-h-screen bg-[#111111]">
+        {/* Breadcrumb */}
+        <div className="bg-[#1a2535] border-b border-[#2a3a50]">
+          <div className="max-w-container mx-auto px-4 py-4">
+            <nav className="text-sm font-body text-[#666]">
+              <Link href="/forum" className="hover:text-[#3b82f6] transition-colors">Forum</Link>
+              <span className="mx-2">›</span>
+              {category && (
+                <>
+                  <Link href={`/forum/${category.slug}`} className="hover:text-[#3b82f6] transition-colors">{category.name}</Link>
+                  <span className="mx-2">›</span>
+                </>
+              )}
+              <span className="text-[#aab4c4] truncate">{thread.title}</span>
+            </nav>
+          </div>
+        </div>
+
+        <div className="max-w-container mx-auto px-4 py-6">
+          <div className="max-w-3xl mx-auto">
+            {/* Thread Title */}
+            <h1 className="text-2xl font-heading font-bold text-white mb-6 leading-snug">{thread.title}</h1>
+
+            {/* Original Post */}
+            <div className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-5 mb-4">
+              <div className="flex items-start gap-3">
+                <Avatar name={thread.author_name} isAI={false} />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-white font-body font-semibold text-sm">{thread.author_name}</span>
+                    <span className="text-[#555] font-body text-xs">·</span>
+                    <span className="text-[#555] font-body text-xs">{timeAgo(thread.created_at)}</span>
+                    <span className="text-[#555] font-body text-xs">·</span>
+                    <span className="text-[#555] font-body text-xs">{thread.view_count} views</span>
+                  </div>
+                  <p className="text-[#d0d0d0] font-body text-sm leading-relaxed whitespace-pre-wrap">{thread.body}</p>
+                  <VoteButtons
+                    targetType="thread"
+                    targetId={thread.id}
+                    upvotes={thread.upvotes ?? 0}
+                    downvotes={thread.downvotes ?? 0}
+                    voteScore={thread.vote_score ?? 0}
+                    isAuthenticated={isAuthenticated}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Replies */}
+            {replies.length > 0 && (
+              <div className="space-y-3 mb-6">
+                {replies.map((reply, idx) => (
+                  <div
+                    key={reply.id}
+                    className={`border rounded-lg p-5 ${
+                      reply.is_ai_response
+                        ? 'bg-[#0d1f35] border-[#1e3a5f]'
+                        : 'bg-[#1a1a1a] border-[#252525]'
+                    }`}
+                  >
+                    <div className="flex items-start gap-3">
+                      <Avatar name={reply.author_name} isAI={reply.is_ai_response} />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-2 flex-wrap">
+                          <span className="text-white font-body font-semibold text-sm">{reply.author_name}</span>
+                          {reply.is_ai_response && (
+                            <span className="text-xs bg-[#3b82f6]/20 text-[#3b82f6] border border-[#3b82f6]/30 px-2 py-0.5 rounded font-body font-semibold">
+                              AI Assistant
+                            </span>
+                          )}
+                          <span className="text-[#555] font-body text-xs">·</span>
+                          <span className="text-[#555] font-body text-xs">#{idx + 1}</span>
+                          <span className="text-[#555] font-body text-xs">·</span>
+                          <span className="text-[#555] font-body text-xs">{timeAgo(reply.created_at)}</span>
+                        </div>
+                        <p className="text-[#d0d0d0] font-body text-sm leading-relaxed whitespace-pre-wrap">{reply.body}</p>
+                        <VoteButtons
+                          targetType="reply"
+                          targetId={reply.id}
+                          upvotes={reply.upvotes ?? 0}
+                          downvotes={reply.downvotes ?? 0}
+                          voteScore={reply.vote_score ?? 0}
+                          isAI={reply.is_ai_response}
+                          isAuthenticated={isAuthenticated}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))}
+                <div ref={repliesEndRef} />
+              </div>
+            )}
+
+            {/* AI Assistant Panel */}
+            <div className="bg-[#0d1f35] border border-[#1e3a5f] rounded-lg p-5 mb-6">
+              <div className="flex items-center gap-2 mb-3">
+                <div className="w-7 h-7 rounded-full bg-[#1e3a5f] border border-[#3b82f6] flex items-center justify-center">
+                  <span className="text-[#3b82f6] text-xs font-bold">AI</span>
+                </div>
+                <div>
+                  <span className="text-white font-body font-semibold text-sm">BroadcastBeat AI Assistant</span>
+                  <span className="ml-2 text-xs bg-[#3b82f6]/20 text-[#3b82f6] border border-[#3b82f6]/30 px-2 py-0.5 rounded font-body">AI — Not a human</span>
+                </div>
+              </div>
+              <p className="text-[#7a9ab8] font-body text-xs mb-3">
+                Ask the AI assistant a question related to this thread. Responses are generated by AI and should be verified for critical decisions.
+              </p>
+              <form onSubmit={handleAiAssist} className="flex gap-2">
+                <input
+                  type="text"
+                  placeholder="Ask a question about this topic..."
+                  value={aiQuestion}
+                  onChange={e => setAiQuestion(e.target.value)}
+                  disabled={aiLoading}
+                  className="flex-1 bg-[#111] border border-[#2a3a50] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#3a5a7a] focus:outline-none focus:border-[#3b82f6] disabled:opacity-50"
+                />
+                <button
+                  type="submit"
+                  disabled={aiLoading || !aiQuestion.trim()}
+                  className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-4 py-2 rounded-lg transition-colors flex-shrink-0"
+                >
+                  {aiLoading ? (
+                    <span className="flex items-center gap-1">
+                      <svg className="animate-spin w-3 h-3" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                      Thinking...
+                    </span>
+                  ) : 'Ask AI'}
+                </button>
+              </form>
+              {aiError && (
+                <p className="text-red-400 font-body text-xs mt-2">{aiError}</p>
+              )}
+            </div>
+
+            {/* Reply Form */}
+            {thread.status !== 'closed' && (
+              <div className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-5">
+                <h3 className="text-white font-heading font-semibold mb-4">Post a Reply</h3>
+                <form onSubmit={handleReply} className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Your name (optional)"
+                    value={replyAuthor}
+                    onChange={e => setReplyAuthor(e.target.value)}
+                    className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6]"
+                  />
+                  <textarea
+                    placeholder="Share your thoughts, experience, or answer..."
+                    value={replyBody}
+                    onChange={e => setReplyBody(e.target.value)}
+                    required
+                    rows={5}
+                    className="w-full bg-[#111] border border-[#333] rounded-lg px-3 py-2 text-white font-body text-sm placeholder-[#555] focus:outline-none focus:border-[#3b82f6] resize-none"
+                  />
+                  <button
+                    type="submit"
+                    disabled={submitting || !replyBody.trim()}
+                    className="bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2 rounded-lg transition-colors"
+                  >
+                    {submitting ? 'Posting...' : 'Post Reply'}
+                  </button>
+                </form>
+              </div>
+            )}
+
+            {thread.status === 'closed' && (
+              <div className="bg-[#1a1a1a] border border-[#333] rounded-lg p-4 text-center text-[#666] font-body text-sm">
+                This thread is closed to new replies.
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}