feat(graph): integrate WorkflowGraph into unified shell

- Create GraphView component with Flow/Overview tab switcher
- Wire GraphView into UnifiedShell when view=graph
- Connect taskId URL param to selectedId for node selection
- Connect graphTab URL param for tab state persistence
- ReactFlow renders in middle panel with proper layout

Closes bb-ui2.20

src/components/shared/unified-shell.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { BeadIssue } from '../../lib/types';
+import type { ProjectScopeOption } from '../../lib/project-scope';
+import { TopBar } from './top-bar';
+import { LeftPanel } from './left-panel';
+import { RightPanel } from './right-panel';
+import { MobileNav } from './mobile-nav';
+import { useUrlState } from '../../hooks/use-url-state';
+import { GraphView } from '../graph/graph-view';
+
+export interface UnifiedShellProps {
+  issues: BeadIssue[];
+  projectRoot: string;
+  projectScopeKey: string;
+  projectScopeOptions: ProjectScopeOption[];
+  projectScopeMode: 'single' | 'aggregate';
+}
+
+export function UnifiedShell({
+  issues,
+}: UnifiedShellProps) {
+  const { view, taskId, setTaskId, graphTab, setGraphTab, panel } = useUrlState();
+
+  const handleGraphSelect = (id: string) => {
+    setTaskId(id);
+  };
+
+  const renderMiddleContent = () => {
+    if (view === 'graph') {
+      return (
+        <GraphView
+          beads={issues}
+          selectedId={taskId ?? undefined}
+          onSelect={handleGraphSelect}
+          graphTab={graphTab}
+          onGraphTabChange={setGraphTab}
+          hideClosed={false}
+        />
+      );
+    }
+
+    return (
+      <div className="p-4" style={{ color: 'var(--color-text-secondary)' }}>
+        <div className="mb-4">
+          <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text-primary)' }}>
+            {view === 'social' && 'Social View'}
+            {view === 'swarm' && 'Swarm View'}
+          </h2>
+          <p className="text-sm mt-2">
+            {view === 'social' && 'Activity feed with blocks/unlocks coming soon'}
+            {view === 'swarm' && 'Team health dashboard coming soon'}
+          </p>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col h-screen" style={{ backgroundColor: 'var(--color-bg-base)' }} data-testid="unified-shell">
+      {/* TOP BAR: 3rem fixed */}
+      <TopBar />
+
+      {/* MAIN AREA: CSS Grid [13rem | 1fr | 17rem] */}
+      <div 
+        className="flex-1 grid overflow-hidden"
+        style={{ gridTemplateColumns: '13rem 1fr 17rem' }}
+        data-testid="main-area"
+      >
+        {/* LEFT PANEL: 13rem channel tree */}
+        <LeftPanel issues={issues} />
+
+        {/* MIDDLE CONTENT: flex-1 */}
+        <div className="overflow-y-auto" data-testid="middle-content">
+          {renderMiddleContent()}
+        </div>
+
+        {/* RIGHT PANEL: 17rem detail strip */}
+        <RightPanel isOpen={panel === 'open'} />
+      </div>
+
+      {/* MOBILE NAV: Bottom tab bar */}
+      <MobileNav />
+    </div>
+  );
+}