@zaip-ai/cli 1.0.8 → 1.3.1

package/templates/.agents/dashboard/apps/frontend/src/App.tsx

@@ -39,15 +39,16 @@ import type {
 import { DashboardApiClient } from "./dashboard-api.js";
 import { defaultOperationsPeriod, requestPeriodForOperations } from "./operations-period.js";
 import { shouldShowSnapshotNotice, snapshotNoticeDelayMs } from "./snapshot-notice.js";
+import {
+  appendTraceabilityTaskPage,
+  traceabilityTaskPageSize,
+} from "./traceability-task-pagination.js";
 import { useAppCostLoaders } from "./use-app-cost-loaders.js";
 import { useAppEffects } from "./use-app-effects.js";
 import { useAppOperationsPages } from "./use-app-operations-pages.js";
 import { useAppTraceDocuments } from "./use-app-trace-documents.js";
-import {
-  collectWorkListPages,
-  normalizeWorkListFilters,
-  selectedWorkListKinds,
-} from "./work-list-pagination.js";
+import { useAppWorkListPage } from "./use-app-work-list-page.js";
+import { useOperationsDetailExport } from "./use-operations-detail-export.js";
 import "./loading-feedback.css";
 import "./period-transition-overlay.css";
 
@@ -55,16 +56,26 @@ type BoardStageState = { loading: boolean; error: string | null };
 type OverviewStatusKind = "task" | "spec" | "prd";
 type OverviewClassification = "lite" | "standard" | "critical" | "empty" | "structured" | "rework";
 type OverviewStatusPage = {
-  items: OperationsProjection["tasks"] | OperationsProjection["specs"] | OperationsProjection["prds"];
+  items:
+    | OperationsProjection["tasks"]
+    | OperationsProjection["specs"]
+    | OperationsProjection["prds"];
   total: number;
   loading: boolean;
   error: string | null;
 };
-type OverviewStatusPages = Partial<Record<`${WorkBoardStage}:${OverviewStatusKind}`, OverviewStatusPage>>;
-const overviewStatusPageKey = (stage: WorkBoardStage, kind: OverviewStatusKind) => `${stage}:${kind}` as const;
-type OverviewClassificationPages = Partial<Record<`${OverviewStatusKind}:${OverviewClassification}`, OverviewStatusPage>>;
-const overviewClassificationPageKey = (kind: OverviewStatusKind, classification: OverviewClassification) =>
-  `${kind}:${classification}` as const;
+type OverviewStatusPages = Partial<
+  Record<`${WorkBoardStage}:${OverviewStatusKind}`, OverviewStatusPage>
+>;
+const overviewStatusPageKey = (stage: WorkBoardStage, kind: OverviewStatusKind) =>
+  `${stage}:${kind}` as const;
+type OverviewClassificationPages = Partial<
+  Record<`${OverviewStatusKind}:${OverviewClassification}`, OverviewStatusPage>
+>;
+const overviewClassificationPageKey = (
+  kind: OverviewStatusKind,
+  classification: OverviewClassification,
+) => `${kind}:${classification}` as const;
 const initialWorkBoardStages: readonly WorkBoardStage[] = [
   "definition",
   "planning",
@@ -88,16 +99,6 @@ const traceTaskSearchStages: readonly WorkBoardStage[] = [
   "definition",
 ];
 
-/** Mounts the Daily Cost view without requesting the historical summary blob. */
-function dailyCostSeed(
-  currency: "BRL" | "USD",
-  filters: CostMonitorProjection["filters"],
-): CostMonitorProjection {
-  const metric = { events: 0, tokens: { input: null, cached_input: null, output: null, reasoning: null, total: null }, cost: { usd: null, brl: null }, coverage: { events: 0, tokens: 0, usd: 0, brl: 0 } };
-  const usage = { conversation: metric, planning: metric, execution: metric, total: metric, new_work: metric, rework: metric };
-  return { schema_version: 2, layout_version: 2, readonly: true, source: ".agents/records", aggregate_only: true, data_source: "run_records", legacy_effort_baseline: null, currency, pricing: { catalog_updated_at: null, fx_rate: null, conversion_applied: false }, filters, overview: { task_count: 0, run_count: 0, event_count: 0, total_tokens: null, estimated_usd: null, estimated_brl: null, recorded_usd: null, recorded_brl: null, average_run_cost_usd: null, average_run_cost_brl: null, average_run_duration_ms: null, known_tokens_per_cycle: null, top_10_token_share: null, coverage: { events: 0, tokens: 0, usd: 0, brl: 0 } }, filters_available: { providers: [], agents: [], models: [], statuses: [], priorities: [], risks: [], phases: [], origins: [], work_types: [] }, configured_agents: [], usage, origins: { conversation: usage, task: usage, spec: usage, prd: usage }, prds: [], specs: [], runs: [], groups: { conversations: [], tasks: [], providers: [], agents: [], models: [], daily: [], monthly: [], annual: [] } };
-}
-
 export {
   isAbortError,
   isCurrentDashboardRequest,
@@ -115,7 +116,8 @@ export function App() {
   const [snapshotNoticeDelayElapsed, setSnapshotNoticeDelayElapsed] = useState(false);
   const token = useMemo(readDashboardSessionToken, []);
   const api = useMemo(() => new DashboardApiClient(token), [token]);
-  const { loadCostDetail, loadCostReadModelPage, loadCostRunPage, loadCostGroupPage } = useAppCostLoaders(api);
+  const { loadCostDetail, loadCostReadModelPage, loadCostRunPage, loadCostGroupPage } =
+    useAppCostLoaders(api);
   const [dashboardView, setDashboardView] = useState<DashboardView | null>(() =>
     initialDashboardView(window.location.pathname),
   );
@@ -141,7 +143,8 @@ export function App() {
     {},
   );
   const [overviewStatusPages, setOverviewStatusPages] = useState<OverviewStatusPages>({});
-  const [overviewClassificationPages, setOverviewClassificationPages] = useState<OverviewClassificationPages>({});
+  const [overviewClassificationPages, setOverviewClassificationPages] =
+    useState<OverviewClassificationPages>({});
   const [costs, setCosts] = useState<CostMonitorProjection | null>(null);
   const [displayedCosts, setDisplayedCosts] = useState<CostMonitorProjection | null>(null);
   const [costLocale, setCostLocale] = useState<CostLocale>(savedLocale);
@@ -162,8 +165,8 @@ export function App() {
   const [fxRate, setFxRate] = useState<FxRate | null>(null);
   const [pathname, setPathname] = useState(window.location.pathname);
   const [operationsLoading, setOperationsLoading] = useState(true);
-  const [operationsSurfaceLoading, setOperationsSurfaceLoading] = useState(false);
-  const [costSurfaceLoading, setCostSurfaceLoading] = useState(false);
+  const [, setOperationsSurfaceLoading] = useState(false);
+  const [, setCostSurfaceLoading] = useState(false);
   const [periodTransitionPending, setPeriodTransitionPending] = useState(false);
   const [loadingArea, setLoadingArea] = useState<LoadingArea | null>("operations");
   const [failedArea, setFailedArea] = useState<LoadingArea | null>(null);
@@ -171,7 +174,10 @@ export function App() {
     "choose" | "refreshing" | "reconciling" | null
   >(null);
   useEffect(() => {
-    void api.ready().then((ready) => setSnapshotUpdating(ready.snapshot_state === "updating")).catch(() => {});
+    void api
+      .ready()
+      .then((ready) => setSnapshotUpdating(ready.snapshot_state === "updating"))
+      .catch(() => {});
   }, [api]);
   const [error, setError] = useState<string | null>(null);
   const [reconciliationResult, setReconciliationResult] = useState<ReconciliationResult | null>(
@@ -200,7 +206,15 @@ export function App() {
     traceLoadingTaskId,
     traceTasks,
   } = useAppTraceDocuments({ api, operations, setError, setFailedArea, setLoadingArea });
+  const traceTasksRef = useRef(traceTasks);
+  const traceTaskCursorRef = useRef({ offset: 0, stageIndex: 0 });
+  const traceTasksLoadingRef = useRef(false);
+  const [traceTasksHasMore, setTraceTasksHasMore] = useState(false);
+  const [traceTasksLoading, setTraceTasksLoading] = useState(false);
   const refreshVersion = useRef(0);
+  useEffect(() => {
+    traceTasksRef.current = traceTasks;
+  }, [traceTasks]);
   const periodTransitionVersionRef = useRef(0);
   const detailLoadInFlight = useRef(false);
   const costLoadingCount = useRef(0);
@@ -214,6 +228,7 @@ export function App() {
   const operationsPageRequestVersionRef = useRef(0);
   const boardLoadedRef = useRef<Partial<Record<WorkBoardStage, number>>>({});
   const boardInFlightRef = useRef(new Set<WorkBoardStage>());
+  const boardAbortControllersRef = useRef(new Map<WorkBoardStage, AbortController>());
   const overviewStatusInFlightRef = useRef(new Set<string>());
   const boardInitialPageRef = useRef(new Set<WorkBoardStage>());
   const boardFiltersRef = useRef<OperationsPageFilters>({
@@ -223,27 +238,31 @@ export function App() {
     origin: "",
     kind: "",
   });
-  const workListFiltersRef = useRef<OperationsPageFilters>({
-    query: "",
-    status: "",
-    risk: "",
-  });
   const boardFilterKeyRef = useRef("||||");
   const boardRequestVersionRef = useRef(0);
   const quickOverviewMetricsRef =
     useRef<OperationsProjection["summary"]["overview_metrics"]>(undefined);
+  const {
+    workListPage,
+    workListFiltersRef,
+    loadWorkListFilters,
+    loadWorkListPage,
+    resetWorkListPage,
+  } = useAppWorkListPage({ api, operationsPeriod, operationsPeriodRef });
   // A new local SQLite generation is immutable and verified by the launcher.
   // Its server begins warming the compact first fold as soon as readiness is
   // observed, so the first paint must join that bounded cache instead of
   // forcing a second full aggregate calculation.
   const initialAggregateFreshRef = useRef(false);
   const refresh = useCallback(
-    async (visible = true, reconcileOpenWork = false) => {
+    async (visible = true, reconcileOpenWork = false, refreshProjection = false) => {
       operationsDetailCancelRef.current?.();
       operationsDetailCancelRef.current = null;
       operationsDetailAbortRef.current?.abort();
       operationsDetailAbortRef.current = null;
       boardRequestVersionRef.current += 1;
+      for (const controller of boardAbortControllersRef.current.values()) controller.abort();
+      boardAbortControllersRef.current.clear();
       boardInFlightRef.current.clear();
       boardInitialPageRef.current.clear();
       boardLoadedRef.current = {};
@@ -271,10 +290,20 @@ export function App() {
       setError(null);
       setFailedArea(null);
       try {
-        if (reconcileOpenWork) {
-          const snapshot = await api.reconcileOpenWork(currency, period);
+        if (reconcileOpenWork || refreshProjection) {
+          let snapshot: Awaited<ReturnType<typeof api.refreshProjection>>;
+          let reconciliation:
+            | Awaited<ReturnType<typeof api.reconcileOpenWork>>["reconciliation"]
+            | null = null;
+          if (reconcileOpenWork) {
+            const reconciledSnapshot = await api.reconcileOpenWork(currency, period);
+            reconciliation = reconciledSnapshot.reconciliation;
+            snapshot = reconciledSnapshot;
+          } else {
+            snapshot = await api.refreshProjection(currency, period);
+          }
           if (!isCurrentRequest()) return;
-          setReconciliationResult(snapshot.reconciliation);
+          if (reconciliation !== null) setReconciliationResult(reconciliation);
           setOperations(snapshot.operations);
           quickOverviewMetricsRef.current = snapshot.operations.summary.overview_metrics;
           operationsDetailLoadedRef.current = true;
@@ -297,7 +326,9 @@ export function App() {
               // An English first paint must have the factual USD summary
               // before Operations formats currency. BRL retains the fast
               // Operations-only path until the user opens Cost Monitor.
-              currency === "USD" ? api.costMonitor(currency, period, "summary") : Promise.resolve(null),
+              currency === "USD"
+                ? api.costMonitor(currency, period, "summary")
+                : Promise.resolve(null),
             ]);
             if (!isCurrentRequest()) return;
             initialAggregateFreshRef.current = false;
@@ -409,13 +440,24 @@ export function App() {
       const current = operations;
       if (current === null || boardInFlightRef.current.has(stage)) return;
       boardInFlightRef.current.add(stage);
+      boardAbortControllersRef.current.get(stage)?.abort();
+      const controller = new AbortController();
+      boardAbortControllersRef.current.set(stage, controller);
       const requestVersion = boardRequestVersionRef.current;
       const period = requestPeriodForOperations(operationsPeriod);
       setBoardStates((previous) => ({ ...previous, [stage]: { loading: true, error: null } }));
       const loaded = boardLoadedRef.current[stage] ?? 0;
       try {
-        const page = await api.operationsBoard(period, stage, loaded, boardFiltersRef.current);
+        const page = await api.operationsBoard(
+          period,
+          stage,
+          loaded,
+          boardFiltersRef.current,
+          controller.signal,
+          10,
+        );
         if (
+          controller.signal.aborted ||
           requestVersion !== boardRequestVersionRef.current ||
           period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
           period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
@@ -435,7 +477,12 @@ export function App() {
         const next = loaded + page.prds.length + page.specs.length + page.tasks.length;
         boardLoadedRef.current = { ...boardLoadedRef.current, [stage]: next };
       } catch (cause) {
-        if (requestVersion !== boardRequestVersionRef.current || isAbortError(cause)) return;
+        if (
+          controller.signal.aborted ||
+          requestVersion !== boardRequestVersionRef.current ||
+          isAbortError(cause)
+        )
+          return;
         setBoardStates((previous) => ({
           ...previous,
           [stage]: {
@@ -446,6 +493,8 @@ export function App() {
       } finally {
         if (requestVersion === boardRequestVersionRef.current) {
           boardInFlightRef.current.delete(stage);
+          if (boardAbortControllersRef.current.get(stage) === controller)
+            boardAbortControllersRef.current.delete(stage);
           setBoardStates((previous) =>
             previous[stage]?.error === null
               ? { ...previous, [stage]: { loading: false, error: null } }
@@ -466,6 +515,8 @@ export function App() {
     boardFilterKeyRef.current = filterKey;
     boardFiltersRef.current = normalizedFilters;
     boardRequestVersionRef.current += 1;
+    for (const controller of boardAbortControllersRef.current.values()) controller.abort();
+    boardAbortControllersRef.current.clear();
     boardInFlightRef.current.clear();
     boardInitialPageRef.current.clear();
     boardLoadedRef.current = {};
@@ -490,64 +541,6 @@ export function App() {
           },
     );
   }, []);
-  const loadFilteredWorkList = useCallback(
-    async (filters: OperationsPageFilters) => {
-      const requestVersion = ++boardRequestVersionRef.current;
-      const period = requestPeriodForOperations(operationsPeriod);
-      const normalizedFilters = normalizeWorkListFilters(filters, workListFiltersRef.current);
-      workListFiltersRef.current = normalizedFilters;
-      const requestedKind = selectedWorkListKinds(normalizedFilters.kind);
-      const loadKindStage = async (stage: WorkBoardStage, kind: "prd" | "spec" | "task") => {
-        return collectWorkListPages(async (offset) => {
-          const page = await api.operationsBoard(
-            period,
-            stage,
-            offset,
-            { ...normalizedFilters, kind },
-            undefined,
-            50,
-          );
-          return {
-            total: page.total,
-            received: page.prds.length + page.specs.length + page.tasks.length,
-            value: page,
-          };
-        });
-      };
-      try {
-        const pages = (
-          await Promise.all(
-            initialWorkBoardStages.flatMap((stage) =>
-              requestedKind.map((kind) => loadKindStage(stage, kind)),
-            ),
-          )
-        ).flat();
-        if (
-          requestVersion !== boardRequestVersionRef.current ||
-          period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
-          period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
-        )
-          return;
-        const unique = <T extends { id: string }>(rows: readonly T[]) =>
-          [...new Map(rows.map((row) => [row.id, row] as const)).values()];
-        setOperations((current) =>
-          current === null
-            ? current
-            : {
-                ...current,
-                prds: unique(pages.flatMap((page) => page.prds)),
-                specs: unique(pages.flatMap((page) => page.specs)),
-                tasks: unique(pages.flatMap((page) => page.tasks)),
-              },
-        );
-      } catch (cause) {
-        if (requestVersion !== boardRequestVersionRef.current || isAbortError(cause)) return;
-        setError(cause instanceof Error ? cause.message : String(cause));
-        setFailedArea("operations");
-      }
-    },
-    [api, operationsPeriod],
-  );
   const loadOverviewStatusPage = useCallback(
     async (stage: WorkBoardStage, kind: OverviewStatusKind, offset: number) => {
       const key = overviewStatusPageKey(stage, kind);
@@ -565,7 +558,9 @@ export function App() {
         },
       }));
       try {
-        const page = await api.operationsBoard(period, stage, offset, { kind });
+        const page = await api.operationsBoard(period, stage, offset, {
+          kind: kind === "task" ? "all-tasks" : kind,
+        });
         if (
           requestVersion !== boardRequestVersionRef.current ||
           period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
@@ -621,7 +616,8 @@ export function App() {
           requestVersion !== boardRequestVersionRef.current ||
           period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
           period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
-        ) return;
+        )
+          return;
         const items = kind === "task" ? page.tasks : kind === "spec" ? page.specs : page.prds;
         setOverviewClassificationPages((previous) => ({
           ...previous,
@@ -637,8 +633,10 @@ export function App() {
         setOverviewClassificationPages((previous) => ({
           ...previous,
           [key]: {
-            items: previous[key]?.items ?? [], total: previous[key]?.total ?? 0,
-            loading: false, error: cause instanceof Error ? cause.message : String(cause),
+            items: previous[key]?.items ?? [],
+            total: previous[key]?.total ?? 0,
+            loading: false,
+            error: cause instanceof Error ? cause.message : String(cause),
           },
         }));
       } finally {
@@ -683,16 +681,21 @@ export function App() {
     },
     [api, operationsPeriod],
   );
+  const detailExportSource = useOperationsDetailExport({ api, operationsPeriod });
   useEffect(() => {
     if (dashboardView !== "operations" || operations === null) return;
     let cancelled = false;
-    const hydrateBoard = () => {
+    const hydrateBoard = async () => {
       if (cancelled) return;
-      for (const stage of initialWorkBoardStages) {
-        if (!boardInitialPageRef.current.has(stage) && !boardInFlightRef.current.has(stage)) {
-          boardInitialPageRef.current.add(stage);
-          void loadMoreBoard(stage);
-        }
+      // A page per column preserves a fast first board without monopolising
+      // SQLite's single local worker with nine simultaneous aggregates.
+      const pending = initialWorkBoardStages.filter(
+        (stage) => !boardInitialPageRef.current.has(stage) && !boardInFlightRef.current.has(stage),
+      );
+      for (let offset = 0; offset < pending.length && !cancelled; offset += 3) {
+        const batch = pending.slice(offset, offset + 3);
+        for (const stage of batch) boardInitialPageRef.current.add(stage);
+        await Promise.all(batch.map((stage) => loadMoreBoard(stage)));
       }
     };
     // The quick projection is the complete first-fold contract. Defer the
@@ -700,8 +703,8 @@ export function App() {
     // the useful overview when SQLite must materialise the board view.
     const idle =
       typeof window.requestIdleCallback === "function"
-        ? { kind: "idle" as const, id: window.requestIdleCallback(hydrateBoard) }
-        : { kind: "timeout" as const, id: window.setTimeout(hydrateBoard, 0) };
+        ? { kind: "idle" as const, id: window.requestIdleCallback(() => void hydrateBoard()) }
+        : { kind: "timeout" as const, id: window.setTimeout(() => void hydrateBoard(), 0) };
     return () => {
       cancelled = true;
       if (idle.kind === "idle") window.cancelIdleCallback(idle.id);
@@ -710,9 +713,11 @@ export function App() {
   }, [dashboardView, loadMoreBoard, operations]);
 
   const refreshFromDialog = async (reconcileOpenWork: boolean) => {
-    if (reconcileOpenWork) setReconciliationResult(null);
+    if (reconcileOpenWork) {
+      setReconciliationResult(null);
+    }
     setRefreshDialog(reconcileOpenWork ? "reconciling" : "refreshing");
-    await refresh(false, reconcileOpenWork);
+    await refresh(false, reconcileOpenWork, !reconcileOpenWork);
     setRefreshDialog(null);
   };
   useAppEffects({
@@ -776,6 +781,53 @@ export function App() {
     void loadCostSummary();
   }, [costs?.currency, currency, loadCostSummary]);
 
+  const loadMoreTraceTasks = useCallback(
+    async (loadAll = false, reset = false): Promise<OperationsProjection["tasks"]> => {
+      if (traceTasksLoadingRef.current) return traceTasksRef.current;
+      if (reset) {
+        traceTaskCursorRef.current = { offset: 0, stageIndex: 0 };
+        traceTasksRef.current = [];
+        setTraceTasks([]);
+        setTraceTasksHasMore(true);
+      }
+      if (traceTaskCursorRef.current.stageIndex >= traceTaskSearchStages.length)
+        return traceTasksRef.current;
+
+      traceTasksLoadingRef.current = true;
+      setTraceTasksLoading(true);
+      try {
+        do {
+          const cursor = traceTaskCursorRef.current;
+          const stage = traceTaskSearchStages[cursor.stageIndex];
+          if (stage === undefined) break;
+          const page = await api.operationsBoard(
+            { from: null, to: null },
+            stage,
+            cursor.offset,
+            { kind: "all-tasks" },
+            undefined,
+            traceabilityTaskPageSize,
+          );
+          const updated = appendTraceabilityTaskPage({
+            cursor,
+            page,
+            tasks: traceTasksRef.current,
+          });
+          traceTasksRef.current = updated.tasks;
+          setTraceTasks(traceTasksRef.current);
+          traceTaskCursorRef.current = updated.cursor;
+          if (page.tasks.length > 0 && !loadAll) break;
+        } while (traceTaskCursorRef.current.stageIndex < traceTaskSearchStages.length);
+        setTraceTasksHasMore(traceTaskCursorRef.current.stageIndex < traceTaskSearchStages.length);
+        return traceTasksRef.current;
+      } finally {
+        traceTasksLoadingRef.current = false;
+        setTraceTasksLoading(false);
+      }
+    },
+    [api, setTraceTasks],
+  );
+
   const selectDashboardView = async (nextView: DashboardView) => {
     setDashboardView(nextView);
     window.scrollTo({ left: 0, top: 0 });
@@ -785,18 +837,13 @@ export function App() {
       costSummaryAbortRef.current?.abort();
     }
     if (nextView === "traceability") {
-      let candidates = traceTasks.length > 0 ? traceTasks : (operations?.tasks ?? []);
+      let candidates = traceTasks;
       if (candidates.length === 0) {
         const requestVersion = boardRequestVersionRef.current;
         // Traceability is a global task selector, not a temporal work-board view.
-        for (const stage of traceTaskSearchStages) {
-          const page = await api.operationsBoard({ from: null, to: null }, stage, 0);
-          if (requestVersion !== boardRequestVersionRef.current) return;
-          if (page.tasks.length === 0) continue;
-          candidates = page.tasks;
-          setTraceTasks(page.tasks);
-          break;
-        }
+        candidates = await loadMoreTraceTasks(false, true);
+        if (requestVersion !== boardRequestVersionRef.current) return;
+        setTraceTasks(candidates);
       }
       const ordered = candidates.toSorted(
         (a, b) =>
@@ -824,9 +871,9 @@ export function App() {
     () =>
       new Map(
         (displayedCosts ?? costs)?.runs.map(
-          (run) => [run.run_id, currency === "USD" ? run.estimated_usd : run.estimated_brl] as const,
-        ) ??
-          [],
+          (run) =>
+            [run.run_id, currency === "USD" ? run.estimated_usd : run.estimated_brl] as const,
+        ) ?? [],
       ),
     [costs, currency, displayedCosts],
   );
@@ -868,13 +915,7 @@ export function App() {
   // prevents every tab from briefly presenting zero/empty placeholders while
   // its coherent replacement snapshot or page is still in flight.
   const globalLoadingPending =
-    periodTransitionPending ||
-    (currency === "USD" && costs?.currency !== currency) ||
-    (loadingArea !== null && loadingArea !== "costs") ||
-    costSurfaceLoading ||
-    operationsSurfaceLoading ||
-    entityPage.loading ||
-    Object.values(boardStates).some((state) => state.loading);
+    periodTransitionPending || (currency === "USD" && costs?.currency !== currency);
   // The stale snapshot is useful only while the initial screen still waits
   // for data.  Once Operations has arrived, the normal dashboard is the
   // clearest confirmation that it opened; do not leave a duplicate toast.
@@ -884,7 +925,10 @@ export function App() {
       setSnapshotNoticeDelayElapsed(false);
       return undefined;
     }
-    const timeout = window.setTimeout(() => setSnapshotNoticeDelayElapsed(true), snapshotNoticeDelayMs);
+    const timeout = window.setTimeout(
+      () => setSnapshotNoticeDelayElapsed(true),
+      snapshotNoticeDelayMs,
+    );
     return () => window.clearTimeout(timeout);
   }, [initialDataPending, snapshotNoticeDismissed, snapshotUpdating]);
   const snapshotNoticeVisible = shouldShowSnapshotNotice({
@@ -895,9 +939,16 @@ export function App() {
   });
   const snapshotNotice = snapshotNoticeVisible ? (
     <div aria-live="polite" className="app-notice app-snapshot-status" role="status">
-      <span>Exibindo o último snapshot local validado. Os dados canônicos estão sendo atualizados em segundo plano e estarão atuais na próxima abertura.</span>
+      <span>
+        Exibindo o último snapshot local validado. Os dados canônicos estão sendo atualizados em
+        segundo plano e estarão atuais na próxima abertura.
+      </span>
       <button
-        aria-label={costLocale === "pt-BR" ? "Fechar aviso de atualização do snapshot" : "Dismiss snapshot update notice"}
+        aria-label={
+          costLocale === "pt-BR"
+            ? "Fechar aviso de atualização do snapshot"
+            : "Dismiss snapshot update notice"
+        }
         onClick={() => setSnapshotNoticeDismissed(true)}
         type="button"
       >
@@ -952,6 +1003,7 @@ export function App() {
             onCurrencyChange: setCurrency,
             onLoadingChange: setCostSurfaceLoading,
             onLocaleChange: changeDashboardLocale,
+            onLoadMoreTraceTasks: loadMoreTraceTasks,
             onOpenTrace: (taskId) => void openTrace(taskId),
             onRefresh: () => setRefreshDialog("choose"),
             onRetry: retryLastLoad,
@@ -965,12 +1017,15 @@ export function App() {
             selectedTraceTaskId,
             trace,
             traceLoadingTaskId,
+            traceTasksHasMore,
+            traceTasksLoading,
             traceTasks,
           })}
           capabilityNavigation={capabilityNavigation}
           boardTotals={boardTotals}
           boardKindTotals={boardKindTotals}
           boardExportSource={boardExportSource}
+          detailExportSource={detailExportSource}
           boardStates={boardStates}
           data={renderedOperations}
           datePreset={operationsPeriod.preset}
@@ -995,13 +1050,14 @@ export function App() {
                 : view === "executions"
                   ? "executions"
                   : view === "runs"
-                      ? "runs"
-                      : null;
+                    ? "runs"
+                    : null;
             if (kind !== null) void loadOperationsEntityPage(kind);
             else if (view === "changes" || view === "decisions")
               void loadOperationsLifecyclePage(view);
             else void loadOperationsDetails();
           }}
+          onLoadMacroMetrics={() => void loadOperationsDetails()}
           onEntityPageChange={(offset) => {
             if (entityPageKind === "changes" || entityPageKind === "decisions")
               void loadOperationsLifecyclePage(entityPageKind, offset);
@@ -1009,7 +1065,10 @@ export function App() {
           }}
           onEntityFiltersChange={loadFilteredOperationsPage}
           onBoardFiltersChange={loadFilteredBoard}
-          onWorkListFiltersChange={loadFilteredWorkList}
+          onWorkListFiltersChange={loadWorkListFilters}
+          onWorkListPageChange={(offset) =>
+            void loadWorkListPage(workListFiltersRef.current, offset)
+          }
           onBoardTypeChange={(kind) =>
             loadFilteredBoard({
               ...boardFiltersRef.current,
@@ -1017,12 +1076,13 @@ export function App() {
             })
           }
           onWorkListTypeChange={(kind) =>
-            void loadFilteredWorkList({
+            void loadWorkListPage({
               ...workListFiltersRef.current,
               kind: kind === "all" ? "" : kind,
             })
           }
           onLoadMoreBoard={(stage) => void loadMoreBoard(stage)}
+          workListPage={workListPage}
           statusPage={(stage, kind) => overviewStatusPages[overviewStatusPageKey(stage, kind)]}
           onLoadStatusPage={(stage, kind, offset) =>
             void loadOverviewStatusPage(stage, kind, offset)
@@ -1051,8 +1111,11 @@ export function App() {
             operationsDetailAbortRef.current = null;
             operationsPageAbortRef.current?.abort();
             operationsPageAbortRef.current = null;
+            resetWorkListPage();
             ++operationsPageRequestVersionRef.current;
             boardRequestVersionRef.current += 1;
+            for (const controller of boardAbortControllersRef.current.values()) controller.abort();
+            boardAbortControllersRef.current.clear();
             boardInFlightRef.current.clear();
             boardInitialPageRef.current.clear();
             boardLoadedRef.current = {};
@@ -1092,8 +1155,6 @@ export function App() {
           closeDocument={closeDocument}
           costLocale={costLocale}
           documentDetail={documentDetail}
-          error={error}
-          failedArea={failedArea}
           helpOpen={helpOpen}
           loadingArea={dashboardView === "cost-monitor" && costs === null ? null : loadingArea}
           operations={renderedOperations}
@@ -1105,7 +1166,6 @@ export function App() {
           traceLoadingTaskId={traceLoadingTaskId}
           onCloseHelp={() => setHelpOpen(false)}
           onCloseTrace={() => setTrace(null)}
-          onDismissError={() => setError(null)}
           onDismissReconciliation={() => setReconciliationResult(null)}
           onOpenDocument={(kind, id) => void openDocument(kind, id)}
           onOpenTrace={(taskId) => void openTrace(taskId)}
@@ -1113,7 +1173,6 @@ export function App() {
           onOpenTraceMacro={openTraceMacro}
           onRefreshCancel={() => setRefreshDialog(null)}
           onRefreshFromDialog={(reconcileOpenWork) => void refreshFromDialog(reconcileOpenWork)}
-          onRetry={retryLastLoad}
           setTraceLink={(value) => setTraceLink(value)}
         />
       </PeriodTransitionShell>