agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/components/review-workspace.tsx

@@ -1,1162 +0,0 @@
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent as ReactKeyboardEvent,
-} from 'react';
-import dynamic from 'next/dynamic';
-import { html as renderDiffHtml } from 'diff2html';
-import DOMPurify from 'dompurify';
-import { projectQuery, parseUnifiedDiff } from '@/lib/dashboard-utils.js';
-import { isEditableTarget } from '@/lib/review-contracts.js';
-import {
-  appendCappedLogEntries,
-  isConsoleSendAllowed,
-  stepHunkIndex,
-} from '@/lib/review-workspace-logic.js';
-import type {
-  AgentLogEntry,
-  AgentPipelineStatus,
-  FeatureCheckpoint,
-  FeatureDetail,
-  FileDiffPayload,
-  RawLogFileMeta,
-  RoleStatus,
-  WorkerEventEntry,
-} from '@/lib/types.js';
-import styles from '@/styles/dashboard.module.css';
-
-const MonacoDiffEditor = dynamic(
-  async () => {
-    const module = await import('@monaco-editor/react');
-    return module.DiffEditor;
-  },
-  { ssr: false },
-);
-
-type ReviewAction =
-  | 'review.approve'
-  | 'review.deny'
-  | 'review.request_changes'
-  | 'feature.send_message';
-type DiffRenderMode = 'line-by-line' | 'side-by-side';
-type TimelineValidity = 'all' | 'valid' | 'invalid';
-type TrustClass = 'Structured Artifact' | 'Raw Provider Output' | 'Derived';
-type PipelineRole = 'planner' | 'builder' | 'qa';
-type RuntimeInspectorTab = 'activity' | 'checkpoints';
-
-interface ActionResponse {
-  ok: boolean;
-  error?: { code?: string; message?: string };
-}
-
-interface ApiEnvelope<TData> {
-  ok: boolean;
-  data?: TData;
-  error?: { code?: string; message?: string };
-}
-
-interface LogStreamPayload {
-  type: 'snapshot' | 'append' | 'heartbeat' | 'error';
-  cursor: string;
-  entries: AgentLogEntry[];
-  message?: string;
-}
-
-interface ReviewWorkspaceProps {
-  detail: FeatureDetail;
-  project: string;
-  hasActiveRuntimeSession: boolean;
-  refreshDetail: (featureId: string) => Promise<void>;
-  refreshStatus: () => Promise<void>;
-  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
-}
-
-interface ActiveRoleMarker {
-  role: PipelineRole | null;
-  status: RoleStatus | null;
-}
-
-function truncateSessionId(value: string): string {
-  if (value.length <= 18) {
-    return value;
-  }
-  return `${value.slice(0, 8)}…${value.slice(-8)}`;
-}
-
-function formatTimestamp(value: string): string {
-  const parsed = Date.parse(value);
-  if (Number.isNaN(parsed)) {
-    return value;
-  }
-  return new Date(parsed).toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-}
-
-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(
-  checkpoint: FeatureCheckpoint,
-  stylesMap: Record<string, string>,
-): string {
-  if (checkpoint.validation_status === 'valid') {
-    return `${stylesMap.badge} ${stylesMap.badgePass}`;
-  }
-  if (checkpoint.validation_status === 'invalid') {
-    return `${stylesMap.badge} ${stylesMap.badgeFail}`;
-  }
-  return `${stylesMap.badge} ${stylesMap.badgePending}`;
-}
-
-function checkpointSeverityBadge(
-  severity: FeatureCheckpoint['severity'],
-  stylesMap: Record<string, string>,
-): string {
-  if (severity === 'error' || severity === 'critical') {
-    return `${stylesMap.badge} ${stylesMap.badgeFail}`;
-  }
-  if (severity === 'warning') {
-    return `${stylesMap.badge} ${stylesMap.badgePending}`;
-  }
-  return `${stylesMap.badge} ${stylesMap.badgeNeutral}`;
-}
-
-function hasActiveSession(value: string | undefined): boolean {
-  return Boolean(value) && value !== 'unknown' && value !== 'unassigned' && value !== 'none';
-}
-
-function resolveActiveRole(roleStatus: AgentPipelineStatus | undefined): ActiveRoleMarker {
-  if (!roleStatus) {
-    return { role: null, status: null };
-  }
-  const entries: Array<{ role: PipelineRole; status: RoleStatus }> = [
-    { role: 'planner', status: roleStatus.planner },
-    { role: 'builder', status: roleStatus.builder },
-    { role: 'qa', status: roleStatus.qa },
-  ];
-  const priorities: RoleStatus[] = ['running', 'blocked', 'ready', 'done', 'unknown'];
-  for (const priority of priorities) {
-    const match = entries.find((entry) => entry.status === priority);
-    if (match) {
-      return { role: match.role, status: match.status };
-    }
-  }
-  return { role: null, status: null };
-}
-
-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;
-}
-
-export function ReviewWorkspace({
-  detail,
-  project,
-  hasActiveRuntimeSession,
-  refreshDetail,
-  refreshStatus,
-  addToast,
-}: ReviewWorkspaceProps) {
-  const featureId = detail.feature.feature_id;
-  const files = useMemo(() => parseUnifiedDiff(detail.diff), [detail.diff]);
-  const filePaths = useMemo(
-    () =>
-      files.map((file) => ({
-        path: file.filePath,
-        hunkCount: file.hunks.length,
-      })),
-    [files],
-  );
-  const diffStats = useMemo(() => {
-    let additions = 0;
-    let deletions = 0;
-    for (const file of files) {
-      for (const hunk of file.hunks) {
-        for (const line of hunk.lines) {
-          if (line.type === 'add') {
-            additions += 1;
-          }
-          if (line.type === 'del') {
-            deletions += 1;
-          }
-        }
-      }
-    }
-    return { filesChanged: files.length, additions, deletions };
-  }, [files]);
-
-  const [submitting, setSubmitting] = useState(false);
-  const [reviewMessage, setReviewMessage] = useState('');
-  const [approvalToken, setApprovalToken] = useState('approved');
-  const [mergeStrategy, setMergeStrategy] = useState<'merge_commit' | 'squash' | 'rebase'>(
-    'merge_commit',
-  );
-  const [diffMode, setDiffMode] = useState<DiffRenderMode>('line-by-line');
-  const [selectedFileIndex, setSelectedFileIndex] = useState(0);
-  const [selectedHunkIndex, setSelectedHunkIndex] = useState(0);
-  const [diffShortcutsVisible, setDiffShortcutsVisible] = useState(false);
-  const [inspectorOpen, setInspectorOpen] = useState(false);
-  const [inspectorLoading, setInspectorLoading] = useState(false);
-  const [inspectorError, setInspectorError] = useState<string | null>(null);
-  const [inspectorPayload, setInspectorPayload] = useState<FileDiffPayload | null>(null);
-  const [streamEntries, setStreamEntries] = useState<AgentLogEntry[]>(detail.log_entries ?? []);
-  const [streamFollow, setStreamFollow] = useState(true);
-  const [streamError, setStreamError] = useState<string | null>(null);
-  const [consoleMessage, setConsoleMessage] = useState('');
-  const [consoleTranscript, setConsoleTranscript] = useState<
-    Array<{ id: string; timestamp: string; text: string }>
-  >([]);
-  const [lastMessageSentAt, setLastMessageSentAt] = useState<number>(0);
-  const [timelineEntries, setTimelineEntries] = useState<WorkerEventEntry[]>([]);
-  const [timelineRole, setTimelineRole] = useState<string>('');
-  const [timelineValidity, setTimelineValidity] = useState<TimelineValidity>('all');
-  const [timelineLoading, setTimelineLoading] = useState(false);
-  const [timelineError, setTimelineError] = useState<string | null>(null);
-  const [runtimeInspectorTab, setRuntimeInspectorTab] = useState<RuntimeInspectorTab>('activity');
-  const [rawLogsEnabled, setRawLogsEnabled] = useState<boolean | null>(null);
-  const [rawLogs, setRawLogs] = useState<RawLogFileMeta[]>([]);
-  const [rawLogSelection, setRawLogSelection] = useState<string | null>(null);
-  const [rawLogContent, setRawLogContent] = useState<string>('');
-  const [rawLogError, setRawLogError] = useState<string | null>(null);
-  const [isPhoneViewport, setIsPhoneViewport] = useState(false);
-
-  const diffHtml = useMemo(() => {
-    if (detail.diff.trim().length === 0) {
-      return '';
-    }
-    const rendered = renderDiffHtml(detail.diff, {
-      drawFileList: true,
-      outputFormat: diffMode,
-      matching: 'lines',
-      renderNothingWhenEmpty: false,
-    });
-    return DOMPurify.sanitize(rendered, { USE_PROFILES: { html: true } });
-  }, [detail.diff, diffMode]);
-
-  const diffRegionRef = useRef<HTMLDivElement>(null);
-  const diffContentRef = useRef<HTMLDivElement>(null);
-  const logListRef = useRef<HTMLDivElement>(null);
-  const streamCursorRef = useRef<string>('0');
-
-  useEffect(() => {
-    if (selectedFileIndex >= filePaths.length) {
-      setSelectedFileIndex(0);
-      setSelectedHunkIndex(0);
-    }
-  }, [filePaths.length, selectedFileIndex]);
-
-  useEffect(() => {
-    setStreamEntries(detail.log_entries ?? []);
-    streamCursorRef.current = '0';
-  }, [featureId, detail.log_entries]);
-
-  useEffect(() => {
-    if (!streamFollow) {
-      return;
-    }
-    const container = logListRef.current;
-    if (!container) {
-      return;
-    }
-    container.scrollTop = container.scrollHeight;
-  }, [streamEntries, streamFollow]);
-
-  useEffect(() => {
-    const container = diffContentRef.current;
-    if (!container) {
-      return;
-    }
-    const fileWrappers = container.querySelectorAll<HTMLElement>('.d2h-file-wrapper');
-    const fileWrapper = fileWrappers[selectedFileIndex];
-    if (!fileWrapper) {
-      return;
-    }
-    const hunkHeaders = fileWrapper.querySelectorAll<HTMLElement>('tr.d2h-info');
-    const target =
-      hunkHeaders[selectedHunkIndex] ??
-      hunkHeaders[Math.max(0, hunkHeaders.length - 1)] ??
-      fileWrapper.querySelector<HTMLElement>('.d2h-file-header');
-    target?.scrollIntoView({ block: 'nearest' });
-  }, [selectedFileIndex, selectedHunkIndex, diffHtml]);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(max-width: 680px)');
-    const update = () => {
-      setIsPhoneViewport(mediaQuery.matches);
-    };
-    update();
-    mediaQuery.addEventListener('change', update);
-    return () => {
-      mediaQuery.removeEventListener('change', update);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!inspectorOpen || !isPhoneViewport) {
-      return;
-    }
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = previousOverflow;
-    };
-  }, [inspectorOpen, isPhoneViewport]);
-
-  useEffect(() => {
-    const params = new URLSearchParams();
-    params.set('cursor', streamCursorRef.current);
-    if (project.length > 0) {
-      params.set('project', project);
-    }
-    const eventSource = new EventSource(
-      `/api/features/${encodeURIComponent(featureId)}/log-stream?${params.toString()}`,
-    );
-
-    const onStreamEvent = (event: MessageEvent<string>) => {
-      let payload: LogStreamPayload;
-      try {
-        payload = JSON.parse(event.data) as LogStreamPayload;
-      } catch {
-        return;
-      }
-      if (payload.type === 'error') {
-        setStreamError(payload.message ?? 'Log stream warning');
-        return;
-      }
-      streamCursorRef.current = payload.cursor;
-      if (payload.entries.length === 0) {
-        return;
-      }
-      setStreamEntries((current) => appendCappedLogEntries(current, payload.entries));
-    };
-
-    eventSource.addEventListener('snapshot', onStreamEvent as EventListener);
-    eventSource.addEventListener('append', onStreamEvent as EventListener);
-    eventSource.addEventListener('error', () => {
-      setStreamError('Disconnected from event stream');
-    });
-
-    return () => {
-      eventSource.close();
-    };
-  }, [featureId, project]);
-
-  const selectedFilePath = filePaths[selectedFileIndex]?.path ?? '';
-  const selectedFileHunkCount = files[selectedFileIndex]?.hunks.length ?? 0;
-  const activeRoleMarker = useMemo(
-    () => resolveActiveRole(detail.feature.role_status),
-    [detail.feature.role_status],
-  );
-  const sessionRows = useMemo(
-    () => [
-      {
-        key: 'orchestrator',
-        label: 'Orchestrator',
-        sessionId: detail.feature.cluster?.orchestrator_session_id ?? 'unknown',
-      },
-      {
-        key: 'planner',
-        label: 'Planner',
-        sessionId: detail.feature.cluster?.planner_session_id ?? 'unknown',
-      },
-      {
-        key: 'builder',
-        label: 'Builder',
-        sessionId: detail.feature.cluster?.builder_session_id ?? 'unknown',
-      },
-      {
-        key: 'qa',
-        label: 'QA',
-        sessionId: detail.feature.cluster?.qa_session_id ?? 'unknown',
-      },
-    ],
-    [detail.feature.cluster],
-  );
-
-  const canSendConsoleMessage = useMemo(() => {
-    return isConsoleSendAllowed({
-      status: detail.feature.status,
-      cluster: detail.feature.cluster,
-      hasActiveRuntimeSession,
-      submitting,
-      message: consoleMessage,
-      nowMs: Date.now(),
-      lastMessageSentAtMs: lastMessageSentAt,
-    });
-  }, [
-    detail.feature.cluster,
-    detail.feature.status,
-    hasActiveRuntimeSession,
-    submitting,
-    consoleMessage,
-    lastMessageSentAt,
-  ]);
-
-  const runReviewAction = async (action: ReviewAction, payload: Record<string, unknown>) => {
-    if (submitting) {
-      return;
-    }
-    setSubmitting(true);
-    try {
-      const response = await callAction(action, featureId, project, payload);
-      if (!response.ok) {
-        addToast(response.error?.message ?? `${action} failed`, 'error');
-        return;
-      }
-      addToast(`${action} completed`, 'success');
-      await refreshStatus();
-      await refreshDetail(featureId);
-    } catch {
-      addToast(`${action} failed`, 'error');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const openInspector = async (targetPath: string) => {
-    if (!targetPath) {
-      return;
-    }
-    setInspectorOpen(true);
-    setInspectorLoading(true);
-    setInspectorError(null);
-    try {
-      const params = new URLSearchParams();
-      params.set('path', targetPath);
-      if (project.length > 0) {
-        params.set('project', project);
-      }
-      const response = await fetch(
-        `/api/features/${encodeURIComponent(featureId)}/file-diff?${params.toString()}`,
-      );
-      const body = (await response.json()) as ApiEnvelope<FileDiffPayload>;
-      if (!body.ok || !body.data) {
-        setInspectorPayload(null);
-        setInspectorError(body.error?.message ?? 'Unable to load file diff');
-        return;
-      }
-      setInspectorPayload(body.data);
-    } catch {
-      setInspectorPayload(null);
-      setInspectorError('Unable to load file diff');
-    } finally {
-      setInspectorLoading(false);
-    }
-  };
-
-  const sendConsoleMessage = async () => {
-    const message = consoleMessage.trim();
-    if (message.length === 0) {
-      return;
-    }
-    const timestamp = new Date().toISOString();
-    setConsoleTranscript((current) => [
-      ...current,
-      {
-        id: `${timestamp}:${current.length}`,
-        timestamp,
-        text: message,
-      },
-    ]);
-    setConsoleMessage('');
-    setLastMessageSentAt(Date.now());
-    await runReviewAction('feature.send_message', { message });
-  };
-
-  const copySessionId = async (sessionId: string) => {
-    if (!hasActiveSession(sessionId)) {
-      addToast('No session id is available to copy', 'info');
-      return;
-    }
-    if (!navigator.clipboard?.writeText) {
-      addToast('Clipboard write is unavailable in this browser', 'error');
-      return;
-    }
-    try {
-      await navigator.clipboard.writeText(sessionId);
-      addToast('Session id copied', 'success');
-    } catch {
-      addToast('Failed to copy session id', 'error');
-    }
-  };
-
-  const fetchTimeline = async () => {
-    setTimelineLoading(true);
-    setTimelineError(null);
-    try {
-      const params = new URLSearchParams();
-      params.set('limit', '100');
-      if (timelineRole) {
-        params.set('role', timelineRole);
-      }
-      if (timelineValidity !== 'all') {
-        params.set('valid', timelineValidity);
-      }
-      if (project.length > 0) {
-        params.set('project', project);
-      }
-      const response = await fetch(
-        `/api/features/${encodeURIComponent(featureId)}/timeline?${params.toString()}`,
-      );
-      const body = (await response.json()) as ApiEnvelope<{ entries: WorkerEventEntry[] }>;
-      if (!body.ok || !body.data) {
-        setTimelineEntries([]);
-        setTimelineError(body.error?.message ?? 'Unable to load timeline');
-        return;
-      }
-      setTimelineEntries(body.data.entries);
-    } catch {
-      setTimelineEntries([]);
-      setTimelineError('Unable to load timeline');
-    } finally {
-      setTimelineLoading(false);
-    }
-  };
-
-  const fetchRawLogs = async () => {
-    setRawLogError(null);
-    try {
-      const params = new URLSearchParams();
-      params.set('limit', '100');
-      if (project.length > 0) {
-        params.set('project', project);
-      }
-      const response = await fetch(
-        `/api/features/${encodeURIComponent(featureId)}/raw-logs?${params.toString()}`,
-      );
-      const body = (await response.json()) as ApiEnvelope<{
-        enabled: boolean;
-        files: RawLogFileMeta[];
-      }>;
-      if (!body.ok || !body.data) {
-        setRawLogsEnabled(false);
-        setRawLogs([]);
-        setRawLogError(body.error?.message ?? 'Unable to load raw logs');
-        return;
-      }
-      setRawLogsEnabled(body.data.enabled);
-      setRawLogs(body.data.files);
-      if (body.data.files.length > 0 && !rawLogSelection) {
-        setRawLogSelection(body.data.files[0].filename);
-      }
-    } catch {
-      setRawLogsEnabled(false);
-      setRawLogs([]);
-      setRawLogError('Unable to load raw logs');
-    }
-  };
-
-  const fetchRawLogContent = async (filename: string) => {
-    setRawLogContent('');
-    setRawLogError(null);
-    try {
-      const suffix = project.length > 0 ? `?project=${encodeURIComponent(project)}` : '';
-      const response = await fetch(
-        `/api/features/${encodeURIComponent(featureId)}/raw-logs/${encodeURIComponent(filename)}${suffix}`,
-      );
-      const body = (await response.json()) as ApiEnvelope<{ filename: string; content: string }>;
-      if (!body.ok || !body.data) {
-        setRawLogError(body.error?.message ?? 'Unable to load raw log file');
-        return;
-      }
-      setRawLogContent(body.data.content);
-    } catch {
-      setRawLogError('Unable to load raw log file');
-    }
-  };
-
-  useEffect(() => {
-    void fetchTimeline();
-  }, [featureId, project, timelineRole, timelineValidity]);
-
-  useEffect(() => {
-    void fetchRawLogs();
-  }, [featureId, project]);
-
-  useEffect(() => {
-    setRawLogSelection(null);
-    setRawLogContent('');
-  }, [featureId]);
-
-  useEffect(() => {
-    if (!rawLogSelection) {
-      return;
-    }
-    void fetchRawLogContent(rawLogSelection);
-  }, [rawLogSelection]);
-
-  const onDiffKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    if (isEditableTarget(event.target)) {
-      return;
-    }
-    if (filePaths.length === 0) {
-      return;
-    }
-    if (event.key === 'j' || event.key === 'n') {
-      event.preventDefault();
-      setSelectedFileIndex((current) => Math.min(filePaths.length - 1, current + 1));
-      setSelectedHunkIndex(0);
-      return;
-    }
-    if (event.key === 'k' || event.key === 'p') {
-      event.preventDefault();
-      setSelectedFileIndex((current) => Math.max(0, current - 1));
-      setSelectedHunkIndex(0);
-      return;
-    }
-    if (event.key === 'o') {
-      event.preventDefault();
-      void openInspector(selectedFilePath);
-      return;
-    }
-    if (event.key === '[') {
-      event.preventDefault();
-      setSelectedHunkIndex((current) => stepHunkIndex(current, -1, selectedFileHunkCount));
-      return;
-    }
-    if (event.key === ']') {
-      event.preventDefault();
-      setSelectedHunkIndex((current) => stepHunkIndex(current, 1, selectedFileHunkCount));
-    }
-  };
-
-  const onConsoleKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
-    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-      event.preventDefault();
-      void sendConsoleMessage();
-    }
-  };
-
-  const trustBadgeClassName = (value: TrustClass): string => {
-    if (value === 'Raw Provider Output') {
-      return `${styles.trustBadge} ${styles.trustBadgeRaw}`;
-    }
-    if (value === 'Derived') {
-      return `${styles.trustBadge} ${styles.trustBadgeDerived}`;
-    }
-    return `${styles.trustBadge} ${styles.trustBadgeStructured}`;
-  };
-
-  const renderTrustBadge = (value: TrustClass) => (
-    <span className={trustBadgeClassName(value)}>{value}</span>
-  );
-
-  return (
-    <div className={styles.reviewWorkspace}>
-      <section className={styles.reviewLeftPane}>
-        <div className={styles.section}>
-          <div className={styles.reviewHeaderRow}>
-            <div className={styles.reviewTitleWrap}>
-              <h3 className={styles.sectionTitle}>Diff Overview</h3>
-              {renderTrustBadge('Structured Artifact')}
-            </div>
-            <div className={styles.inlineActions}>
-              <button
-                type="button"
-                className={styles.buttonGhost}
-                onClick={() => setDiffShortcutsVisible((value) => !value)}
-              >
-                {diffShortcutsVisible ? 'Hide Hotkeys' : 'Show Hotkeys'}
-              </button>
-              <select
-                className={styles.actionSelect}
-                value={diffMode}
-                onChange={(event) => setDiffMode(event.target.value as DiffRenderMode)}
-              >
-                <option value="line-by-line">Line by line</option>
-                <option value="side-by-side">Side by side</option>
-              </select>
-            </div>
-          </div>
-          {diffShortcutsVisible ? (
-            <p className={styles.metaText}>
-              Hotkeys: j/n next file, k/p previous file, o open in inspector, [ / ] hunk
-            </p>
-          ) : null}
-          <p className={styles.metaText}>
-            {diffStats.filesChanged} files changed • +{diffStats.additions} / -{diffStats.deletions}
-          </p>
-          {filePaths.length === 0 ? (
-            <p className={styles.metaText}>No changes in this feature worktree.</p>
-          ) : (
-            <>
-              <div className={styles.reviewFileSelectorRow}>
-                <select
-                  className={styles.actionSelect}
-                  value={selectedFilePath}
-                  onChange={(event) => {
-                    const index = filePaths.findIndex((file) => file.path === event.target.value);
-                    if (index >= 0) {
-                      setSelectedFileIndex(index);
-                      setSelectedHunkIndex(0);
-                    }
-                  }}
-                >
-                  {filePaths.map((file) => (
-                    <option key={file.path} value={file.path}>
-                      {file.path} ({file.hunkCount} hunks)
-                    </option>
-                  ))}
-                </select>
-                <button
-                  type="button"
-                  className={styles.button}
-                  onClick={() => void openInspector(selectedFilePath)}
-                >
-                  Open In Inspector
-                </button>
-              </div>
-              <p className={styles.metaText}>
-                File {selectedFileIndex + 1}/{filePaths.length} • Hunk{' '}
-                {Math.min(selectedHunkIndex + 1, Math.max(1, selectedFileHunkCount))}
-              </p>
-              <div
-                ref={diffRegionRef}
-                className={styles.reviewDiffRegion}
-                role="region"
-                tabIndex={0}
-                aria-label="Diff overview"
-                onKeyDown={onDiffKeyDown}
-              >
-                <div
-                  ref={diffContentRef}
-                  className={styles.reviewDiffHtml}
-                  dangerouslySetInnerHTML={{ __html: diffHtml }}
-                />
-              </div>
-            </>
-          )}
-        </div>
-
-        {inspectorOpen && !isPhoneViewport ? (
-          <div className={`${styles.section} ${styles.inspectorPanel}`}>
-            <div className={styles.reviewHeaderRow}>
-              <div className={styles.reviewTitleWrap}>
-                <h3 className={styles.sectionTitle}>File Inspector</h3>
-                {renderTrustBadge('Structured Artifact')}
-              </div>
-              <button
-                type="button"
-                className={styles.buttonGhost}
-                onClick={() => setInspectorOpen(false)}
-              >
-                Close
-              </button>
-            </div>
-            {inspectorLoading ? <p className={styles.metaText}>Loading file inspector...</p> : null}
-            {inspectorError ? <p className={styles.metaText}>{inspectorError}</p> : null}
-            {!inspectorLoading && !inspectorError && inspectorPayload ? (
-              <div className={styles.reviewMonacoWrap}>
-                <MonacoDiffEditor
-                  height="420px"
-                  language={inspectorPayload.language}
-                  original={inspectorPayload.original}
-                  modified={inspectorPayload.modified}
-                  options={{
-                    readOnly: true,
-                    renderSideBySide: true,
-                    minimap: { enabled: false },
-                    scrollBeyondLastLine: false,
-                  }}
-                />
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </section>
-
-      <aside className={styles.reviewRightPane}>
-        <div className={`${styles.section} ${styles.reviewActionSection}`}>
-          <div className={styles.reviewTitleWrap}>
-            <h3 className={styles.sectionTitle}>Review Actions</h3>
-            {renderTrustBadge('Derived')}
-          </div>
-          <label className={styles.label} htmlFor="review-message">
-            Review message
-          </label>
-          <textarea
-            id="review-message"
-            className={styles.textarea}
-            rows={3}
-            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)}
-          />
-          <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</option>
-            <option value="rebase">Rebase</option>
-          </select>
-          <div className={styles.actionGrid}>
-            <button
-              type="button"
-              className={`${styles.button} ${styles.buttonSuccess}`}
-              disabled={submitting || approvalToken.trim().length === 0}
-              onClick={() =>
-                void runReviewAction('review.approve', {
-                  approval_token: approvalToken.trim(),
-                  merge_strategy: mergeStrategy,
-                  message: reviewMessage.trim(),
-                })
-              }
-            >
-              Approve
-            </button>
-            <button
-              type="button"
-              className={`${styles.button} ${styles.buttonDanger}`}
-              disabled={submitting || reviewMessage.trim().length === 0}
-              onClick={() => void runReviewAction('review.deny', { reason: reviewMessage.trim() })}
-            >
-              Deny
-            </button>
-            <button
-              type="button"
-              className={styles.button}
-              disabled={submitting}
-              onClick={() =>
-                void runReviewAction('review.request_changes', { message: reviewMessage.trim() })
-              }
-            >
-              Request Changes
-            </button>
-          </div>
-        </div>
-
-        <div className={styles.section}>
-          <div className={styles.reviewHeaderRow}>
-            <div className={styles.reviewTitleWrap}>
-              <h3 className={styles.sectionTitle}>Agent Log Stream</h3>
-              {renderTrustBadge('Structured Artifact')}
-            </div>
-            <button
-              type="button"
-              className={styles.buttonGhost}
-              onClick={() => setStreamFollow((value) => !value)}
-            >
-              {streamFollow ? 'Pause Follow' : 'Resume Follow'}
-            </button>
-          </div>
-          {streamError ? <p className={styles.metaText}>{streamError}</p> : null}
-          <div ref={logListRef} className={styles.reviewLogList}>
-            {streamEntries.map((entry) => (
-              <div key={`${entry.id}:${entry.timestamp}`} className={styles.reviewLogEntry}>
-                <span className={styles.reviewLogStamp}>{formatTimestamp(entry.timestamp)}</span>
-                <span className={styles.reviewRoleBadge}>{entry.role}</span>
-                <strong>{entry.actor}</strong>
-                <span>{entry.text}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className={styles.section}>
-          <div className={styles.reviewTitleWrap}>
-            <h3 className={styles.sectionTitle}>Agent Console</h3>
-            {renderTrustBadge('Derived')}
-          </div>
-          <textarea
-            className={styles.textarea}
-            rows={3}
-            value={consoleMessage}
-            placeholder="Send a directed message to the active agent session"
-            onChange={(event) => setConsoleMessage(event.target.value)}
-            onKeyDown={onConsoleKeyDown}
-          />
-          <p className={styles.metaText}>
-            {hasActiveRuntimeSession
-              ? 'Cmd/Ctrl + Enter to send. Minimum 1s between messages.'
-              : 'No active runtime session is available for this feature.'}
-          </p>
-          <button
-            type="button"
-            className={styles.button}
-            disabled={!canSendConsoleMessage}
-            onClick={() => void sendConsoleMessage()}
-          >
-            Send Message
-          </button>
-          <div className={styles.reviewConsoleTranscript}>
-            {consoleTranscript.map((entry) => (
-              <div key={entry.id} className={styles.reviewTranscriptEntry}>
-                <strong>You</strong>{' '}
-                <span className={styles.metaText}>{formatTimestamp(entry.timestamp)}</span>
-                <p>{entry.text}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <details className={styles.section}>
-          <summary className={styles.sectionSummary}>Agent Session Status</summary>
-          <p className={styles.trustLabelRow}>{renderTrustBadge('Structured Artifact')}</p>
-          <p className={styles.metaText}>
-            Active role:{' '}
-            {activeRoleMarker.role && activeRoleMarker.status
-              ? `${activeRoleMarker.role} (${activeRoleMarker.status})`
-              : 'unknown'}
-          </p>
-          <div className={styles.reviewSessionRows}>
-            {sessionRows.map((row) => {
-              const isActiveRole = row.key === activeRoleMarker.role;
-              const roleStatus =
-                row.key === 'planner' || row.key === 'builder' || row.key === 'qa'
-                  ? (detail.feature.role_status?.[row.key] ?? 'unknown')
-                  : 'n/a';
-              return (
-                <div
-                  key={row.key}
-                  className={`${styles.reviewSessionRow}${isActiveRole ? ` ${styles.reviewSessionRowActive}` : ''}`}
-                >
-                  <div className={styles.reviewSessionIdentity}>
-                    <span>{row.label}</span>
-                    <span className={styles.reviewSessionState}>{roleStatus}</span>
-                    {isActiveRole ? (
-                      <span className={styles.reviewSessionMarker}>active</span>
-                    ) : null}
-                  </div>
-                  <div className={styles.reviewSessionValue}>
-                    <span>{truncateSessionId(row.sessionId)}</span>
-                    <button
-                      type="button"
-                      className={styles.buttonGhost}
-                      disabled={!hasActiveSession(row.sessionId)}
-                      onClick={() => {
-                        void copySessionId(row.sessionId);
-                      }}
-                    >
-                      Copy
-                    </button>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </details>
-
-        <details
-          className={styles.section}
-          onToggle={(event) => {
-            if ((event.currentTarget as HTMLDetailsElement).open) {
-              void fetchTimeline();
-            }
-          }}
-        >
-          <summary className={styles.sectionSummary}>Runtime Inspector</summary>
-          <p className={styles.trustLabelRow}>{renderTrustBadge('Structured Artifact')}</p>
-          <div className={styles.runtimeInspectorTabs}>
-            <button
-              type="button"
-              className={`${styles.runtimeInspectorTab}${runtimeInspectorTab === 'activity' ? ` ${styles.runtimeInspectorTabActive}` : ''}`}
-              onClick={() => setRuntimeInspectorTab('activity')}
-            >
-              Activity
-            </button>
-            <button
-              type="button"
-              className={`${styles.runtimeInspectorTab}${runtimeInspectorTab === 'checkpoints' ? ` ${styles.runtimeInspectorTabActive}` : ''}`}
-              onClick={() => setRuntimeInspectorTab('checkpoints')}
-            >
-              Checkpoints
-            </button>
-          </div>
-          {runtimeInspectorTab === 'activity' ? (
-            <>
-              <div className={styles.reviewTimelineFilters}>
-                <select
-                  className={styles.actionSelect}
-                  value={timelineRole}
-                  onChange={(event) => setTimelineRole(event.target.value)}
-                >
-                  <option value="">All roles</option>
-                  <option value="planner">Planner</option>
-                  <option value="builder">Builder</option>
-                  <option value="qa">QA</option>
-                </select>
-                <select
-                  className={styles.actionSelect}
-                  value={timelineValidity}
-                  onChange={(event) => setTimelineValidity(event.target.value as TimelineValidity)}
-                >
-                  <option value="all">All validity</option>
-                  <option value="valid">Valid only</option>
-                  <option value="invalid">Invalid only</option>
-                </select>
-              </div>
-              {timelineLoading ? <p className={styles.metaText}>Loading timeline...</p> : null}
-              {timelineError ? <p className={styles.metaText}>{timelineError}</p> : null}
-              {!timelineLoading && !timelineError ? (
-                <div className={styles.reviewTimelineList}>
-                  {timelineEntries.map((entry, index) => (
-                    <div key={`${entry.ts}:${index}`} className={styles.reviewTimelineEntry}>
-                      <span>{formatTimestamp(entry.ts)}</span>
-                      <span>{entry.role}</span>
-                      <span>{entry.event_type ?? 'event'}</span>
-                      <span>{entry.valid ? 'valid' : 'invalid'}</span>
-                    </div>
-                  ))}
-                </div>
-              ) : null}
-            </>
-          ) : (
-            <>
-              <div className={styles.badgeRow}>
-                <span className={`${styles.badge} ${styles.badgeNeutral}`}>
-                  mode: {detail.execution_mode ?? 'deterministic'}
-                </span>
-                <span className={`${styles.badge} ${styles.badgeNeutral}`}>
-                  {detail.checkpoints?.length ?? 0} checkpoints
-                </span>
-              </div>
-              {detail.checkpoints && detail.checkpoints.length > 0 ? (
-                <div className={styles.reviewTimelineList}>
-                  {detail.checkpoints.map((checkpoint) => (
-                    <div
-                      key={`${checkpoint.checkpoint_id}:${checkpoint.timestamp}`}
-                      className={styles.reviewTimelineEntry}
-                    >
-                      <div className={styles.badgeRow}>
-                        <span className={checkpointStatusBadge(checkpoint, styles)}>
-                          {checkpoint.validation_status}
-                        </span>
-                        {checkpoint.severity ? (
-                          <span className={checkpointSeverityBadge(checkpoint.severity, styles)}>
-                            {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>
-              ) : (
-                <p className={styles.metaText}>No checkpoints recorded for this feature yet.</p>
-              )}
-            </>
-          )}
-        </details>
-
-        <details
-          className={styles.section}
-          onToggle={(event) => {
-            if ((event.currentTarget as HTMLDetailsElement).open) {
-              void fetchRawLogs();
-            }
-          }}
-        >
-          <summary className={styles.sectionSummary}>Raw Agent Output</summary>
-          <p className={styles.trustLabelRow}>{renderTrustBadge('Raw Provider Output')}</p>
-          <p className={styles.banner}>Raw output may contain sensitive data.</p>
-          {rawLogsEnabled === false ? (
-            <p className={styles.metaText}>Raw output is disabled by policy.</p>
-          ) : null}
-          {rawLogError ? <p className={styles.metaText}>{rawLogError}</p> : null}
-          {rawLogsEnabled ? (
-            <>
-              <select
-                className={styles.actionSelect}
-                value={rawLogSelection ?? ''}
-                onChange={(event) => setRawLogSelection(event.target.value)}
-              >
-                {rawLogs.map((file) => (
-                  <option key={file.filename} value={file.filename}>
-                    {file.filename} ({Math.round(file.size_bytes / 1024)} KB)
-                  </option>
-                ))}
-              </select>
-              <pre className={styles.preContent}>{rawLogContent}</pre>
-            </>
-          ) : null}
-        </details>
-      </aside>
-
-      {inspectorOpen && isPhoneViewport ? (
-        <div className={styles.mobileInspectorOverlay} role="dialog" aria-modal="true">
-          <div className={styles.mobileInspectorPanel}>
-            <div className={styles.reviewHeaderRow}>
-              <div className={styles.reviewTitleWrap}>
-                <h3 className={styles.sectionTitle}>File Inspector</h3>
-                {renderTrustBadge('Structured Artifact')}
-              </div>
-              <button
-                type="button"
-                className={styles.buttonGhost}
-                onClick={() => setInspectorOpen(false)}
-              >
-                Close
-              </button>
-            </div>
-            {inspectorLoading ? <p className={styles.metaText}>Loading file inspector...</p> : null}
-            {inspectorError ? <p className={styles.metaText}>{inspectorError}</p> : null}
-            {!inspectorLoading && !inspectorError && inspectorPayload ? (
-              <div className={styles.reviewMonacoWrap}>
-                <MonacoDiffEditor
-                  height="calc(100dvh - 9.5rem)"
-                  language={inspectorPayload.language}
-                  original={inspectorPayload.original}
-                  modified={inspectorPayload.modified}
-                  options={{
-                    readOnly: true,
-                    renderSideBySide: true,
-                    minimap: { enabled: false },
-                    scrollBeyondLastLine: false,
-                  }}
-                />
-              </div>
-            ) : null}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}