agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/components/focus/tabs/ReviewTab.tsx

@@ -0,0 +1,497 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DiffViewer } from '@/components/diff-viewer';
+import { ReviewBriefPanel } from '@/components/review-brief-panel';
+import { parseUnifiedDiff, projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+type ReviewAction =
+  | 'review.run_merge_gate'
+  | 'review.approve'
+  | 'review.deny'
+  | 'review.request_changes';
+
+export type ReviewDraftState = {
+  reviewMessage: string;
+  approvalToken: string;
+  mergeStrategy: 'merge_commit' | 'squash' | 'rebase';
+};
+
+interface ActionResponse {
+  ok: boolean;
+  data?: {
+    handoff_started?: boolean;
+    handoff_target?: string;
+    rerouted_to_qa?: boolean;
+    merge_repair_attempt?: number;
+    merge_repair_max_attempts?: number;
+    retry?: Record<string, unknown>;
+    request_id?: string;
+    status?: string;
+  };
+  error?: { message?: string };
+}
+
+interface CommandStatusResponse {
+  ok: boolean;
+  data?: {
+    request_id: string;
+    status: 'pending' | 'processing' | 'completed' | 'failed' | 'not_found';
+    result?: { ok: boolean; data?: Record<string, unknown>; error?: { message?: string } } | null;
+  };
+}
+
+const APPROVE_POLL_INTERVAL_MS = 2_000;
+
+interface ReviewTabProps {
+  detail: FeatureDetail;
+  project: string;
+  reviewDraft: ReviewDraftState;
+  onReviewDraftChange: (next: Partial<ReviewDraftState>) => void;
+  refreshDetail: (featureId: string) => Promise<void>;
+  refreshStatus: () => Promise<void>;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+}
+
+async function callAction(
+  action: ReviewAction,
+  featureId: string,
+  project: string,
+  payload: Record<string, unknown>,
+): Promise<ActionResponse & { httpStatus: number }> {
+  const response = await fetch(`/api/actions${projectQuery(project)}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ action, feature_id: featureId, ...payload }),
+  });
+  const body = (await response.json()) as ActionResponse;
+  return { ...body, httpStatus: response.status };
+}
+
+export function ReviewTab({
+  detail,
+  project,
+  reviewDraft,
+  onReviewDraftChange,
+  refreshDetail,
+  refreshStatus,
+  addToast,
+}: ReviewTabProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const [selectedFile, setSelectedFile] = useState('');
+  const [combinedDiff, setCombinedDiff] = useState(detail.diff);
+  const [mergeConfirmed, setMergeConfirmed] = useState(false);
+  const [pendingApprove, setPendingApprove] = useState<{
+    requestId: string;
+    label: string;
+  } | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setCombinedDiff(detail.diff);
+  }, [detail.diff, detail.feature.feature_id]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadLiveDiff = async () => {
+      try {
+        const response = await fetch(
+          `/api/features/${detail.feature.feature_id}/diff${projectQuery(project)}`,
+          {
+            cache: 'no-store',
+          },
+        );
+        if (!response.ok) {
+          return;
+        }
+        const nextDiff = await response.text();
+        if (!cancelled) {
+          setCombinedDiff(nextDiff);
+        }
+      } catch {
+        // Keep the existing diff fallback when the live worktree fetch fails.
+      }
+    };
+
+    void loadLiveDiff();
+    return () => {
+      cancelled = true;
+    };
+  }, [detail.feature.feature_id, project]);
+
+  const diffFiles = useMemo(() => parseUnifiedDiff(combinedDiff), [combinedDiff]);
+  const diffStats = useMemo(() => {
+    let additions = 0;
+    let deletions = 0;
+    for (const file of diffFiles) {
+      for (const hunk of file.hunks) {
+        for (const line of hunk.lines) {
+          if (line.type === 'add') {
+            additions += 1;
+          } else if (line.type === 'del') {
+            deletions += 1;
+          }
+        }
+      }
+    }
+    return {
+      fileCount: diffFiles.length,
+      additions,
+      deletions,
+    };
+  }, [diffFiles]);
+
+  useEffect(() => {
+    if (!diffFiles.some((file) => file.filePath === selectedFile)) {
+      setSelectedFile(diffFiles[0]?.filePath ?? '');
+    }
+  }, [diffFiles, selectedFile]);
+
+  // Polling for async approve completion
+  const pollApproveStatus = useCallback(
+    async (requestId: string) => {
+      try {
+        const res = await fetch(
+          `/api/actions/status?request_id=${encodeURIComponent(requestId)}${project ? `&project=${encodeURIComponent(project)}` : ''}`,
+        );
+        const body = (await res.json()) as CommandStatusResponse;
+        if (!body.ok || !body.data) {
+          return;
+        }
+        const { status, result } = body.data;
+        if (status === 'completed' || status === 'failed') {
+          setPendingApprove(null);
+          if (result?.ok) {
+            const data = result.data ?? {};
+            if (data.retry) {
+              addToast('Merge gate failed. Automatic repair started.', 'success');
+            } else if (data.handoff_started) {
+              addToast('Merge conflict handed to the reconciler', 'success');
+            } else {
+              addToast('Merge approved', 'success');
+            }
+          } else {
+            addToast(result?.error?.message ?? 'Merge failed', 'error');
+          }
+          await refreshStatus();
+          await refreshDetail(detail.feature.feature_id);
+        } else if (status === 'processing') {
+          setPendingApprove((prev) => (prev ? { ...prev, label: 'Merge in progress...' } : prev));
+        }
+      } catch {
+        // Non-fatal; keep polling
+      }
+    },
+    [project, addToast, refreshStatus, refreshDetail, detail.feature.feature_id],
+  );
+
+  useEffect(() => {
+    if (!pendingApprove) {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+      return;
+    }
+    pollRef.current = setInterval(
+      () => void pollApproveStatus(pendingApprove.requestId),
+      APPROVE_POLL_INTERVAL_MS,
+    );
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+        pollRef.current = null;
+      }
+    };
+  }, [pendingApprove, pollApproveStatus]);
+
+  const runAction = async (action: ReviewAction) => {
+    if (submitting) {
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const response = await callAction(action, detail.feature.feature_id, project, {
+        message: reviewDraft.reviewMessage,
+        approval_token: reviewDraft.approvalToken,
+        merge_strategy: reviewDraft.mergeStrategy,
+      });
+
+      // Handle async approve (202 Accepted) — start polling
+      if (action === 'review.approve' && response.httpStatus === 202 && response.data?.request_id) {
+        setPendingApprove({
+          requestId: response.data.request_id,
+          label: 'Merge submitted...',
+        });
+        addToast('Merge submitted — processing in background', 'info');
+        return;
+      }
+
+      if (!response.ok) {
+        addToast(response.error?.message ?? `${action} failed`, 'error');
+        return;
+      }
+      addToast(
+        action === 'review.run_merge_gate'
+          ? 'Merge gate completed'
+          : action === 'review.request_changes' && response.data?.rerouted_to_qa
+            ? `Sent back to QA (${response.data.merge_repair_attempt}/${response.data.merge_repair_max_attempts})`
+            : action === 'review.approve'
+              ? 'Merge approved'
+              : action === 'review.request_changes'
+                ? 'Change request sent'
+                : 'Review decision recorded',
+        'success',
+      );
+      await refreshStatus();
+      await refreshDetail(detail.feature.feature_id);
+    } catch {
+      addToast(`${action} failed`, 'error');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const reviewHistory = (detail.revision_summary ?? []).filter(
+    (entry) => entry.type === 'review_event' || entry.type === 'merge_event',
+  );
+  const rawDiffHref = `/api/features/${detail.feature.feature_id}/diff${projectQuery(project)}`;
+  const readyForMergeReview = detail.feature.phase === 'ready_to_merge';
+  const mergeGateStatus = detail.feature.gates?.merge ?? 'unknown';
+  const mergeGatePassed = mergeGateStatus === 'pass';
+  const mergeRepair = detail.feature.merge_repair ?? null;
+  const mergeRepairAttemptsUsed = mergeRepair?.attempts ?? 0;
+  const mergeRepairMaxAttempts = mergeRepair?.max_attempts ?? 5;
+  const mergeRepairEligible =
+    detail.feature.status === 'blocked' &&
+    mergeGateStatus === 'fail' &&
+    mergeRepairAttemptsUsed < mergeRepairMaxAttempts;
+  const mergeRepairExhausted =
+    detail.feature.status === 'failed' ||
+    (detail.feature.status === 'blocked' &&
+      mergeGateStatus === 'fail' &&
+      mergeRepairAttemptsUsed >= mergeRepairMaxAttempts);
+  const mergeGateLabel =
+    mergeGateStatus === 'pass'
+      ? 'Passed'
+      : mergeGateStatus === 'fail'
+        ? 'Failed'
+        : readyForMergeReview
+          ? 'Not run'
+          : 'Unavailable';
+
+  return (
+    <div className={styles.focusTabStack}>
+      {detail.review_brief ? <ReviewBriefPanel brief={detail.review_brief} /> : null}
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <h3 className={styles.sectionTitle}>Merge Gate</h3>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>{mergeGateLabel}</span>
+        </div>
+        <p className={styles.metaText}>
+          {mergeRepairExhausted
+            ? `Merge gate repair is exhausted at ${mergeRepairAttemptsUsed}/${mergeRepairMaxAttempts}. The feature is parked in failed until an operator intervenes.`
+            : mergeRepairEligible
+              ? `Merge gate failed. Send the feature back to QA to repair the failure before attempting merge again. Attempts used: ${mergeRepairAttemptsUsed}/${mergeRepairMaxAttempts}.`
+              : !readyForMergeReview
+                ? 'Merge gating becomes available after the feature reaches ready_to_merge.'
+                : mergeGatePassed
+                  ? 'Merge gate has passed. Approval can proceed to merge.'
+                  : 'Run the merge gate before approving merge from the dashboard review flow.'}
+        </p>
+        <div className={styles.actionGrid}>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={submitting || !readyForMergeReview}
+            title={
+              readyForMergeReview ? undefined : 'Merge gating is only available in ready_to_merge'
+            }
+            onClick={() => void runAction('review.run_merge_gate')}
+          >
+            {readyForMergeReview && mergeGatePassed ? 'Re-run Merge Gate' : 'Run Merge Gate'}
+          </button>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <h3 className={styles.sectionTitle}>Combined Worktree Diff</h3>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {diffStats.fileCount} files · +{diffStats.additions} / -{diffStats.deletions}
+          </span>
+        </div>
+        <p className={styles.metaText}>
+          Review the current live worktree diff before approving merge.
+        </p>
+        {diffFiles.length > 0 ? (
+          <>
+            <div className={styles.focusOverviewGrid}>
+              <select
+                aria-label="Review diff file filter"
+                className={styles.actionSelect}
+                value={selectedFile}
+                onChange={(event) => setSelectedFile(event.target.value)}
+              >
+                {diffFiles.map((file) => (
+                  <option key={file.filePath} value={file.filePath}>
+                    {file.filePath}
+                  </option>
+                ))}
+              </select>
+              <a className={styles.linkButton} href={rawDiffHref} rel="noreferrer" target="_blank">
+                Open Raw Patch
+              </a>
+            </div>
+            <DiffViewer
+              diff={combinedDiff}
+              fileFilter={selectedFile}
+              onInspectFile={setSelectedFile}
+            />
+          </>
+        ) : (
+          <DiffViewer diff={combinedDiff} />
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <h3 className={styles.sectionTitle}>Review Decision</h3>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {detail.feature.pr?.review_decision ?? 'pending'}
+          </span>
+        </div>
+        {mergeGatePassed ? (
+          <div className={styles.focusPinnedActionGrid}>
+            <label className={styles.label} htmlFor="review-message">
+              Review message
+            </label>
+            <textarea
+              id="review-message"
+              className={styles.textarea}
+              rows={4}
+              value={reviewDraft.reviewMessage}
+              onChange={(event) => onReviewDraftChange({ reviewMessage: event.target.value })}
+            />
+
+            <label className={styles.label} htmlFor="approval-token">
+              Approval token
+            </label>
+            <input
+              id="approval-token"
+              className={styles.input}
+              value={reviewDraft.approvalToken}
+              onChange={(event) => onReviewDraftChange({ approvalToken: event.target.value })}
+            />
+
+            <label className={styles.label} htmlFor="merge-strategy">
+              Merge strategy
+            </label>
+            <select
+              id="merge-strategy"
+              className={styles.actionSelect}
+              value={reviewDraft.mergeStrategy}
+              onChange={(event) =>
+                onReviewDraftChange({
+                  mergeStrategy: event.target.value as ReviewDraftState['mergeStrategy'],
+                })
+              }
+            >
+              <option value="merge_commit">Merge Commit</option>
+              <option value="squash">Squash</option>
+              <option value="rebase">Rebase</option>
+            </select>
+          </div>
+        ) : (
+          <p className={styles.metaText}>
+            {mergeRepairEligible
+              ? `Merge gate failed. Send the feature back to QA to continue repair attempt ${mergeRepairAttemptsUsed + 1}/${mergeRepairMaxAttempts}.`
+              : mergeRepairExhausted
+                ? 'Merge repair limit reached. This feature can no longer be sent back to QA automatically.'
+                : 'Review submission is locked until the merge gate completes successfully.'}
+          </p>
+        )}
+        <div className={styles.actionGrid}>
+          {pendingApprove ? (
+            <span
+              className={styles.metaText}
+              style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}
+            >
+              <span className={styles.spinnerSmall} />
+              {pendingApprove.label}
+            </span>
+          ) : mergeGatePassed ? (
+            <>
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.4rem',
+                  fontSize: '0.8rem',
+                  cursor: 'pointer',
+                  userSelect: 'none',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={mergeConfirmed}
+                  onChange={(e) => setMergeConfirmed(e.target.checked)}
+                />
+                I have reviewed the diff and confirm this feature should be merged into mainline
+              </label>
+              <button
+                type="button"
+                className={`${styles.button} ${styles.buttonSuccess}`}
+                disabled={submitting || !readyForMergeReview || !mergeConfirmed}
+                title={
+                  !mergeConfirmed
+                    ? 'Check the confirmation box above to enable merge'
+                    : readyForMergeReview
+                      ? undefined
+                      : 'Feature must be ready to merge before approval'
+                }
+                onClick={() => void runAction('review.approve')}
+              >
+                Approve &amp; Merge
+              </button>
+            </>
+          ) : null}
+          <button
+            type="button"
+            className={styles.button}
+            disabled={submitting || mergeRepairExhausted}
+            onClick={() => void runAction('review.request_changes')}
+          >
+            {mergeRepairEligible ? 'Send Back to QA' : 'Request Changes'}
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.buttonGhost}`}
+            disabled={submitting}
+            onClick={() => void runAction('review.deny')}
+          >
+            Deny
+          </button>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>Review Decision History</h3>
+        {reviewHistory.length === 0 ? (
+          <p className={styles.metaText}>No prior review decisions were derived.</p>
+        ) : (
+          <div className={styles.focusTabStack}>
+            {reviewHistory.map((entry) => (
+              <div key={entry.id} className={styles.reviewTimelineEntry}>
+                <strong>{entry.headline}</strong>
+                <span className={styles.metaText}>{entry.detail}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}