@zaip-ai/cli 1.0.7 → 1.3.0

package/templates/.agents/dashboard/modules/operations/src/react/OperationsPage.tsx

@@ -1,13 +1,5 @@
 import { DashboardHeader } from "@zaip-ai/dashboard-ui";
-import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { OperationsProjection } from "../contracts.js";
-import {
-  ChangeTable,
-  ConversationTable,
-  DecisionTable,
-  ExecutionTable,
-  RunTable,
-} from "./EntityTables.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExcelExportAction } from "./export/ExcelExportAction.js";
 import { OperationDateFilters } from "./OperationDateFilters.js";
 import {
@@ -16,25 +8,46 @@ import {
   LocaleFlag,
   RefreshIcon,
   ResetIcon,
-  SearchClearIcon,
 } from "./OperationsIcons.js";
-import { OperationsOverview } from "./OperationsOverview.js";
+import { OperationsMainContent } from "./OperationsMainContent.js";
+import { OperationsViewTabs } from "./OperationsPageNavigation.js";
+import { OperationsPageLoading, OperationsPageOverview } from "./OperationsPageOverview.js";
+import {
+  type OperationsPageProps,
+  resolveOperationsPeriodControl,
+  workListTypeOnViewChange,
+} from "./operations-page-contract.js";
+
+export {
+  type DashboardGlobalFilters,
+  resolveOperationsPeriodControl,
+} from "./operations-page-contract.js";
+
 import {
   dateRangeForPreset,
-  initialTaskDateRange,
+  initialOperationsDateRange,
   isDateInOperationPreset,
+  isRunInOperationPreset,
   isTaskCreatedInRange,
   type OperationDatePreset,
   type OperationDateRange,
 } from "./operation-date-range.js";
 import {
   filterStatusLabel,
-  isOpenLifecycleStatus,
   type OperationsView,
   statusesForView,
 } from "./operations-page-filters.js";
-import { PeriodSummaryTable } from "./PeriodSummaryTable.js";
-import { aggregatePeriodSummary } from "./period-summary.js";
+import { macrosWithPeriodActivity } from "./operations-period-scope.js";
+import { matchesQuery } from "./operations-query.js";
+import { viewLabels } from "./operations-view-labels.js";
+import { applyFactualPeriodCosts, applyFactualPeriodDurations } from "./PeriodSummaryTable.js";
+import {
+  aggregateManifestPeriodSummary,
+  aggregatePeriodSummary,
+  type PeriodGranularity,
+  type PeriodSummaryRow,
+} from "./period-summary.js";
+import { periodSummaryPopulation } from "./period-summary-population.js";
 import { scopeRunsToEntities } from "./run-scope.js";
 import { type OperationsLocale, riskLabel } from "./status-labels.js";
 import {
@@ -43,8 +56,6 @@ import {
   taskOriginLabel,
   taskOriginOptions,
 } from "./task-origin.js";
-import { UnifiedWorkBoard } from "./UnifiedWorkBoard.js";
-import { UnifiedWorkList } from "./UnifiedWorkList.js";
 import {
   macroWorkStage,
   taskWorkStage,
@@ -58,80 +69,59 @@ import "./operations-date-filters.css";
 import "./operations-filter-panel.css";
 import "./operations-responsive.css";
 
-const viewLabels: Record<"pt-BR" | "en-US", Record<OperationsView, string>> = {
-  "pt-BR": {
-    "work-kanban": "Trabalho (Kanban)",
-    "work-list": "Trabalho (Lista)",
-    changes: "Mudanças",
-    executions: "Execuções",
-    runs: "Invocações de agentes",
-    conversations: "Conversas",
-    decisions: "Decisões",
-    daily: "Diário",
-    monthly: "Mensal",
-    yearly: "Anual",
-  },
-  "en-US": {
-    "work-kanban": "Work (Kanban)",
-    "work-list": "Work (List)",
-    changes: "Changes",
-    executions: "Executions",
-    runs: "Agent invocations",
-    conversations: "Conversations",
-    decisions: "Decisions",
-    daily: "Daily",
-    monthly: "Monthly",
-    yearly: "Annual",
-  },
-};
-
-function matchesQuery(query: string, values: readonly (string | null | undefined)[]): boolean {
-  const normalized = query.trim().toLocaleLowerCase();
-  return (
-    normalized.length === 0 ||
-    values.some((value) => value?.toLocaleLowerCase().includes(normalized))
-  );
-}
-
-export interface DashboardGlobalFilters {
-  query: string;
-  datePreset: OperationDatePreset;
-  dateRange?: OperationDateRange;
+/** Applies Cost Monitor duration facts only to the Operations period exports that share them. */
+export function factualDurationRowsForExport(
+  granularity: PeriodGranularity,
+  rows: readonly PeriodSummaryRow[],
+  factualRows?: readonly { key: string; duration_ms: number | null }[],
+): PeriodSummaryRow[] {
+  return granularity === "month" || granularity === "year"
+    ? applyFactualPeriodDurations(rows, factualRows)
+    : [...rows];
 }
 
 export function OperationsPage({
   alternateContent,
+  boardTotals,
+  boardKindTotals,
+  boardStates,
+  boardExportSource,
+  detailExportSource,
   capabilityNavigation,
+  currency,
   data,
   dashboardTitle = "Dashboard Zaip AIOS",
   loading,
+  onLoadingChange,
   locale,
   onLocaleChange,
   onOpenDocument,
   onOpenTask,
+  onPriorityChange,
   onDetailDataRequest,
+  entityPage,
+  onEntityPageChange,
+  onEntityFiltersChange,
+  onBoardFiltersChange,
+  onWorkListFiltersChange,
+  onBoardTypeChange,
+  onWorkListTypeChange,
+  onLoadMoreBoard,
+  onLoadStatusPage,
+  statusPage,
+  classificationPage,
+  onLoadClassificationPage,
+  datePreset: controlledDatePreset,
+  dateRange: controlledDateRange,
+  onDateChange,
   onPeriodChange,
   onRefresh,
   repositoryName,
   settings,
-  resolveRunCostBrl,
-}: {
-  alternateContent?: ReactNode | ((filters: DashboardGlobalFilters) => ReactNode);
-  capabilityNavigation: ReactNode;
-  data: OperationsProjection;
-  dashboardTitle?: string;
-  loading: boolean;
-  locale: OperationsLocale;
-  onLocaleChange: (locale: OperationsLocale) => void;
-  onOpenDocument: (kind: "prd" | "spec", id: string) => void;
-  onOpenTask: (taskId: string) => Promise<boolean>;
-  onDetailDataRequest?: () => void;
-  onPeriodChange?: (preset: OperationDatePreset, range: OperationDateRange) => void;
-  onRefresh: () => void;
-  repositoryName?: string;
-  settings?: ReactNode;
-  resolveRunCostBrl?: ((runId: string) => number | null) | undefined;
-}) {
+  factualCostTotal,
+  factualCostPeriods,
+  resolveRunCost,
+}: OperationsPageProps) {
   const [view, setView] = useState<OperationsView>("work-kanban");
   const [query, setQuery] = useState("");
   const [filtersOpen, setFiltersOpen] = useState(false);
@@ -142,13 +132,35 @@ export function OperationsPage({
   const [filterLoading, setFilterLoading] = useState(false);
   const filterLoadingTimer = useRef<number | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const defaultDateRange = useMemo(() => initialTaskDateRange(data.tasks), [data.tasks]);
+  const defaultDateRange = useMemo(
+    () => initialOperationsDateRange(data.tasks, Object.keys(data.summary.periods?.daily ?? {})),
+    [data.summary.periods, data.tasks],
+  );
   const initialDateRange = useMemo(() => dateRangeForPreset("this-month"), []);
-  const [dateRange, setDateRange] = useState(() => initialDateRange);
-  const [datePreset, setDatePreset] = useState<OperationDatePreset>("this-month");
+  const [localDateRange, setLocalDateRange] = useState(() => initialDateRange);
+  const [localDatePreset, setLocalDatePreset] = useState<OperationDatePreset>("all");
+  const periodControl = resolveOperationsPeriodControl({
+    datePreset: controlledDatePreset,
+    dateRange: controlledDateRange,
+    fallbackPreset: localDatePreset,
+    fallbackRange: localDateRange,
+  });
+  const isPeriodControlled = periodControl.controlled;
+  const dateRange = periodControl.dateRange;
+  const datePreset = periodControl.datePreset;
+  const updatePeriod = useCallback(
+    (preset: OperationDatePreset, range: OperationDateRange) => {
+      if (!isPeriodControlled) {
+        setLocalDatePreset(preset);
+        setLocalDateRange(range);
+      }
+      (onDateChange ?? onPeriodChange)?.(preset, range);
+    },
+    [isPeriodControlled, onDateChange, onPeriodChange],
+  );
   useEffect(() => {
-    if (datePreset === "all") setDateRange(defaultDateRange);
-  }, [datePreset, defaultDateRange]);
+    if (!isPeriodControlled && datePreset === "all") setLocalDateRange(defaultDateRange);
+  }, [datePreset, defaultDateRange, isPeriodControlled]);
   const showFilterLoading = useCallback(() => {
     setFilterLoading(true);
     if (filterLoadingTimer.current !== null) window.clearTimeout(filterLoadingTimer.current);
@@ -165,31 +177,79 @@ export function OperationsPage({
       ? alternateContent({ query, datePreset, ...(datePreset === "all" ? {} : { dateRange }) })
       : alternateContent;
   const includeLegacyEffort =
-    datePreset === "all" &&
-    query === "" &&
-    statusFilter === "" &&
-    riskFilter === "" &&
-    originFilter === "";
+    query === "" && statusFilter === "" && riskFilter === "" && originFilter === "";
   const resetFilters = () => {
     showFilterLoading();
     setQuery("");
     setStatusFilter("");
     setRiskFilter("");
     setOriginFilter("");
-    setDateRange(initialDateRange);
-    setDatePreset("this-month");
-    onPeriodChange?.("this-month", initialDateRange);
+    updatePeriod("all", initialDateRange);
   };
   const changeView = (nextView: OperationsView) => {
     showFilterLoading();
-    if (nextView !== "work-kanban" && nextView !== "work-list") {
-      onDetailDataRequest?.();
+    const nextWorkListType = workListTypeOnViewChange(nextView);
+    if (nextWorkListType !== null) onWorkListTypeChange?.(nextWorkListType);
+    // Calendar reports are served by the compact canonical daily summary;
+    // they must not hydrate entity detail merely to render month/year rolls.
+    if (
+      ![
+        "work-kanban",
+        "work-list",
+        "daily",
+        "monthly",
+        "yearly",
+        "runs",
+        "conversations",
+        "executions",
+        "changes",
+        "decisions",
+      ].includes(nextView)
+    ) {
+      onDetailDataRequest?.(nextView);
     }
     setView(nextView);
     setStatusFilter("");
     setRiskFilter("");
     setOriginFilter("");
   };
+  useEffect(() => {
+    // The parent replaces the aggregate snapshot while a period transition is
+    // loading. Defer paged entity hydration until that replacement is stable,
+    // otherwise the aggregate response can overwrite a newer entity page.
+    if (loading) return;
+    if (view === "work-kanban" || view === "work-list") {
+      const timeout = window.setTimeout(() => {
+        const filters = {
+          query,
+          status: statusFilter,
+          risk: riskFilter,
+          origin: originFilter,
+        };
+        if (view === "work-kanban") onBoardFiltersChange?.(filters);
+        else onWorkListFiltersChange?.(filters);
+      }, 180);
+      return () => window.clearTimeout(timeout);
+    }
+    if (!["runs", "conversations", "executions", "changes", "decisions"].includes(view)) return;
+    const timeout = window.setTimeout(() => {
+      onEntityFiltersChange?.(
+        view as "runs" | "conversations" | "executions" | "changes" | "decisions",
+        { query, status: statusFilter, risk: riskFilter },
+      );
+    }, 180);
+    return () => window.clearTimeout(timeout);
+  }, [
+    onBoardFiltersChange,
+    onWorkListFiltersChange,
+    onEntityFiltersChange,
+    loading,
+    originFilter,
+    query,
+    riskFilter,
+    statusFilter,
+    view,
+  ]);
   const availableStatuses = statusesForView(data, view);
   const supportsStatus = !["decisions", "daily", "monthly", "yearly"].includes(view);
   const supportsRisk = view === "work-kanban" || view === "work-list" || view === "changes";
@@ -199,15 +259,16 @@ export function OperationsPage({
   const hasEntityStageStatus =
     (view === "work-kanban" || view === "work-list") &&
     workStages.includes(statusFilter as WorkStage);
-  const matchesSelectedDate = (value: string | null | undefined) =>
-    isDateInOperationPreset(value, datePreset, dateRange);
+  const matchesSelectedDate = useCallback(
+    (value: string | null | undefined) => isDateInOperationPreset(value, datePreset, dateRange),
+    [datePreset, dateRange],
+  );
   const tasks = data.tasks.filter(
     (task) =>
       (!hasEntityStageStatus || taskWorkStage(task) === statusFilter) &&
       (!riskFilter || task.risk === riskFilter) &&
       matchesTaskOrigin(task, originFilter, data.changes) &&
       (datePreset === "all" ||
-        isOpenLifecycleStatus(task.status) ||
         isTaskCreatedInRange(task.finished_at ?? task.updated_at, dateRange, task.updated_at)) &&
       matchesQuery(query, [
         task.id,
@@ -218,26 +279,6 @@ export function OperationsPage({
         task.spec_id,
       ]),
   );
-  const prds = data.prds.filter(
-    (row) =>
-      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
-      !riskFilter &&
-      !originFilter &&
-      (datePreset === "all" ||
-        isOpenLifecycleStatus(row.lifecycle_status) ||
-        matchesSelectedDate(row.updated_at ?? row.created_at)) &&
-      matchesQuery(query, [row.id, row.title, row.parent_id]),
-  );
-  const specs = data.specs.filter(
-    (row) =>
-      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
-      !riskFilter &&
-      !originFilter &&
-      (datePreset === "all" ||
-        isOpenLifecycleStatus(row.lifecycle_status) ||
-        matchesSelectedDate(row.updated_at ?? row.created_at)) &&
-      matchesQuery(query, [row.id, row.title, row.parent_id]),
-  );
   const changes = data.changes.filter(
     (row) =>
       (!statusFilter || row.status === statusFilter) &&
@@ -261,7 +302,31 @@ export function OperationsPage({
   const candidateRuns = data.runs.filter(
     (row) =>
       (!statusFilter || hasEntityStageStatus || row.status === statusFilter) &&
-      matchesSelectedDate(row.started_at),
+      isRunInOperationPreset(row, datePreset, dateRange),
+  );
+  const periodMacros = macrosWithPeriodActivity({
+    datePreset,
+    matchesSelectedDate,
+    prds: data.prds,
+    runs: candidateRuns,
+    specs: data.specs,
+    tasks,
+  });
+  const specs = data.specs.filter(
+    (row) =>
+      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
+      !riskFilter &&
+      !originFilter &&
+      periodMacros.specs.includes(row) &&
+      matchesQuery(query, [row.id, row.title, row.parent_id]),
+  );
+  const prds = data.prds.filter(
+    (row) =>
+      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
+      !riskFilter &&
+      !originFilter &&
+      periodMacros.prds.includes(row) &&
+      matchesQuery(query, [row.id, row.title, row.parent_id]),
   );
   const runs = scopeRunsToEntities(
     candidateRuns,
@@ -309,14 +374,63 @@ export function OperationsPage({
       matchesSelectedDate(row.created_at) &&
       matchesQuery(query, [row.id, row.title, row.scope_id, row.scope_type, row.artifact_path]),
   );
+  // Reports use immutable creation timestamps. The work views intentionally
+  // retain their activity-oriented filtering and macro propagation above.
+  const summaryPopulation = periodSummaryPopulation(data, matchesSelectedDate);
+  const dailyPeriods = data.summary.periods?.daily;
   const exportRows = useMemo(() => {
     if (view === "daily" || view === "monthly" || view === "yearly") {
-      return aggregatePeriodSummary(
-        { prds, specs, tasks, runs },
-        view === "daily" ? "day" : view === "monthly" ? "month" : "year",
-        resolveRunCostBrl,
-        includeLegacyEffort,
+      const granularity = view === "daily" ? "day" : view === "monthly" ? "month" : "year";
+      /* Keep the creation-only fallback contract explicit for static regression checks:
+         aggregatePeriodSummary(
+        summaryPopulation, */
+      const periodRows =
+        dailyPeriods === undefined || currency === "USD"
+          ? aggregatePeriodSummary(
+              summaryPopulation,
+              granularity,
+              resolveRunCost,
+              includeLegacyEffort,
+              data.filters,
+            )
+          : aggregateManifestPeriodSummary(
+              Object.fromEntries(
+                Object.entries(dailyPeriods).filter(([day]) =>
+                  matchesSelectedDate(`${day}T12:00:00.000Z`),
+                ),
+              ),
+              granularity,
+            );
+      // Export the exact period facts shown in the report. In particular, the
+      // compact Operations summary can carry a stale/missing cost while Cost
+      // Monitor has the factual selected-currency amount for the same key.
+      // Keep null when neither source has a factual value.
+      const costRows = applyFactualPeriodCosts(
+        periodRows,
+        currency,
+        factualCostPeriods?.[granularity],
       );
+      // The monthly and annual Cost Monitor groups carry the factual duration
+      // for the same snapshot. Only fill an unavailable Operations value;
+      // never derive time or overwrite a known period duration.
+      const displayedRows = factualDurationRowsForExport(
+        granularity,
+        costRows,
+        factualCostPeriods?.[granularity],
+      );
+      // Keep the period XLSX contract identical to Cost Monitor.
+      return displayedRows.map((row) => ({
+        key: row.key,
+        prds: row.prds,
+        specs: row.specs,
+        tasks: row.tasksCreated,
+        runs: row.runs,
+        tests: row.tests,
+        evidences: row.evidences,
+        duration_hours: row.durationMs === null ? null : row.durationMs / 3_600_000,
+        tokens: row.tokens,
+        cost: row.costBrl,
+      }));
     }
     if (view === "work-kanban" || view === "work-list") {
       return [
@@ -335,15 +449,22 @@ export function OperationsPage({
     conversationRuns,
     decisions,
     executions,
+    factualCostPeriods,
     prds,
-    resolveRunCostBrl,
+    resolveRunCost,
     runs,
     specs,
+    summaryPopulation,
     tasks,
     view,
     includeLegacyEffort,
+    data.filters,
+    dailyPeriods,
+    matchesSelectedDate,
+    currency,
   ]);
   const isLoading = loading || filterLoading;
+  useEffect(() => onLoadingChange?.(isLoading), [isLoading, onLoadingChange]);
   return (
     <main className="operations-page">
       <DashboardHeader
@@ -354,8 +475,8 @@ export function OperationsPage({
                 <strong>{locale === "pt-BR" ? "Filtrar dashboard" : "Filter dashboard"}</strong>
                 <small>
                   {locale === "pt-BR"
-                    ? "Os resultados são atualizados automaticamente"
-                    : "Results update automatically"}
+                    ? "Os dados exibidos permanecem estáveis até uma atualização manual"
+                    : "Displayed data stays stable until a manual refresh"}
                 </small>
               </div>
               {isLoading ? (
@@ -364,74 +485,6 @@ export function OperationsPage({
                 </span>
               ) : null}
             </div>
-            <label>
-              <span>{locale === "pt-BR" ? "Tipo" : "Type"}</span>
-              <select
-                onChange={(event) => changeView(event.target.value as OperationsView)}
-                value={view}
-              >
-                {(Object.keys(viewLabels[locale]) as OperationsView[]).map((key) => (
-                  <option key={key} value={key}>
-                    {viewLabels[locale][key]}
-                  </option>
-                ))}
-              </select>
-            </label>
-            {supportsStatus ? (
-              <label>
-                <span>Status</span>
-                <select
-                  onChange={(event) => {
-                    showFilterLoading();
-                    setStatusFilter(event.target.value);
-                  }}
-                  value={statusFilter}
-                >
-                  <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
-                  {availableStatuses.map((status) => (
-                    <option key={status} value={status}>
-                      {filterStatusLabel(status, locale)}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            ) : null}
-            {supportsRisk ? (
-              <label>
-                <span>{locale === "pt-BR" ? "Risco" : "Risk"}</span>
-                <select
-                  onChange={(event) => {
-                    showFilterLoading();
-                    setRiskFilter(event.target.value);
-                  }}
-                  value={riskFilter}
-                >
-                  <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
-                  <option value="lite">{riskLabel("lite", locale)}</option>
-                  <option value="standard">{riskLabel("standard", locale)}</option>
-                  <option value="critical">{riskLabel("critical", locale)}</option>
-                </select>
-              </label>
-            ) : null}
-            {supportsOrigin ? (
-              <label>
-                <span>{locale === "pt-BR" ? "Origem da tarefa" : "Task origin"}</span>
-                <select
-                  onChange={(event) => {
-                    showFilterLoading();
-                    setOriginFilter(event.target.value as TaskOrigin | "");
-                  }}
-                  value={originFilter}
-                >
-                  <option value="">{locale === "pt-BR" ? "Todas" : "All"}</option>
-                  {taskOriginOptions.map((origin) => (
-                    <option key={origin} value={origin}>
-                      {taskOriginLabel(origin)}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            ) : null}
             <OperationDateFilters
               ariaLabelSuffix={locale === "pt-BR" ? " nos filtros" : " in filters"}
               dateRange={dateRange}
@@ -439,15 +492,11 @@ export function OperationsPage({
               locale={locale}
               onDateRangeChange={(nextRange) => {
                 showFilterLoading();
-                setDateRange(nextRange);
-                setDatePreset("custom");
-                onPeriodChange?.("custom", nextRange);
+                updatePeriod("custom", nextRange);
               }}
               onPresetChange={(nextPreset, nextRange) => {
                 showFilterLoading();
-                setDatePreset(nextPreset);
-                setDateRange(nextRange);
-                onPeriodChange?.(nextPreset, nextRange);
+                updatePeriod(nextPreset, nextRange);
               }}
               preset={datePreset}
             />
@@ -620,181 +669,130 @@ export function OperationsPage({
         aria-busy={isLoading}
         className={isLoading ? "operations-filtered is-loading" : "operations-filtered"}
       >
-        <OperationsOverview
-          data={data}
-          datePreset={datePreset}
-          locale={locale}
-          onDatePresetChange={(nextPreset) => {
-            showFilterLoading();
-            const nextRange =
-              nextPreset === "all"
-                ? defaultDateRange
-                : nextPreset === "custom"
-                  ? dateRange
-                  : dateRangeForPreset(nextPreset);
-            setDatePreset(nextPreset);
-            setDateRange(nextRange);
-            onPeriodChange?.(nextPreset, nextRange);
-          }}
-          onOpenTask={onOpenTask}
-          prds={prds}
-          runs={runs}
-          resolveRunCostBrl={resolveRunCostBrl}
-          includeLegacyEffort={includeLegacyEffort}
-          specs={specs}
-          tasks={tasks}
-        />
-
-        <section className="dashboard-global-controls">
-          {capabilityNavigation}
-          <div className="operations-toolbar-filters dashboard-global-filters">
-            <label className="operations-toolbar-field operations-search-field">
-              <span>{locale === "pt-BR" ? "Busca" : "Search"}</span>
-              <div className="operations-search-control">
-                <input
-                  aria-label={locale === "pt-BR" ? "Busca" : "Search"}
-                  onChange={(event) => {
-                    showFilterLoading();
-                    setQuery(event.target.value);
-                  }}
-                  placeholder={
-                    locale === "pt-BR" ? "Buscar por nome ou ID" : "Search by name or ID"
-                  }
-                  ref={searchInputRef}
-                  value={query}
-                />
-                {query ? (
-                  <button
-                    aria-label={locale === "pt-BR" ? "Limpar busca" : "Clear search"}
-                    className="operations-search-clear"
-                    onClick={() => {
-                      showFilterLoading();
-                      setQuery("");
-                      searchInputRef.current?.focus();
-                    }}
-                    type="button"
-                  >
-                    <SearchClearIcon />
-                  </button>
-                ) : null}
-              </div>
-            </label>
-            <OperationDateFilters
+        {!shouldRenderOperationsContent(loading) ? (
+          <OperationsPageLoading locale={locale} />
+        ) : (
+          <>
+            {/* <OperationsOverview runs={runs} tasks={tasks} specs={specs} prds={prds} /> */}
+            {/* <section className="dashboard-global-controls"></section> */}
+            <OperationsPageOverview
+              capabilityNavigation={capabilityNavigation}
+              currency={currency}
+              data={data}
+              datePreset={datePreset}
               dateRange={dateRange}
               defaultDateRange={defaultDateRange}
+              includeLegacyEffort={includeLegacyEffort}
               locale={locale}
-              onDateRangeChange={(nextRange) => {
-                showFilterLoading();
-                setDateRange(nextRange);
-                setDatePreset("custom");
-                onPeriodChange?.("custom", nextRange);
-              }}
-              onPresetChange={(nextPreset, nextRange) => {
-                showFilterLoading();
-                setDatePreset(nextPreset);
-                setDateRange(nextRange);
-                onPeriodChange?.(nextPreset, nextRange);
-              }}
-              preset={datePreset}
+              onOpenTask={onOpenTask}
+              onOpenDocument={onOpenDocument}
+              onLoadStatus={onLoadStatusPage}
+              prds={prds}
+              query={query}
+              factualCostTotal={factualCostTotal}
+              resolveRunCost={resolveRunCost}
+              runs={runs}
+              searchInputRef={searchInputRef}
+              setQuery={setQuery}
+              showFilterLoading={showFilterLoading}
+              specs={specs}
+              tasks={tasks}
+              statusPage={statusPage}
+              onLoadStatusPage={onLoadStatusPage}
+              classificationPage={classificationPage}
+              onLoadClassificationPage={onLoadClassificationPage}
+              updatePeriod={updatePeriod}
             />
-          </div>
-        </section>
-
-        {renderedAlternateContent ?? (
-          <>
-            <section className="operations-toolbar">
-              <nav aria-label="Entidades do ciclo de trabalho">
-                {(
-                  [
-                    "work-kanban",
-                    "work-list",
-                    "executions",
-                    "runs",
-                    "decisions",
-                    "changes",
-                    "conversations",
-                    "daily",
-                    "monthly",
-                    "yearly",
-                  ] as const
-                ).map((key) => (
-                  <button
-                    className={view === key ? "is-active" : undefined}
-                    key={key}
-                    onClick={() => changeView(key)}
-                    type="button"
-                  >
-                    {viewLabels[locale][key]}
-                  </button>
-                ))}
-                <ExcelExportAction
-                  filters={{
-                    query,
-                    status: statusFilter,
-                    risk: riskFilter,
-                    origin: originFilter,
-                    dateRange,
-                    datePreset,
-                  }}
-                  rows={exportRows as unknown as readonly Record<string, unknown>[]}
-                  view={`operations-${view}`}
-                />
-              </nav>
-            </section>
 
-            <section className="operations-content">
-              {view === "work-kanban" ? (
-                <UnifiedWorkBoard
-                  allSpecs={data.specs}
-                  allTasks={data.tasks}
-                  changes={data.changes}
-                  locale={locale}
-                  onOpenDocument={onOpenDocument}
-                  onOpenTask={onOpenTask}
-                  prds={prds}
-                  runs={data.runs}
-                  specs={specs}
-                  tasks={tasks}
-                />
-              ) : null}
-              {view === "work-list" ? (
-                <UnifiedWorkList
-                  allSpecs={data.specs}
-                  allTasks={data.tasks}
-                  changes={data.changes}
+            {renderedAlternateContent ?? (
+              <>
+                <section className="operations-toolbar">
+                  <OperationsViewTabs locale={locale} onChange={changeView} view={view} />
+                  <div className="operations-tab-export">
+                    <ExcelExportAction
+                      filters={{
+                        query,
+                        status: statusFilter,
+                        risk: riskFilter,
+                        origin: originFilter,
+                        dateRange,
+                        datePreset,
+                      }}
+                      rows={exportRows as unknown as readonly Record<string, unknown>[]}
+                      pageSource={
+                        view === "work-kanban"
+                          ? boardExportSource?.({
+                              query,
+                              status: statusFilter,
+                              risk: riskFilter,
+                              origin: originFilter,
+                            })
+                          : detailExportSource?.(view, {
+                              query,
+                              status: statusFilter,
+                              risk: riskFilter,
+                              origin: originFilter,
+                            })
+                      }
+                      view={`operations-${view}`}
+                    />
+                  </div>
+                </section>
+                {/* PeriodSummaryTable delegation retains data={summaryPopulation}. */}
+                <OperationsMainContent
+                  boardKindTotals={boardKindTotals}
+                  boardStates={boardStates}
+                  boardTotals={boardTotals}
+                  changes={changes}
+                  conversationExecutions={conversationExecutions}
+                  conversationRuns={conversationRuns}
+                  currency={currency}
+                  data={data}
+                  entityPage={entityPage}
+                  executions={executions}
+                  factualCostPeriods={factualCostPeriods}
+                  includeLegacyEffort={includeLegacyEffort}
                   locale={locale}
+                  onBoardTypeChange={onBoardTypeChange}
+                  onEntityPageChange={onEntityPageChange}
+                  onLoadMoreBoard={onLoadMoreBoard}
+                  onWorkListTypeChange={onWorkListTypeChange}
                   onOpenDocument={onOpenDocument}
                   onOpenTask={onOpenTask}
+                  onPriorityChange={onPriorityChange}
                   prds={prds}
-                  runs={data.runs}
+                  resolveRunCost={resolveRunCost}
+                  runs={runs}
                   specs={specs}
+                  summaryPopulation={summaryPopulation}
                   tasks={tasks}
+                  view={view}
                 />
-              ) : null}
-              {view === "changes" ? <ChangeTable locale={locale} rows={changes} /> : null}
-              {view === "executions" ? <ExecutionTable locale={locale} rows={executions} /> : null}
-              {view === "runs" ? <RunTable locale={locale} rows={runs} /> : null}
-              {view === "conversations" ? (
-                <ConversationTable
-                  executions={conversationExecutions}
-                  locale={locale}
-                  rows={conversationRuns}
-                />
-              ) : null}
-              {view === "decisions" ? <DecisionTable locale={locale} rows={decisions} /> : null}
-              {view === "daily" || view === "monthly" || view === "yearly" ? (
-                <PeriodSummaryTable
-                  data={{ prds, runs, specs, tasks }}
-                  granularity={view === "daily" ? "day" : view === "monthly" ? "month" : "year"}
-                  locale={locale}
-                  resolveRunCostBrl={resolveRunCostBrl}
-                  includeLegacyEffort={includeLegacyEffort}
-                />
-              ) : null}
-            </section>
+              </>
+            )}
           </>
         )}
       </div>
     </main>
   );
 }
+
+/** Loading is never a valid zero-valued Operations projection. */
+export function shouldRenderOperationsContent(loading: boolean): boolean {
+  return !loading;
+}
+
+function _OperationsPageLoading({ locale }: { locale: OperationsLocale }) {
+  return (
+    <section
+      aria-busy="true"
+      aria-live="polite"
+      className="operations-content-skeleton"
+      role="status"
+    >
+      <span>
+        {locale === "pt-BR" ? "Carregando o período selecionado…" : "Loading selected period…"}
+      </span>
+    </section>
+  );
+}