agentic-orchestrator 0.1.26 → 0.1.28

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

@@ -0,0 +1,1162 @@
+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>
+  );
+}