agentic-orchestrator 0.1.28 → 0.2.1

package/packages/web-dashboard/src/components/features/runtime-inspector/RuntimeInspectorPanel.tsx

@@ -0,0 +1,896 @@
+'use client';
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { RawLogFileMeta } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+import { RoleLogViewer } from '@/components/focus/RoleLogViewer';
+import { OperationsListView } from './OperationsListView';
+import { EventsTimelineView } from './EventsTimelineView';
+
+type RunHistoryStatus = 'active' | 'completed' | 'failed' | 'timeout' | 'interrupted';
+
+type RunHistoryEntry = {
+  run_id: string;
+  started_at: string;
+  ended_at: string | null;
+  status: RunHistoryStatus;
+  has_operations: boolean;
+  has_events: boolean;
+};
+
+type OperationEntry = {
+  operation_id: string;
+  tool_name: string;
+  tool_description: string | null;
+  request_hash: string;
+  timestamp: string;
+  response_summary: string;
+  status?: 'success' | 'partial' | 'failed';
+  response: {
+    ok: boolean;
+    data?: unknown;
+    error?: { code?: string; message?: string; details?: unknown };
+  };
+};
+
+type WorkerEventEntry = {
+  ts: string;
+  run_id: string;
+  feature_id: string;
+  role: string;
+  phase: string;
+  event_type: string;
+  output_types: string[];
+  patch_count: number;
+  plan_submission_count: number;
+  request_count: number;
+  note_count: number;
+  valid: boolean;
+  error_code: string | null;
+  provider: string;
+  model: string;
+  watchdog_reason: string | null;
+  signal: string | null;
+  exit_code?: number;
+  timeout_ms?: number;
+  elapsed_ms?: number;
+};
+
+type OperationsPayload = {
+  operations: OperationEntry[];
+  total_count: number;
+  has_more: boolean;
+  tool_names: string[];
+  summary: {
+    success_count: number;
+    partial_count: number;
+    failed_count: number;
+  };
+};
+
+type EventsPayload = {
+  events: WorkerEventEntry[];
+  total_count: number;
+  has_more: boolean;
+  role_options: string[];
+  event_type_options: string[];
+  summary: {
+    valid_count: number;
+    invalid_count: number;
+  };
+};
+
+type RunDetailPayload = {
+  raw_logs: RawLogFileMeta[];
+};
+
+type ApiEnvelope<TData> = {
+  ok: boolean;
+  data?: TData;
+  error?: { code?: string; message?: string };
+};
+
+type Pagination = {
+  limit: number;
+  offset: number;
+  totalCount: number;
+  hasMore: boolean;
+};
+
+type OperationsSummary = OperationsPayload['summary'];
+type EventsSummary = EventsPayload['summary'];
+
+const EMPTY_OPERATIONS_SUMMARY: OperationsSummary = {
+  success_count: 0,
+  partial_count: 0,
+  failed_count: 0,
+};
+
+const EMPTY_EVENTS_SUMMARY: EventsSummary = {
+  valid_count: 0,
+  invalid_count: 0,
+};
+
+const PAGE_SIZE_OPTIONS = [10, 25, 50];
+
+function shortRunId(runId: string): string {
+  const parts = runId.split(':');
+  const suffix = parts[parts.length - 1] ?? runId;
+  return suffix.slice(0, 8);
+}
+
+function formatTimestamp(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',
+  });
+}
+
+function formatDurationWindow(startedAt: string, endedAt: string | null): string {
+  const start = Date.parse(startedAt);
+  const end = endedAt ? Date.parse(endedAt) : Date.now();
+  if (Number.isNaN(start) || Number.isNaN(end) || end < start) {
+    return endedAt ? `${formatTimestamp(startedAt)} → ${formatTimestamp(endedAt)}` : 'active';
+  }
+  const ms = end - start;
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  if (ms < 60000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  return `${Math.round(ms / 60000)}m`;
+}
+
+function pluralize(count: number, singular: string, plural?: string): string {
+  return count === 1 ? singular : (plural ?? `${singular}s`);
+}
+
+function readQueryParam(key: string): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  return new URLSearchParams(window.location.search).get(key);
+}
+
+function updateQueryParams(entries: Record<string, string | null>): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  const params = new URLSearchParams(window.location.search);
+  for (const [key, value] of Object.entries(entries)) {
+    if (!value) {
+      params.delete(key);
+    } else {
+      params.set(key, value);
+    }
+  }
+  const query = params.toString();
+  const nextUrl =
+    query.length > 0 ? `${window.location.pathname}?${query}` : window.location.pathname;
+  window.history.replaceState(null, '', nextUrl);
+}
+
+function totalOperationCount(summary: OperationsSummary): number {
+  return summary.success_count + summary.partial_count + summary.failed_count;
+}
+
+function totalEventCount(summary: EventsSummary): number {
+  return summary.valid_count + summary.invalid_count;
+}
+
+function describeRun(
+  run: RunHistoryEntry | null,
+  operationsSummary: OperationsSummary,
+  eventsSummary: EventsSummary,
+  rawLogCount: number,
+): string {
+  if (!run) {
+    return 'Choose a run to review the runtime trace, worker lifecycle, and raw evidence in one place.';
+  }
+
+  const fragments = [
+    `${totalOperationCount(operationsSummary)} ${pluralize(totalOperationCount(operationsSummary), 'tool call')}`,
+    `${eventsSummary.invalid_count} invalid ${pluralize(eventsSummary.invalid_count, 'event')}`,
+    `${rawLogCount} ${pluralize(rawLogCount, 'raw log')}`,
+  ];
+
+  if (operationsSummary.failed_count > 0) {
+    fragments.splice(1, 0, `${operationsSummary.failed_count} failed`);
+  }
+
+  return `${run.status} over ${formatDurationWindow(run.started_at, run.ended_at)} · ${fragments.join(' · ')}`;
+}
+
+function formatRangeLabel(pagination: Pagination, pageSize: number): string {
+  if (pagination.totalCount === 0) {
+    return 'No results';
+  }
+  const start = pagination.offset + 1;
+  const end = Math.min(pagination.offset + pageSize, pagination.totalCount);
+  return `Showing ${start}-${end} of ${pagination.totalCount}`;
+}
+
+function formatPageLabel(pagination: Pagination): string {
+  if (pagination.totalCount === 0) {
+    return 'Page 0 of 0';
+  }
+  const currentPage = Math.floor(pagination.offset / pagination.limit) + 1;
+  const pageCount = Math.max(1, Math.ceil(pagination.totalCount / pagination.limit));
+  return `Page ${currentPage} of ${pageCount}`;
+}
+
+function runDetailUrl(featureId: string, runId: string, project: string): string {
+  const params = new URLSearchParams();
+  if (project) {
+    params.set('project', project);
+  }
+  const query = params.toString();
+  return `/api/features/${featureId}/history/run/${encodeURIComponent(runId)}${
+    query.length > 0 ? `?${query}` : ''
+  }`;
+}
+
+export function RuntimeInspectorPanel({
+  featureId,
+  project,
+}: {
+  featureId: string;
+  project: string;
+}) {
+  const [activeTab, setActiveTab] = useState<'operations' | 'events' | 'logs'>(() => {
+    const value = readQueryParam('rt_tab');
+    return value === 'events' || value === 'logs' ? value : 'operations';
+  });
+  const [isOpen, setIsOpen] = useState(() => readQueryParam('rt_open') !== 'false');
+  const [runs, setRuns] = useState<RunHistoryEntry[]>([]);
+  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
+  const [runsLoading, setRunsLoading] = useState(false);
+  const [runsError, setRunsError] = useState<string | null>(null);
+  const [runsRefreshKey, setRunsRefreshKey] = useState(0);
+
+  const [operations, setOperations] = useState<OperationEntry[]>([]);
+  const [operationsLoading, setOperationsLoading] = useState(false);
+  const [operationsError, setOperationsError] = useState<string | null>(null);
+  const [operationsRefreshKey, setOperationsRefreshKey] = useState(0);
+  const [operationsSummary, setOperationsSummary] =
+    useState<OperationsSummary>(EMPTY_OPERATIONS_SUMMARY);
+  const [operationsPagination, setOperationsPagination] = useState<Pagination>({
+    limit: 25,
+    offset: 0,
+    totalCount: 0,
+    hasMore: false,
+  });
+  const [expandedOperations, setExpandedOperations] = useState<Set<string>>(new Set());
+
+  const [events, setEvents] = useState<WorkerEventEntry[]>([]);
+  const [eventsLoading, setEventsLoading] = useState(false);
+  const [eventsError, setEventsError] = useState<string | null>(null);
+  const [eventsRefreshKey, setEventsRefreshKey] = useState(0);
+  const [eventsSummary, setEventsSummary] = useState<EventsSummary>(EMPTY_EVENTS_SUMMARY);
+  const [eventsPagination, setEventsPagination] = useState<Pagination>({
+    limit: 25,
+    offset: 0,
+    totalCount: 0,
+    hasMore: false,
+  });
+  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set());
+
+  const [rawLogs, setRawLogs] = useState<RawLogFileMeta[]>([]);
+  const [rawLogsLoading, setRawLogsLoading] = useState(false);
+  const [rawLogsError, setRawLogsError] = useState<string | null>(null);
+  const [rawLogsRefreshKey, setRawLogsRefreshKey] = useState(0);
+
+  const initialRunIdRef = useRef<string | null>(readQueryParam('rt_run'));
+
+  useEffect(() => {
+    updateQueryParams({
+      rt_tab: activeTab,
+      rt_run: selectedRunId,
+      rt_open: isOpen ? 'true' : 'false',
+    });
+  }, [activeTab, selectedRunId, isOpen]);
+
+  useEffect(() => {
+    if (!featureId) {
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    setRunsLoading(true);
+    setRunsError(null);
+
+    void (async () => {
+      try {
+        const params = new URLSearchParams();
+        params.set('feature_id', featureId);
+        if (project) {
+          params.set('project', project);
+        }
+        const response = await fetch(`/api/runtime/runs?${params.toString()}`, {
+          signal: controller.signal,
+        });
+        const payload = (await response.json()) as ApiEnvelope<{
+          runs: RunHistoryEntry[];
+        }>;
+        if (cancelled) {
+          return;
+        }
+        if (!payload.ok || !payload.data) {
+          setRuns([]);
+          setRunsError(payload.error?.message ?? 'Failed to load run history');
+          return;
+        }
+        setRuns(payload.data.runs ?? []);
+      } catch {
+        if (!cancelled) {
+          setRuns([]);
+          setRunsError('Failed to load run history');
+        }
+      } finally {
+        if (!cancelled) {
+          setRunsLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [featureId, project, runsRefreshKey]);
+
+  useEffect(() => {
+    if (runs.length === 0) {
+      setSelectedRunId(null);
+      return;
+    }
+    if (selectedRunId && runs.some((entry) => entry.run_id === selectedRunId)) {
+      return;
+    }
+    const candidate =
+      initialRunIdRef.current &&
+      runs.find((entry) => entry.run_id === initialRunIdRef.current)?.run_id;
+    setSelectedRunId(candidate ?? runs[0].run_id);
+  }, [runs, selectedRunId]);
+
+  useEffect(() => {
+    setOperationsPagination((prev) => ({ ...prev, offset: 0 }));
+  }, [selectedRunId]);
+
+  useEffect(() => {
+    if (!featureId || !selectedRunId) {
+      setOperations([]);
+      setOperationsSummary(EMPTY_OPERATIONS_SUMMARY);
+      setOperationsLoading(false);
+      setOperationsError(null);
+      setOperationsPagination((prev) => ({ ...prev, totalCount: 0, hasMore: false }));
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    setOperationsLoading(true);
+    setOperationsError(null);
+
+    void (async () => {
+      try {
+        const params = new URLSearchParams();
+        params.set('feature_id', featureId);
+        params.set('run_id', selectedRunId);
+        params.set('limit', operationsPagination.limit.toString());
+        params.set('offset', operationsPagination.offset.toString());
+        if (project) {
+          params.set('project', project);
+        }
+        const response = await fetch(`/api/runtime/operations?${params.toString()}`, {
+          signal: controller.signal,
+        });
+        const payload = (await response.json()) as ApiEnvelope<OperationsPayload>;
+        if (cancelled) {
+          return;
+        }
+        if (!payload.ok || !payload.data) {
+          setOperations([]);
+          setOperationsSummary(EMPTY_OPERATIONS_SUMMARY);
+          setOperationsError(payload.error?.message ?? 'Failed to load tool calls');
+          return;
+        }
+        setOperations(payload.data.operations ?? []);
+        setOperationsSummary(payload.data.summary ?? EMPTY_OPERATIONS_SUMMARY);
+        setOperationsPagination((prev) => ({
+          ...prev,
+          totalCount: payload.data?.total_count ?? 0,
+          hasMore: payload.data?.has_more ?? false,
+        }));
+      } catch {
+        if (!cancelled) {
+          setOperations([]);
+          setOperationsSummary(EMPTY_OPERATIONS_SUMMARY);
+          setOperationsError('Failed to load tool calls');
+        }
+      } finally {
+        if (!cancelled) {
+          setOperationsLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [
+    featureId,
+    project,
+    selectedRunId,
+    operationsPagination.limit,
+    operationsPagination.offset,
+    operationsRefreshKey,
+  ]);
+
+  useEffect(() => {
+    setEventsPagination((prev) => ({ ...prev, offset: 0 }));
+  }, [selectedRunId]);
+
+  useEffect(() => {
+    if (!featureId || !selectedRunId) {
+      setEvents([]);
+      setEventsSummary(EMPTY_EVENTS_SUMMARY);
+      setEventsLoading(false);
+      setEventsError(null);
+      setEventsPagination((prev) => ({ ...prev, totalCount: 0, hasMore: false }));
+      return;
+    }
+    const controller = new AbortController();
+    let cancelled = false;
+    setEventsLoading(true);
+    setEventsError(null);
+
+    void (async () => {
+      try {
+        const params = new URLSearchParams();
+        params.set('feature_id', featureId);
+        params.set('run_id', selectedRunId);
+        params.set('limit', eventsPagination.limit.toString());
+        params.set('offset', eventsPagination.offset.toString());
+        if (project) {
+          params.set('project', project);
+        }
+        const response = await fetch(`/api/runtime/events?${params.toString()}`, {
+          signal: controller.signal,
+        });
+        const payload = (await response.json()) as ApiEnvelope<EventsPayload>;
+        if (cancelled) {
+          return;
+        }
+        if (!payload.ok || !payload.data) {
+          setEvents([]);
+          setEventsSummary(EMPTY_EVENTS_SUMMARY);
+          setEventsError(payload.error?.message ?? 'Failed to load worker events');
+          return;
+        }
+        setEvents(payload.data.events ?? []);
+        setEventsSummary(payload.data.summary ?? EMPTY_EVENTS_SUMMARY);
+        setEventsPagination((prev) => ({
+          ...prev,
+          totalCount: payload.data?.total_count ?? 0,
+          hasMore: payload.data?.has_more ?? false,
+        }));
+      } catch {
+        if (!cancelled) {
+          setEvents([]);
+          setEventsSummary(EMPTY_EVENTS_SUMMARY);
+          setEventsError('Failed to load worker events');
+        }
+      } finally {
+        if (!cancelled) {
+          setEventsLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [
+    featureId,
+    project,
+    selectedRunId,
+    eventsPagination.limit,
+    eventsPagination.offset,
+    eventsRefreshKey,
+  ]);
+
+  useEffect(() => {
+    if (!featureId || !selectedRunId) {
+      setRawLogs([]);
+      setRawLogsLoading(false);
+      setRawLogsError(null);
+      return;
+    }
+
+    const controller = new AbortController();
+    let cancelled = false;
+    setRawLogs([]);
+    setRawLogsLoading(true);
+    setRawLogsError(null);
+
+    void (async () => {
+      try {
+        const response = await fetch(runDetailUrl(featureId, selectedRunId, project), {
+          signal: controller.signal,
+        });
+        const payload = (await response.json()) as ApiEnvelope<RunDetailPayload>;
+        if (cancelled) {
+          return;
+        }
+        if (!payload.ok || !payload.data) {
+          setRawLogs([]);
+          setRawLogsError(payload.error?.message ?? 'Failed to load raw logs');
+          return;
+        }
+        setRawLogs(payload.data.raw_logs ?? []);
+      } catch {
+        if (!cancelled) {
+          setRawLogs([]);
+          setRawLogsError('Failed to load raw logs');
+        }
+      } finally {
+        if (!cancelled) {
+          setRawLogsLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [featureId, project, selectedRunId, rawLogsRefreshKey]);
+
+  useEffect(() => {
+    setExpandedOperations(new Set());
+    setExpandedEvents(new Set());
+  }, [selectedRunId]);
+
+  const selectedRun = useMemo(
+    () => runs.find((entry) => entry.run_id === selectedRunId) ?? null,
+    [runs, selectedRunId],
+  );
+  const selectedRunIndex = useMemo(
+    () => runs.findIndex((entry) => entry.run_id === selectedRunId),
+    [runs, selectedRunId],
+  );
+
+  const selectedRunLabel = useMemo(() => {
+    if (!selectedRun) {
+      return '';
+    }
+    return `Run ${shortRunId(selectedRun.run_id)} · ${formatTimestamp(selectedRun.started_at)}`;
+  }, [selectedRun]);
+
+  const runSummaryDetail = useMemo(
+    () => describeRun(selectedRun, operationsSummary, eventsSummary, rawLogs.length),
+    [selectedRun, operationsSummary, eventsSummary, rawLogs.length],
+  );
+
+  const handleCopy = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+    } catch {
+      // ignore clipboard failures
+    }
+  };
+
+  const refreshAll = () => {
+    setRunsRefreshKey((prev) => prev + 1);
+    setOperationsRefreshKey((prev) => prev + 1);
+    setEventsRefreshKey((prev) => prev + 1);
+    setRawLogsRefreshKey((prev) => prev + 1);
+  };
+
+  const goToAdjacentRun = (direction: -1 | 1) => {
+    if (selectedRunIndex < 0) {
+      return;
+    }
+    const nextIndex = selectedRunIndex + direction;
+    if (nextIndex < 0 || nextIndex >= runs.length) {
+      return;
+    }
+    setSelectedRunId(runs[nextIndex]?.run_id ?? null);
+  };
+
+  return (
+    <details
+      className={styles.section}
+      open={isOpen}
+      onToggle={(event) => setIsOpen(event.currentTarget.open)}
+    >
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Run Review</span>
+          <p className={styles.collapsibleSummaryDetail}>{runSummaryDetail}</p>
+        </div>
+        <div className={styles.collapsibleSummaryMeta}>
+          {selectedRun ? (
+            <>
+              <span className={`${styles.badge} ${styles.badgeNeutral}`}>{selectedRun.status}</span>
+              <span className={`${styles.badge} ${styles.badgeNeutral}`}>{selectedRunLabel}</span>
+            </>
+          ) : (
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>no run selected</span>
+          )}
+        </div>
+      </summary>
+
+      <div className={styles.collapsibleBody}>
+        <div className={styles.runtimeInspectorHeader}>
+          <div className={styles.reviewTitleWrap}>
+            <div>
+              <h3 className={styles.sectionTitle}>Run Review</h3>
+              <p className={styles.metaText}>
+                Review what the runtime attempted, where it failed, and the supporting raw evidence
+                for the selected run.
+              </p>
+            </div>
+            <div className={styles.inlineActions}>
+              {selectedRunLabel ? (
+                <span className={`${styles.badge} ${styles.badgeNeutral}`}>{selectedRunLabel}</span>
+              ) : null}
+              <button
+                type="button"
+                className={`${styles.button} ${styles.buttonGhost}`}
+                onClick={refreshAll}
+              >
+                Refresh
+              </button>
+            </div>
+          </div>
+          {runsLoading ? <p className={styles.metaText}>Loading run history...</p> : null}
+          {runsError ? <p className={styles.metaText}>{runsError}</p> : null}
+
+          {selectedRun ? (
+            <div className={styles.runtimeInspectorSummaryGrid}>
+              <div className={styles.summaryMetricCard}>
+                <span className={styles.summaryMetricLabel}>Status</span>
+                <strong className={styles.summaryMetricValue}>{selectedRun.status}</strong>
+              </div>
+              <div className={styles.summaryMetricCard}>
+                <span className={styles.summaryMetricLabel}>Window</span>
+                <strong className={styles.summaryMetricValue}>
+                  {formatDurationWindow(selectedRun.started_at, selectedRun.ended_at)}
+                </strong>
+              </div>
+              <div className={styles.summaryMetricCard}>
+                <span className={styles.summaryMetricLabel}>Tool Calls</span>
+                <strong className={styles.summaryMetricValue}>
+                  {totalOperationCount(operationsSummary)}
+                  {operationsSummary.failed_count > 0
+                    ? ` · ${operationsSummary.failed_count} failed`
+                    : ''}
+                </strong>
+              </div>
+              <div className={styles.summaryMetricCard}>
+                <span className={styles.summaryMetricLabel}>Worker Events</span>
+                <strong className={styles.summaryMetricValue}>
+                  {totalEventCount(eventsSummary)}
+                  {eventsSummary.invalid_count > 0
+                    ? ` · ${eventsSummary.invalid_count} invalid`
+                    : ''}
+                </strong>
+              </div>
+              <div className={styles.summaryMetricCard}>
+                <span className={styles.summaryMetricLabel}>Raw Logs</span>
+                <strong className={styles.summaryMetricValue}>
+                  {rawLogsLoading ? 'loading...' : rawLogs.length}
+                </strong>
+              </div>
+            </div>
+          ) : null}
+        </div>
+
+        {!runsLoading && runs.length === 0 && !runsError ? (
+          <p className={styles.metaText}>No runs recorded for this feature yet.</p>
+        ) : null}
+
+        {selectedRun ? (
+          <>
+            <div className={styles.runtimeInspectorTabs}>
+              <button
+                type="button"
+                className={`${styles.runtimeInspectorTab} ${
+                  activeTab === 'operations' ? styles.runtimeInspectorTabActive : ''
+                }`}
+                onClick={() => setActiveTab('operations')}
+              >
+                Tool Calls ({totalOperationCount(operationsSummary)})
+              </button>
+              <button
+                type="button"
+                className={`${styles.runtimeInspectorTab} ${
+                  activeTab === 'events' ? styles.runtimeInspectorTabActive : ''
+                }`}
+                onClick={() => setActiveTab('events')}
+              >
+                Worker Events ({totalEventCount(eventsSummary)})
+              </button>
+              <button
+                type="button"
+                className={`${styles.runtimeInspectorTab} ${
+                  activeTab === 'logs' ? styles.runtimeInspectorTabActive : ''
+                }`}
+                onClick={() => setActiveTab('logs')}
+              >
+                Raw Logs ({rawLogs.length})
+              </button>
+            </div>
+
+            {activeTab === 'operations' ? (
+              <div className={styles.runtimeInspectorPanel}>
+                <OperationsListView
+                  operations={operations}
+                  loading={operationsLoading}
+                  error={operationsError}
+                  onRetry={() => setOperationsRefreshKey((prev) => prev + 1)}
+                  expandedIds={expandedOperations}
+                  onToggleExpand={(id) =>
+                    setExpandedOperations((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(id)) {
+                        next.delete(id);
+                      } else {
+                        next.add(id);
+                      }
+                      return next;
+                    })
+                  }
+                  onCopy={handleCopy}
+                />
+
+                <div className={styles.historyArchivePager}>
+                  <span className={styles.metaText}>
+                    {formatRangeLabel(operationsPagination, operations.length)}
+                  </span>
+                  <span className={styles.metaText}>{formatPageLabel(operationsPagination)}</span>
+                  <div className={styles.inlineActions}>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      onClick={() =>
+                        setOperationsPagination((prev) => ({
+                          ...prev,
+                          offset: Math.max(prev.offset - prev.limit, 0),
+                        }))
+                      }
+                      disabled={operationsLoading || operationsPagination.offset === 0}
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      onClick={() =>
+                        setOperationsPagination((prev) => ({
+                          ...prev,
+                          offset: prev.offset + prev.limit,
+                        }))
+                      }
+                      disabled={operationsLoading || !operationsPagination.hasMore}
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {activeTab === 'events' ? (
+              <div className={styles.runtimeInspectorPanel}>
+                <EventsTimelineView
+                  events={events}
+                  loading={eventsLoading}
+                  error={eventsError}
+                  onRetry={() => setEventsRefreshKey((prev) => prev + 1)}
+                  expandedIds={expandedEvents}
+                  onToggleExpand={(id) =>
+                    setExpandedEvents((prev) => {
+                      const next = new Set(prev);
+                      if (next.has(id)) {
+                        next.delete(id);
+                      } else {
+                        next.add(id);
+                      }
+                      return next;
+                    })
+                  }
+                />
+
+                <div className={styles.historyArchivePager}>
+                  <span className={styles.metaText}>
+                    {formatRangeLabel(eventsPagination, events.length)}
+                  </span>
+                  <span className={styles.metaText}>{formatPageLabel(eventsPagination)}</span>
+                  <div className={styles.inlineActions}>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      onClick={() =>
+                        setEventsPagination((prev) => ({
+                          ...prev,
+                          offset: Math.max(prev.offset - prev.limit, 0),
+                        }))
+                      }
+                      disabled={eventsLoading || eventsPagination.offset === 0}
+                    >
+                      Previous
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.button}
+                      onClick={() =>
+                        setEventsPagination((prev) => ({
+                          ...prev,
+                          offset: prev.offset + prev.limit,
+                        }))
+                      }
+                      disabled={eventsLoading || !eventsPagination.hasMore}
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {activeTab === 'logs' ? (
+              <div className={styles.runtimeInspectorPanel}>
+                {rawLogsLoading ? <p className={styles.metaText}>Loading raw logs...</p> : null}
+                {rawLogsError ? <p className={styles.metaText}>{rawLogsError}</p> : null}
+                <RoleLogViewer
+                  embedded
+                  featureId={featureId}
+                  project={project}
+                  availableFiles={rawLogs}
+                  subtitle="Raw provider output is now reviewed here so tool calls, worker events, and logs stay aligned to the same run."
+                />
+              </div>
+            ) : null}
+
+            {runs.length > 1 ? (
+              <div className={styles.historyArchivePager}>
+                <span className={styles.metaText}>
+                  Run {selectedRunIndex + 1} of {runs.length}
+                </span>
+                <div className={styles.inlineActions}>
+                  <button
+                    type="button"
+                    className={styles.button}
+                    disabled={selectedRunIndex <= 0}
+                    onClick={() => goToAdjacentRun(-1)}
+                  >
+                    Previous run
+                  </button>
+                  <button
+                    type="button"
+                    className={styles.button}
+                    disabled={selectedRunIndex < 0 || selectedRunIndex >= runs.length - 1}
+                    onClick={() => goToAdjacentRun(1)}
+                  >
+                    Next run
+                  </button>
+                </div>
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    </details>
+  );
+}