@zaip-ai/cli 2.2.0 → 3.0.0

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

@@ -1,79 +1,5 @@
-import type { CostMonitorProjection } from "@zaip-ai/dashboard-cost-monitor/contracts";
-import type { CostCurrency, CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
-import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
-import { OperationsPage } from "@zaip-ai/dashboard-operations/react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { AppLoadingBoundary } from "./AppLoadingBoundary.js";
-import type { LoadingArea } from "./AppLoadingPanels.js";
-import { AppOverlays } from "./AppOverlays.js";
-import {
-  isAbortError,
-  isCurrentCostSummaryRequest,
-  isCurrentDashboardRequest,
-  isCurrentOperationsPeriodRequest,
-  isCurrentPeriodTransition,
-  mergeBoardPages,
-  PeriodTransitionOverlay,
-  PeriodTransitionShell,
-  shouldLoadCostSummary,
-} from "./AppRequestGuards.js";
-import {
-  costCalculationGuidePath,
-  pricingSetupPath,
-  projectSetupPath,
-  renderAppSetupRoute,
-} from "./AppSetupRoutes.js";
-import {
-  type BoardStageState,
-  initialWorkBoardStages,
-  type OverviewClassification,
-  type OverviewClassificationPages,
-  type OverviewStatusKind,
-  type OverviewStatusPages,
-  overviewClassificationPageKey,
-  overviewStatusPageKey,
-  traceTaskSearchStages,
-} from "./AppWorkBoard.js";
-import { currencyKey, initialDashboardView, savedLocale } from "./app-preferences.js";
-import { readDashboardSessionToken } from "./app-session-token.js";
-import { renderDashboardAlternateContent } from "./DashboardAlternateContent.js";
-import { DashboardCapabilityNav, type DashboardView } from "./DashboardCapabilityNav.js";
-import { DashboardGlobalSettings } from "./DashboardGlobalSettings.js";
-import type {
-  FxRate,
-  OperationsBoardPage,
-  OperationsEntityPageKind,
-  OperationsLifecyclePageKind,
-  OperationsPageFilters,
-  PricingCatalog,
-  ReconciliationResult,
-  WorkBoardStage,
-} from "./dashboard-api.js";
-import { DashboardApiClient } from "./dashboard-api.js";
-import { reconciliationCommandOutcome } from "./dashboard-api-reconciliation.js";
-import {
-  type DashboardIdentityResponse,
-  defaultDashboardIdentity,
-  mergeDashboardIdentity,
-} from "./dashboard-identity.js";
-import {
-  defaultOperationsPeriod,
-  isAllTimeDisplayRangeChange,
-  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 { 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";
+import { AppDashboardContent } from "./AppDashboardContent.js";
+import { useDashboardAppModel } from "./use-dashboard-app-model.js";
 
 export {
   isAbortError,
@@ -89,1192 +15,5 @@ export {
   shouldLoadCostSummary,
 } from "./AppRequestGuards.js";
 export function App() {
-  useEffect(() => {
-    const token = readDashboardSessionToken();
-    if (!token) return undefined;
-    // EventSource remains open for hidden tabs and reconnects after reload,
-    // giving the local runtime a browser-owned lifecycle without a fast poll.
-    const lease = new EventSource(`/api/v2/browser-lease?token=${encodeURIComponent(token)}`);
-    return () => lease.close();
-  }, []);
-  const [snapshotUpdating, setSnapshotUpdating] = useState(false);
-  const [snapshotNoticeDismissed, setSnapshotNoticeDismissed] = useState(false);
-  const [snapshotNoticeDelayElapsed, setSnapshotNoticeDelayElapsed] = useState(false);
-  const token = useMemo(readDashboardSessionToken, []);
-  const api = useMemo(() => new DashboardApiClient(token), [token]);
-  const { loadCostDetail, loadCostReadModelPage, loadCostRunPage, loadCostGroupPage } =
-    useAppCostLoaders(api);
-  const [dashboardView, setDashboardView] = useState<DashboardView | null>(() =>
-    initialDashboardView(window.location.pathname),
-  );
-  const dashboardViewRef = useRef(dashboardView);
-  dashboardViewRef.current = dashboardView;
-  const [operations, setOperations] = useState<OperationsProjection | null>(null);
-  const [entityPage, setEntityPage] = useState<{
-    offset: number;
-    total: number | null;
-    loading: boolean;
-    error: string | null;
-    aggregation?: "canonical_entity" | "page_partial" | undefined;
-  }>({ offset: 0, total: null, loading: false, error: null });
-  const [entityPageKind, setEntityPageKind] = useState<
-    OperationsEntityPageKind | OperationsLifecyclePageKind
-  >("runs");
-  const entityFiltersRef = useRef<OperationsPageFilters>({ query: "", status: "", risk: "" });
-  const [boardTotals, setBoardTotals] = useState<Partial<Record<WorkBoardStage, number>>>({});
-  const [boardKindTotals, setBoardKindTotals] = useState<
-    Partial<Record<WorkBoardStage, OperationsBoardPage["totals_by_kind"]>>
-  >({});
-  const [boardStates, setBoardStates] = useState<Partial<Record<WorkBoardStage, BoardStageState>>>(
-    {},
-  );
-  const [overviewStatusPages, setOverviewStatusPages] = useState<OverviewStatusPages>({});
-  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);
-  const [currency, setCurrency] = useState<CostCurrency>(() =>
-    window.localStorage.getItem(currencyKey) === "USD" ? "USD" : "BRL",
-  );
-  const currencyRef = useRef(currency);
-  currencyRef.current = currency;
-  // Language is the global selector's source of truth for the paired display
-  // currency, so Operations and Cost Monitor cannot diverge.
-  const changeDashboardLocale = useCallback((next: CostLocale) => {
-    setCostLocale(next);
-    setCurrency(next === "en-US" ? "USD" : "BRL");
-  }, []);
-  const [operationsPeriod, setOperationsPeriod] = useState(() => defaultOperationsPeriod);
-  // All Time may update its displayed factual range without changing the
-  // unbounded request identity. Keep the refresh callback stable for that
-  // presentation-only synchronization.
-  const operationsRequestFrom =
-    operationsPeriod.preset === "all" ? null : operationsPeriod.range.start;
-  const operationsRequestTo = operationsPeriod.preset === "all" ? null : operationsPeriod.range.end;
-  const operationsRequestPeriod = useMemo(
-    () => ({ from: operationsRequestFrom, to: operationsRequestTo }),
-    [operationsRequestFrom, operationsRequestTo],
-  );
-  const operationsPeriodRef = useRef(operationsPeriod);
-  operationsPeriodRef.current = operationsPeriod;
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [pricing, setPricing] = useState<PricingCatalog | null>(null);
-  const [fxRate, setFxRate] = useState<FxRate | null>(null);
-  const [pathname, setPathname] = useState(window.location.pathname);
-  const [operationsLoading, setOperationsLoading] = useState(true);
-  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);
-  const [refreshDialog, setRefreshDialog] = useState<
-    "choose" | "refreshing" | "reconciling" | null
-  >(null);
-  useEffect(() => {
-    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>(
-    null,
-  );
-  const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
-  const [dashboardIdentity, setDashboardIdentity] = useState(defaultDashboardIdentity);
-  const applyDashboardIdentity = useCallback((identity: DashboardIdentityResponse) => {
-    setDashboardIdentity((current) => mergeDashboardIdentity(current, identity));
-  }, []);
-  useEffect(() => {
-    let cancelled = false;
-    // Identity is workspace metadata, rather than period data. Start it beside
-    // the compact projection and never make period/filter refreshes erase it.
-    void api
-      .dashboardIdentity()
-      .then((identity) => {
-        if (!cancelled) applyDashboardIdentity(identity);
-      })
-      // The compact Operations projection remains usable when an older local
-      // runtime has not yet supplied this optional endpoint.
-      .catch(() => {});
-    return () => {
-      cancelled = true;
-    };
-  }, [api, applyDashboardIdentity]);
-  const {
-    closeDocument,
-    documentDetail,
-    openDocument,
-    openTrace,
-    openTraceChange,
-    openTraceMacro,
-    selectedTraceTaskId,
-    setSelectedTraceTaskId,
-    setTrace,
-    setTraceLink,
-    setTraceLoadingTaskId,
-    setTraceTasks,
-    trace,
-    traceLink,
-    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);
-  const costSummaryRequestVersion = useRef(0);
-  const costSummaryAbortRef = useRef<AbortController | null>(null);
-  const costsLoadedRef = useRef(false);
-  const operationsDetailLoadedRef = useRef(false);
-  const operationsDetailCancelRef = useRef<(() => void) | null>(null);
-  const operationsDetailAbortRef = useRef<AbortController | null>(null);
-  const operationsPageAbortRef = useRef<AbortController | null>(null);
-  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>({
-    query: "",
-    status: "",
-    risk: "",
-    origin: "",
-    kind: "",
-  });
-  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,
-      refreshProjection = false,
-      reloadCostSummary = 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 = {};
-      setBoardTotals({});
-      setBoardKindTotals({});
-      setBoardStates({});
-      setOverviewStatusPages({});
-      setOverviewClassificationPages({});
-      const requestVersion = ++refreshVersion.current;
-      const transitionVersion = periodTransitionVersionRef.current;
-      const activeDashboardView = dashboardViewRef.current;
-      const period = operationsRequestPeriod;
-      const isCurrentRequest = () =>
-        isCurrentDashboardRequest(requestVersion, refreshVersion.current) &&
-        isCurrentOperationsPeriodRequest(
-          requestVersion,
-          refreshVersion.current,
-          period,
-          requestPeriodForOperations(operationsPeriodRef.current),
-        );
-      if (visible) {
-        setOperationsLoading(true);
-        setLoadingArea("operations");
-      }
-      setError(null);
-      setFailedArea(null);
-      try {
-        if (reconcileOpenWork) {
-          const reconciliationResponse = await api.reconcileOpenWork(currency, period);
-          const commandOutcome = reconciliationCommandOutcome(
-            reconciliationResponse,
-            isCurrentRequest(),
-          );
-          // The compact reconciliation outcome is useful on its own. Reveal
-          // it before the optional quick GET so a historical snapshot load
-          // cannot keep the operator in the progress dialog.
-          setReconciliationResult(commandOutcome.reconciliation);
-          if (commandOutcome.dismissProgressDialog) setRefreshDialog(null);
-          if (!commandOutcome.applySnapshotState) return false;
-          setSnapshotUpdating(reconciliationResponse.snapshot_state === "updating");
-          // Reconciliation returns promptly while a new SQLite generation may
-          // still be promoted. Only read a compact Operations projection when
-          // that promotion is already complete; the revision observer handles
-          // the deferred case without fetching Cost Monitor detail data.
-          if (commandOutcome.reloadQuickProjection) {
-            const projection = await api.operations(period, "quick", undefined, true);
-            if (!isCurrentRequest()) return false;
-            initialAggregateFreshRef.current = false;
-            setOperations(projection);
-            quickOverviewMetricsRef.current = projection.summary.overview_metrics;
-            operationsDetailLoadedRef.current = false;
-            setLastUpdatedAt(projection.summary.source_latest_at);
-          }
-        } else if (refreshProjection) {
-          let snapshot: Awaited<ReturnType<typeof api.refreshProjection>>;
-          snapshot = await api.refreshProjection(currency, period);
-          if (!isCurrentRequest()) return false;
-          setOperations(snapshot.operations);
-          quickOverviewMetricsRef.current = snapshot.operations.summary.overview_metrics;
-          operationsDetailLoadedRef.current = true;
-          setCosts(snapshot.costs);
-          costsLoadedRef.current = true;
-          setDisplayedCosts(null);
-          const dashboard = snapshot.dashboard;
-          if (dashboard) {
-            setDashboardIdentity((current) => mergeDashboardIdentity(current, dashboard));
-          }
-          setLastUpdatedAt(snapshot.projection.source_latest_at);
-        } else {
-          {
-            // First paint is aggregate-only; board and detail data are loaded
-            // on their own bounded routes rather than hydrating entity arrays.
-            const [projection, costSummary] = await Promise.all([
-              api.operations(period, "quick", undefined, initialAggregateFreshRef.current),
-              // 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" || reloadCostSummary
-                ? api.costMonitor(currency, period, "summary")
-                : Promise.resolve(null),
-            ]);
-            if (!isCurrentRequest()) return false;
-            initialAggregateFreshRef.current = false;
-            setOperations(projection);
-            quickOverviewMetricsRef.current = projection.summary.overview_metrics;
-            operationsDetailLoadedRef.current = false;
-            if (costSummary !== null) {
-              setCosts(costSummary);
-              // This is only a first-fold placeholder.  It must not suppress
-              // the factual, narrow Cost summary when the user opens Cost.
-              costsLoadedRef.current = false;
-              setDisplayedCosts(null);
-            }
-            setLastUpdatedAt(projection.summary.source_latest_at);
-          }
-        }
-        return true;
-      } catch (cause) {
-        if (!isCurrentRequest()) return false;
-        setError(cause instanceof Error ? cause.message : String(cause));
-        setFailedArea(activeDashboardView === "cost-monitor" ? "costs" : "operations");
-        return false;
-      } finally {
-        if (
-          isCurrentRequest() &&
-          isCurrentPeriodTransition(transitionVersion, periodTransitionVersionRef.current)
-        )
-          setPeriodTransitionPending(false);
-        if (visible && isCurrentRequest()) {
-          setOperationsLoading(false);
-          setLoadingArea((current) => (current === "operations" ? null : current));
-        }
-      }
-    },
-    [api, currency, operationsRequestPeriod],
-  );
-  const loadOperationsDetails = useCallback(
-    async (signal?: AbortSignal): Promise<OperationsProjection | null> => {
-      if (operationsDetailLoadedRef.current) return null;
-      if (detailLoadInFlight.current) return null;
-      if (signal?.aborted) return null;
-      operationsDetailAbortRef.current?.abort();
-      const controller = signal === undefined ? new AbortController() : null;
-      const requestSignal = signal ?? controller?.signal;
-      if (requestSignal === undefined) return null;
-      if (controller !== null) operationsDetailAbortRef.current = controller;
-      detailLoadInFlight.current = true;
-      costLoadingCount.current += 1;
-      setLoadingArea("costs");
-      setFailedArea(null);
-      try {
-        const requestVersion = ++refreshVersion.current;
-        const period = requestPeriodForOperations(operationsPeriod);
-        const isCurrentRequest = () =>
-          isCurrentDashboardRequest(requestVersion, refreshVersion.current) &&
-          isCurrentOperationsPeriodRequest(
-            requestVersion,
-            refreshVersion.current,
-            period,
-            requestPeriodForOperations(operationsPeriodRef.current),
-          );
-        const projection = await api.operations(period, "detail", requestSignal);
-        if (!isCurrentRequest()) return null;
-        setOperations(projection);
-        operationsDetailLoadedRef.current = true;
-        return projection;
-      } catch (cause) {
-        if (requestSignal.aborted || isAbortError(cause)) return null;
-        setError(cause instanceof Error ? cause.message : String(cause));
-        setFailedArea("operations");
-        return null;
-      } finally {
-        if (controller !== null && operationsDetailAbortRef.current === controller) {
-          operationsDetailAbortRef.current = null;
-        }
-        detailLoadInFlight.current = false;
-        costLoadingCount.current = Math.max(0, costLoadingCount.current - 1);
-        if (costLoadingCount.current === 0) {
-          setLoadingArea((current) => (current === "costs" ? null : current));
-        }
-      }
-    },
-    [api, operationsPeriod],
-  );
-  const { loadOperationsEntityPage, loadOperationsLifecyclePage } = useAppOperationsPages({
-    api,
-    entityFiltersRef,
-    operationsPageAbortRef,
-    operationsPageRequestVersionRef,
-    operationsPeriod,
-    operationsPeriodRef,
-    refreshVersion,
-    setEntityPage,
-    setEntityPageKind,
-    setOperations,
-  });
-  const loadFilteredOperationsPage = useCallback(
-    (
-      view: "runs" | "conversations" | "executions" | "changes" | "decisions",
-      filters: OperationsPageFilters,
-    ) => {
-      entityFiltersRef.current = filters;
-      if (view === "changes" || view === "decisions")
-        void loadOperationsLifecyclePage(view, 0, filters);
-      else void loadOperationsEntityPage(view, 0, filters);
-    },
-    [loadOperationsEntityPage, loadOperationsLifecyclePage],
-  );
-  const loadMoreBoard = useCallback(
-    async (stage: WorkBoardStage) => {
-      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,
-          controller.signal,
-          10,
-        );
-        if (
-          controller.signal.aborted ||
-          requestVersion !== boardRequestVersionRef.current ||
-          period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
-          period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
-        )
-          return;
-        setOperations((previous) =>
-          previous === null
-            ? previous
-            : {
-                ...mergeBoardPages(previous, [page]),
-                // Board pages are entity data only. The quick aggregate keeps charts coherent.
-                summary: previous.summary,
-              },
-        );
-        setBoardTotals((previous) => ({ ...previous, [stage]: page.total }));
-        setBoardKindTotals((previous) => ({ ...previous, [stage]: page.totals_by_kind }));
-        const next = loaded + page.prds.length + page.specs.length + page.tasks.length;
-        boardLoadedRef.current = { ...boardLoadedRef.current, [stage]: next };
-      } catch (cause) {
-        if (
-          controller.signal.aborted ||
-          requestVersion !== boardRequestVersionRef.current ||
-          isAbortError(cause)
-        )
-          return;
-        setBoardStates((previous) => ({
-          ...previous,
-          [stage]: {
-            loading: false,
-            error: cause instanceof Error ? cause.message : String(cause),
-          },
-        }));
-      } 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 } }
-              : previous,
-          );
-        }
-      }
-    },
-    [api, operations, operationsPeriod],
-  );
-  const loadFilteredBoard = useCallback((filters: OperationsPageFilters) => {
-    const normalizedFilters = {
-      ...filters,
-      kind: filters.kind ?? boardFiltersRef.current.kind ?? "",
-    };
-    const filterKey = `${normalizedFilters.query}|${normalizedFilters.status}|${normalizedFilters.risk}|${normalizedFilters.origin ?? ""}|${normalizedFilters.kind}`;
-    if (filterKey === boardFilterKeyRef.current) return;
-    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 = {};
-    setBoardTotals({});
-    setBoardKindTotals({});
-    setBoardStates({});
-    setOverviewStatusPages({});
-    setOverviewClassificationPages({});
-    setOperations((current) =>
-      current === null
-        ? current
-        : {
-            ...current,
-            prds: [],
-            specs: [],
-            tasks: [],
-            changes: [],
-            summary:
-              filterKey === "||||" && quickOverviewMetricsRef.current !== undefined
-                ? { ...current.summary, overview_metrics: quickOverviewMetricsRef.current }
-                : current.summary,
-          },
-    );
-  }, []);
-  const loadOverviewStatusPage = useCallback(
-    async (stage: WorkBoardStage, kind: OverviewStatusKind, offset: number) => {
-      const key = overviewStatusPageKey(stage, kind);
-      if (overviewStatusInFlightRef.current.has(key)) return;
-      overviewStatusInFlightRef.current.add(key);
-      const requestVersion = boardRequestVersionRef.current;
-      const period = requestPeriodForOperations(operationsPeriod);
-      setOverviewStatusPages((previous) => ({
-        ...previous,
-        [key]: {
-          items: offset === 0 ? [] : (previous[key]?.items ?? []),
-          total: previous[key]?.total ?? 0,
-          loading: true,
-          error: null,
-        },
-      }));
-      try {
-        const page = await api.operationsBoard(period, stage, offset, {
-          kind: kind === "task" ? "all-tasks" : kind,
-        });
-        if (
-          requestVersion !== boardRequestVersionRef.current ||
-          period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
-          period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
-        )
-          return;
-        const items = kind === "task" ? page.tasks : kind === "spec" ? page.specs : page.prds;
-        setOverviewStatusPages((previous) => ({
-          ...previous,
-          [key]: {
-            items: offset === 0 ? items : [...(previous[key]?.items ?? []), ...items],
-            total: page.total,
-            loading: false,
-            error: null,
-          },
-        }));
-      } catch (cause) {
-        if (requestVersion !== boardRequestVersionRef.current || isAbortError(cause)) return;
-        setOverviewStatusPages((previous) => ({
-          ...previous,
-          [key]: {
-            items: previous[key]?.items ?? [],
-            total: previous[key]?.total ?? 0,
-            loading: false,
-            error: cause instanceof Error ? cause.message : String(cause),
-          },
-        }));
-      } finally {
-        overviewStatusInFlightRef.current.delete(key);
-      }
-    },
-    [api, operationsPeriod],
-  );
-  const loadOverviewClassificationPage = useCallback(
-    async (kind: OverviewStatusKind, classification: OverviewClassification, offset: number) => {
-      const key = overviewClassificationPageKey(kind, classification);
-      if (overviewStatusInFlightRef.current.has(key)) return;
-      overviewStatusInFlightRef.current.add(key);
-      const requestVersion = boardRequestVersionRef.current;
-      const period = requestPeriodForOperations(operationsPeriod);
-      setOverviewClassificationPages((previous) => ({
-        ...previous,
-        [key]: {
-          items: offset === 0 ? [] : (previous[key]?.items ?? []),
-          total: previous[key]?.total ?? 0,
-          loading: true,
-          error: null,
-        },
-      }));
-      try {
-        const page = await api.operationsClassification(period, kind, classification, offset);
-        if (
-          requestVersion !== boardRequestVersionRef.current ||
-          period.from !== requestPeriodForOperations(operationsPeriodRef.current).from ||
-          period.to !== requestPeriodForOperations(operationsPeriodRef.current).to
-        )
-          return;
-        const items = kind === "task" ? page.tasks : kind === "spec" ? page.specs : page.prds;
-        setOverviewClassificationPages((previous) => ({
-          ...previous,
-          [key]: {
-            items: offset === 0 ? items : [...(previous[key]?.items ?? []), ...items],
-            total: page.total,
-            loading: false,
-            error: null,
-          },
-        }));
-      } catch (cause) {
-        if (requestVersion !== boardRequestVersionRef.current || isAbortError(cause)) return;
-        setOverviewClassificationPages((previous) => ({
-          ...previous,
-          [key]: {
-            items: previous[key]?.items ?? [],
-            total: previous[key]?.total ?? 0,
-            loading: false,
-            error: cause instanceof Error ? cause.message : String(cause),
-          },
-        }));
-      } finally {
-        overviewStatusInFlightRef.current.delete(key);
-      }
-    },
-    [api, operationsPeriod],
-  );
-  const boardExportSource = useCallback(
-    (selectedFilters: { query: string; status: string; risk: string; origin: string }) => {
-      const filters = { ...boardFiltersRef.current, ...selectedFilters };
-      const period = requestPeriodForOperations(operationsPeriod);
-      return {
-        prepare: async () => {
-          const firstPages = await Promise.all(
-            initialWorkBoardStages.map((stage) => api.operationsBoard(period, stage, 0, filters)),
-          );
-          const rowsFor = (page: OperationsBoardPage) => [
-            ...page.prds.map(({ kind: _kind, ...row }) => ({ kind: "prd", ...row })),
-            ...page.specs.map(({ kind: _kind, ...row }) => ({ kind: "spec", ...row })),
-            ...page.tasks.map((row) => ({ kind: "task", ...row })),
-          ];
-          return {
-            totalRows: firstPages.reduce((sum, page) => sum + page.total, 0),
-            pages: async function* () {
-              for (const firstPage of firstPages) {
-                let page = firstPage;
-                let offset = 0;
-                while (true) {
-                  const rows = rowsFor(page);
-                  if (rows.length === 0) break;
-                  offset += rows.length;
-                  yield rows;
-                  if (offset >= page.total) break;
-                  page = await api.operationsBoard(period, page.stage, offset, filters);
-                }
-              }
-            },
-          };
-        },
-      };
-    },
-    [api, operationsPeriod],
-  );
-  const detailExportSource = useOperationsDetailExport({ api, operationsPeriod });
-  useEffect(() => {
-    if (dashboardView !== "operations" || operations === null) return;
-    let cancelled = false;
-    const hydrateBoard = async () => {
-      if (cancelled) return;
-      // 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
-    // bounded Kanban cards until after that first paint so they cannot hold up
-    // the useful overview when SQLite must materialise the board view.
-    const idle =
-      typeof window.requestIdleCallback === "function"
-        ? { 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);
-      else window.clearTimeout(idle.id);
-    };
-  }, [dashboardView, loadMoreBoard, operations]);
-
-  const refreshFromDialog = async (reconcileOpenWork: boolean) => {
-    if (reconcileOpenWork) {
-      setReconciliationResult(null);
-    }
-    setRefreshDialog(reconcileOpenWork ? "reconciling" : "refreshing");
-    try {
-      await refresh(false, reconcileOpenWork, !reconcileOpenWork);
-    } finally {
-      // A transport/runtime failure must not trap the user in the progress
-      // overlay. `refresh` normally reports the error on the affected panel;
-      // this also covers an unexpected rejection before it reaches that path.
-      setRefreshDialog(null);
-    }
-  };
-  useAppEffects({
-    api,
-    costLocale,
-    currency,
-    dashboardView,
-    loadOperationsDetails,
-    operations,
-    operationsDetailAbortRef,
-    operationsDetailCancelRef,
-    operationsPageAbortRef,
-    pathname,
-    pricing,
-    refresh,
-    refreshVersion,
-    setSnapshotUpdating,
-    setError,
-    setFxRate,
-    setPathname,
-    setPricing,
-    snapshotUpdating,
-  });
-
-  const navigate = (nextPath: string) => {
-    window.history.pushState(null, "", nextPath);
-    setPathname(nextPath);
-    window.scrollTo({ left: 0, top: 0 });
-  };
-
-  const loadCostSummary = useCallback(async () => {
-    costSummaryAbortRef.current?.abort();
-    const controller = new AbortController();
-    costSummaryAbortRef.current = controller;
-    const requestVersion = ++costSummaryRequestVersion.current;
-    const period = requestPeriodForOperations(operationsPeriod);
-    costLoadingCount.current += 1;
-    setLoadingArea("costs");
-    setError(null);
-    setFailedArea(null);
-    try {
-      const summary = await api.costMonitor(currency, period, "summary", controller.signal);
-      const currentPeriod = requestPeriodForOperations(operationsPeriodRef.current);
-      if (
-        !isCurrentCostSummaryRequest({
-          aborted: controller.signal.aborted,
-          currentCurrency: currencyRef.current,
-          currentPeriod,
-          currentRequestVersion: costSummaryRequestVersion.current,
-          requestVersion,
-          requestedCurrency: currency,
-          requestedPeriod: period,
-        })
-      )
-        return;
-      setCosts(summary);
-      costsLoadedRef.current = true;
-      setDisplayedCosts(null);
-    } catch (cause) {
-      if (controller.signal.aborted || requestVersion !== costSummaryRequestVersion.current) return;
-      setError(cause instanceof Error ? cause.message : String(cause));
-      setFailedArea("costs");
-    } finally {
-      costLoadingCount.current = Math.max(0, costLoadingCount.current - 1);
-      if (costLoadingCount.current === 0)
-        setLoadingArea((current) => (current === "costs" ? null : current));
-      if (costSummaryAbortRef.current === controller) costSummaryAbortRef.current = null;
-    }
-  }, [api, currency, operationsPeriod]);
-
-  // The global language selector can request USD while Operations is active.
-  // Acquire its coherent Cost Monitor snapshot here instead of requiring a
-  // navigation to the Cost Monitor tab first.
-  useEffect(() => {
-    if (currency !== "USD" || costs?.currency === currency) return;
-    void loadCostSummary();
-  }, [costs?.currency, currency, loadCostSummary]);
-
-  // A global period change invalidates the Cost snapshot before React commits
-  // the replacement view. All Time also needs its factual Cost range while
-  // Operations is active, so its disabled date inputs do not fall back to
-  // today's Operations range. The request itself remains deliberately
-  // unbounded. The in-flight guard prevents duplicate requests.
-  useEffect(() => {
-    if (
-      (dashboardView !== "cost-monitor" && operationsPeriod.preset !== "all") ||
-      costSummaryAbortRef.current !== null
-    )
-      return;
-    if (
-      shouldLoadCostSummary({
-        costsLoaded: costsLoadedRef.current,
-        currency,
-        snapshotCurrency: costs?.currency,
-      })
-    )
-      void loadCostSummary();
-  }, [costs?.currency, currency, dashboardView, loadCostSummary, operationsPeriod.preset]);
-
-  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 });
-    if (nextView === "cost-monitor") {
-      if (
-        shouldLoadCostSummary({
-          costsLoaded: costsLoadedRef.current,
-          currency,
-          snapshotCurrency: costs?.currency,
-        })
-      )
-        void loadCostSummary();
-    } else {
-      costSummaryAbortRef.current?.abort();
-    }
-    if (nextView === "traceability") {
-      let candidates = traceTasks;
-      if (candidates.length === 0) {
-        const requestVersion = boardRequestVersionRef.current;
-        // Traceability is a global task selector, not a temporal work-board view.
-        candidates = await loadMoreTraceTasks(false, true);
-        if (requestVersion !== boardRequestVersionRef.current) return;
-        setTraceTasks(candidates);
-      }
-      const ordered = candidates.toSorted(
-        (a, b) =>
-          Date.parse(b.finished_at ?? b.updated_at) - Date.parse(a.finished_at ?? a.updated_at),
-      );
-      const latest = ordered.find((task) => task.status === "completed") ?? ordered[0];
-      if (latest) {
-        setSelectedTraceTaskId(latest.id);
-        void openTrace(latest.id);
-      }
-      return;
-    }
-    setTrace(null);
-    setTraceLoadingTaskId(null);
-  };
-
-  const capabilityNavigation = (
-    <div
-      className={`dashboard-capability-shell dashboard-capability-shell--${dashboardView ?? "initial"}`}
-    >
-      <DashboardCapabilityNav
-        activeView={dashboardView}
-        locale={costLocale}
-        onChange={(view) => void selectDashboardView(view)}
-      />
-    </div>
-  );
-  const currentCostByRun = useMemo(
-    () =>
-      new Map(
-        (displayedCosts ?? costs)?.runs.map(
-          (run) =>
-            [run.run_id, currency === "USD" ? run.estimated_usd : run.estimated_brl] as const,
-        ) ?? [],
-      ),
-    [costs, currency, displayedCosts],
-  );
-  const factualCostTotal = useMemo(() => {
-    const snapshot = displayedCosts ?? costs;
-    if (snapshot?.currency !== currency) return null;
-    return currency === "USD" ? snapshot.overview.estimated_usd : snapshot.overview.estimated_brl;
-  }, [costs, currency, displayedCosts]);
-  const factualCostPeriods = useMemo(() => {
-    const snapshot = displayedCosts ?? costs;
-    if (snapshot?.currency !== currency) return undefined;
-    return {
-      day: snapshot.groups.daily,
-      month: snapshot.groups.monthly,
-      year: snapshot.groups.annual,
-    };
-  }, [costs, currency, displayedCosts]);
-  const retryLastLoad = () => {
-    setError(null);
-    if (failedArea === "costs") void loadCostSummary();
-    else if (failedArea === "traceability" && selectedTraceTaskId)
-      void openTrace(selectedTraceTaskId);
-    else if (failedArea === "operations" && operations !== null) void loadOperationsDetails();
-    else void refresh();
-  };
-
-  const setupRoute = renderAppSetupRoute({
-    api,
-    costLocale,
-    fxRate,
-    navigate,
-    pathname,
-    pricing,
-    refresh: async () => {
-      await refresh();
-    },
-    setFxRate,
-    setPricing,
-  });
-  // A request is not an empty dashboard state. One accessible global gate
-  // 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);
-  // 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.
-  const initialDataPending = operations === null && operationsLoading;
-  useEffect(() => {
-    if (!snapshotUpdating || !initialDataPending || snapshotNoticeDismissed) {
-      setSnapshotNoticeDelayElapsed(false);
-      return undefined;
-    }
-    const timeout = window.setTimeout(
-      () => setSnapshotNoticeDelayElapsed(true),
-      snapshotNoticeDelayMs,
-    );
-    return () => window.clearTimeout(timeout);
-  }, [initialDataPending, snapshotNoticeDismissed, snapshotUpdating]);
-  const snapshotNoticeVisible = shouldShowSnapshotNotice({
-    snapshotUpdating,
-    initialDataPending,
-    dismissed: snapshotNoticeDismissed,
-    delayElapsed: snapshotNoticeDelayElapsed,
-  });
-  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>
-      <button
-        aria-label={
-          costLocale === "pt-BR"
-            ? "Fechar aviso de atualização do snapshot"
-            : "Dismiss snapshot update notice"
-        }
-        onClick={() => setSnapshotNoticeDismissed(true)}
-        type="button"
-      >
-        ×
-      </button>
-    </div>
-  ) : null;
-  const renderedOperations = operations as OperationsProjection;
-  return (
-    <AppLoadingBoundary
-      error={error}
-      globalLoadingPending={globalLoadingPending}
-      locale={costLocale}
-      onRefresh={() => void refresh()}
-      operations={operations}
-      snapshotNotice={snapshotNotice}
-      setupRoute={setupRoute}
-    >
-      <PeriodTransitionShell pending={globalLoadingPending}>
-        {error ? (
-          <div aria-live="assertive" className="app-warning app-error" role="alert">
-            <span>{error}</span>
-            {failedArea ? (
-              <button onClick={retryLastLoad} type="button">
-                {costLocale === "pt-BR" ? "Tentar novamente" : "Try again"}
-              </button>
-            ) : null}
-            <button
-              aria-label={costLocale === "pt-BR" ? "Fechar erro" : "Dismiss error"}
-              onClick={() => setError(null)}
-              type="button"
-            >
-              ×
-            </button>
-          </div>
-        ) : null}
-        {/* Cost Monitor boundary retains loadRunPage={loadCostRunPage}, loadReadModelPage={loadCostReadModelPage}, and loadDetail={loadCostDetail}. */}
-        <OperationsPage
-          alternateContent={renderDashboardAlternateContent({
-            costs,
-            costLocale,
-            currency,
-            dashboardView,
-            failedArea,
-            lastUpdatedAt,
-            loadCostDetail,
-            loadCostReadModelPage,
-            loadCostRunPage,
-            loadCostGroupPage,
-            loadingArea,
-            onActiveDataChange: setDisplayedCosts,
-            onCurrencyChange: setCurrency,
-            onLoadingChange: setCostSurfaceLoading,
-            onLocaleChange: changeDashboardLocale,
-            onLoadMoreTraceTasks: loadMoreTraceTasks,
-            onOpenTrace: (taskId) => void openTrace(taskId),
-            onRefresh: () => setRefreshDialog("choose"),
-            onRetry: retryLastLoad,
-            onSelectTraceTask: (taskId) => {
-              setSelectedTraceTaskId(taskId);
-              void openTrace(taskId);
-            },
-            onOpenTraceChange: openTraceChange,
-            onOpenTraceMacro: openTraceMacro,
-            operations: renderedOperations,
-            selectedTraceTaskId,
-            trace,
-            traceLoadingTaskId,
-            traceTasksHasMore,
-            traceTasksLoading,
-            traceTasks,
-          })}
-          capabilityNavigation={capabilityNavigation}
-          boardTotals={boardTotals}
-          boardKindTotals={boardKindTotals}
-          boardExportSource={boardExportSource}
-          detailExportSource={detailExportSource}
-          boardStates={boardStates}
-          data={renderedOperations}
-          datePreset={operationsPeriod.preset}
-          dateRange={operationsPeriod.range}
-          entityPage={entityPage}
-          dashboardTitle={dashboardIdentity.title}
-          repositoryName={dashboardIdentity.repositoryName}
-          loading={operationsLoading}
-          locale={costLocale}
-          currency={currency}
-          factualCostTotal={factualCostTotal}
-          factualCostPeriods={factualCostPeriods}
-          onLoadingChange={setOperationsSurfaceLoading}
-          resolveRunCost={
-            costs === null ? undefined : (runId) => currentCostByRun.get(runId) ?? null
-          }
-          onLocaleChange={changeDashboardLocale}
-          onDetailDataRequest={(view) => {
-            const kind =
-              view === "conversations"
-                ? "conversations"
-                : view === "executions"
-                  ? "executions"
-                  : view === "runs"
-                    ? "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);
-            else void loadOperationsEntityPage(entityPageKind, offset);
-          }}
-          onEntityFiltersChange={loadFilteredOperationsPage}
-          onBoardFiltersChange={loadFilteredBoard}
-          onWorkListFiltersChange={loadWorkListFilters}
-          onWorkListPageChange={(offset) =>
-            void loadWorkListPage(workListFiltersRef.current, offset)
-          }
-          onBoardTypeChange={(kind) =>
-            loadFilteredBoard({
-              ...boardFiltersRef.current,
-              kind: kind === "all" ? "" : kind,
-            })
-          }
-          onWorkListTypeChange={(kind) =>
-            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)
-          }
-          classificationPage={(kind, classification) =>
-            overviewClassificationPages[overviewClassificationPageKey(kind, classification)]
-          }
-          onLoadClassificationPage={(kind, classification, offset) =>
-            void loadOverviewClassificationPage(kind, classification, offset)
-          }
-          onOpenDocument={(kind, id) => void openDocument(kind, id)}
-          onOpenTask={openTrace}
-          onPriorityChange={async (itemIds) => {
-            try {
-              await api.saveWorkPriority(itemIds);
-            } catch (cause) {
-              setError(cause instanceof Error ? cause.message : String(cause));
-              throw cause;
-            }
-          }}
-          onDateChange={(preset, range) => {
-            const nextPeriod = { preset, range };
-            if (isAllTimeDisplayRangeChange(operationsPeriodRef.current, nextPeriod)) {
-              setOperationsPeriod(nextPeriod);
-              return;
-            }
-            operationsDetailLoadedRef.current = false;
-            operationsDetailCancelRef.current?.();
-            operationsDetailCancelRef.current = null;
-            operationsDetailAbortRef.current?.abort();
-            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 = {};
-            setBoardTotals({});
-            setBoardKindTotals({});
-            setBoardStates({});
-            setOverviewStatusPages({});
-            setOverviewClassificationPages({});
-            ++refreshVersion.current;
-            costSummaryAbortRef.current?.abort();
-            costSummaryAbortRef.current = null;
-            ++costSummaryRequestVersion.current;
-            setEntityPage({ offset: 0, total: null, loading: false, error: null });
-            costsLoadedRef.current = false;
-            setCosts(null);
-            setDisplayedCosts(null);
-            // Keep OperationsPage mounted so its controlled-looking local date
-            // select retains the user's choice; loading gates its old content.
-            setOperationsLoading(true);
-            periodTransitionVersionRef.current += 1;
-            setPeriodTransitionPending(true);
-            setLoadingArea("operations");
-            setOperationsPeriod(nextPeriod);
-          }}
-          onRefresh={() => setRefreshDialog("choose")}
-          settings={
-            <DashboardGlobalSettings
-              costCalculationGuidePath={costCalculationGuidePath}
-              currency={currency}
-              locale={costLocale}
-              onCurrencyChange={setCurrency}
-              onHelpOpen={() => setHelpOpen(true)}
-              onNavigate={navigate}
-              pricingSetupPath={pricingSetupPath}
-              projectSetupPath={projectSetupPath}
-            />
-          }
-        />
-        <AppOverlays
-          closeDocument={closeDocument}
-          costLocale={costLocale}
-          documentDetail={documentDetail}
-          helpOpen={helpOpen}
-          loadingArea={dashboardView === "cost-monitor" && costs === null ? null : loadingArea}
-          operations={renderedOperations}
-          reconciliationResult={reconciliationResult}
-          refreshDialog={refreshDialog}
-          showTrace={dashboardView === "traceability"}
-          trace={trace}
-          traceLink={traceLink}
-          traceLoadingTaskId={traceLoadingTaskId}
-          onCloseHelp={() => setHelpOpen(false)}
-          onCloseTrace={() => setTrace(null)}
-          onDismissReconciliation={() => setReconciliationResult(null)}
-          onOpenDocument={(kind, id) => void openDocument(kind, id)}
-          onOpenTrace={(taskId) => void openTrace(taskId)}
-          onOpenTraceChange={openTraceChange}
-          onOpenTraceMacro={openTraceMacro}
-          onRefreshCancel={() => setRefreshDialog(null)}
-          onRefreshFromDialog={(reconcileOpenWork) => void refreshFromDialog(reconcileOpenWork)}
-          setTraceLink={(value) => setTraceLink(value)}
-        />
-      </PeriodTransitionShell>
-      {globalLoadingPending ? <PeriodTransitionOverlay /> : null}
-    </AppLoadingBoundary>
-  );
+  return <AppDashboardContent model={useDashboardAppModel()} />;
 }