fix(bb-ui2): separate ThreadDrawer from RightPanel

- Created ThreadDrawer component (24rem) that slides from right edge of middle
- RightPanel now reserved for Activity Feed + Agent roster (bb-ui2.29)
- Updated URL state: added drawer and agentId params
- Thread shows in drawer when card selected

Architecture now matches PRD:
- Right Panel (17rem): Activity Feed + Agent roster
- Thread Drawer (24rem): Opens from middle when card clicked

Beads: bb-ui2.31 thread drawer created, bb-ui2.13 closed

src/components/shared/thread-drawer.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { X, Send } from 'lucide-react';
+import { ThreadView, type ThreadItem } from './thread-view';
+import { useState } from 'react';
+
+interface ThreadDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  id: string;
+  items?: ThreadItem[];
+}
+
+// Sample data for demo
+const SAMPLE_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.',
+    timestamp: new Date(Date.now() - 1 * 60 * 60 * 1000),
+  },
+  {
+    id: '3',
+    type: 'protocol_event',
+    event: 'HANDOFF',
+    content: 'Handed off to agent',
+    timestamp: new Date(Date.now() - 30 * 60 * 1000),
+  },
+];
+
+export function ThreadDrawer({ isOpen, onClose, title, id, items = SAMPLE_ITEMS }: ThreadDrawerProps) {
+  const [comment, setComment] = useState('');
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/30"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      
+      {/* Drawer */}
+      <div
+        className="fixed top-0 right-0 h-full z-50 w-[24rem] overflow-hidden"
+        style={{
+          backgroundColor: 'var(--color-bg-card)',
+          borderLeft: '1px solid rgba(255, 255, 255, 0.1)',
+          boxShadow: '-4px 0 20px rgba(0, 0, 0, 0.3)',
+        }}
+      >
+        {/* Header */}
+        <div
+          className="flex items-center justify-between p-4 border-b"
+          style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
+        >
+          <div className="flex-1 min-w-0 mr-4">
+            <span className="text-teal-400 font-mono text-sm">
+              {id}
+            </span>
+            <h2
+              className="text-sm font-semibold truncate"
+              style={{ color: 'var(--color-text-primary)' }}
+              title={title}
+            >
+              {title}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-md hover:bg-white/10 transition-colors flex-shrink-0"
+            aria-label="Close"
+          >
+            <X size={18} style={{ color: 'var(--color-text-muted)' }} />
+          </button>
+        </div>
+
+        {/* Thread Content */}
+        <div className="flex-1 overflow-y-auto p-4" style={{ height: 'calc(100% - 8rem)' }}>
+          <ThreadView items={items} />
+        </div>
+
+        {/* Compose */}
+        <div
+          className="p-4 border-t"
+          style={{ borderColor: 'rgba(255, 255, 255, 0.1)' }}
+        >
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              placeholder="Add a comment..."
+              className="flex-1 px-3 py-2 rounded-md text-sm"
+              style={{
+                backgroundColor: 'var(--color-bg-input)',
+                color: 'var(--color-text-primary)',
+                border: '1px solid rgba(255, 255, 255, 0.1)',
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && comment.trim()) {
+                  // TODO: Post comment
+                  setComment('');
+                }
+              }}
+            />
+            <button
+              className="p-2 rounded-md"
+              style={{
+                backgroundColor: 'var(--color-accent-green)',
+                color: '#fff',
+              }}
+              aria-label="Send comment"
+            >
+              <Send size={16} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}