agentic-orchestrator 0.1.28 → 0.2.0

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

@@ -1,1124 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  buildDashboardFeatureHref,
-  formatElapsedTime,
-  projectQuery,
-} from '@/lib/dashboard-utils.js';
-import type {
-  CostSummary,
-  FeatureCheckpointComparison,
-  FeatureCheckpoint,
-  FeatureDetail,
-  FeatureLog,
-  FeatureLogEntry,
-  QaTestIndex,
-  ReviewBrief,
-} from '@/lib/types.js';
-import styles from '@/styles/dashboard.module.css';
-import { AgentPipelineStepper } from '@/components/agent-pipeline-stepper';
-import { ConfirmationModal } from '@/components/confirmation-modal';
-import { DiffViewer } from '@/components/diff-viewer';
-import { EvidenceViewer } from '@/components/evidence-viewer';
-import { FeatureCostPanel } from '@/components/feature-cost-panel';
-import { GateResults } from '@/components/gate-results';
-import { GateStepDrilldown } from '@/components/gate-step-drilldown';
-import { HumanInputPanel } from '@/components/human-input-panel';
-import { PlanViewer } from '@/components/plan-viewer';
-import { PlanRevisionTimeline } from '@/components/plan-revision-timeline';
-import { PlanRiskAnnotations } from '@/components/plan-risk-annotations';
-import { PlanScopeTree } from '@/components/plan-scope-tree';
-import { PrStatusCard } from '@/components/pr-status-card';
-import { QaCoverageMap } from '@/components/qa-coverage-map';
-import { ReviewBriefPanel } from '@/components/review-brief-panel';
-import { VerificationSignals } from '@/components/verification-signals';
-
-type ReviewAction =
-  | 'review.approve'
-  | 'review.deny'
-  | 'review.request_changes'
-  | 'feature.send_message'
-  | 'feature.retry';
-
-interface ActionResponse {
-  ok: boolean;
-  error?: { message?: string };
-}
-
-interface DetailPanelProps {
-  detail: FeatureDetail | null;
-  project: string;
-  unresolvedDependencies?: string[];
-  flakySuspects?: string[];
-  isFocusView?: boolean;
-  onClose: () => void;
-  refreshDetail: (featureId: string) => Promise<void>;
-  refreshStatus: () => Promise<void>;
-  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
-}
-
-interface ConfirmationState {
-  type: 'deny' | 'request_changes';
-  title: string;
-  message: string;
-}
-
-interface HistoryState {
-  loading: boolean;
-  error: string | null;
-  entries: FeatureLogEntry[];
-  total: number;
-}
-
-const DEFAULT_HISTORY: HistoryState = {
-  loading: false,
-  error: null,
-  entries: [],
-  total: 0,
-};
-
-interface ApiEnvelope<TData> {
-  ok: boolean;
-  data?: 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,
-  project: string,
-  payload: Record<string, unknown>,
-): Promise<ActionResponse> {
-  const response = await fetch(`/api/actions${projectQuery(project)}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ action, feature_id: featureId, ...payload }),
-  });
-  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,
-  unresolvedDependencies = [],
-  flakySuspects = [],
-  isFocusView = false,
-  onClose,
-  refreshDetail,
-  refreshStatus,
-  addToast,
-}: DetailPanelProps) {
-  const [approvalToken, setApprovalToken] = useState('approved');
-  const [reviewMessage, setReviewMessage] = useState('');
-  const [mergeStrategy, setMergeStrategy] = useState<'merge_commit' | 'squash' | 'rebase'>(
-    'merge_commit',
-  );
-  const [confirmation, setConfirmation] = useState<ConfirmationState | null>(null);
-  const [history, setHistory] = useState<HistoryState>(DEFAULT_HISTORY);
-  const [nowMs, setNowMs] = useState(Date.now());
-  const [submitting, setSubmitting] = useState(false);
-  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(),
-  );
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setNowMs(Date.now());
-    }, 5000);
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    if (!detail) {
-      setHistory(DEFAULT_HISTORY);
-      return;
-    }
-
-    let cancelled = false;
-    setHistory({ loading: true, error: null, entries: [], total: 0 });
-
-    void (async () => {
-      try {
-        const response = await fetch(
-          `/api/features/${detail.feature.feature_id}/log${projectQuery(project)}`,
-        );
-        const body = (await response.json()) as {
-          ok: boolean;
-          data?: FeatureLog;
-          error?: { message?: string };
-        };
-
-        if (cancelled) {
-          return;
-        }
-
-        if (!body.ok || !body.data) {
-          setHistory({
-            loading: false,
-            error: body.error?.message ?? 'Failed to load history',
-            entries: [],
-            total: 0,
-          });
-          return;
-        }
-
-        setHistory({
-          loading: false,
-          error: null,
-          entries: body.data.entries,
-          total: body.data.total,
-        });
-      } catch {
-        if (!cancelled) {
-          setHistory({ loading: false, error: 'Failed to load history', entries: [], total: 0 });
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [detail, project]);
-
-  useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const response = await fetch(`/api/policy/budget${projectQuery(project)}`);
-        const body = (await response.json()) as ApiEnvelope<{
-          per_feature_limit_usd?: number | null;
-        }>;
-        if (cancelled) {
-          return;
-        }
-        setBudgetLimitUsd(
-          body.ok && typeof body.data?.per_feature_limit_usd === 'number'
-            ? body.data.per_feature_limit_usd
-            : null,
-        );
-      } catch {
-        if (!cancelled) {
-          setBudgetLimitUsd(null);
-        }
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [project]);
-
-  useEffect(() => {
-    if (!detail) {
-      setCost(null);
-      setQaIndex(null);
-      setReviewBrief(null);
-      return;
-    }
-
-    const featureId = detail.feature.feature_id;
-    setCost(detail.cost ?? null);
-    setQaIndex(detail.qa_test_index ?? null);
-    setReviewBrief(detail.review_brief ?? null);
-
-    const controller = new AbortController();
-    let cancelled = false;
-
-    const fetchCost = async () => {
-      const cacheKey = `${project}:${featureId}`;
-      const cached = costCacheRef.current.get(cacheKey);
-      if (cached && cached.expiresAt > Date.now()) {
-        setCost(cached.value);
-        return;
-      }
-
-      try {
-        const response = await fetch(`/api/features/${featureId}/cost${projectQuery(project)}`, {
-          signal: controller.signal,
-        });
-        const body = (await response.json()) as ApiEnvelope<CostSummary>;
-        if (cancelled) {
-          return;
-        }
-        if (body.ok && body.data) {
-          setCost(body.data);
-          costCacheRef.current.set(cacheKey, {
-            expiresAt: Date.now() + 60_000,
-            value: body.data,
-          });
-          return;
-        }
-        setCost(null);
-      } catch {
-        if (!cancelled) {
-          setCost(null);
-        }
-      }
-    };
-
-    const fetchQaIndex = async () => {
-      try {
-        const response = await fetch(
-          `/api/features/${featureId}/test-index${projectQuery(project)}`,
-          { signal: controller.signal },
-        );
-        const body = (await response.json()) as ApiEnvelope<QaTestIndex>;
-        if (!cancelled) {
-          setQaIndex(body.ok && body.data ? body.data : null);
-        }
-      } catch {
-        if (!cancelled) {
-          setQaIndex(null);
-        }
-      }
-    };
-
-    const fetchReviewBrief = async () => {
-      try {
-        const response = await fetch(
-          `/api/features/${featureId}/review-brief${projectQuery(project)}`,
-          { signal: controller.signal },
-        );
-        const body = (await response.json()) as ApiEnvelope<ReviewBrief>;
-        if (!cancelled) {
-          setReviewBrief(body.ok && body.data ? body.data : null);
-        }
-      } catch {
-        if (!cancelled) {
-          setReviewBrief(null);
-        }
-      }
-    };
-
-    void fetchCost();
-    void fetchQaIndex();
-    void fetchReviewBrief();
-
-    return () => {
-      cancelled = true;
-      controller.abort();
-    };
-  }, [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),
-    [detail?.feature.last_updated, nowMs],
-  );
-
-  const runAction = async (action: ReviewAction, payload: Record<string, unknown>) => {
-    if (!detail || submitting) {
-      return;
-    }
-
-    setSubmitting(true);
-    try {
-      const result = await callAction(action, detail.feature.feature_id, project, payload);
-      if (!result.ok) {
-        addToast(result.error?.message ?? `${action} failed`, 'error');
-        return;
-      }
-
-      addToast(`${action} completed`, 'success');
-      await refreshStatus();
-      await refreshDetail(detail.feature.feature_id);
-    } catch {
-      addToast(`${action} failed`, 'error');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  if (!detail) {
-    return (
-      <aside className={styles.detailPanel}>
-        <div className={styles.panelPlaceholder}>
-          Select a feature to inspect details, evidence, and review actions.
-        </div>
-      </aside>
-    );
-  }
-
-  const openDenyConfirm = () => {
-    const reason = reviewMessage.trim();
-    if (reason.length === 0) {
-      addToast('Deny reason is required', 'error');
-      return;
-    }
-    setConfirmation({
-      type: 'deny',
-      title: `Deny ${detail.feature.feature_id}?`,
-      message: `This will block the feature.\n\nReason:\n${reason}`,
-    });
-  };
-
-  const openRequestChangesConfirm = () => {
-    const message =
-      reviewMessage.trim().length > 0
-        ? reviewMessage.trim()
-        : 'Please address reviewer feedback and re-run QA.';
-    setConfirmation({
-      type: 'request_changes',
-      title: `Request changes for ${detail.feature.feature_id}?`,
-      message: `Message:\n${message}`,
-    });
-  };
-
-  const confirmAction = async () => {
-    if (!confirmation) {
-      return;
-    }
-
-    if (confirmation.type === 'deny') {
-      await runAction('review.deny', { reason: reviewMessage.trim() });
-    }
-
-    if (confirmation.type === 'request_changes') {
-      await runAction('review.request_changes', { message: reviewMessage.trim() });
-    }
-
-    setConfirmation(null);
-  };
-
-  return (
-    <aside className={styles.detailPanel}>
-      <header className={styles.panelHeader}>
-        <div>
-          <h2 className={styles.panelTitle}>{detail.feature.feature_id}</h2>
-          <p className={styles.metaText}>Phase: {phase}</p>
-          <p className={styles.metaText}>Status: {detail.feature.status}</p>
-          {unresolvedDependencies.length > 0 ? (
-            <p className={styles.metaText}>Substate: Awaiting Dependencies</p>
-          ) : null}
-          <p className={styles.metaText}>Branch: {detail.feature.branch ?? '-'}</p>
-          <p className={styles.metaText}>Time in phase: {timeInPhase}</p>
-          {detail.feature.activity_state === 'active' ? (
-            <p className={`${styles.metaText} ${styles.inlinePulse}`}>Live activity</p>
-          ) : null}
-        </div>
-        <button type="button" className={styles.closeButton} onClick={onClose}>
-          Close
-        </button>
-      </header>
-
-      <div className={styles.inlineActions}>
-        <a
-          href={`/feature/${detail.feature.feature_id}${projectQuery(project)}`}
-          className={styles.linkButton}
-        >
-          Open Focus View
-        </a>
-      </div>
-
-      <AgentPipelineStepper status={detail.feature.role_status} />
-      <FeatureCostPanel cost={cost} budgetLimitUsd={budgetLimitUsd} />
-      {detail.feature.status === 'paused_budget' ? (
-        <div className={styles.banner}>Budget exhausted</div>
-      ) : null}
-      <VerificationSignals feature={detail.feature} plan={detail.plan} />
-      <PlanRevisionTimeline
-        plan={detail.plan}
-        featurePlanVersion={detail.feature.plan_version}
-        featureRevisionOf={detail.feature.revision_of}
-        featureRevisionReason={detail.feature.revision_reason}
-      />
-      <PlanRiskAnnotations plan={detail.plan} expandedByDefault={phase === 'ready_to_merge'} />
-      <PlanScopeTree plan={detail.plan} />
-      {unresolvedDependencies.length > 0 ? (
-        <div className={styles.section}>
-          <h3 className={styles.sectionTitle}>Unresolved Dependencies</h3>
-          <ul className={styles.planList}>
-            {unresolvedDependencies.map((dependency) => (
-              <li key={dependency} className={styles.planListItem}>
-                <a
-                  className={styles.linkButton}
-                  href={buildDashboardFeatureHref(dependency, project)}
-                >
-                  {dependency}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-      {phase === 'ready_to_merge' || phase === 'qa' ? (
-        <ReviewBriefPanel brief={reviewBrief} />
-      ) : null}
-
-      {detail.feature.activity_state === 'waiting_input' ? (
-        <HumanInputPanel
-          featureId={detail.feature.feature_id}
-          project={project}
-          addToast={addToast}
-          onSent={async () => {
-            await refreshStatus();
-            await refreshDetail(detail.feature.feature_id);
-          }}
-        />
-      ) : null}
-
-      {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}
-      {phase === 'qa' || phase === 'ready_to_merge' ? (
-        <QaCoverageMap qaIndex={qaIndex} flakySuspects={flakySuspects} />
-      ) : null}
-      {shouldShowDiff ? <DiffViewer diff={detail.diff} /> : null}
-      {shouldShowEvidence ? (
-        <EvidenceViewer
-          featureId={detail.feature.feature_id}
-          evidence={detail.evidence}
-          project={project}
-        />
-      ) : null}
-
-      {phase === 'blocked' ? (
-        <div className={styles.section}>
-          <h3 className={styles.sectionTitle}>Blocked State</h3>
-          <p className={styles.metaText}>
-            {detail.feature.status_reason ?? 'No block reason recorded.'}
-          </p>
-          <button
-            type="button"
-            className={`${styles.button} ${styles.buttonDanger}`}
-            onClick={() => {
-              void runAction('feature.retry', { message: reviewMessage.trim() });
-            }}
-            disabled={submitting}
-          >
-            Retry
-          </button>
-        </div>
-      ) : null}
-
-      {phase === 'merged' ? (
-        <div className={styles.section}>
-          <h3 className={styles.sectionTitle}>Merged</h3>
-          <p className={styles.metaText}>PR: {detail.feature.pr?.url ?? 'unlinked'}</p>
-          <p className={styles.metaText}>Merge commit: {detail.feature.status_reason ?? '-'}</p>
-        </div>
-      ) : null}
-
-      {phase === 'ready_to_merge' ? (
-        <div className={`${styles.section} ${isFocusView ? styles.stickyReviewFooter : ''}`}>
-          <h3 className={styles.sectionTitle}>Review Actions</h3>
-          <label className={styles.label} htmlFor="review-message">
-            Review message
-          </label>
-          <textarea
-            id="review-message"
-            className={styles.textarea}
-            rows={4}
-            placeholder="Review feedback"
-            value={reviewMessage}
-            onChange={(event) => setReviewMessage(event.target.value)}
-          />
-
-          <label className={styles.label} htmlFor="approval-token">
-            Approval token
-          </label>
-          <input
-            id="approval-token"
-            className={styles.input}
-            value={approvalToken}
-            onChange={(event) => setApprovalToken(event.target.value)}
-            placeholder="approved"
-          />
-
-          <label className={styles.label} htmlFor="merge-strategy">
-            Merge strategy
-          </label>
-          <select
-            id="merge-strategy"
-            className={styles.actionSelect}
-            value={mergeStrategy}
-            onChange={(event) =>
-              setMergeStrategy(event.target.value as 'merge_commit' | 'squash' | 'rebase')
-            }
-          >
-            <option value="merge_commit">Merge Commit</option>
-            <option value="squash">Squash and Merge</option>
-            <option value="rebase">Rebase and Merge</option>
-          </select>
-
-          <div className={styles.actionGrid}>
-            <button
-              type="button"
-              className={`${styles.button} ${styles.buttonSuccess}`}
-              onClick={() => {
-                void runAction('review.approve', {
-                  approval_token: approvalToken,
-                  message: reviewMessage,
-                  merge_strategy: mergeStrategy,
-                });
-              }}
-              disabled={submitting || approvalToken.trim().length === 0}
-            >
-              Approve
-            </button>
-            <button
-              type="button"
-              className={`${styles.button} ${styles.buttonDanger}`}
-              onClick={openDenyConfirm}
-              disabled={submitting}
-            >
-              Deny
-            </button>
-            <button
-              type="button"
-              className={styles.button}
-              onClick={openRequestChangesConfirm}
-              disabled={submitting}
-            >
-              Request Changes
-            </button>
-          </div>
-        </div>
-      ) : null}
-
-      {phase === 'building' || phase === 'qa' ? (
-        <div className={styles.section}>
-          <h3 className={styles.sectionTitle}>Request Changes</h3>
-          <textarea
-            className={styles.textarea}
-            rows={4}
-            placeholder="Request changes message"
-            value={reviewMessage}
-            onChange={(event) => setReviewMessage(event.target.value)}
-          />
-          <button
-            type="button"
-            className={styles.button}
-            onClick={openRequestChangesConfirm}
-            disabled={submitting}
-          >
-            Request Changes
-          </button>
-        </div>
-      ) : null}
-
-      <details className={styles.section}>
-        <summary className={styles.sectionSummary}>History</summary>
-        {history.loading ? <p className={styles.metaText}>Loading history...</p> : null}
-        {history.error ? <p className={styles.metaText}>{history.error}</p> : null}
-        {!history.loading && !history.error ? (
-          <>
-            <ul className={styles.logList}>
-              {history.entries.slice(0, 50).map((entry) => (
-                <li key={`${entry.timestamp}:${entry.message}`} className={styles.logListItem}>
-                  <strong>{entry.type}</strong> {entry.timestamp} {entry.message}
-                </li>
-              ))}
-            </ul>
-            {history.total > 50 ? (
-              <p className={styles.metaText}>Showing 50 of {history.total} entries.</p>
-            ) : null}
-          </>
-        ) : null}
-      </details>
-
-      <ConfirmationModal
-        isOpen={confirmation != null}
-        title={confirmation?.title ?? ''}
-        message={confirmation?.message ?? ''}
-        confirmLabel={confirmation?.type === 'deny' ? 'Confirm Deny' : 'Confirm'}
-        onCancel={() => setConfirmation(null)}
-        onConfirm={() => {
-          void confirmAction();
-        }}
-      />
-    </aside>
-  );
-}