agentic-orchestrator 0.1.26 → 0.1.28

package/packages/web-dashboard/src/app/api/features/[id]/timeline/route.ts

@@ -0,0 +1,60 @@
+import {
+  readFeatureState,
+  readWorkerTimelineEntries,
+  resolveProjectRoot,
+} from '@/lib/aop-client.js';
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { FEATURE_ID_PATTERN, normalizeLimit } from '@/lib/review-contracts.js';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> },
+): Promise<Response> {
+  const { id } = await params;
+  if (!FEATURE_ID_PATTERN.test(id)) {
+    return Response.json(errorEnvelope('invalid_input', 'Invalid feature id'), { status: 400 });
+  }
+
+  const url = new URL(req.url);
+  const project = url.searchParams.get('project');
+  const role = url.searchParams.get('role');
+  const validityRaw = url.searchParams.get('valid');
+  const validity = validityRaw === 'valid' || validityRaw === 'invalid' ? validityRaw : 'all';
+  const limit = normalizeLimit(url.searchParams.get('limit'), 100, 100);
+  const repoRoot = await resolveProjectRoot(project);
+
+  const state = await readFeatureState(id, repoRoot);
+  if (!state) {
+    return Response.json(errorEnvelope('feature_not_found', `Feature ${id} not found`), {
+      status: 404,
+    });
+  }
+
+  const entries = await readWorkerTimelineEntries(id, repoRoot, {
+    role,
+    valid: validity,
+    limit,
+  });
+
+  const summary = {
+    total: entries.length,
+    valid: entries.filter((entry) => entry.valid).length,
+    invalid: entries.filter((entry) => !entry.valid).length,
+    roles: entries.reduce<Record<string, number>>((acc, entry) => {
+      acc[entry.role] = (acc[entry.role] ?? 0) + 1;
+      return acc;
+    }, {}),
+  };
+
+  return Response.json(
+    okEnvelope(
+      {
+        entries,
+        summary,
+      },
+      { source: 'artifact' },
+    ),
+  );
+}

package/packages/web-dashboard/src/app/feature/[id]/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { DetailPanel } from '@/components/detail-panel';
+import { ReviewWorkspace } from '@/components/review-workspace';
 import { ToastStack, useToast } from '@/components/toast';
 import type { DashboardStatusPayload, FeatureDetail } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
@@ -14,6 +15,10 @@ function emptyPayload(): DashboardStatusPayload {
   };
 }
 
+function hasActiveRuntimeRunId(runId: string | null | undefined): boolean {
+  return Boolean(runId) && runId !== 'unknown' && runId !== 'unassigned' && runId !== 'none';
+}
+
 async function jsonFetch<T>(input: string, init?: RequestInit): Promise<T> {
   const response = await fetch(input, init);
   return (await response.json()) as T;
@@ -77,6 +82,11 @@ export default function FeatureFocusPage({ params }: { params: Promise<{ id: str
     payload.features.find((feature) => feature.feature_id === featureId)?.status ??
     detail?.feature.status ??
     'unknown';
+  const showReviewWorkspace =
+    detail?.feature.phase === 'ready_to_merge' || detail?.feature.phase === 'qa';
+  const hasActiveRuntimeSession =
+    hasActiveRuntimeRunId(payload.runtime?.run_id) ||
+    hasActiveRuntimeRunId(payload.index.runtime_sessions?.run_id);
 
   return (
     <div className={styles.dashboardRoot}>
@@ -93,17 +103,28 @@ export default function FeatureFocusPage({ params }: { params: Promise<{ id: str
       </header>
 
       <div className={styles.focusLayout}>
-        <DetailPanel
-          detail={detail}
-          project={project}
-          isFocusView
-          onClose={() => {
-            window.location.href = `/${query.length > 0 ? query : ''}`;
-          }}
-          refreshDetail={refreshDetail}
-          refreshStatus={refreshStatus}
-          addToast={addToast}
-        />
+        {detail && showReviewWorkspace ? (
+          <ReviewWorkspace
+            detail={detail}
+            project={project}
+            hasActiveRuntimeSession={hasActiveRuntimeSession}
+            refreshDetail={refreshDetail}
+            refreshStatus={refreshStatus}
+            addToast={addToast}
+          />
+        ) : (
+          <DetailPanel
+            detail={detail}
+            project={project}
+            isFocusView
+            onClose={() => {
+              window.location.href = `/${query.length > 0 ? query : ''}`;
+            }}
+            refreshDetail={refreshDetail}
+            refreshStatus={refreshStatus}
+            addToast={addToast}
+          />
+        )}
       </div>
 
       <ToastStack notifications={notifications} onDismiss={dismissToast} />

package/packages/web-dashboard/src/app/globals.css

@@ -1,3 +1,5 @@
+@import 'diff2html/bundles/css/diff2html.min.css';
+
 * {
   box-sizing: border-box;
   margin: 0;

package/packages/web-dashboard/src/components/detail-panel.tsx

@@ -6,6 +6,8 @@ import {
 } from '@/lib/dashboard-utils.js';
 import type {
   CostSummary,
+  FeatureCheckpointComparison,
+  FeatureCheckpoint,
   FeatureDetail,
   FeatureLog,
   FeatureLogEntry,
@@ -80,6 +82,14 @@ interface ApiEnvelope<TData> {
   error?: { code?: string; message?: string; retryable?: boolean };
 }
 
+interface CheckpointStreamPayload {
+  type: 'snapshot' | 'append' | 'heartbeat' | 'error';
+  cursor: string;
+  execution_mode: 'deterministic' | 'interactive' | null;
+  checkpoints: FeatureCheckpoint[];
+  message?: string;
+}
+
 async function callAction(
   action: ReviewAction,
   featureId: string,
@@ -94,6 +104,59 @@ async function callAction(
   return (await response.json()) as ActionResponse;
 }
 
+function formatCheckpointTimestamp(value: string): string {
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) {
+    return value;
+  }
+  return new Date(parsed).toLocaleString([], {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+function checkpointStatusBadge(status: FeatureCheckpoint['validation_status']): string {
+  if (status === 'valid') {
+    return `${styles.badge} ${styles.badgePass}`;
+  }
+  if (status === 'invalid') {
+    return `${styles.badge} ${styles.badgeFail}`;
+  }
+  return `${styles.badge} ${styles.badgePending}`;
+}
+
+function checkpointSeverityBadge(severity: FeatureCheckpoint['severity']): string {
+  if (severity === 'error' || severity === 'critical') {
+    return `${styles.badge} ${styles.badgeFail}`;
+  }
+  if (severity === 'warning') {
+    return `${styles.badge} ${styles.badgePending}`;
+  }
+  if (severity === 'info') {
+    return `${styles.badge} ${styles.badgeNeutral}`;
+  }
+  return `${styles.badge} ${styles.badgeNeutral}`;
+}
+
+function mergeCheckpointTimeline(
+  current: FeatureCheckpoint[],
+  incoming: FeatureCheckpoint[],
+): FeatureCheckpoint[] {
+  const byId = new Map<string, FeatureCheckpoint>();
+  for (const item of current) {
+    byId.set(item.checkpoint_id, item);
+  }
+  for (const item of incoming) {
+    byId.set(item.checkpoint_id, item);
+  }
+  return [...byId.values()].sort(
+    (left, right) => Date.parse(right.timestamp) - Date.parse(left.timestamp),
+  );
+}
+
 export function DetailPanel({
   detail,
   project,
@@ -117,6 +180,25 @@ export function DetailPanel({
   const [cost, setCost] = useState<CostSummary | null>(detail?.cost ?? null);
   const [qaIndex, setQaIndex] = useState<QaTestIndex | null>(detail?.qa_test_index ?? null);
   const [reviewBrief, setReviewBrief] = useState<ReviewBrief | null>(detail?.review_brief ?? null);
+  const [runtimeInspectorView, setRuntimeInspectorView] = useState<
+    'timeline' | 'snapshot' | 'compare'
+  >('timeline');
+  const [checkpointTimeline, setCheckpointTimeline] = useState<FeatureCheckpoint[]>(
+    detail?.checkpoints ?? [],
+  );
+  const [checkpointStreamError, setCheckpointStreamError] = useState<string | null>(null);
+  const [selectedCheckpointId, setSelectedCheckpointId] = useState<string | null>(null);
+  const [selectedCheckpointDiff, setSelectedCheckpointDiff] = useState<string>('');
+  const [selectedCheckpointDiffLoading, setSelectedCheckpointDiffLoading] = useState(false);
+  const [selectedCheckpointDiffError, setSelectedCheckpointDiffError] = useState<string | null>(
+    null,
+  );
+  const [compareFromCheckpointId, setCompareFromCheckpointId] = useState<string>('');
+  const [compareToCheckpointId, setCompareToCheckpointId] = useState<string>('');
+  const [checkpointComparison, setCheckpointComparison] =
+    useState<FeatureCheckpointComparison | null>(null);
+  const [checkpointComparisonLoading, setCheckpointComparisonLoading] = useState(false);
+  const [checkpointComparisonError, setCheckpointComparisonError] = useState<string | null>(null);
   const [budgetLimitUsd, setBudgetLimitUsd] = useState<number | null>(null);
   const costCacheRef = useRef<Map<string, { expiresAt: number; value: CostSummary | null }>>(
     new Map(),
@@ -301,12 +383,217 @@ export function DetailPanel({
     };
   }, [detail, project]);
 
+  useEffect(() => {
+    setCheckpointTimeline(detail?.checkpoints ?? []);
+    setCheckpointStreamError(null);
+  }, [detail?.feature.feature_id, detail?.checkpoints]);
+
+  useEffect(() => {
+    if (checkpointTimeline.length === 0) {
+      setSelectedCheckpointId(null);
+      setCompareFromCheckpointId('');
+      setCompareToCheckpointId('');
+      setCheckpointComparison(null);
+      return;
+    }
+
+    setSelectedCheckpointId((current) => {
+      if (
+        current &&
+        checkpointTimeline.some((checkpoint) => checkpoint.checkpoint_id === current)
+      ) {
+        return current;
+      }
+      return checkpointTimeline[0].checkpoint_id;
+    });
+
+    setCompareFromCheckpointId((current) => {
+      if (
+        current &&
+        checkpointTimeline.some((checkpoint) => checkpoint.checkpoint_id === current)
+      ) {
+        return current;
+      }
+      return checkpointTimeline[0].checkpoint_id;
+    });
+
+    setCompareToCheckpointId((current) => {
+      if (
+        current &&
+        checkpointTimeline.some((checkpoint) => checkpoint.checkpoint_id === current)
+      ) {
+        return current;
+      }
+      return checkpointTimeline[1]?.checkpoint_id ?? '';
+    });
+  }, [checkpointTimeline]);
+
+  useEffect(() => {
+    if (!detail) {
+      return;
+    }
+    const shouldStream =
+      detail.execution_mode === 'interactive' || (detail.checkpoints?.length ?? 0) > 0;
+    if (!shouldStream) {
+      return;
+    }
+    const params = new URLSearchParams();
+    if (project.length > 0) {
+      params.set('project', project);
+    }
+    const eventSource = new EventSource(
+      `/api/features/${encodeURIComponent(detail.feature.feature_id)}/checkpoints/stream?${params.toString()}`,
+    );
+
+    const onStreamEvent = (event: MessageEvent<string>) => {
+      let payload: CheckpointStreamPayload;
+      try {
+        payload = JSON.parse(event.data) as CheckpointStreamPayload;
+      } catch {
+        return;
+      }
+      if (payload.type === 'error') {
+        setCheckpointStreamError(payload.message ?? 'Checkpoint stream warning');
+        return;
+      }
+      if (payload.checkpoints.length === 0) {
+        return;
+      }
+      setCheckpointStreamError(null);
+      if (payload.type === 'snapshot') {
+        setCheckpointTimeline(payload.checkpoints);
+        return;
+      }
+      if (payload.type === 'append') {
+        setCheckpointTimeline((current) => mergeCheckpointTimeline(current, payload.checkpoints));
+      }
+    };
+
+    eventSource.addEventListener('snapshot', onStreamEvent as EventListener);
+    eventSource.addEventListener('append', onStreamEvent as EventListener);
+    eventSource.addEventListener('error', () => {
+      setCheckpointStreamError('Disconnected from checkpoint stream');
+    });
+
+    return () => {
+      eventSource.close();
+    };
+  }, [detail?.feature.feature_id, detail?.execution_mode, detail?.checkpoints?.length, project]);
+
+  useEffect(() => {
+    if (!detail || !selectedCheckpointId) {
+      setSelectedCheckpointDiff('');
+      setSelectedCheckpointDiffError(null);
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+
+    void (async () => {
+      setSelectedCheckpointDiffLoading(true);
+      setSelectedCheckpointDiffError(null);
+      try {
+        const response = await fetch(
+          `/api/features/${encodeURIComponent(
+            detail.feature.feature_id,
+          )}/checkpoints/${encodeURIComponent(selectedCheckpointId)}/diff${projectQuery(project)}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as ApiEnvelope<{
+          checkpoint: FeatureCheckpoint;
+          diff: string;
+        }>;
+        if (cancelled) {
+          return;
+        }
+        if (!body.ok || !body.data) {
+          setSelectedCheckpointDiff('');
+          setSelectedCheckpointDiffError(body.error?.message ?? 'Unable to load checkpoint diff');
+          return;
+        }
+        setSelectedCheckpointDiff(body.data.diff);
+      } catch {
+        if (!cancelled) {
+          setSelectedCheckpointDiff('');
+          setSelectedCheckpointDiffError('Unable to load checkpoint diff');
+        }
+      } finally {
+        if (!cancelled) {
+          setSelectedCheckpointDiffLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [detail, selectedCheckpointId, project]);
+
+  useEffect(() => {
+    if (!detail || !compareFromCheckpointId || !compareToCheckpointId) {
+      setCheckpointComparison(null);
+      setCheckpointComparisonError(null);
+      return;
+    }
+    if (compareFromCheckpointId === compareToCheckpointId) {
+      setCheckpointComparison(null);
+      setCheckpointComparisonError('Select two different checkpoints to compare.');
+      return;
+    }
+
+    const controller = new AbortController();
+    let cancelled = false;
+    void (async () => {
+      setCheckpointComparisonLoading(true);
+      setCheckpointComparisonError(null);
+      try {
+        const query = new URLSearchParams();
+        query.set('from', compareFromCheckpointId);
+        query.set('to', compareToCheckpointId);
+        if (project.length > 0) {
+          query.set('project', project);
+        }
+        const response = await fetch(
+          `/api/features/${encodeURIComponent(detail.feature.feature_id)}/checkpoints/compare?${query.toString()}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as ApiEnvelope<FeatureCheckpointComparison>;
+        if (cancelled) {
+          return;
+        }
+        if (!body.ok || !body.data) {
+          setCheckpointComparison(null);
+          setCheckpointComparisonError(body.error?.message ?? 'Unable to compare checkpoints');
+          return;
+        }
+        setCheckpointComparison(body.data);
+      } catch {
+        if (!cancelled) {
+          setCheckpointComparison(null);
+          setCheckpointComparisonError('Unable to compare checkpoints');
+        }
+      } finally {
+        if (!cancelled) {
+          setCheckpointComparisonLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [detail, compareFromCheckpointId, compareToCheckpointId, project]);
+
   const phase = detail?.feature.phase ?? 'unknown';
 
   const shouldShowPlan = phase === 'planning' || phase === 'building';
   const shouldShowDiff = ['building', 'qa', 'ready_to_merge', 'blocked'].includes(phase);
   const shouldShowGates = ['qa', 'ready_to_merge', 'blocked'].includes(phase);
   const shouldShowEvidence = ['qa', 'ready_to_merge', 'blocked'].includes(phase);
+  const checkpoints = checkpointTimeline;
+  const showCheckpointTimeline = detail?.execution_mode === 'interactive' || checkpoints.length > 0;
 
   const timeInPhase = useMemo(
     () => formatElapsedTime(detail?.feature.last_updated, nowMs),
@@ -466,6 +753,202 @@ export function DetailPanel({
 
       {detail.feature.pr ? <PrStatusCard pr={detail.feature.pr} /> : null}
 
+      {showCheckpointTimeline ? (
+        <details className={styles.section} open={checkpoints.length > 0}>
+          <summary className={styles.sectionSummary}>Runtime Inspector · Checkpoints</summary>
+          <div className={styles.badgeRow}>
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              mode: {detail.execution_mode ?? 'deterministic'}
+            </span>
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {checkpoints.length} checkpoints
+            </span>
+            {checkpointStreamError ? (
+              <span className={`${styles.badge} ${styles.badgeFail}`}>{checkpointStreamError}</span>
+            ) : (
+              <span className={`${styles.badge} ${styles.badgePass}`}>streaming</span>
+            )}
+          </div>
+          <div className={styles.runtimeInspectorTabs}>
+            <button
+              type="button"
+              className={`${styles.runtimeInspectorTab} ${
+                runtimeInspectorView === 'timeline' ? styles.runtimeInspectorTabActive : ''
+              }`}
+              onClick={() => setRuntimeInspectorView('timeline')}
+            >
+              Timeline
+            </button>
+            <button
+              type="button"
+              className={`${styles.runtimeInspectorTab} ${
+                runtimeInspectorView === 'snapshot' ? styles.runtimeInspectorTabActive : ''
+              }`}
+              onClick={() => setRuntimeInspectorView('snapshot')}
+              disabled={checkpoints.length === 0}
+            >
+              Snapshot Diff
+            </button>
+            <button
+              type="button"
+              className={`${styles.runtimeInspectorTab} ${
+                runtimeInspectorView === 'compare' ? styles.runtimeInspectorTabActive : ''
+              }`}
+              onClick={() => setRuntimeInspectorView('compare')}
+              disabled={checkpoints.length < 2}
+            >
+              Compare
+            </button>
+          </div>
+          {runtimeInspectorView === 'timeline' ? (
+            checkpoints.length === 0 ? (
+              <p className={styles.metaText}>No checkpoints recorded for this feature yet.</p>
+            ) : (
+              <div className={styles.reviewTimelineList}>
+                {checkpoints.map((checkpoint) => (
+                  <div
+                    key={`${checkpoint.checkpoint_id}:${checkpoint.timestamp}`}
+                    className={styles.reviewTimelineEntry}
+                  >
+                    <div className={styles.badgeRow}>
+                      <span className={checkpointStatusBadge(checkpoint.validation_status)}>
+                        {checkpoint.validation_status}
+                      </span>
+                      {checkpoint.severity ? (
+                        <span className={checkpointSeverityBadge(checkpoint.severity)}>
+                          {checkpoint.severity}
+                        </span>
+                      ) : null}
+                    </div>
+                    <span>{formatCheckpointTimestamp(checkpoint.timestamp)}</span>
+                    <span>{checkpoint.files_changed.length} files</span>
+                    <span>{checkpoint.checkpoint_id}</span>
+                    {checkpoint.violations.length > 0 ? (
+                      <span>{checkpoint.violations[0]}</span>
+                    ) : (
+                      <span>no violations</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )
+          ) : null}
+          {runtimeInspectorView === 'snapshot' ? (
+            <div className={styles.runtimeInspectorPanel}>
+              <label className={styles.label} htmlFor="checkpoint-select">
+                Checkpoint
+              </label>
+              <select
+                id="checkpoint-select"
+                className={styles.actionSelect}
+                value={selectedCheckpointId ?? ''}
+                onChange={(event) => setSelectedCheckpointId(event.target.value)}
+              >
+                {checkpoints.map((checkpoint) => (
+                  <option key={checkpoint.checkpoint_id} value={checkpoint.checkpoint_id}>
+                    {checkpoint.checkpoint_id} · {formatCheckpointTimestamp(checkpoint.timestamp)}
+                  </option>
+                ))}
+              </select>
+              {selectedCheckpointDiffLoading ? (
+                <p className={styles.metaText}>Loading checkpoint diff...</p>
+              ) : null}
+              {selectedCheckpointDiffError ? (
+                <p className={styles.metaText}>{selectedCheckpointDiffError}</p>
+              ) : null}
+              {!selectedCheckpointDiffLoading && !selectedCheckpointDiffError ? (
+                <DiffViewer diff={selectedCheckpointDiff} />
+              ) : null}
+            </div>
+          ) : null}
+          {runtimeInspectorView === 'compare' ? (
+            <div className={styles.runtimeInspectorPanel}>
+              <div className={styles.runtimeInspectorCompareGrid}>
+                <div>
+                  <label className={styles.label} htmlFor="compare-from-checkpoint">
+                    From checkpoint
+                  </label>
+                  <select
+                    id="compare-from-checkpoint"
+                    className={styles.actionSelect}
+                    value={compareFromCheckpointId}
+                    onChange={(event) => setCompareFromCheckpointId(event.target.value)}
+                  >
+                    {checkpoints.map((checkpoint) => (
+                      <option
+                        key={`from-${checkpoint.checkpoint_id}`}
+                        value={checkpoint.checkpoint_id}
+                      >
+                        {checkpoint.checkpoint_id}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className={styles.label} htmlFor="compare-to-checkpoint">
+                    To checkpoint
+                  </label>
+                  <select
+                    id="compare-to-checkpoint"
+                    className={styles.actionSelect}
+                    value={compareToCheckpointId}
+                    onChange={(event) => setCompareToCheckpointId(event.target.value)}
+                  >
+                    {checkpoints.map((checkpoint) => (
+                      <option
+                        key={`to-${checkpoint.checkpoint_id}`}
+                        value={checkpoint.checkpoint_id}
+                      >
+                        {checkpoint.checkpoint_id}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              {checkpointComparisonLoading ? (
+                <p className={styles.metaText}>Comparing checkpoints...</p>
+              ) : null}
+              {checkpointComparisonError ? (
+                <p className={styles.metaText}>{checkpointComparisonError}</p>
+              ) : null}
+              {checkpointComparison ? (
+                <>
+                  <div className={styles.badgeRow}>
+                    <span className={`${styles.badge} ${styles.badgePass}`}>
+                      added {checkpointComparison.summary.added}
+                    </span>
+                    <span className={`${styles.badge} ${styles.badgePending}`}>
+                      changed {checkpointComparison.summary.changed}
+                    </span>
+                    <span className={`${styles.badge} ${styles.badgeFail}`}>
+                      removed {checkpointComparison.summary.removed}
+                    </span>
+                    <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+                      unchanged {checkpointComparison.summary.unchanged}
+                    </span>
+                  </div>
+                  <p className={styles.metaText}>
+                    {checkpointComparison.files.length} files compared between{' '}
+                    {checkpointComparison.from_checkpoint_id} and{' '}
+                    {checkpointComparison.to_checkpoint_id}.
+                  </p>
+                  <div className={styles.runtimeInspectorCompareGrid}>
+                    <div>
+                      <h4 className={styles.sectionTitle}>From Snapshot</h4>
+                      <DiffViewer diff={checkpointComparison.from_diff} />
+                    </div>
+                    <div>
+                      <h4 className={styles.sectionTitle}>To Snapshot</h4>
+                      <DiffViewer diff={checkpointComparison.to_diff} />
+                    </div>
+                  </div>
+                </>
+              ) : null}
+            </div>
+          ) : null}
+        </details>
+      ) : null}
+
       {shouldShowPlan ? <PlanViewer plan={detail.plan} /> : null}
       {shouldShowGates ? <GateResults feature={detail.feature} /> : null}
       {shouldShowGates ? <GateStepDrilldown evidence={detail.gate_evidence} /> : null}