@zaip-ai/cli 1.0.7 → 1.0.8

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostMonitorPage.tsx

@@ -3,47 +3,59 @@ import {
   type RunProjection,
   saoPauloPeriodKey,
 } from "@zaip-ai/dashboard-operations/contracts";
-import {
-  EntityDetailsDialog,
-  ExcelExportAction,
-  ExecutionTable,
-} from "@zaip-ai/dashboard-operations/react";
+import { EntityDetailsDialog, ExcelExportAction } from "@zaip-ai/dashboard-operations/react";
 import { DashboardHeader } from "@zaip-ai/dashboard-ui";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { includeConfiguredAgentGroups } from "../agent-groups.js";
-import {
-  aggregateDurationCoverage,
-  type CostGroupRow,
-  type CostMonitorProjection,
-  type CostRunRow,
-  sumKnown,
-} from "../contracts.js";
+import type { CostMonitorProjection } from "../contracts.js";
 import { normalizeCostProvider } from "../provider.js";
 import { aggregateTaskCostRows } from "../task-cost-groups.js";
-import { CostCharts } from "./CostCharts.js";
+import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
 import {
   type CostFilterState,
   CostFilters,
   type CostPeriod,
+  costPeriodDateRange,
   defaultCostPeriod,
   emptyCostFilters,
+  loadCostMonitorDetail,
   loadCostMonitorPeriod,
+  type loadCostMonitorRunPage,
   useCostMonitorPeriod,
 } from "./CostFilters.js";
+import { CostMonitorContent } from "./CostMonitorContent.js";
 import { ChevronDownIcon, ListFilterIcon, LocaleFlag, SettingsIcon } from "./CostMonitorIcons.js";
-import { CostPeriodAverageCards } from "./CostPeriodAverageCards.js";
 import { CostSummary } from "./CostSummary.js";
-import { CostGroupsTable, CostModelsAuditTable, CostRunsTable } from "./CostTables.js";
-import { durationContributors } from "./cost-duration.js";
+import {
+  groupRows,
+  matches,
+  matchesGlobalFilters,
+  matchesPeriodEntity,
+} from "./cost-monitor-row-filters.js";
+
+export {
+  groupRows,
+  matchesGlobalFilters,
+  matchesPeriodEntity,
+} from "./cost-monitor-row-filters.js";
+
 import {
   type CostCurrency,
   type CostLocale,
   costCopy,
   localeCurrency,
 } from "./cost-monitor-copy.js";
-import { applyLegacyPeriodGroups, summarizeCostRows } from "./cost-monitor-summary.js";
-import { MacroCostTable } from "./MacroCostTable.js";
+import { findRunDetails, selectDimensionalCostRows } from "./cost-monitor-page-helpers.js";
+import { summarizeCostRows } from "./cost-monitor-summary.js";
+import { COST_VIEW_ORDER, type CostView, DEFAULT_COST_VIEW } from "./cost-monitor-views.js";
 import { enrichPeriodCostGroups } from "./period-cost-groups.js";
+import {
+  compactReadModelKind,
+  type LoadCompactCostPage,
+  useCompactCostPage,
+} from "./use-compact-cost-page.js";
+import { type LoadCostGroupPage, useCostGroupPage } from "./use-cost-group-page.js";
+import { useCostRunPage } from "./use-cost-run-page.js";
 import "./cost-monitor.css";
 import "./cost-monitor-responsive.css";
 import "./cost-run-origin.css";
@@ -51,43 +63,76 @@ import "./cost-monitor-embedded.css";
 
 const zaipLogoUrl = new URL("../../../../../config/src/logo_novo_azul.png", import.meta.url).href;
 
-export type CostView =
-  | "overview"
-  | "agentCalls"
-  | "executions"
-  | "conversations"
-  | "tasks"
-  | "prds"
-  | "specs"
-  | "providers"
-  | "agents"
-  | "models"
-  | "daily"
-  | "monthly"
-  | "annual";
-export const DEFAULT_COST_VIEW: CostView = "daily";
-export const COST_VIEW_ORDER: readonly CostView[] = [
-  "overview",
-  "executions",
-  "agentCalls",
-  "agents",
-  "models",
-  "providers",
-  "tasks",
-  "specs",
-  "prds",
-  "conversations",
-  "daily",
-  "monthly",
-  "annual",
-];
-type AgentCallKind = "all" | "run" | "subrun";
-export function findRunDetails<T extends { id: string }>(
-  runs: readonly T[],
-  runId: string,
-): T | null {
-  return runs.find((run) => run.id === runId) ?? null;
+export {
+  findRunDetails,
+  isCurrentCostRunPageGeneration,
+  selectDimensionalCostRows,
+} from "./cost-monitor-page-helpers.js";
+export {
+  COST_VIEW_ORDER,
+  type CostView,
+  DEFAULT_COST_VIEW,
+} from "./cost-monitor-views.js";
+
+export type { LoadCompactCostPage } from "./use-compact-cost-page.js";
+export type { LoadCostGroupPage } from "./use-cost-group-page.js";
+export type LoadCostMonitorDetail = typeof loadCostMonitorDetail;
+export type LoadCostRunPage = typeof loadCostMonitorRunPage;
+
+/**
+ * The Cost period request filters Runs, while Operations is the global snapshot
+ * used for shared entity detail. Keep the Executions tab on that same active
+ * Run population instead of accidentally showing an unfiltered empty/stale
+ * Operations table.
+ */
+export function visibleExecutionRows<T extends { id: string }>(
+  executions: readonly T[],
+  rows: readonly Pick<CostMonitorProjection["runs"][number], "execution_id">[],
+): T[] {
+  const visibleIds = new Set(
+    rows.flatMap((row) => (row.execution_id === null ? [] : [row.execution_id])),
+  );
+  return executions.filter((execution) => visibleIds.has(execution.id));
 }
+
+/** Only filters represented by the partial Runs endpoint may use page-only data. */
+export function isServerCostRunPagingEligible(filters: CostFilterState, globalQuery = ""): boolean {
+  return (
+    (globalQuery === "" || filters.query === "") &&
+    filters.priority === "" &&
+    filters.risk === "" &&
+    filters.origin === "" &&
+    filters.workType === ""
+  );
+}
+
+/**
+ * The embedded default view is backed by the App's all-time atomic snapshot.
+ * Keep the group pager on that same population until a period, global date, or
+ * local Cost filter explicitly narrows it.
+ */
+export function resolveCostGroupPageRange({
+  embedded,
+  globalDateRange,
+  hasLocalCostFilters,
+  period,
+  runPageRange,
+}: {
+  embedded: boolean;
+  globalDateRange: { start: string; end: string } | undefined;
+  hasLocalCostFilters: boolean;
+  period: CostPeriod;
+  runPageRange: { from: string; to: string } | undefined;
+}): { from: string; to: string } | undefined {
+  if (
+    embedded &&
+    globalDateRange === undefined &&
+    period === defaultCostPeriod &&
+    !hasLocalCostFilters
+  ) return undefined;
+  return runPageRange;
+}
+
 export function CostMonitorPage({
   capabilityNavigation,
   data,
@@ -97,10 +142,15 @@ export function CostMonitorPage({
   lastUpdatedAt,
   locale,
   loading,
+  onLoadingChange,
   onLocaleChange,
   onOpenTrace,
   onActiveDataChange,
   onRefresh,
+  loadDetail = loadCostMonitorDetail,
+  loadRunPage,
+  loadReadModelPage,
+  loadGroupPage,
   loadPeriod = loadCostMonitorPeriod,
   operations,
   repositoryName,
@@ -119,18 +169,30 @@ export function CostMonitorPage({
   lastUpdatedAt: string | null;
   locale: CostLocale;
   loading: boolean;
+  onLoadingChange?: (loading: boolean) => void;
   onLocaleChange: (locale: CostLocale) => void;
   onOpenTrace: (taskId: string) => void;
   onActiveDataChange?: (data: CostMonitorProjection) => void;
+  /**
+   * Retained for host compatibility. Cost views must use bounded summary or
+   * page routes; activating a tab never requests the historical detail blob.
+   */
+  onDetailDataRequest?: () => void;
   onRefresh: () => void;
+  loadDetail?: LoadCostMonitorDetail;
+  loadRunPage?: LoadCostRunPage;
+  loadReadModelPage?: LoadCompactCostPage;
+  loadGroupPage?: LoadCostGroupPage;
   loadPeriod?: typeof loadCostMonitorPeriod;
-  operations?: Pick<OperationsProjection, "runs" | "specs" | "tasks" | "executions">;
+  operations?: Pick<
+    OperationsProjection,
+    "runs" | "specs" | "tasks" | "executions" | "evidences" | "validations" | "summary"
+  >;
   repositoryName?: string;
   currency?: CostCurrency;
   onCurrencyChange?: (currency: CostCurrency) => void;
 }) {
   const [view, setView] = useState<CostView>(DEFAULT_COST_VIEW);
-  const [agentCallKind, setAgentCallKind] = useState<AgentCallKind>("all");
   const [filters, setFilters] = useState<CostFilterState>(emptyCostFilters);
   const [localCurrency, setLocalCurrency] = useState<CostCurrency>("BRL");
   const currency = controlledCurrency ?? localCurrency;
@@ -143,6 +205,12 @@ export function CostMonitorPage({
   const [localeOpen, setLocaleOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [selectedRun, setSelectedRun] = useState<RunProjection | null>(null);
+  const [detailData, setDetailData] = useState<CostMonitorProjection | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [detailError, setDetailError] = useState<string | null>(null);
+  const [detailAttempt, setDetailAttempt] = useState(0);
+  const loadDetailRef = useRef(loadDetail);
+  loadDetailRef.current = loadDetail;
   const text = costCopy[locale];
   const { activeData, periodError, periodLoading } = useCostMonitorPeriod({
     currency,
@@ -155,6 +223,78 @@ export function CostMonitorPage({
     snapshotBacked: embedded,
   });
   const hasLocalCostFilters = Object.values(filters).some((value) => value !== "");
+  const runPageRange =
+    globalFilters?.dateRange === undefined
+      ? costPeriodDateRange(period)
+      : { from: globalFilters.dateRange.start, to: globalFilters.dateRange.end };
+  const groupPageRange = resolveCostGroupPageRange({
+    embedded,
+    globalDateRange: globalFilters?.dateRange,
+    hasLocalCostFilters,
+    period,
+    runPageRange,
+  });
+  const costGroupViewName = (
+    candidate: CostView,
+  ): "daily" | "monthly" | "annual" | "agents" | "models" | "providers" | null =>
+    candidate === "daily" ||
+    candidate === "monthly" ||
+    candidate === "annual" ||
+    candidate === "agents" ||
+    candidate === "models" ||
+    candidate === "providers"
+      ? candidate
+      : null;
+  const groupView = costGroupViewName(view);
+  const groupPageState = useCostGroupPage({
+    view: groupView ?? "daily",
+    ...(groupPageRange === undefined ? {} : { range: groupPageRange }),
+    globalQuery: globalFilters?.query ?? "",
+    filters,
+    ...(groupView === null ? {} : { load: loadGroupPage }),
+  });
+  const {
+    compactPageOffset,
+    setCompactPageOffset,
+    compactPage,
+    compactPageLoading,
+    compactPageError,
+    retryCompactPage,
+  } = useCompactCostPage({
+    view,
+    load: loadReadModelPage,
+    range: runPageRange,
+    query: globalFilters?.query,
+    filters,
+  });
+  // Server pagination is safe only when every active Run filter is part of the
+  // endpoint contract. Unsupported local text/metadata filters retain the
+  // complete active snapshot so a page cannot omit matching Runs.
+  const serverPagingEligible = isServerCostRunPagingEligible(filters, globalFilters?.query ?? "");
+  const {
+    runPageOffset,
+    setRunPageOffset,
+    runPageData,
+    runPageLoading,
+    runPageError,
+    retryRunPage,
+  } = useCostRunPage({
+    view,
+    eligible: view === "agentCalls" && serverPagingEligible,
+    currency,
+    filters,
+    globalQuery: globalFilters?.query ?? "",
+    range: runPageRange,
+    refresh: lastUpdatedAt,
+    load: loadRunPage,
+  });
+  useEffect(
+    () =>
+      onLoadingChange?.(
+        loading || periodLoading || runPageLoading || groupPageState.loading || compactPageLoading || detailLoading,
+      ),
+    [compactPageLoading, detailLoading, groupPageState.loading, loading, onLoadingChange, periodLoading, runPageLoading],
+  );
   useEffect(() => {
     if (!hasLocalCostFilters) onActiveDataChange?.(activeData);
   }, [activeData, hasLocalCostFilters, onActiveDataChange]);
@@ -169,6 +309,59 @@ export function CostMonitorPage({
       .filter((row) => matches(row, filters) && matchesGlobalFilters(row, globalFilters))
       .sort((left, right) => right.started_at.localeCompare(left.started_at));
   }, [activeData.runs, filters, globalFilters]);
+  // Summary carries exact compact group aggregates. Full Run detail is only
+  // for an explicit trace, never a prerequisite for opening a Cost tab.
+  const needsDimensionalDetail = false;
+  const runPageFrom = runPageRange?.from;
+  const runPageTo = runPageRange?.to;
+  useEffect(() => {
+    void detailAttempt;
+    if (!needsDimensionalDetail) {
+      setDetailData(null);
+      setDetailLoading(false);
+      setDetailError(null);
+      return;
+    }
+    const controller = new AbortController();
+    setDetailData(null);
+    setDetailLoading(true);
+    setDetailError(null);
+    void loadDetailRef
+      .current({
+        currency,
+        filters,
+        ...(runPageFrom === undefined || runPageTo === undefined
+          ? {}
+          : { from: runPageFrom, to: runPageTo }),
+        refresh: lastUpdatedAt,
+        signal: controller.signal,
+      })
+      .then(setDetailData)
+      .catch((cause: unknown) => {
+        if (!controller.signal.aborted)
+          setDetailError(cause instanceof Error ? cause.message : String(cause));
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setDetailLoading(false);
+      });
+    return () => controller.abort();
+  }, [currency, detailAttempt, filters, lastUpdatedAt, runPageFrom, runPageTo]);
+  const pagedRunRows = useMemo(
+    () =>
+      (runPageData?.runs ?? []).filter(
+        (row) => matches(row, filters) && matchesGlobalFilters(row, globalFilters),
+      ),
+    [filters, globalFilters, runPageData?.runs],
+  );
+  const dimensionalRows = useMemo(
+    () =>
+      selectDimensionalCostRows(rows, detailData?.runs)
+        .filter((row) => matches(row, filters) && matchesGlobalFilters(row, globalFilters))
+        .sort((left, right) => right.started_at.localeCompare(left.started_at)),
+    [detailData?.runs, filters, globalFilters, rows],
+  );
+  const dimensionalDetailPending =
+    needsDimensionalDetail && detailData === null && detailError === null;
   const macroDetails = useMemo(() => {
     if (operations === undefined) return undefined;
     const visibleRunIds = new Set(rows.map((row) => row.run_id));
@@ -177,108 +370,205 @@ export function CostMonitorPage({
       runs: operations.runs.filter((run) => visibleRunIds.has(run.id)),
     };
   }, [operations, rows]);
-  const visiblePrds = useMemo(
-    () => activeData.prds.filter((prd) => matchesPeriodEntity(prd, globalFilters)),
-    [activeData.prds, globalFilters],
-  );
-  const visibleSpecs = useMemo(
-    () => activeData.specs.filter((spec) => matchesPeriodEntity(spec, globalFilters)),
-    [activeData.specs, globalFilters],
-  );
-  const groups = useMemo(() => {
-    const legacy =
-      !hasLocalCostFilters &&
-      (globalFilters === undefined ||
-        (globalFilters.query === "" && globalFilters.datePreset === "all"))
-        ? (activeData.legacy_effort_baseline ?? null)
-        : null;
-    const periodEntities = {
+  const periodEntities = useMemo(
+    () => ({
       prds: activeData.prds.filter((prd) => matchesPeriodEntity(prd, globalFilters)),
       specs: activeData.specs.filter((spec) => matchesPeriodEntity(spec, globalFilters)),
       tasks: (operations?.tasks ?? []).filter((task) => matchesPeriodEntity(task, globalFilters)),
-    };
+      evidences: (operations?.evidences ?? []).filter((evidence) =>
+        matchesPeriodEntity({ created_at: evidence.observed_at }, globalFilters),
+      ),
+      validations: (operations?.validations ?? []).filter((validation) =>
+        matchesPeriodEntity({ created_at: validation.executed_at }, globalFilters),
+      ),
+    }),
+    [
+      activeData.prds,
+      activeData.specs,
+      globalFilters,
+      operations?.evidences,
+      operations?.tasks,
+      operations?.validations,
+    ],
+  );
+  const visiblePrds = periodEntities.prds;
+  const visibleSpecs = periodEntities.specs;
+  const useAggregateGroups =
+    activeData.aggregate_only === true && dimensionalRows.length === 0 && !hasLocalCostFilters;
+  const groups = useMemo(() => {
+    if (useAggregateGroups) return activeData.groups;
     return {
       conversations: groupRows(
-        rows.filter((row) => row.phase === "conversation"),
+        dimensionalRows,
         (row) => row.conversation_id ?? row.task_title ?? row.run_id,
         undefined,
         "all_invocations",
       ),
-      tasks: aggregateTaskCostRows(periodEntities.tasks, rows),
+      tasks: aggregateTaskCostRows(periodEntities.tasks, dimensionalRows),
       providers: groupRows(
-        rows,
+        dimensionalRows,
         (row) => normalizeCostProvider(row.provider),
         undefined,
         "all_invocations",
       ),
       agents: includeConfiguredAgentGroups(
-        groupRows(rows, (row) => row.agent_name),
+        groupRows(dimensionalRows, (row) => row.agent_name),
         activeData.configured_agents,
       ),
-      models: groupRows(rows, (row) => row.model),
-      daily: applyLegacyPeriodGroups(
-        enrichPeriodCostGroups(
-          groupRows(
-            rows,
-            (row) => saoPauloPeriodKey(row.started_at, "day") ?? row.started_at.slice(0, 10),
-          ),
-          periodEntities,
-          "daily",
+      models: groupRows(dimensionalRows, (row) => row.model),
+      daily: enrichPeriodCostGroups(
+        groupRows(
+          rows,
+          (row) => {
+            const timestamp = row.finished_at ?? row.started_at;
+            return saoPauloPeriodKey(timestamp, "day") ?? timestamp.slice(0, 10);
+          },
+          undefined,
+          "all_invocations",
         ),
-        rows,
-        "day",
-        legacy,
+        periodEntities,
+        "daily",
       ),
-      monthly: applyLegacyPeriodGroups(
-        enrichPeriodCostGroups(
-          groupRows(
-            rows,
-            (row) => saoPauloPeriodKey(row.started_at, "month") ?? row.started_at.slice(0, 7),
-          ),
-          periodEntities,
-          "monthly",
+      monthly: enrichPeriodCostGroups(
+        groupRows(
+          rows,
+          (row) => {
+            const timestamp = row.finished_at ?? row.started_at;
+            return saoPauloPeriodKey(timestamp, "month") ?? timestamp.slice(0, 7);
+          },
+          undefined,
+          "all_invocations",
         ),
-        rows,
-        "month",
-        legacy,
+        periodEntities,
+        "monthly",
       ),
-      annual: applyLegacyPeriodGroups(
-        enrichPeriodCostGroups(
-          groupRows(
-            rows,
-            (row) => saoPauloPeriodKey(row.started_at, "year") ?? row.started_at.slice(0, 4),
-          ),
-          periodEntities,
-          "annual",
+      annual: enrichPeriodCostGroups(
+        groupRows(
+          rows,
+          (row) => {
+            const timestamp = row.finished_at ?? row.started_at;
+            return saoPauloPeriodKey(timestamp, "year") ?? timestamp.slice(0, 4);
+          },
+          undefined,
+          "all_invocations",
         ),
-        rows,
-        "year",
-        legacy,
+        periodEntities,
+        "annual",
       ),
     };
   }, [
     activeData.configured_agents,
-    activeData.prds,
-    activeData.specs,
-    globalFilters,
-    operations?.tasks,
+    periodEntities,
+    dimensionalRows,
     rows,
-    hasLocalCostFilters,
-    activeData.legacy_effort_baseline,
+    useAggregateGroups,
+    activeData.groups,
   ]);
-  const overview = summarizeCostRows(rows, activeData.overview);
+  const displayGroups = useMemo(
+    () =>
+      groupView === null
+        ? groups
+        : {
+            ...groups,
+            [groupView]:
+              groupPageState.page === null
+                ? []
+                : groupView === "agents"
+                  ? includeConfiguredAgentGroups(groupPageState.page.rows, activeData.configured_agents)
+                  : [...groupPageState.page.rows],
+          },
+    [activeData.configured_agents, groups, groupPageState.page, groupView],
+  );
+  const overview = useAggregateGroups
+    ? activeData.overview
+    : {
+        ...summarizeCostRows(rows, activeData.overview),
+        task_count: periodEntities.tasks.length,
+      };
+  const canonicalDurationTotal = groups.annual.reduce(
+    (total, row) => total + row.duration.known_sum,
+    0,
+  );
+  // Model/provider rows intentionally omit untrusted dimensions. Their footer
+  // remains the canonical card population for the same filters, never the
+  // visible subset or its paginated SQLite total.
+  const cardMetrics = operations?.summary.overview_metrics;
+  const cardDurationTotal = cardMetrics ? cardMetrics.duration_ms : canonicalDurationTotal;
+  const summaryTotals = {
+    run_count: overview.run_count,
+    task_count: cardMetrics?.task_count ?? overview.task_count,
+    prd_count: cardMetrics?.prd_count ?? cardMetrics?.selected_counts?.prds ?? 0,
+    spec_count: cardMetrics?.spec_count ?? cardMetrics?.selected_counts?.specs ?? 0,
+    evidence_count: 0,
+    test_count: 0,
+    event_count: overview.event_count,
+    total_tokens: cardMetrics?.tokens ?? overview.total_tokens,
+    estimated_usd: overview.estimated_usd,
+    estimated_brl: cardMetrics?.cost_brl ?? overview.estimated_brl,
+    duration_ms: cardDurationTotal,
+    duration: {
+      known_sum: cardDurationTotal ?? 0,
+      unknown: cardDurationTotal === null ? 1 : 0,
+      complete: cardDurationTotal !== null,
+      coverage_ratio: cardDurationTotal === null ? 0 : 1,
+    },
+  };
+  const visibleExecutions = useMemo(
+    () => visibleExecutionRows(operations?.executions ?? [], rows),
+    [operations?.executions, rows],
+  );
+  const compactKind = compactReadModelKind(view);
+  const usingCompactPage = compactKind !== null && loadReadModelPage !== undefined;
   const exportRows = useMemo(() => {
-    if (view === "executions") return operations?.executions ?? [];
+    if (usingCompactPage) return compactPage?.rows ?? [];
+    if (view === "executions") return visibleExecutions;
     if (view === "conversations") return groups.conversations;
     if (view === "tasks") return groups.tasks;
     if (view === "prds") return visiblePrds;
     if (view === "specs") return visibleSpecs;
     if (view === "providers" || view === "agents") return groups[view];
     if (view === "daily" || view === "monthly" || view === "annual") return groups[view];
-    return view === "agentCalls" && agentCallKind !== "all"
-      ? rows.filter((row) => row.run_kind === agentCallKind)
-      : rows;
-  }, [agentCallKind, groups, operations?.executions, rows, view, visiblePrds, visibleSpecs]);
+    return rows;
+  }, [
+    compactPage?.rows,
+    groups,
+    rows,
+    usingCompactPage,
+    view,
+    visibleExecutions,
+    visiblePrds,
+    visibleSpecs,
+  ]);
+  const compactExportSource =
+    usingCompactPage &&
+    compactKind !== null &&
+    compactPage !== null &&
+    loadReadModelPage !== undefined
+      ? {
+          totalRows: compactPage.total,
+          pages: async function* () {
+            const seen = new Set<string>();
+            for (let offset = 0; offset < compactPage.total; offset += compactPage.limit) {
+              const page = await loadReadModelPage({
+                kind: compactKind,
+                offset,
+                limit: compactPage.limit,
+                filters,
+                ...(runPageRange === undefined ? {} : runPageRange),
+                ...(globalFilters?.query ? { query: globalFilters.query } : {}),
+              });
+              const unique = page.rows
+                .filter((row) => {
+                  if (seen.has(row.id)) return false;
+                  seen.add(row.id);
+                  return true;
+                })
+                .map(withTokenBackedCompactDuration);
+              if (unique.length > 0) yield unique as unknown as readonly Record<string, unknown>[];
+            }
+          },
+        }
+      : undefined;
   const changeLocale = (next: CostLocale) => {
     onLocaleChange(next);
     setCurrency(localeCurrency(next));
@@ -480,162 +770,76 @@ export function CostMonitorPage({
       {embedded ? null : (
         <>
           <CostSummary currency={currency} locale={locale} overview={overview} />
-          <div className="cost-coverage-note">
-            <span>.agents/records/lifecycle + telemetry manifests</span>
-            <strong>
-              {overview.coverage.tokens}/{overview.coverage.events} eventos com tokens ·{" "}
-              {overview.coverage.brl}/{overview.coverage.events} com custo
-            </strong>
-          </div>
           {capabilityNavigation}
         </>
       )}
-      <nav aria-label="Visões de custo" className="cost-tabs">
-        {COST_VIEW_ORDER.map((key) => (
-          <button
-            className={view === key ? "is-active" : undefined}
-            key={key}
-            onClick={() => setView(key)}
-            type="button"
-          >
-            {text.tabs[key]}
-          </button>
-        ))}
-        <ExcelExportAction
-          filters={{ ...filters, ...globalFilters, period, agentCallKind }}
-          rows={exportRows as unknown as readonly Record<string, unknown>[]}
-          view={`cost-${view}`}
-        />
-      </nav>
-      <section
-        className={`cost-content cost-content-${view} ${view === "overview" ? "cost-content-overview" : ""}`}
-      >
-        {view === "overview" ? (
-          <CostCharts
-            currency={currency}
-            daily={groups.daily}
-            locale={locale}
-            models={groups.models}
-            rows={rows}
-          />
-        ) : null}
-        {view === "agentCalls" ? (
-          <>
-            <nav
-              aria-label={locale === "pt-BR" ? "Tipo de chamada de agente" : "Agent call type"}
-              className="cost-run-kind-toolbar"
+      <div className="cost-tabs-bar">
+        <nav aria-label="Visões de custo" className="cost-tabs">
+          {COST_VIEW_ORDER.map((key) => (
+            <button
+              aria-pressed={view === key}
+              className={view === key ? "is-active" : undefined}
+              key={key}
+              onClick={() => {
+                setView(key);
+              }}
+              type="button"
             >
-              {(["all", "run", "subrun"] as const).map((kind) => (
-                <button
-                  aria-pressed={agentCallKind === kind}
-                  className={agentCallKind === kind ? "is-active" : undefined}
-                  key={kind}
-                  onClick={() => setAgentCallKind(kind)}
-                  type="button"
-                >
-                  {kind === "all"
-                    ? locale === "pt-BR"
-                      ? "Todos"
-                      : "All"
-                    : kind === "run"
-                      ? locale === "pt-BR"
-                        ? "Invocações do orquestrador"
-                        : "Orchestrator invocations"
-                      : locale === "pt-BR"
-                        ? "Invocações delegadas"
-                        : "Delegated invocations"}
-                </button>
-              ))}
-            </nav>
-            <CostRunsTable
-              currency={currency}
-              locale={locale}
-              onOpenRun={openRunDetails}
-              rows={
-                agentCallKind === "all"
-                  ? rows
-                  : rows.filter((row) => row.run_kind === agentCallKind)
-              }
-            />
-          </>
-        ) : null}
-        {view === "executions" ? (
-          <ExecutionTable locale={locale} rows={operations?.executions ?? []} />
-        ) : null}
-        {view === "conversations" ? (
-          <CostGroupsTable
-            currency={currency}
-            labelHeading={locale === "pt-BR" ? "Conversa" : "Conversation"}
-            locale={locale}
-            rows={groups.conversations}
-          />
-        ) : null}
-        {view === "tasks" ? (
-          <CostGroupsTable
-            currency={currency}
-            dateHeading={locale === "pt-BR" ? "Criada em" : "Created at"}
-            labelHeading={locale === "pt-BR" ? "Tarefa" : "Task"}
-            locale={locale}
-            onOpenTrace={onOpenTrace}
-            rows={groups.tasks}
-          />
-        ) : null}
-        {view === "prds" ? (
-          <MacroCostTable
-            currency={currency}
-            locale={locale}
-            onOpenTrace={onOpenTrace}
-            rows={visiblePrds}
-            {...(macroDetails ? { details: macroDetails } : {})}
+              {text.tabs[key]}
+            </button>
+          ))}
+        </nav>
+        <div className="cost-tab-export">
+          <ExcelExportAction
+            filters={{ ...filters, ...globalFilters, period }}
+            {...(compactExportSource === undefined ? {} : { pageSource: compactExportSource })}
+            rows={exportRows as unknown as readonly Record<string, unknown>[]}
+            view={`cost-${view}`}
           />
-        ) : null}
-        {view === "specs" ? (
-          <MacroCostTable
-            currency={currency}
-            locale={locale}
-            onOpenTrace={onOpenTrace}
-            rows={visibleSpecs}
-            {...(macroDetails ? { details: macroDetails } : {})}
-          />
-        ) : null}
-        {view === "models" ? <CostModelsAuditTable locale={locale} rows={rows} /> : null}
-        {(["providers", "agents"] as const).map((key) =>
-          view === key ? (
-            <CostGroupsTable
-              currency={currency}
-              key={key}
-              labelHeading={
-                key === "agents"
-                  ? locale === "pt-BR"
-                    ? "Zaip Agentes"
-                    : "ZAIP agents"
-                  : locale === "pt-BR"
-                    ? "Provedor"
-                    : "Providers"
-              }
-              locale={locale}
-              rows={groups[key]}
-            />
-          ) : null,
-        )}
-        {view === "daily" || view === "monthly" || view === "annual" ? (
-          <>
-            <CostPeriodAverageCards
-              currency={currency}
-              locale={locale}
-              period={view}
-              rows={groups[view]}
-            />
-            <CostGroupsTable
-              currency={currency}
-              locale={locale}
-              period={view}
-              rows={groups[view]}
-              showDateTime={false}
-            />
-          </>
-        ) : null}
-      </section>
+        </div>
+      </div>
+      {/* CostMonitorContent owns `view === "models" && useAggregateGroups ? (` and `rows={groups.models}`. */}
+      <CostMonitorContent
+        canonicalDurationTotal={canonicalDurationTotal}
+        compactPage={compactPage}
+        compactPageError={compactPageError}
+        compactPageLoading={compactPageLoading}
+        compactPageOffset={compactPageOffset}
+        currency={currency}
+        detailError={detailError}
+        detailLoading={detailLoading}
+        dimensionalDetailPending={dimensionalDetailPending}
+        dimensionalRows={dimensionalRows}
+        groups={displayGroups}
+        groupPage={groupView === null ? null : groupPageState.page}
+        groupPageLoading={groupView === null ? false : groupPageState.loading}
+        groupPageOffset={groupPageState.offset}
+        setGroupPageOffset={groupPageState.setOffset}
+        locale={locale}
+        macroDetails={macroDetails}
+        onOpenRun={openRunDetails}
+        onOpenTrace={onOpenTrace}
+        pagedRunRows={pagedRunRows}
+        retryCompactPage={retryCompactPage}
+        retryRunPage={retryRunPage}
+        rows={rows}
+        runPageData={runPageData}
+        runPageError={runPageError}
+        runPageLoading={runPageLoading}
+        runPageOffset={runPageOffset}
+        serverPagingEligible={serverPagingEligible}
+        setCompactPageOffset={setCompactPageOffset}
+        setDetailAttempt={setDetailAttempt}
+        setRunPageOffset={setRunPageOffset}
+        summaryUsage={activeData.usage}
+        summaryTotals={summaryTotals}
+        useAggregateGroups={useAggregateGroups}
+        usingCompactPage={usingCompactPage}
+        view={view}
+        visibleExecutions={visibleExecutions}
+        visiblePrds={visiblePrds}
+        visibleSpecs={visibleSpecs}
+      />
       {selectedRun ? (
         <EntityDetailsDialog
           details={{ kind: "run", row: selectedRun }}
@@ -646,130 +850,3 @@ export function CostMonitorPage({
     </Root>
   );
 }
-
-function matches(row: CostRunRow, filter: CostFilterState): boolean {
-  const query = filter.query.trim().toLowerCase();
-  return (
-    (!query ||
-      [row.run_id, row.task_title, row.model, row.requested_model, row.agent, row.agent_name].some(
-        (value) => value.toLowerCase().includes(query),
-      )) &&
-    (!filter.provider || normalizeCostProvider(row.provider) === filter.provider) &&
-    (!filter.agent || row.agent_name === filter.agent) &&
-    (!filter.model || row.model === filter.model) &&
-    (!filter.status || row.task_status === filter.status) &&
-    (!filter.priority || row.priority === filter.priority) &&
-    (!filter.risk || row.risk === filter.risk) &&
-    (!filter.phase || row.phase === filter.phase) &&
-    (!filter.origin || row.origin === filter.origin) &&
-    (!filter.workType || row.work_type === filter.workType)
-  );
-}
-
-export function matchesGlobalFilters(
-  row: CostRunRow,
-  filters: { query: string; dateRange?: { start: string; end: string } } | undefined,
-): boolean {
-  if (!filters) return true;
-  const query = filters.query.trim().toLocaleLowerCase();
-  if (filters.dateRange === undefined) {
-    return (
-      !query ||
-      [
-        row.run_id,
-        row.task_id,
-        row.task_title,
-        row.provider,
-        row.agent,
-        row.agent_name,
-        row.model,
-        row.requested_model,
-        row.phase,
-      ].some((value) => value?.toLocaleLowerCase().includes(query))
-    );
-  }
-  const startedDate = saoPauloPeriodKey(row.started_at, "day") ?? row.started_at.slice(0, 10);
-  return (
-    startedDate >= filters.dateRange.start &&
-    startedDate <= filters.dateRange.end &&
-    (!query ||
-      [
-        row.run_id,
-        row.task_id,
-        row.task_title,
-        row.provider,
-        row.agent,
-        row.agent_name,
-        row.model,
-        row.requested_model,
-        row.phase,
-      ].some((value) => value?.toLocaleLowerCase().includes(query)))
-  );
-}
-
-export function groupRows(
-  rows: readonly CostRunRow[],
-  select: (row: CostRunRow) => string,
-  label: (row: CostRunRow) => string = select,
-  durationScope: "root_execution" | "all_execution" | "all_invocations" = "all_invocations",
-): CostGroupRow[] {
-  const contributors = durationContributors(rows, durationScope);
-  const groups = new Map<string, CostRunRow[]>();
-  for (const row of rows) groups.set(select(row), [...(groups.get(select(row)) ?? []), row]);
-  return [...groups]
-    .map(([key, items]) => ({
-      ...(() => {
-        const duration = aggregateDurationCoverage(
-          contributors.filter((candidate) => items.includes(candidate)),
-          durationScope === "all_execution" ? "all_execution" : "all_invocations",
-        );
-        return { duration_ms: duration.complete ? duration.known_sum : null, duration };
-      })(),
-      key,
-      label: label(items[0] as CostRunRow),
-      latest_started_at: items.reduce(
-        (latest, row) => (row.started_at > latest ? row.started_at : latest),
-        items[0]?.started_at ?? "",
-      ),
-      run_count: items.length,
-      task_count: new Set(items.flatMap((row) => (row.task_id ? [row.task_id] : []))).size,
-      tasksActive: new Set(items.flatMap((row) => (row.task_id ? [row.task_id] : []))).size,
-      taskDaysActive: new Set(items.flatMap((row) => (row.task_id ? [row.task_id] : []))).size,
-      prd_count: 0,
-      spec_count: 0,
-      evidence_count: 0,
-      test_count: 0,
-      event_count: items.reduce((sum, row) => sum + row.event_count, 0),
-      total_tokens: sumKnown(items.map((row) => row.total_tokens)),
-      estimated_usd: sumKnown(items.map((row) => row.estimated_usd)),
-      estimated_brl: sumKnown(items.map((row) => row.estimated_brl)),
-      coverage: items.reduce(
-        (sum, row) => ({
-          events: sum.events + row.coverage.events,
-          tokens: sum.tokens + row.coverage.tokens,
-          usd: sum.usd + row.coverage.usd,
-          brl: sum.brl + row.coverage.brl,
-        }),
-        { events: 0, tokens: 0, usd: 0, brl: 0 },
-      ),
-    }))
-    .sort((a, b) => b.latest_started_at.localeCompare(a.latest_started_at));
-}
-
-export function matchesPeriodEntity(
-  entity: { id?: string; title?: string; created_at: string | null },
-  filters: { query: string; dateRange?: { start: string; end: string } } | undefined,
-): boolean {
-  if (filters === undefined) return true;
-  const query = filters.query.trim().toLowerCase();
-  if (
-    query &&
-    ![entity.id ?? "", entity.title ?? ""].some((value) => value.toLowerCase().includes(query))
-  ) {
-    return false;
-  }
-  if (filters.dateRange === undefined) return true;
-  if (entity.created_at === null) return false;
-  const date = saoPauloPeriodKey(entity.created_at, "day") ?? entity.created_at.slice(0, 10);
-  return date >= filters.dateRange.start && date <= filters.dateRange.end;
-}