From 842f931f71d4fb679b02d092314904c553b6d1cf Mon Sep 17 00:00:00 2001
From: zenchantlive <jordanlive121@gmail.com>
Date: Sun, 1 Mar 2026 21:19:11 -0800
Subject: [PATCH] Wire BlockedTriageModal to UnifiedShell and TopBar

- Add import for BlockedTriageModal in unified-shell.tsx
- Add blockedTriageOpen state and handlers
- Pass onOpenBlockedTriage prop to TopBar
- Render BlockedTriageModal at end of UnifiedShell
- Add onOpenBlockedTriage prop to TopBarProps interface
- Update blocked items button onClick to use onOpenBlockedTriage
---
 src/components/shared/top-bar.tsx       |  6 ++-
 src/components/shared/unified-shell.tsx | 65 ++++++++++++++++---------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/components/shared/top-bar.tsx b/src/components/shared/top-bar.tsx
index 41fa7bf..854a2c4 100644
--- a/src/components/shared/top-bar.tsx
+++ b/src/components/shared/top-bar.tsx
@@ -18,6 +18,7 @@ export interface TopBarProps {
   actor?: string;
   onActorChange?: (name: string) => void;
   onLaunchSwarm?: () => void;
+  onOpenBlockedTriage?: () => void;
 }
 
 interface MetricTileProps {
@@ -87,6 +88,7 @@ export function TopBar({
   actor = '',
   onActorChange,
   onLaunchSwarm,
+  onOpenBlockedTriage,
 }: TopBarProps) {
   const { leftPanel, toggleLeftPanel, rightPanel, toggleRightPanel, blockedOnly, toggleBlockedOnly } = useUrlState();
   const { isDesktop } = useResponsive();
@@ -126,9 +128,9 @@ export function TopBar({
       <div className="mr-3 flex items-center gap-2">
         {children ?? (
           <>
-            <button
+<button
               type="button"
-              onClick={toggleBlockedOnly}
+              onClick={onOpenBlockedTriage}
               aria-pressed={blockedOnly}
               className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.11em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-info)]"
               style={{
diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx
index 5b62a39..6b4615e 100644
--- a/src/components/shared/unified-shell.tsx
+++ b/src/components/shared/unified-shell.tsx
@@ -3,8 +3,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { X } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import type { BeadIssue } from '../../lib/types';
-import type { ProjectScopeOption } from '../../lib/project-scope';
+import type { BeadIssue } from '../../lib/types';
+import type { ProjectScopeOption } from '../../lib/project-scope';
+import { buildProjectContext } from '../../lib/project-context';
 import { TopBar } from './top-bar';
 import { LeftPanel, type LeftPanelFilters } from './left-panel';
 import { RightPanel } from './right-panel';
@@ -18,10 +19,11 @@ import { SocialPage } from '../social/social-page';
 import { buildSocialCards } from '../../lib/social-cards';
 import { ContextualRightPanel } from '../activity/contextual-right-panel';
 import { AssignmentPanel } from '../graph/assignment-panel';
-import { TelemetryStrip } from './telemetry-strip';
-import { useSwarmList } from '../../hooks/use-swarm-list';
-import { useBeadsSubscription } from '../../hooks/use-beads-subscription';
-import { useBdHealth } from '../../hooks/use-bd-health';
+import { TelemetryStrip } from './telemetry-strip';
+import { useSwarmList } from '../../hooks/use-swarm-list';
+import { useBeadsSubscription } from '../../hooks/use-beads-subscription';
+import { useBdHealth } from '../../hooks/use-bd-health';
+import { BlockedTriageModal } from './blocked-triage-modal';
 
 export interface UnifiedShellProps {
   issues: BeadIssue[];
@@ -69,13 +71,19 @@ export function UnifiedShell({
   const [assignMode, setAssignMode] = useState(false);
   const [selectedAssignIssue, setSelectedAssignIssue] = useState<BeadIssue | null>(null);
   
-  // Remember last non-telemetry state for minimize button
-  const [lastTaskId, setLastTaskId] = useState<string | null>(null);
-  const [lastAssignMode, setLastAssignMode] = useState(false);
+// Remember last non-telemetry state for minimize button
+  const [lastTaskId, setLastTaskId] = useState<string | null>(null);
+  const [lastAssignMode, setLastAssignMode] = useState(false);
+
+  // Blocked triage modal state
+  const [blockedTriageOpen, setBlockedTriageOpen] = useState(false);
+  const handleOpenBlockedTriage = useCallback(() => setBlockedTriageOpen(true), []);
+  const handleCloseBlockedTriage = useCallback(() => setBlockedTriageOpen(false), []);
 
-  const socialCards = useMemo(() => buildSocialCards(issues), [issues]);
-  const { swarms: swarmCards } = useSwarmList(projectRoot);
-  const bdHealth = useBdHealth(projectRoot);
+const socialCards = useMemo(() => buildSocialCards(issues), [issues]);
+  const { swarms: swarmCards } = useSwarmList(projectRoot);
+  const bdHealth = useBdHealth(projectRoot);
+  const projectContext = useMemo(() => buildProjectContext(projectRoot), [projectRoot]);
 
   const selectedSocialCard = taskId ? socialCards.find(c => c.id === taskId) : null;
   const selectedSwarmCard = swarmId ? swarmCards.find(c => c.swarmId === swarmId) : null;
@@ -238,15 +246,16 @@ export function UnifiedShell({
   return (
     <div className="flex flex-col h-screen bg-[var(--surface-backdrop)]" data-testid="unified-shell">
       {/* TOP BAR: 3rem fixed */}
-      <TopBar
-        totalTasks={issues.filter(i => i.issue_type !== 'epic').length}
-        criticalAlerts={issues.filter(i => i.status === 'blocked').length}
-        busyCount={issues.filter(i => i.status === 'in_progress').length}
-        idleCount={0}
-        actor={actor}
-        onActorChange={handleActorChange}
-        onLaunchSwarm={() => { setTaskId(null); setAssignMode(true); }}
-      />
+<TopBar
+        totalTasks={issues.filter(i => i.issue_type !== 'epic').length}
+        criticalAlerts={issues.filter(i => i.status === 'blocked').length}
+        busyCount={issues.filter(i => i.status === 'in_progress').length}
+        idleCount={0}
+        actor={actor}
+        onActorChange={handleActorChange}
+        onLaunchSwarm={() => { setTaskId(null); setAssignMode(true); }}
+        onOpenBlockedTriage={handleOpenBlockedTriage}
+      />
       {!bdHealth.loading && !bdHealth.healthy ? (
         <div className="border-b border-amber-500/35 bg-amber-500/12 px-4 py-2 text-xs text-amber-100">
           <span className="font-semibold">BD setup issue:</span> {bdHealth.message}
@@ -319,8 +328,16 @@ export function UnifiedShell({
         </div>
       ) : null}
 
-      {/* MOBILE NAV: Bottom tab bar */}
-      <MobileNav />
-    </div>
+{/* MOBILE NAV: Bottom tab bar */}
+      <MobileNav />
+
+      {/* BLOCKED TRIAGE MODAL */}
+      <BlockedTriageModal
+        isOpen={blockedTriageOpen}
+        onClose={handleCloseBlockedTriage}
+        issues={issues}
+        projectRoot={projectContext}
+      />
+    </div>
   );
 }