agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/app/page.tsx

@@ -1,48 +1,53 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import Link from 'next/link';
-import { ConfirmationModal } from '@/components/confirmation-modal';
-import { CollisionQueue } from '@/components/collision-queue';
-import { DetailPanel } from '@/components/detail-panel';
-import { DependencyChains } from '@/components/dependency-chains';
 import { FeatureListView } from '@/components/feature-list-view';
-import { FilterBar } from '@/components/filter-bar';
 import { KanbanBoard } from '@/components/kanban-board';
-import { LiveEventFeed } from '@/components/live-event-feed';
-import { LockResourceMap } from '@/components/lock-resource-map';
-import { QuickLaunchPanel } from '@/components/quick-launch-panel';
-import { RunHealthPanel } from '@/components/run-health-panel';
 import { SummaryBar } from '@/components/summary-bar';
 import { ToastStack, useToast } from '@/components/toast';
+import { AttentionStrip } from '@/components/dashboard/attention-strip';
+import {
+  CollisionApprovalDrawer,
+  type CollisionDetail,
+} from '@/components/dashboard/collision-approval-drawer';
+import { CommandCenterHeader } from '@/components/dashboard/command-center-header';
+import { MainlineStatusBanner } from '@/components/dashboard/mainline-status-banner';
+import { MergedArchive } from '@/components/dashboard/merged-archive';
+import { PrioritizedQueues } from '@/components/dashboard/prioritized-queues';
+import { SecondaryDiagnosticsRail } from '@/components/dashboard/secondary-diagnostics-rail';
+import { TaskFilterBar } from '@/components/dashboard/task-filter-bar';
+import { TriageDrawer } from '@/components/dashboard/triage-drawer';
 import {
   applyDashboardRouteState,
   applyQuickFilter,
-  getNextFocusedFeatureId,
-  isQuickLaunchAffordanceVisible,
-  parseDashboardRouteState,
   COLUMN_ORDER,
   computeSummaryCounts,
   createDefaultFilters,
   filterFeatures,
   filtersAreActive,
+  getNextFocusedFeatureId,
+  isQuickLaunchAffordanceVisible,
+  parseDashboardRouteState,
   projectQuery,
+  sortFeaturesForTriage,
+  type DashboardViewMode,
+  type QuickFilterKey,
 } from '@/lib/dashboard-utils.js';
-import type {
-  DashboardStatusPayload,
-  FeatureDetail,
-  FeatureSummary,
-  SSEEvent,
-} from '@/lib/types.js';
 import {
   appendFeedEvents,
   deriveFeedEventsFromSnapshotDiff,
   reduceLiveFeedState,
   type LiveFeedState,
 } from '@/lib/live-feed.js';
+import type {
+  DashboardStatusPayload,
+  FeatureSummary,
+  FeatureTriageDetail,
+  ProjectListEntry,
+  SSEEvent,
+} from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
-type ProjectEntry = { name: string; path: string };
 type ProjectDefaults = { default_project?: string | null } | null;
 type QuickLaunchAvailability = {
   available: boolean;
@@ -51,8 +56,6 @@ type QuickLaunchAvailability = {
   reason: string | null;
 };
 
-const FEATURE_ID_PATTERN = /^[a-z0-9](?:[a-z0-9_-]{1,126}[a-z0-9])?$/;
-
 async function jsonFetch<T>(input: string, init?: RequestInit): Promise<T> {
   const response = await fetch(input, init);
   return (await response.json()) as T;
@@ -65,10 +68,6 @@ function emptyStatusPayload(): DashboardStatusPayload {
   };
 }
 
-function sortFeatures(features: FeatureSummary[]): FeatureSummary[] {
-  return [...features].sort((left, right) => left.feature_id.localeCompare(right.feature_id));
-}
-
 function createInitialFeedState(): LiveFeedState {
   return { events: [], paused: false };
 }
@@ -78,11 +77,12 @@ export default function Dashboard() {
   const [connected, setConnected] = useState(false);
   const [lastSnapshotAt, setLastSnapshotAt] = useState<number | null>(null);
   const [nowMs, setNowMs] = useState(Date.now());
-  const [viewMode, setViewMode] = useState<'board' | 'list'>('board');
+  const [viewMode, setViewMode] = useState<DashboardViewMode>('board');
   const [selectedFeatureId, setSelectedFeatureId] = useState<string | null>(null);
   const [focusedFeatureId, setFocusedFeatureId] = useState<string | null>(null);
-  const [detail, setDetail] = useState<FeatureDetail | null>(null);
-  const [projects, setProjects] = useState<ProjectEntry[]>([]);
+  const [triage, setTriage] = useState<FeatureTriageDetail | null>(null);
+  const [collisionDrawer, setCollisionDrawer] = useState<CollisionDetail | null>(null);
+  const [projects, setProjects] = useState<ProjectListEntry[]>([]);
   const [project, setProject] = useState('');
   const [filters, setFilters] = useState(createDefaultFilters());
   const [feedState, setFeedState] = useState<LiveFeedState>(createInitialFeedState());
@@ -92,10 +92,6 @@ export default function Dashboard() {
     authorized: false,
     reason: null,
   });
-  const [quickLaunchFeatureId, setQuickLaunchFeatureId] = useState('');
-  const [quickLaunchGoal, setQuickLaunchGoal] = useState('');
-  const [quickLaunchSubmitting, setQuickLaunchSubmitting] = useState(false);
-  const [quickLaunchConfirmOpen, setQuickLaunchConfirmOpen] = useState(false);
   const { notifications, addToast, dismissToast } = useToast();
   const searchInputRef = useRef<HTMLInputElement>(null);
   const previousPayloadRef = useRef<DashboardStatusPayload | null>(null);
@@ -105,7 +101,7 @@ export default function Dashboard() {
     (
       options: {
         featureId?: string | null;
-        view?: 'board' | 'list';
+        view?: DashboardViewMode;
         projectName?: string;
         nextFilters?: ReturnType<typeof createDefaultFilters>;
       },
@@ -133,14 +129,16 @@ export default function Dashboard() {
     [filters, project, selectedFeatureId, viewMode],
   );
 
-  const refreshDetail = useCallback(
+  const refreshTriage = useCallback(
     async (featureId: string) => {
-      const response = await jsonFetch<{ ok: boolean; data?: FeatureDetail }>(
-        `/api/features/${featureId}${projectQuery(project)}`,
+      const response = await jsonFetch<{ ok: boolean; data?: FeatureTriageDetail }>(
+        `/api/features/${featureId}/triage${projectQuery(project)}`,
       );
       if (response.ok && response.data) {
-        setDetail(response.data);
+        setTriage(response.data);
+        return;
       }
+      setTriage(null);
     },
     [project],
   );
@@ -159,7 +157,7 @@ export default function Dashboard() {
     void (async () => {
       const response = await jsonFetch<{
         ok: boolean;
-        data?: { projects: ProjectEntry[]; defaults?: ProjectDefaults };
+        data?: { projects: ProjectListEntry[]; defaults?: ProjectDefaults };
       }>('/api/projects');
       if (response.ok && response.data) {
         const nextProjects = response.data.projects ?? [];
@@ -209,7 +207,7 @@ export default function Dashboard() {
   useEffect(() => {
     setSelectedFeatureId(null);
     setFocusedFeatureId(null);
-    setDetail(null);
+    setTriage(null);
     setFeedState(createInitialFeedState());
     previousPayloadRef.current = null;
   }, [project]);
@@ -235,7 +233,7 @@ export default function Dashboard() {
         return;
       }
     } catch {
-      // fallback below
+      // fall through to reset state
     }
 
     setQuickLaunchAvailability({
@@ -286,8 +284,7 @@ export default function Dashboard() {
       }
     };
     events.onerror = () => {
-      // EventSource retries automatically. Keep the previous state and rely on
-      // snapshot freshness to avoid false "disconnected" signals on transient drops.
+      // EventSource retries automatically.
     };
     return () => events.close();
   }, [project, refreshStatus]);
@@ -308,14 +305,26 @@ export default function Dashboard() {
 
   useEffect(() => {
     if (selectedFeatureId) {
-      void refreshDetail(selectedFeatureId);
+      void refreshTriage(selectedFeatureId);
     }
-  }, [selectedFeatureId, refreshDetail]);
+  }, [selectedFeatureId, refreshTriage]);
 
   const filteredFeatures = useMemo(
-    () => sortFeatures(filterFeatures(payload.features, filters)),
+    () => sortFeaturesForTriage(filterFeatures(payload.features, filters)),
     [payload.features, filters],
   );
+  const activeFeatures = useMemo(
+    () => filteredFeatures.filter((feature) => feature.phase !== 'merged'),
+    [filteredFeatures],
+  );
+  const mergedFeatures = useMemo(
+    () => filteredFeatures.filter((feature) => feature.phase === 'merged'),
+    [filteredFeatures],
+  );
+  const featuresWithCollisions = useMemo(
+    () => payload.features.filter((f) => f.collision != null),
+    [payload.features],
+  );
 
   const featuresByPhase = useMemo(() => {
     const byPhase = new Map<FeatureSummary['phase'], FeatureSummary[]>();
@@ -323,20 +332,33 @@ export default function Dashboard() {
       byPhase.set(column.phase, []);
     }
 
-    for (const feature of filteredFeatures) {
-      const phase = feature.phase ?? 'unknown';
+    for (const feature of activeFeatures) {
+      let phase = feature.phase ?? 'unknown';
+
+      // Features with active automated recovery should NOT appear in the Blocked column.
+      // Show them in their resume phase column instead (e.g. reconciler working → ready_to_merge).
+      if (
+        phase === 'blocked' &&
+        feature.recovery?.state === 'retrying' &&
+        typeof feature.recovery.resume_phase === 'string'
+      ) {
+        const resumePhase = feature.recovery.resume_phase as Exclude<
+          FeatureSummary['phase'],
+          undefined
+        >;
+        if (resumePhase && byPhase.has(resumePhase)) {
+          phase = resumePhase;
+        }
+      }
+
       if (!byPhase.has(phase)) {
         byPhase.set(phase, []);
       }
       byPhase.get(phase)?.push(feature);
     }
 
-    for (const [phase, features] of byPhase.entries()) {
-      byPhase.set(phase, sortFeatures(features));
-    }
-
     return byPhase;
-  }, [filteredFeatures]);
+  }, [activeFeatures]);
 
   const columnFeatureIds = useMemo(() => {
     return COLUMN_ORDER.map((column) => ({
@@ -384,15 +406,12 @@ export default function Dashboard() {
 
       if (event.key === 'Escape') {
         setSelectedFeatureId(null);
-        setDetail(null);
+        setTriage(null);
+        syncUrlState({ featureId: null });
         return;
       }
 
-      if (isTextInput) {
-        return;
-      }
-
-      if (allVisibleFeatureIds.length === 0) {
+      if (isTextInput || allVisibleFeatureIds.length === 0) {
         return;
       }
 
@@ -409,12 +428,10 @@ export default function Dashboard() {
         if (nextFocus) {
           setFocusedFeatureId(nextFocus);
         }
-      } else if (event.key === 'Enter') {
+      } else if (event.key === 'Enter' && focusId) {
         event.preventDefault();
-        if (focusId) {
-          setSelectedFeatureId(focusId);
-          syncUrlState({ featureId: focusId });
-        }
+        setSelectedFeatureId(focusId);
+        syncUrlState({ featureId: focusId });
       }
     };
 
@@ -430,7 +447,7 @@ export default function Dashboard() {
     const exists = payload.features.some((feature) => feature.feature_id === selectedFeatureId);
     if (!exists) {
       setSelectedFeatureId(null);
-      setDetail(null);
+      setTriage(null);
       syncUrlState({ featureId: null }, 'replace');
     }
   }, [payload.features, selectedFeatureId, syncUrlState]);
@@ -446,23 +463,10 @@ export default function Dashboard() {
         : [],
     [payload.dep_blocked],
   );
-  const dependencyMap = useMemo(() => {
-    const map = new Map<string, string[]>();
-    for (const entry of dependencyChains) {
-      map.set(entry.feature_id, entry.depends_on_unresolved);
-    }
-    return map;
-  }, [dependencyChains]);
   const dependencyBlockedIds = useMemo(
     () => new Set(dependencyChains.map((entry) => entry.feature_id)),
     [dependencyChains],
   );
-  const selectedDependencies = useMemo(() => {
-    if (!selectedFeatureId) {
-      return [];
-    }
-    return dependencyMap.get(selectedFeatureId) ?? [];
-  }, [dependencyMap, selectedFeatureId]);
 
   const applyFilters = (
     next: ReturnType<typeof createDefaultFilters>,
@@ -472,7 +476,7 @@ export default function Dashboard() {
     syncUrlState({ nextFilters: next }, method);
   };
 
-  const setQuickFilter = (key: Parameters<typeof applyQuickFilter>[0]) => {
+  const setQuickFilter = (key: QuickFilterKey) => {
     if (filters.quickFilter === key) {
       applyFilters(createDefaultFilters(), 'push');
       return;
@@ -480,182 +484,154 @@ export default function Dashboard() {
     applyFilters(applyQuickFilter(key), 'push');
   };
 
-  const requestQuickLaunch = () => {
-    const featureId = quickLaunchFeatureId.trim();
-    const goal = quickLaunchGoal.trim();
-    if (!FEATURE_ID_PATTERN.test(featureId)) {
-      addToast('feature_id must match /^[a-z0-9](?:[a-z0-9_-]{1,126}[a-z0-9])?$/', 'error');
-      return;
-    }
-    if (goal.length === 0) {
-      addToast('Goal is required', 'error');
-      return;
-    }
-    setQuickLaunchConfirmOpen(true);
-  };
-
-  const confirmQuickLaunch = async () => {
-    if (quickLaunchSubmitting) {
-      return;
-    }
-    setQuickLaunchSubmitting(true);
-    try {
-      const response = await fetch(`/api/run${projectQuery(project)}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          feature_id: quickLaunchFeatureId.trim(),
-          goal: quickLaunchGoal.trim(),
-          confirm_launch: true,
-        }),
-      });
-      const body = (await response.json()) as {
-        ok: boolean;
-        data?: { feature_id: string };
-        error?: { message?: string; code?: string };
-      };
-
-      if (!body.ok || !body.data) {
-        addToast(body.error?.message ?? 'Quick launch failed', 'error');
-        if (response.status === 403) {
-          await refreshQuickLaunchAvailability();
-        }
-        return;
-      }
-
-      addToast(`Launched ${body.data.feature_id}`, 'success');
-      setQuickLaunchFeatureId('');
-      setQuickLaunchGoal('');
-      setSelectedFeatureId(body.data.feature_id);
-      setFocusedFeatureId(body.data.feature_id);
-      syncUrlState({ featureId: body.data.feature_id });
-      await refreshStatus();
-      await refreshDetail(body.data.feature_id);
-      await refreshQuickLaunchAvailability();
-    } catch {
-      addToast('Quick launch failed', 'error');
-    } finally {
-      setQuickLaunchSubmitting(false);
-      setQuickLaunchConfirmOpen(false);
-    }
-  };
-
   return (
     <div className={styles.dashboardRoot}>
-      <header className={styles.topBar}>
-        <div className={styles.titleBlock}>
-          <h1 className={styles.pageTitle}>AOP Dashboard</h1>
-          <p className={styles.pageSubtitle}>
-            {connected ? 'Live updates connected' : 'Disconnected from event stream'}
-          </p>
-        </div>
-
-        <div className={styles.metaControls}>
-          <Link href={`/analytics${projectQuery(project)}`} className={styles.linkButton}>
-            Analytics
-          </Link>
-          <div className={styles.inlineActions}>
-            <button
-              type="button"
-              className={`${styles.button} ${viewMode === 'board' ? styles.buttonSuccess : ''}`}
-              onClick={() => {
-                setViewMode('board');
-                syncUrlState({ view: 'board' });
-              }}
-            >
-              Board
-            </button>
-            <button
-              type="button"
-              className={`${styles.button} ${viewMode === 'list' ? styles.buttonSuccess : ''}`}
-              onClick={() => {
-                setViewMode('list');
-                syncUrlState({ view: 'list' });
-              }}
-            >
-              List
-            </button>
-          </div>
-
-          <label className={styles.label} htmlFor="project-switcher">
-            Project
-          </label>
-          <select
-            id="project-switcher"
-            className={styles.select}
-            value={project}
-            onChange={(event) => {
-              const next = event.target.value;
-              setProject(next);
-              syncUrlState({ projectName: next });
-            }}
-          >
-            <option value="">Current Repo</option>
-            {projects.map((entry) => (
-              <option key={entry.name} value={entry.name}>
-                {entry.name}
-              </option>
-            ))}
-          </select>
-          <span
-            className={`${styles.connectionDot} ${connected ? styles.connected : styles.disconnected}`}
-            aria-label={connected ? 'connected' : 'disconnected'}
-          />
-        </div>
-      </header>
+      <CommandCenterHeader
+        connected={connected}
+        project={project}
+        projects={projects}
+        viewMode={viewMode}
+        analyticsHref={`/analytics${projectQuery(project)}`}
+        launchHref={`/launch${projectQuery(project)}`}
+        onProjectChange={(next) => {
+          setProject(next);
+          syncUrlState({ projectName: next });
+        }}
+        onViewModeChange={(next) => {
+          setViewMode(next);
+          syncUrlState({ view: next });
+        }}
+      />
 
-      <SummaryBar
+      <AttentionStrip
         counts={summaryCounts}
-        activeQuickFilter={filters.quickFilter}
-        onQuickFilter={setQuickFilter}
-        mergeHistogram14d={payload.metrics?.merge_histogram_14d}
-        totalCostTodayUsd={payload.metrics?.total_cost_today_usd}
-        analyticsHref={`/analytics${projectQuery(project)}`}
+        activeFilter={filters.quickFilter}
+        onSelectFilter={setQuickFilter}
       />
 
-      <FilterBar
+      <MainlineStatusBanner project={project} />
+
+      {featuresWithCollisions.length > 0 && !collisionDrawer && (
+        <div
+          className={styles.banner}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+            margin: '0 0 0.5rem 0',
+            cursor: 'pointer',
+          }}
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            const first = featuresWithCollisions[0];
+            if (first?.collision) {
+              setCollisionDrawer({ feature: first, collision: first.collision });
+            }
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              const first = featuresWithCollisions[0];
+              if (first?.collision) {
+                setCollisionDrawer({ feature: first, collision: first.collision });
+              }
+            }
+          }}
+        >
+          <span style={{ fontSize: '1rem', flexShrink: 0 }}>&#x26A0;&#xFE0F;</span>
+          <span style={{ flex: 1 }}>
+            <strong>
+              {featuresWithCollisions.length === 1
+                ? `${featuresWithCollisions[0].feature_id} has a plan collision`
+                : `${featuresWithCollisions.length} features have plan collisions`}
+            </strong>{' '}
+            &mdash; click to review and approve overlaps.
+          </span>
+        </div>
+      )}
+
+      <TaskFilterBar
         filters={filters}
         onFiltersChange={(next) => applyFilters(next, 'replace')}
         onClearFilters={() => applyFilters(createDefaultFilters(), 'push')}
+        onQuickFilter={setQuickFilter}
         searchInputRef={searchInputRef}
       />
 
-      <div className={styles.layout}>
-        <div>
-          <div className={styles.operatorGrid}>
-            <RunHealthPanel runtime={payload.runtime} nowMs={nowMs} />
-            <LockResourceMap
-              locks={payload.lock_map ?? []}
-              nowMs={nowMs}
-              onSelectFeature={(featureId) => {
-                setSelectedFeatureId(featureId);
-                setFocusedFeatureId(featureId);
-                syncUrlState({ featureId });
-              }}
-            />
-            <DependencyChains
-              chains={dependencyChains}
-              onSelectFeature={(featureId) => {
-                setSelectedFeatureId(featureId);
-                setFocusedFeatureId(featureId);
-                syncUrlState({ featureId });
-              }}
-            />
-            <QuickLaunchPanel
-              visible={isQuickLaunchAffordanceVisible(quickLaunchAvailability)}
-              featureId={quickLaunchFeatureId}
-              goal={quickLaunchGoal}
-              submitting={quickLaunchSubmitting}
-              disabledReason={quickLaunchAvailability.reason}
-              onFeatureIdChange={setQuickLaunchFeatureId}
-              onGoalChange={setQuickLaunchGoal}
-              onRequestLaunch={requestQuickLaunch}
-            />
-          </div>
+      <div className={styles.commandCenterLayout}>
+        <div className={styles.commandCenterMain}>
+          <SummaryBar
+            totalTokensToday={payload.metrics?.total_tokens_today}
+            totalCostTodayUsd={payload.metrics?.total_cost_today_usd ?? null}
+            activeFeatures={payload.index.active.length}
+            mergedFeatures={payload.index.merged.length}
+            mergeHistogram14d={payload.metrics?.merge_histogram_14d}
+            analyticsHref={`/analytics${projectQuery(project)}`}
+          />
+
+          {payload.pending_questions && payload.pending_questions.count > 0 ? (
+            <section className={styles.section}>
+              <div className={styles.panelHeader}>
+                <div>
+                  <h2 className={styles.panelTitle}>
+                    Pending Questions ({payload.pending_questions.count})
+                  </h2>
+                  <p className={styles.metaText}>
+                    Human-input blockers waiting on operator answers.
+                  </p>
+                </div>
+              </div>
+              <ul className={styles.planList}>
+                {payload.pending_questions.items.map((question) => (
+                  <li key={question.question_id} className={styles.planListItem}>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      onClick={() => {
+                        const targetFeatureId = question.feature_id ?? null;
+                        if (!targetFeatureId) {
+                          return;
+                        }
+                        setSelectedFeatureId(targetFeatureId);
+                        setFocusedFeatureId(targetFeatureId);
+                        syncUrlState({ featureId: targetFeatureId });
+                      }}
+                    >
+                      {question.feature_id ?? 'feature'} • {question.role} • {question.phase}
+                    </button>
+                    <p className={styles.metaText}>{question.prompt}</p>
+                    {question.resume_status ? (
+                      <p className={styles.metaText}>Resume target: {question.resume_status}</p>
+                    ) : null}
+                    {question.ambiguity_id ? (
+                      <p className={styles.metaText}>Ambiguity: {question.ambiguity_id}</p>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ) : null}
+
+          <PrioritizedQueues
+            features={activeFeatures}
+            project={project}
+            onSelectFeature={(featureId) => {
+              setSelectedFeatureId(featureId);
+              setFocusedFeatureId(featureId);
+              syncUrlState({ featureId });
+            }}
+            quickLaunch={{
+              visible: isQuickLaunchAffordanceVisible(quickLaunchAvailability),
+              launchHref: `/launch${projectQuery(project)}`,
+              available: quickLaunchAvailability.available,
+              authorized: quickLaunchAvailability.authorized,
+              disabledReason: quickLaunchAvailability.reason,
+            }}
+          />
 
           {viewMode === 'list' ? (
             <FeatureListView
-              features={filteredFeatures}
+              features={activeFeatures}
               project={project}
               selectedFeatureId={selectedFeatureId}
               focusedFeatureId={focusedFeatureId}
@@ -681,45 +657,60 @@ export default function Dashboard() {
               onFocusFeature={setFocusedFeatureId}
             />
           )}
-          <LiveEventFeed
-            events={feedState.events}
-            paused={feedState.paused}
-            onTogglePause={() =>
+
+          <MergedArchive features={mergedFeatures} project={project} />
+        </div>
+
+        <div className={styles.commandCenterRail}>
+          <SecondaryDiagnosticsRail
+            runtime={payload.runtime}
+            nowMs={nowMs}
+            locks={payload.lock_map ?? []}
+            dependencyChains={dependencyChains}
+            collisions={payload.index.blocked_queue ?? []}
+            liveFeed={feedState}
+            onToggleFeedPause={() =>
               setFeedState((current) => reduceLiveFeedState(current, { type: 'toggle_pause' }))
             }
-            onClear={() =>
+            onClearFeed={() =>
               setFeedState((current) => reduceLiveFeedState(current, { type: 'clear' }))
             }
+            onSelectFeature={(featureId) => {
+              setSelectedFeatureId(featureId);
+              setFocusedFeatureId(featureId);
+              syncUrlState({ featureId });
+            }}
           />
-          <CollisionQueue queue={payload.index.blocked_queue ?? []} />
-        </div>
 
-        <DetailPanel
-          detail={detail}
-          project={project}
-          unresolvedDependencies={selectedDependencies}
-          flakySuspects={payload.flaky_suspects ?? []}
-          onClose={() => {
-            setSelectedFeatureId(null);
-            setDetail(null);
-            syncUrlState({ featureId: null });
-          }}
-          refreshDetail={refreshDetail}
-          refreshStatus={refreshStatus}
-          addToast={addToast}
-        />
-      </div>
+          <CollisionApprovalDrawer
+            detail={collisionDrawer}
+            project={project}
+            onClose={() => setCollisionDrawer(null)}
+            onApproved={async () => {
+              setCollisionDrawer(null);
+              await refreshStatus();
+            }}
+            addToast={addToast}
+          />
 
-      <ConfirmationModal
-        isOpen={quickLaunchConfirmOpen}
-        title={`Launch ${quickLaunchFeatureId.trim()}?`}
-        message={`Goal:\n${quickLaunchGoal.trim()}\n\nThis action starts a new orchestrator feature run.`}
-        confirmLabel="Confirm Launch"
-        onCancel={() => setQuickLaunchConfirmOpen(false)}
-        onConfirm={() => {
-          void confirmQuickLaunch();
-        }}
-      />
+          <TriageDrawer
+            detail={triage}
+            project={project}
+            onClose={() => {
+              setSelectedFeatureId(null);
+              setTriage(null);
+              syncUrlState({ featureId: null });
+            }}
+            onAfterAction={async () => {
+              await refreshStatus();
+              if (selectedFeatureId) {
+                await refreshTriage(selectedFeatureId);
+              }
+            }}
+            addToast={addToast}
+          />
+        </div>
+      </div>
 
       <ToastStack notifications={notifications} onDismiss={dismissToast} />
     </div>