@zaip-ai/cli 1.0.7 → 1.0.8

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

@@ -6,29 +6,30 @@ import {
   formatPercent,
 } from "@zaip-ai/dashboard-ui";
 import { type ReactNode, useState } from "react";
-import type { MacroProjection, OperationsProjection } from "../contracts.js";
-import {
-  allPhaseMetricTotals,
-  effortMetricTotals,
-  executionMetricTotals,
-  globalLegacyEffortMetricDuration,
-} from "./execution-metrics.js";
+import type {
+  DashboardTaskProjection,
+  MacroProjection,
+  OperationsProjection,
+} from "../contracts.js";
+import { allPhaseMetricTotals, executionMetricTotals } from "./execution-metrics.js";
+import type { EntityMetric } from "./OperationsOverview.helpers.js";
 import {
   aggregateMacroMetrics,
   aggregateTaskMetrics,
-  averageObserved,
   countExecutionDays,
   findLatestCreatedAt,
   formatExecutionAverageHint,
   Kpi,
   macroClassificationStats,
   overviewCopy,
+  overviewMetricAverages,
   overviewText,
   riskColors,
+  selectTopEntities,
   statusColors,
   summarizeTopEntityMetrics,
 } from "./OperationsOverview.helpers.js";
-import type { OperationDatePreset } from "./operation-date-range.js";
+import type { OperationDatePreset, OperationDateRange } from "./operation-date-range.js";
 import { type OperationsLocale, riskLabel } from "./status-labels.js";
 import {
   macroWorkStage,
@@ -37,19 +38,26 @@ import {
   workStageLabel,
   workStages,
 } from "./work-board-model.js";
+import type {
+  OverviewClassification,
+  OverviewClassificationPage,
+  OverviewStatusKind,
+  OverviewStatusPage,
+} from "./operations-page-contract.js";
 import "./operations-overview.css";
 
 export {
   aggregateMacroMetrics,
   aggregateTaskMetrics,
-  averageObserved,
   countExecutionDays,
   findLatestCreatedAt,
   findLatestTaskCreatedAt,
   formatExecutionAverageHint,
   formatTokenThroughputHint,
   macroClassificationStats,
+  overviewMetricAverages,
   overviewText,
+  selectTopEntities,
   statusColors,
   summarizeTopEntityMetrics,
   summarizeTopTaskMetrics,
@@ -57,15 +65,78 @@ export {
 
 type OverviewView = "tasks" | "specs" | "prds";
 
-function formatRoundedCurrency(value: number, locale: OperationsLocale): string {
+function formatRoundedCurrency(
+  value: number,
+  currency: "BRL" | "USD",
+  locale: OperationsLocale,
+): string {
   return new Intl.NumberFormat(locale, {
     style: "currency",
-    currency: "BRL",
+    currency,
     maximumFractionDigits: 0,
   }).format(value);
 }
 
-function runsForOverviewView(
+function formatEntityDuration(value: number | null, locale: OperationsLocale): string {
+  if (value !== null) return formatDurationMs(value, locale);
+  return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+}
+
+export function taskMetricAverages(
+  totals: { durationMs: number | null; tokens: number | null; costBrl: number | null },
+  taskCount: number | null,
+) {
+  return overviewMetricAverages(totals, taskCount);
+}
+
+export function selectedOverviewCount(
+  view: OverviewView,
+  overviewMetrics: OperationsProjection["summary"]["overview_metrics"] | undefined,
+  fallback: number,
+): number | null {
+  if (view === "specs") return overviewMetrics?.selected_counts?.specs ?? fallback;
+  if (view === "prds") return overviewMetrics?.selected_counts?.prds ?? fallback;
+  return overviewMetrics?.task_count ?? fallback;
+}
+
+/**
+ * Selects a currency-specific total without ever treating Operations' BRL
+ * aggregate as USD. Compact Cost Monitor summaries are authoritative even
+ * when their intentionally bounded Run collection is empty.
+ */
+export function resolveOverviewCostTotal({
+  currency,
+  factualSnapshotTotal,
+  macroCostTotal,
+  overviewView,
+  resolvedRunTotal,
+  operationsBrlTotal,
+}: {
+  currency: "BRL" | "USD";
+  factualSnapshotTotal: number | null | undefined;
+  /** Macro aggregates are scoped to the selected SPEC/PRD, unlike the Task snapshot. */
+  macroCostTotal?: number | null | undefined;
+  overviewView?: OverviewView;
+  resolvedRunTotal: number | null;
+  operationsBrlTotal: number | null;
+}): number | null {
+  if (overviewView !== undefined && overviewView !== "tasks") return macroCostTotal ?? null;
+  if (factualSnapshotTotal !== null && factualSnapshotTotal !== undefined)
+    return factualSnapshotTotal;
+  if (resolvedRunTotal !== null) return resolvedRunTotal;
+  return currency === "BRL" ? operationsBrlTotal : null;
+}
+
+/**
+ * KPI cards are sourced exclusively from the server-selected global aggregate.
+ * Entity, board, and Cost Monitor pages are bounded/detail views, so their
+ * collections must never replace the period-filtered big-number population.
+ */
+export function partialOverviewMetrics(data: OperationsProjection) {
+  return data.summary.overview_metrics;
+}
+
+export function runsForOverviewView(
   view: OverviewView,
   tasks: OperationsProjection["tasks"],
   macros: OperationsProjection["specs"] | OperationsProjection["prds"],
@@ -87,113 +158,305 @@ function runsForOverviewView(
 }
 
 export function OperationsOverview({
+  currency,
   data,
   datePreset,
   locale,
   onDatePresetChange,
   onOpenTask,
+  onOpenDocument,
+  onLoadStatus,
+  statusPage,
+  onLoadStatusPage,
+  classificationPage,
+  onLoadClassificationPage,
   prds = data.prds,
   runs = data.runs,
   specs = data.specs,
   tasks = data.tasks,
-  resolveRunCostBrl,
+  factualCostTotal,
+  resolveRunCost,
   includeLegacyEffort = false,
 }: {
+  currency: "BRL" | "USD";
   data: OperationsProjection;
+  /** App-controlled range paired with datePreset; retained by Page while loading. */
+  dateRange?: OperationDateRange;
   datePreset: OperationDatePreset;
   locale: OperationsLocale;
   onDatePresetChange: (preset: OperationDatePreset) => void;
   onOpenTask: (taskId: string) => Promise<boolean>;
+  onOpenDocument: (kind: "prd" | "spec", id: string) => void;
+  onLoadStatus?: ((stage: WorkStage, kind: OverviewStatusKind, offset: number) => void) | undefined;
+  statusPage?: ((stage: WorkStage, kind: OverviewStatusKind) => OverviewStatusPage | undefined) | undefined;
+  onLoadStatusPage?: ((stage: WorkStage, kind: OverviewStatusKind, offset: number) => void) | undefined;
+  classificationPage?: ((kind: OverviewStatusKind, classification: OverviewClassification) => OverviewClassificationPage | undefined) | undefined;
+  onLoadClassificationPage?: ((kind: OverviewStatusKind, classification: OverviewClassification, offset: number) => void) | undefined;
   prds?: OperationsProjection["prds"];
   runs?: OperationsProjection["runs"];
   specs?: OperationsProjection["specs"];
   tasks?: OperationsProjection["tasks"];
-  resolveRunCostBrl?: ((runId: string) => number | null) | undefined;
+  /** Factual Cost Monitor snapshot total for the selected locale/currency. */
+  factualCostTotal?: number | null | undefined;
+  resolveRunCost?: ((runId: string) => number | null) | undefined;
   includeLegacyEffort?: boolean;
 }) {
   const [overviewView, setOverviewView] = useState<OverviewView>("tasks");
   const [selectedStatus, setSelectedStatus] = useState<WorkStage | null>(null);
-  const [selectedRisk, setSelectedRisk] = useState<
-    OperationsProjection["tasks"][number]["risk"] | null
-  >(null);
+  const [selectedClassification, setSelectedClassification] = useState<OverviewClassification | null>(null);
   const completed = tasks.filter((task) => task.status === "completed").length;
   const completedSpecs = specs.filter((spec) => spec.work_status === "completed").length;
   const completedPrds = prds.filter((prd) => prd.work_status === "completed").length;
-  const taskCompletion = tasks.length === 0 ? 0 : completed / tasks.length;
-  const specCompletion = specs.length === 0 ? 0 : completedSpecs / specs.length;
-  const prdCompletion = prds.length === 0 ? 0 : completedPrds / prds.length;
   const copy = overviewCopy(overviewView, locale);
   const text = overviewText(locale);
   const selectedMacros = overviewView === "specs" ? specs : prds;
-  const selectedCount = overviewView === "tasks" ? tasks.length : selectedMacros.length;
+  const overviewMetrics = partialOverviewMetrics(data);
+  const selectedMacroAggregate =
+    overviewView === "tasks" ? undefined : overviewMetrics?.macro_metrics?.[overviewView];
+  const selectedCount = selectedOverviewCount(
+    overviewView,
+    overviewMetrics,
+    overviewView === "tasks" ? tasks.length : selectedMacros.length,
+  );
   const selectedMetricRuns = runsForOverviewView(overviewView, tasks, selectedMacros, runs);
-  const entityMetrics =
+  const entityMetrics: EntityMetric[] =
     overviewView === "tasks"
-      ? aggregateTaskMetrics(tasks, selectedMetricRuns, resolveRunCostBrl)
-      : aggregateMacroMetrics(selectedMacros, selectedMetricRuns, resolveRunCostBrl);
-  const averageDuration = averageObserved(entityMetrics.map((entity) => entity.durationMs));
-  const taskStatusStats = taskStatusDistribution(tasks, locale);
-  const macroStatusStats = macroStatusDistribution(selectedMacros, tasks, locale);
+      ? aggregateTaskMetrics(tasks, selectedMetricRuns, resolveRunCost)
+      : aggregateMacroMetrics(selectedMacros, selectedMetricRuns, resolveRunCost);
+  const aggregateTaskStatusCounts = overviewMetrics?.task_status_counts;
+  const taskStatusStats = aggregateTaskStatusCounts
+    ? [
+        ...workStages.map((stage) => ({
+          key: stage,
+          label: workStageLabel(stage, locale),
+          color: statusColors[stage],
+          count:
+            stage === "definition"
+              ? (aggregateTaskStatusCounts.draft ?? 0) + (aggregateTaskStatusCounts.definition ?? 0)
+              : stage === "ready"
+                ? (aggregateTaskStatusCounts.planned ?? 0) + (aggregateTaskStatusCounts.ready ?? 0)
+                : (aggregateTaskStatusCounts[stage] ?? 0),
+        })),
+        ...(aggregateTaskStatusCounts.unclassified
+          ? [
+              {
+                key: "unclassified",
+                label: locale === "pt-BR" ? "Não classificado" : "Unclassified",
+                color: "var(--color-neutral-500)",
+                count: aggregateTaskStatusCounts.unclassified,
+              },
+            ]
+          : []),
+      ]
+    : taskStatusDistribution(tasks, locale);
+  const macroStatusStats = selectedMacroAggregate
+    ? workStages.map((stage) => ({
+        key: stage,
+        label: workStageLabel(stage, locale),
+        color: statusColors[stage],
+        count: selectedMacroAggregate.status_counts[stage] ?? 0,
+      }))
+    : macroStatusDistribution(selectedMacros, tasks, locale);
   const statusStats = overviewView === "tasks" ? taskStatusStats : macroStatusStats;
   const statusTotal = statusStats.reduce((total, item) => total + item.count, 0);
-  const taskRiskStats = Object.entries(riskColors).map(([risk, color]) => ({
-    key: risk,
-    label: riskLabel(risk as OperationsProjection["tasks"][number]["risk"], locale),
-    color,
-    count: tasks.filter((task) => task.risk === risk).length,
-  }));
+  const aggregateTaskRiskCounts = overviewMetrics?.task_risk_counts;
+  const taskRiskStats = [
+    ...Object.entries(riskColors).map(([risk, color]) => ({
+      key: risk,
+      label: riskLabel(risk as OperationsProjection["tasks"][number]["risk"], locale),
+      color,
+      count: aggregateTaskRiskCounts
+        ? (aggregateTaskRiskCounts[risk] ?? 0)
+        : tasks.filter((task) => task.risk === risk).length,
+    })),
+    ...((aggregateTaskRiskCounts?.unclassified ?? tasks.filter((task) => task.risk === null).length)
+      ? [
+          {
+            key: "unclassified",
+            label: locale === "pt-BR" ? "Não classificado" : "Unclassified",
+            color: "var(--color-neutral-500)",
+            count:
+              aggregateTaskRiskCounts?.unclassified ??
+              tasks.filter((task) => task.risk === null).length,
+          },
+        ]
+      : []),
+  ];
   const classificationStats =
-    overviewView === "tasks" ? taskRiskStats : macroClassificationStats(selectedMacros, locale);
-  // Global cards and period tables use every filtered invocation. Rankings
-  // remain entity-attributable, so a Run without a Task/SPEC/PRD link does not
-  // disappear from the operational total merely because it cannot be ranked.
+    overviewView === "tasks"
+      ? taskRiskStats
+      : selectedMacroAggregate
+        ? macroClassificationStats([], locale).map((row) => ({
+            ...row,
+            count: selectedMacroAggregate.classification_counts[row.key] ?? 0,
+          }))
+        : macroClassificationStats(selectedMacros, locale);
+  // Duration cards follow strict root execution invocations; financial usage
+  // remains an all-phase metric.
   const executionMetrics = executionMetricTotals(runs);
-  const effortMetrics = effortMetricTotals(runs);
   const allPhaseMetrics = allPhaseMetricTotals(runs);
-  const overviewMetrics = runs.length === 0 ? data.summary.overview_metrics : undefined;
+  // The aggregate is canonical for big numbers even after a detail, board, or
+  // Cost Monitor navigation populates bounded local collections.
+  const overviewIsPartial = overviewMetrics?.partial === true;
+  const taskCount = overviewMetrics?.task_count ?? tasks.length;
+  const specCount = overviewMetrics?.spec_count ?? specs.length;
+  const prdCount = overviewMetrics?.prd_count ?? prds.length;
+  const completedTaskCount = overviewMetrics?.completed_task_count ?? completed;
+  const completedSpecCount = overviewMetrics?.completed_spec_count ?? completedSpecs;
+  const completedPrdCount = overviewMetrics?.completed_prd_count ?? completedPrds;
+  const taskCompletion = taskCount === null || taskCount === 0 ? 0 : completedTaskCount / taskCount;
+  const specCompletion = specCount === null || specCount === 0 ? 0 : completedSpecCount / specCount;
+  const prdCompletion = prdCount === null || prdCount === 0 ? 0 : completedPrdCount / prdCount;
   const executionRuns = executionMetrics.runs;
-  const totalDuration =
-    overviewMetrics?.duration_ms ??
-    (includeLegacyEffort ? globalLegacyEffortMetricDuration(runs) : effortMetrics.durationMs);
+  const totalDurationMetric = overviewMetrics?.duration_ms ?? executionMetrics.durationMs;
   const totalExecutionDays =
     overviewMetrics?.execution_day_count ?? countExecutionDays(executionRuns);
-  const totalTokens = overviewMetrics?.tokens ?? allPhaseMetrics.tokens;
-  const totalCost = resolveRunCostBrl
-    ? allPhaseMetrics.runs.reduce<number | null>((total, run) => {
-        const value = resolveRunCostBrl(run.id);
-        return value === null ? total : (total ?? 0) + value;
-      }, null)
-    : (overviewMetrics?.cost_brl ?? allPhaseMetrics.costBrl);
+  const totalTokensMetric = overviewMetrics?.tokens ?? allPhaseMetrics.tokens;
+  const selectedCurrencyCost =
+    resolveRunCost === undefined
+      ? null
+      : allPhaseMetrics.runs.reduce<number | null>((total, run) => {
+          const value = resolveRunCost(run.id);
+          return value === null ? total : (total ?? 0) + value;
+        }, null);
+  const selectedMacroCost =
+    overviewView === "tasks"
+      ? undefined
+      : currency === "USD"
+        ? selectedMacroAggregate?.total_cost_usd
+        : selectedMacroAggregate?.total_cost_brl;
+  // Operations aggregates are BRL-only. USD is valid only when it is resolved
+  // from Cost Monitor's factual per-Run estimates; never relabel BRL as USD.
+  const totalCostMetric = resolveOverviewCostTotal({
+    currency,
+    factualSnapshotTotal: factualCostTotal,
+    macroCostTotal: selectedMacroCost,
+    overviewView,
+    resolvedRunTotal: selectedCurrencyCost,
+    operationsBrlTotal: overviewMetrics?.cost_brl ?? allPhaseMetrics.costBrl,
+  });
   const hourlyCost =
-    totalDuration === null || totalDuration <= 0 || totalCost === null
+    totalDurationMetric === null || totalDurationMetric <= 0 || totalCostMetric === null
+      ? null
+      : (totalCostMetric * 3_600_000) / totalDurationMetric;
+  const costPerTask =
+    totalCostMetric === null || taskCount === null || taskCount === 0
       ? null
-      : (totalCost * 3_600_000) / totalDuration;
-  const costPerTask = totalCost === null || tasks.length === 0 ? null : totalCost / tasks.length;
+      : totalCostMetric / taskCount;
   const tokensPerTask =
-    totalTokens === null || tasks.length === 0 ? null : totalTokens / tasks.length;
+    totalTokensMetric === null || taskCount === null || taskCount === 0
+      ? null
+      : totalTokensMetric / taskCount;
   const tokensPerHour =
-    totalDuration === null || totalDuration <= 0 || totalTokens === null
+    totalDurationMetric === null || totalDurationMetric <= 0 || totalTokensMetric === null
       ? null
-      : (totalTokens * 3_600_000) / totalDuration;
-  const averageTokens = averageObserved(entityMetrics.map((entity) => entity.tokens));
-  const averageCost = averageObserved(entityMetrics.map((entity) => entity.costBrl));
-  const latestCreatedAt = findLatestCreatedAt(overviewView === "tasks" ? tasks : selectedMacros);
+      : (totalTokensMetric * 3_600_000) / totalDurationMetric;
+  const aggregateAverages = overviewMetricAverages(
+    { durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric },
+    selectedCount,
+  );
+  const averageDuration =
+    selectedMacroAggregate?.average_duration_ms ?? aggregateAverages.durationMs;
+  const averageTokens = selectedMacroAggregate?.average_tokens ?? aggregateAverages.tokens;
+  const averageCost =
+    overviewView !== "tasks"
+      ? (currency === "USD"
+          ? selectedMacroAggregate?.average_cost_usd
+          : selectedMacroAggregate?.average_cost_brl) ?? null
+      : aggregateAverages.costBrl;
+  const latestCreatedAt =
+    overviewView === "tasks"
+      ? tasks.length === 0
+        ? (overviewMetrics?.latest_task_created_at ?? null)
+        : findLatestCreatedAt(tasks)
+      : (selectedMacroAggregate?.latest_created_at ?? findLatestCreatedAt(selectedMacros));
   const metricStats = [
-    [text.averageTime, averageDuration === null ? "—" : formatDurationMs(averageDuration, locale)],
-    [text.averageTokens, formatCompactNumber(averageTokens, locale)],
-    [text.averageCost, formatCurrency(averageCost, "BRL", locale)],
+    [text.averageTime, formatEntityDuration(averageDuration, locale)],
+    [
+      text.averageTokens,
+      averageTokens === null
+        ? formatEntityDuration(null, locale)
+        : formatCompactNumber(averageTokens, locale),
+    ],
+    [
+      text.averageCost,
+      averageCost === null
+        ? formatEntityDuration(null, locale)
+        : formatCurrency(averageCost, currency, locale),
+    ],
   ] as const;
-  const topEntities = entityMetrics
-    .filter((entity) => entity.durationMs !== null)
-    .sort((a, b) => (b.durationMs ?? 0) - (a.durationMs ?? 0))
-    .slice(0, 5);
+  const aggregateTopTasks: EntityMetric[] = (overviewMetrics?.top_tasks ?? []).map((metric) => ({
+    id: metric.task_id,
+    title: tasks.find((task) => task.id === metric.task_id)?.title ?? metric.task_id,
+    durationMs: metric.duration_ms,
+    durationProvenance: metric.duration_ms === null ? "unavailable" : "observed",
+    tokens: metric.total_tokens,
+    // EntityMetric predates the global locale selector. It is a selected
+    // display-currency bucket here, never a BRL value relabelled as USD.
+    costBrl: currency === "USD" ? metric.total_cost_usd ?? null : metric.cost_brl,
+    runCount: metric.run_count,
+  }));
+  const aggregateTopMacros: EntityMetric[] = (selectedMacroAggregate?.top_entities ?? []).map(
+    (metric) => ({
+      id: metric.entity_id,
+      title: metric.title,
+      durationMs: metric.duration_ms,
+      durationProvenance: metric.duration_ms === null ? "unavailable" : "observed",
+      tokens: metric.total_tokens,
+      costBrl: currency === "USD" ? metric.total_cost_usd ?? null : metric.cost_brl,
+      runCount: metric.run_count,
+    }),
+  );
+  const topEntities =
+    overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0
+      ? aggregateTopTasks
+      : overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0
+        ? aggregateTopMacros
+        : selectTopEntities(entityMetrics);
   const maxDuration = Math.max(1, ...topEntities.map((entity) => entity.durationMs ?? 0));
-  const topEntitiesSummary = summarizeTopEntityMetrics(topEntities, entityMetrics);
+  const topEntitiesSummary =
+    overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0
+      ? {
+          ...summarizeTopEntityMetrics(topEntities, topEntities),
+          durationShare:
+            totalDurationMetric === null || totalDurationMetric === 0
+              ? 0
+              : topEntities.reduce((sum, entity) => sum + (entity.durationMs ?? 0), 0) /
+                totalDurationMetric,
+        }
+      : overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0
+        ? {
+            ...summarizeTopEntityMetrics(topEntities, topEntities),
+            durationShare:
+              selectedMacroAggregate?.total_duration_ms === null ||
+              selectedMacroAggregate?.total_duration_ms === undefined ||
+              selectedMacroAggregate.total_duration_ms === 0
+                ? 0
+                : topEntities.reduce((sum, entity) => sum + (entity.durationMs ?? 0), 0) /
+                  selectedMacroAggregate.total_duration_ms,
+          }
+        : summarizeTopEntityMetrics(topEntities, entityMetrics);
+  // Aggregate top-entity snapshots in Operations are BRL-only. A selected USD
+  // value is displayable only when the visible entities were derived from the
+  // factual per-Run Cost Monitor resolver.
+  const usesAggregateTopEntities =
+    (overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0) ||
+    (overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0);
+  const topEntitiesCost =
+    currency === "USD" && !usesAggregateTopEntities && (runs.length === 0 || resolveRunCost === undefined)
+      ? null
+      : topEntitiesSummary.costBrl;
+  const topHint =
+    overviewView === "tasks"
+      ? text.topHint
+      : locale === "pt-BR"
+        ? "Tempo de ciclo de vida (Runs-raiz, todas as fases)."
+        : "Lifecycle time (root Runs, all phases).";
 
   const selectOverviewView = (view: OverviewView) => {
     setOverviewView(view);
     setSelectedStatus(null);
-    setSelectedRisk(null);
+    setSelectedClassification(null);
   };
 
   return (
@@ -230,34 +493,52 @@ export function OperationsOverview({
       <div className="operations-kpi-grid">
         <Kpi
           featured={overviewView === "tasks"}
-          hint={`${completed} ${text.completedTasks} (${formatPercent(taskCompletion, locale)})`}
+          hint={
+            overviewIsPartial && completedTaskCount === null
+              ? locale === "pt-BR"
+                ? "Resumo detalhado carregando…"
+                : "Detailed summary loading…"
+              : `${completedTaskCount} ${text.completedTasks} (${formatPercent(taskCompletion, locale)})`
+          }
           label={text.tasks}
           onSelect={() => selectOverviewView("tasks")}
-          value={String(tasks.length)}
+          value={taskCount === null ? "—" : String(taskCount)}
         />
         <Kpi
           featured={overviewView === "specs"}
-          hint={`${completedSpecs} ${text.completedSpecs} (${formatPercent(specCompletion, locale)})`}
+          hint={
+            overviewIsPartial && completedSpecCount === null
+              ? locale === "pt-BR"
+                ? "Resumo detalhado carregando…"
+                : "Detailed summary loading…"
+              : `${completedSpecCount} ${text.completedSpecs} (${formatPercent(specCompletion, locale)})`
+          }
           label="SPECs"
           onSelect={() => selectOverviewView("specs")}
-          value={String(specs.length)}
+          value={specCount === null ? "—" : String(specCount)}
         />
         <Kpi
           featured={overviewView === "prds"}
-          hint={`${completedPrds} ${text.completedPrds} (${formatPercent(prdCompletion, locale)})`}
+          hint={
+            overviewIsPartial && completedPrdCount === null
+              ? locale === "pt-BR"
+                ? "Resumo detalhado carregando…"
+                : "Detailed summary loading…"
+              : `${completedPrdCount} ${text.completedPrds} (${formatPercent(prdCompletion, locale)})`
+          }
           label="PRDs"
           onSelect={() => selectOverviewView("prds")}
-          value={String(prds.length)}
+          value={prdCount === null ? "—" : String(prdCount)}
         />
         <Kpi
           hint={formatExecutionAverageHint(
-            totalDuration ?? 0,
-            tasks.length,
+            totalDurationMetric ?? 0,
+            taskCount ?? 0,
             totalExecutionDays,
             locale,
           )}
           label={text.totalExecutionTime}
-          value={totalDuration === null ? "—" : formatDurationMs(totalDuration, locale)}
+          value={formatEntityDuration(totalDurationMetric, locale)}
         />
         <Kpi
           hint={
@@ -270,7 +551,11 @@ export function OperationsOverview({
                 : `${formatCompactNumber(tokensPerTask, locale)} / task (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
           }
           label={locale === "pt-BR" ? "Tokens gastos" : "Spent tokens"}
-          value={totalTokens === null ? "—" : formatCompactNumber(totalTokens, locale)}
+          value={
+            totalTokensMetric === null
+              ? formatEntityDuration(null, locale)
+              : formatCompactNumber(totalTokensMetric, locale)
+          }
         />
         <Kpi
           hint={
@@ -279,11 +564,15 @@ export function OperationsOverview({
                 ? "Custo por tarefa e por hora indispon\u00edvel"
                 : "Cost per task and hour unavailable"
               : locale === "pt-BR"
-                ? `${formatRoundedCurrency(costPerTask, locale)} / tarefa (${formatRoundedCurrency(hourlyCost, locale)} / hora)`
-                : `${formatRoundedCurrency(costPerTask, locale)} / task (${formatRoundedCurrency(hourlyCost, locale)} / hour)`
+                ? `${formatRoundedCurrency(costPerTask, currency, locale)} / tarefa (${formatRoundedCurrency(hourlyCost, currency, locale)} / hora)`
+                : `${formatRoundedCurrency(costPerTask, currency, locale)} / task (${formatRoundedCurrency(hourlyCost, currency, locale)} / hour)`
           }
           label={locale === "pt-BR" ? "Custo Estimado" : "Estimated cost"}
-          value={totalCost === null ? "—" : formatRoundedCurrency(totalCost, locale)}
+          value={
+            totalCostMetric === null
+              ? formatEntityDuration(null, locale)
+              : formatRoundedCurrency(totalCostMetric, currency, locale)
+          }
         />
       </div>
 
@@ -316,12 +605,20 @@ export function OperationsOverview({
                   </span>
                 </>
               );
-              return overviewView === "tasks" ? (
+              return item.key !== "unclassified" ? (
                 <button
                   aria-label={`${item.label}: ${item.count}, ${formatPercent(statusTotal === 0 ? 0 : item.count / statusTotal, locale)}`}
                   className="operations-legend-row operations-status-filter"
                   key={item.key}
-                  onClick={() => setSelectedStatus(item.key as WorkStage)}
+                  onClick={() => {
+                    const stage = item.key as WorkStage;
+                    setSelectedStatus(stage);
+                    onLoadStatus?.(
+                      stage,
+                      overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+                      0,
+                    );
+                  }}
                   type="button"
                 >
                   {content}
@@ -341,10 +638,12 @@ export function OperationsOverview({
             <div
               aria-hidden="true"
               className="operations-donut"
-              style={{ background: donutGradient(classificationStats, Math.max(selectedCount, 1)) }}
+              style={{
+                background: donutGradient(classificationStats, Math.max(selectedCount ?? 0, 1)),
+              }}
             />
             <div>
-              <strong>{selectedCount}</strong>
+              <strong>{selectedCount ?? "—"}</strong>
               <span>{copy.shortPlural}</span>
             </div>
           </div>
@@ -357,19 +656,30 @@ export function OperationsOverview({
                   <span className="operations-legend-value">
                     <strong>{item.count}</strong>
                     <small>
-                      {formatPercent(selectedCount === 0 ? 0 : item.count / selectedCount, locale)}
+                      {formatPercent(
+                        selectedCount === null || selectedCount === 0
+                          ? 0
+                          : item.count / selectedCount,
+                        locale,
+                      )}
                     </small>
                   </span>
                 </>
               );
-              return overviewView === "tasks" ? (
+              return item.key !== "unclassified" ? (
                 <button
-                  aria-label={`${item.label}: ${item.count}, ${formatPercent(selectedCount === 0 ? 0 : item.count / selectedCount, locale)}`}
+                  aria-label={`${item.label}: ${item.count}, ${formatPercent(selectedCount === null || selectedCount === 0 ? 0 : item.count / selectedCount, locale)}`}
                   className="operations-legend-row operations-status-filter"
                   key={item.key}
-                  onClick={() =>
-                    setSelectedRisk(item.key as OperationsProjection["tasks"][number]["risk"])
-                  }
+                  onClick={() => {
+                    const classification = item.key as OverviewClassification;
+                    setSelectedClassification(classification);
+                    onLoadClassificationPage?.(
+                      overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+                      classification,
+                      0,
+                    );
+                  }}
                   type="button"
                 >
                   {content}
@@ -404,7 +714,7 @@ export function OperationsOverview({
         </article>
 
         <article className="operations-panel">
-          <PanelHeader hint={text.topHint} title={copy.topTitle} />
+          <PanelHeader hint={topHint} title={copy.topTitle} />
           {topEntities.length > 0 ? (
             <>
               <div className="operations-run-bars">
@@ -419,14 +729,10 @@ export function OperationsOverview({
                     disabled={overviewView !== "tasks"}
                     key={entity.id}
                     onClick={() => void onOpenTask(entity.id)}
-                    title={`${entity.title}: ${formatDurationMs(entity.durationMs, locale)}`}
+                    title={`${entity.title}: ${formatEntityDuration(entity.durationMs, locale)}`}
                     type="button"
                   >
-                    <strong>
-                      {entity.durationMs == null
-                        ? "—"
-                        : formatDurationMs(entity.durationMs, locale)}
-                    </strong>
+                    <strong>{formatEntityDuration(entity.durationMs, locale)}</strong>
                     <i
                       style={{
                         height: `${Math.max(8, ((entity.durationMs ?? 0) / maxDuration) * 100)}%`,
@@ -439,7 +745,7 @@ export function OperationsOverview({
               <div className="operations-top-task-metrics">
                 <div>
                   <span>{text.accumulatedTime}</span>
-                  <strong>{formatDurationMs(topEntitiesSummary.durationMs, locale)}</strong>
+                  <strong>{formatEntityDuration(topEntitiesSummary.durationMs, locale)}</strong>
                   <small>{`${topEntitiesSummary.runCount} ${text.associatedRuns}`}</small>
                 </div>
                 <div>
@@ -449,7 +755,11 @@ export function OperationsOverview({
                 </div>
                 <div>
                   <span>{text.topFiveCost}</span>
-                  <strong>{formatCurrency(topEntitiesSummary.costBrl, "BRL", locale)}</strong>
+                  <strong>
+                    {topEntitiesCost === null
+                      ? formatEntityDuration(null, locale)
+                      : formatCurrency(topEntitiesCost, currency, locale)}
+                  </strong>
                   <small>
                     {topEntitiesSummary.tokens === null
                       ? text.tokensUnavailable
@@ -464,8 +774,16 @@ export function OperationsOverview({
         </article>
       </div>
       {selectedStatus === null ? null : (
-        <FilteredTasksDialog
-          eyebrow={locale === "pt-BR" ? "Status das tarefas" : "Task status"}
+        <FilteredStatusDialog
+          eyebrow={
+            locale === "pt-BR"
+              ? overviewView === "tasks"
+                ? "Status das tarefas"
+                : overviewView === "specs"
+                  ? "Status das SPECs"
+                  : "Status dos PRDs"
+              : `${copy.shortPlural} status`
+          }
           label={workStageLabel(selectedStatus, locale)}
           locale={locale}
           onClose={() => setSelectedStatus(null)}
@@ -473,49 +791,91 @@ export function OperationsOverview({
             setSelectedStatus(null);
             void onOpenTask(taskId);
           }}
-          tasks={tasks.filter((task) => taskWorkStage(task) === selectedStatus)}
+          onOpenDocument={(kind, id) => {
+            setSelectedStatus(null);
+            onOpenDocument(kind, id);
+          }}
+          items={statusPage?.(selectedStatus, overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd")?.items ?? []}
+          kind={overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd"}
+          onLoadMore={(offset) =>
+            onLoadStatusPage?.(
+              selectedStatus,
+              overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+              offset,
+            )
+          }
+          page={statusPage?.(selectedStatus, overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd")}
         />
       )}
-      {selectedRisk === null ? null : (
-        <FilteredTasksDialog
-          eyebrow={locale === "pt-BR" ? "Risco das tarefas" : "Task risk"}
-          label={riskLabel(selectedRisk, locale)}
+      {selectedClassification === null ? null : (
+        <FilteredStatusDialog
+          eyebrow={locale === "pt-BR" ? copy.classificationTitle : "Classification"}
+          label={
+            overviewView === "tasks"
+              ? riskLabel(selectedClassification as OperationsProjection["tasks"][number]["risk"], locale)
+              : classificationStats.find((item) => item.key === selectedClassification)?.label ?? selectedClassification
+          }
           locale={locale}
-          onClose={() => setSelectedRisk(null)}
+          onClose={() => setSelectedClassification(null)}
           onOpenTask={(taskId) => {
-            setSelectedRisk(null);
+            setSelectedClassification(null);
             void onOpenTask(taskId);
           }}
-          tasks={tasks.filter((task) => task.risk === selectedRisk)}
+          onOpenDocument={(kind, id) => {
+            setSelectedClassification(null);
+            onOpenDocument(kind, id);
+          }}
+          items={
+            classificationPage?.(
+              overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+              selectedClassification,
+            )?.items ?? []
+          }
+          kind={overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd"}
+          onLoadMore={(offset) =>
+            onLoadClassificationPage?.(
+              overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+              selectedClassification,
+              offset,
+            )
+          }
+          page={classificationPage?.(
+            overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+            selectedClassification,
+          )}
         />
       )}
     </section>
   );
 }
 
-function FilteredTasksDialog({
+function FilteredStatusDialog({
   eyebrow,
   label,
   locale,
   onClose,
   onOpenTask,
-  tasks,
+  onOpenDocument,
+  items,
+  state,
+  kind = "task",
+  onLoadMore,
+  page,
 }: {
   eyebrow: string;
   label: string;
   locale: OperationsLocale;
   onClose: () => void;
   onOpenTask: (taskId: string) => void;
-  tasks: OperationsProjection["tasks"];
+  onOpenDocument: (kind: "prd" | "spec", id: string) => void;
+  items: readonly (DashboardTaskProjection | MacroProjection)[];
+  state?: { loading: boolean; error: string | null } | undefined;
+  kind?: OverviewStatusKind;
+  onLoadMore?: ((offset: number) => void) | undefined;
+  page?: OverviewStatusPage | undefined;
 }) {
-  const taskLabel =
-    locale === "pt-BR"
-      ? tasks.length === 1
-        ? "tarefa"
-        : "tarefas"
-      : tasks.length === 1
-        ? "task"
-        : "tasks";
+  const total = page?.total ?? items.length;
+  const taskLabel = statusTypeLabel(kind, total, locale);
   return (
     <dialog
       className="operations-status-dialog-backdrop"
@@ -525,7 +885,7 @@ function FilteredTasksDialog({
       open
     >
       <section
-        aria-label={`${label} — ${tasks.length} ${taskLabel}`}
+        aria-label={`${label} — ${total} ${taskLabel}`}
         aria-modal="true"
         className="operations-status-dialog"
         role="dialog"
@@ -535,7 +895,7 @@ function FilteredTasksDialog({
             <span>{eyebrow}</span>
             <h2>{label}</h2>
             <p>
-              {tasks.length} {taskLabel}
+              {total} {taskLabel}
             </p>
           </div>
           <button
@@ -547,31 +907,72 @@ function FilteredTasksDialog({
           </button>
         </header>
         <div className="operations-status-task-list">
-          {tasks.map((task) => (
-            <button key={task.id} onClick={() => onOpenTask(task.id)} type="button">
+          {(page?.loading ?? state?.loading) && items.length === 0 ? (
+            <p aria-busy="true" aria-live="polite" className="operations-empty" role="status">
+              {locale === "pt-BR" ? "Carregando itens\u2026" : "Loading items\u2026"}
+            </p>
+          ) : null}
+          {(page?.error ?? state?.error) ? (
+            <p aria-live="assertive" className="operations-empty" role="alert">
+              {page?.error ?? state?.error}
+            </p>
+          ) : null}
+          {items.map((item) => (
+            <button
+              key={item.id}
+              onClick={() =>
+                "change_id" in item ? onOpenTask(item.id) : onOpenDocument(item.kind, item.id)
+              }
+              type="button"
+            >
               <span className="operations-status-task-main">
-                <strong>{task.title}</strong>
-                <small>{task.id}</small>
+                <strong>{item.title}</strong>
+                <small>{item.id}</small>
               </span>
-              <span className={`operations-risk is-${task.risk}`}>
-                {riskLabel(task.risk, locale)}
+              <span
+                className={
+                  "change_id" in item
+                    ? `operations-risk is-${item.risk}`
+                    : "operations-work-kind is-macro"
+                }
+              >
+                {"change_id" in item ? riskLabel(item.risk, locale) : item.kind.toUpperCase()}
               </span>
               <span className="operations-status-task-action">
                 {locale === "pt-BR" ? "Ver detalhes" : "View details"} →
               </span>
             </button>
           ))}
-          {tasks.length === 0 ? (
+          {items.length === 0 && !(page?.loading ?? state?.loading) ? (
             <p className="operations-empty">
-              {locale === "pt-BR" ? "Nenhuma tarefa neste status." : "No tasks in this status."}
+              {locale === "pt-BR"
+                ? `Nenhum${kind === "task" ? "a" : ""} ${statusTypeLabel(kind, 1, locale)} neste status.`
+                : `No ${statusTypeLabel(kind, 2, locale)} in this status.`}
             </p>
           ) : null}
+          {onLoadMore && items.length < (page?.total ?? 0) ? (
+            <button disabled={page?.loading} onClick={() => onLoadMore(items.length)} type="button">
+              {page?.loading
+                ? locale === "pt-BR"
+                  ? "Carregando…"
+                  : "Loading…"
+                : locale === "pt-BR"
+                  ? "Carregar mais"
+                  : "Load more"}
+            </button>
+          ) : null}
         </div>
       </section>
     </dialog>
   );
 }
 
+function statusTypeLabel(kind: OverviewStatusKind, count: number, locale: OperationsLocale): string {
+  if (kind === "prd") return count === 1 ? "PRD" : "PRDs";
+  if (kind === "spec") return count === 1 ? "SPEC" : "SPECs";
+  return locale === "pt-BR" ? (count === 1 ? "tarefa" : "tarefas") : count === 1 ? "task" : "tasks";
+}
+
 function PanelHeader({ title, hint, action }: { title: string; hint: string; action?: ReactNode }) {
   return (
     <header className="operations-panel-header">