fix(bb-ui2): integrate ThreadView into detail panels with sample data

- Wired ThreadView component into SocialDetail and SwarmDetail
- Added sample thread items for demo purposes
- Removed thread placeholders

Beads: bb-ui2.13 closed

src/components/social/social-detail.tsx

@@ -3,8 +3,34 @@
 import type { SocialCard as SocialCardData, AgentStatus } from '../../lib/social-cards';
 import { StatusBadge } from '../shared/status-badge';
 import { AgentAvatar } from '../shared/agent-avatar';
+import { ThreadView, type ThreadItem } from '../shared/thread-view';
 import { Plus } from 'lucide-react';
 
+// Sample data for demo - remove when real data connected
+const SAMPLE_THREAD_ITEMS: ThreadItem[] = [
+  {
+    id: '1',
+    type: 'status_change',
+    from: 'backlog',
+    to: 'in_progress',
+    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
+  },
+  {
+    id: '2',
+    type: 'comment',
+    author: 'zenchantlive',
+    content: 'Started working on this task. Will need input from the API team.',
+    timestamp: new Date(Date.now() - 1 * 60 * 60 * 1000),
+  },
+  {
+    id: '3',
+    type: 'protocol_event',
+    event: 'HANDOFF',
+    content: 'Handed off to bb-agent-1 for implementation',
+    timestamp: new Date(Date.now() - 30 * 60 * 1000),
+  },
+];
+
 interface SocialDetailProps {
   data: SocialCardData;
 }
@@ -37,13 +63,11 @@ export function SocialDetail({ data }: SocialDetailProps) {
         <StatusBadge status={data.status} size="sm" />
       </div>
 
-      <div className="space-y-1">
+      <div className="space-y-2">
         <h3 className="text-text-muted text-xs font-semibold uppercase tracking-wider">
           Thread
         </h3>
-        <p className="text-text-muted text-sm italic">
-          Thread placeholder (bb-ui2.13)
-        </p>
+        <ThreadView items={SAMPLE_THREAD_ITEMS} />
       </div>
 
       {data.blocks.length > 0 && (