@zaip-ai/cli 1.3.0 → 1.3.2

package/templates/.agents/dashboard/apps/frontend/dist/index.html

@@ -6,15 +6,15 @@
     <meta name="color-scheme" content="dark light" />
     <link rel="icon" type="image/png" href="/icon_zaip.png" />
     <title>ZAIP-AIOS</title>
-    <script type="module" crossorigin src="/assets/index-C4aIB1PV.js"></script>
+    <script type="module" crossorigin src="/assets/index-CuMcoUni.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-D9-fqq9M.js">
-    <link rel="modulepreload" crossorigin href="/assets/cost-monitor-N5Csr0RP.js">
-    <link rel="modulepreload" crossorigin href="/assets/react-vendor-BEsJ-FYH.js">
-    <link rel="modulepreload" crossorigin href="/assets/icons-vendor-C0fj2uU9.js">
-    <link rel="modulepreload" crossorigin href="/assets/traceability-B6y6Gw12.js">
-    <link rel="stylesheet" crossorigin href="/assets/cost-monitor-BZ5WdaMN.css">
+    <link rel="modulepreload" crossorigin href="/assets/cost-monitor-DKwP1stV.js">
+    <link rel="modulepreload" crossorigin href="/assets/react-vendor-B3TJrD4O.js">
+    <link rel="modulepreload" crossorigin href="/assets/icons-vendor-B_lDDHn1.js">
+    <link rel="modulepreload" crossorigin href="/assets/traceability-7f1j5wx3.js">
+    <link rel="stylesheet" crossorigin href="/assets/cost-monitor-PoJA2PI1.css">
     <link rel="stylesheet" crossorigin href="/assets/traceability-DFY7ZDlu.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-DK_enB5Z.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-B31GMG5O.css">
   </head>
   <body>
     <div id="root"></div>

package/templates/.agents/dashboard/apps/frontend/playwright.dom.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const workspaceRoot = decodeURIComponent(new URL("../../../..", import.meta.url).pathname).replace(
+  /^\/([A-Za-z]:\/)/,
+  "$1",
+);
+const serverPort = process.env.ZAIP_SERVER_PORT ?? "4517";
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://127.0.0.1:${serverPort}`;
+
+export default defineConfig({
+  testDir: "./src",
+  testMatch: "TraceabilityWorkspace.dom.e2e.ts",
+  timeout: 60_000,
+  expect: { timeout: 30_000 },
+  use: {
+    baseURL: `${baseURL}/?token=e2e-token`,
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "node .agents/dashboard/packages/local-runtime/dist/server.cjs",
+    cwd: workspaceRoot,
+    url: `${baseURL}/api/v2/health`,
+    reuseExistingServer: false,
+    timeout: 30_000,
+    env: {
+      ZAIP_UI_TOKEN: "e2e-token",
+      ZAIP_SERVER_PORT: serverPort,
+      ZAIP_WORKSPACE: workspaceRoot,
+      ZAIP_UI_ROOT: `${workspaceRoot}/.agents/dashboard/apps/frontend/dist`,
+    },
+  },
+});

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

@@ -34,36 +34,25 @@ import type {
   OperationsPageFilters,
   PricingCatalog,
   ReconciliationResult,
-  SqliteViewName,
   WorkBoardStage,
 } from "./dashboard-api.js";
 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";
 
 type BoardStageState = { loading: boolean; error: string | null };
-type OperationsExportView =
-  | "work-kanban"
-  | "work-list"
-  | "changes"
-  | "decisions"
-  | "executions"
-  | "runs"
-  | "conversations"
-  | "daily"
-  | "monthly"
-  | "yearly";
 type OverviewStatusKind = "task" | "spec" | "prd";
 type OverviewClassification = "lite" | "standard" | "critical" | "empty" | "structured" | "rework";
 type OverviewStatusPage = {
@@ -110,82 +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,
@@ -252,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);
@@ -293,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);
@@ -307,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>({
@@ -316,15 +238,17 @@ 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
@@ -337,6 +261,8 @@ export function App() {
       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 = {};
@@ -514,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
@@ -540,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]: {
@@ -551,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 } }
@@ -571,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 = {};
@@ -595,68 +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" | "standalone-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);
@@ -674,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 ||
@@ -795,65 +681,21 @@ export function App() {
     },
     [api, operationsPeriod],
   );
-  const detailExportSource = useCallback(
-    (
-      view: OperationsExportView,
-      filters: { query: string; status: string; risk: string; origin: string },
-    ) => {
-      const period = requestPeriodForOperations(operationsPeriod);
-      if (view === "work-kanban") return undefined;
-      const sqliteView = {
-        "work-list": "operations_work_list",
-        changes: "operations_changes",
-        decisions: "operations_decisions",
-        executions: "operations_executions",
-        runs: "operations_agent_invocations",
-        conversations: "operations_conversations",
-        daily: "operations_daily",
-        monthly: "operations_monthly",
-        yearly: "operations_annual",
-      } as const satisfies Partial<Record<OperationsExportView, SqliteViewName>>;
-      const source = sqliteView[view];
-      if (source === undefined) return undefined;
-      const options = (offset: number) => ({
-        offset,
-        limit: 100,
-        ...(filters.query ? { query: filters.query } : {}),
-        ...(filters.status ? { status: filters.status } : {}),
-        ...(filters.risk ? { risk: filters.risk } : {}),
-        ...(filters.origin ? { origin: filters.origin } : {}),
-      });
-      return {
-        prepare: async () => {
-          const firstPage = await api.sqliteViewPage(source, period, options(0));
-          return {
-            totalRows: firstPage.total_count,
-            pages: async function* () {
-              let page = firstPage;
-              while (true) {
-                if (page.rows.length === 0) return;
-                yield page.rows;
-                const nextOffset = page.offset + page.rows.length;
-                if (nextOffset >= page.total_count) return;
-                page = await api.sqliteViewPage(source, period, options(nextOffset));
-              }
-            },
-          };
-        },
-      };
-    },
-    [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
@@ -861,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);
@@ -871,7 +713,9 @@ 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, !reconcileOpenWork);
     setRefreshDialog(null);
@@ -937,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 });
@@ -946,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) =>
@@ -1029,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.
@@ -1123,6 +1003,7 @@ export function App() {
             onCurrencyChange: setCurrency,
             onLoadingChange: setCostSurfaceLoading,
             onLocaleChange: changeDashboardLocale,
+            onLoadMoreTraceTasks: loadMoreTraceTasks,
             onOpenTrace: (taskId) => void openTrace(taskId),
             onRefresh: () => setRefreshDialog("choose"),
             onRetry: retryLastLoad,
@@ -1136,6 +1017,8 @@ export function App() {
             selectedTraceTaskId,
             trace,
             traceLoadingTaskId,
+            traceTasksHasMore,
+            traceTasksLoading,
             traceTasks,
           })}
           capabilityNavigation={capabilityNavigation}
@@ -1174,6 +1057,7 @@ export function App() {
               void loadOperationsLifecyclePage(view);
             else void loadOperationsDetails();
           }}
+          onLoadMacroMetrics={() => void loadOperationsDetails()}
           onEntityPageChange={(offset) => {
             if (entityPageKind === "changes" || entityPageKind === "decisions")
               void loadOperationsLifecyclePage(entityPageKind, offset);
@@ -1181,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,
@@ -1189,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)
@@ -1223,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 = {};
@@ -1264,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}
@@ -1277,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)}
@@ -1285,7 +1173,6 @@ export function App() {
           onOpenTraceMacro={openTraceMacro}
           onRefreshCancel={() => setRefreshDialog(null)}
           onRefreshFromDialog={(reconcileOpenWork) => void refreshFromDialog(reconcileOpenWork)}
-          onRetry={retryLastLoad}
           setTraceLink={(value) => setTraceLink(value)}
         />
       </PeriodTransitionShell>