@zaip-ai/cli 1.0.7 → 1.3.0

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

@@ -0,0 +1,328 @@
+import { ExecutionTable } from "@zaip-ai/dashboard-operations/react";
+import type { ComponentProps } from "react";
+import {
+  type CompactLifecycleCostSubtotal,
+  CompactLifecycleCostTable,
+} from "./CompactLifecycleCostTable.js";
+import { CostCharts } from "./CostCharts.js";
+import { CostPeriodAverageCards } from "./CostPeriodAverageCards.js";
+import { CostGroupsTable, CostRunsTable } from "./CostTables.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+import type { CostView } from "./cost-monitor-views.js";
+import { MacroCostTable } from "./MacroCostTable.js";
+import {
+  type CostGroupTotals,
+  costGroupPageLabel,
+  reconcileCostGroupTotalsWithCards,
+} from "./use-cost-group-page.js";
+
+type CostRunRows = ComponentProps<typeof CostRunsTable>["rows"];
+type CostGroupRows = ComponentProps<typeof CostGroupsTable>["rows"];
+type CompactRows = ComponentProps<typeof CompactLifecycleCostTable>["rows"];
+
+export function CostMonitorContent({
+  canonicalDurationTotal,
+  compactPage,
+  compactPageError,
+  compactPageLoading,
+  compactPageOffset,
+  currency,
+  detailError,
+  detailLoading,
+  dimensionalDetailPending,
+  dimensionalRows,
+  groups,
+  groupPage,
+  groupPageLoading,
+  groupPageOffset,
+  locale,
+  macroDetails,
+  onOpenRun,
+  onOpenTrace,
+  pagedRunRows,
+  retryCompactPage,
+  retryRunPage,
+  rows,
+  runPageData,
+  runPageError,
+  runPageLoading,
+  runPageOffset,
+  serverPagingEligible,
+  setCompactPageOffset,
+  setGroupPageOffset,
+  setDetailAttempt,
+  setRunPageOffset,
+  summaryUsage,
+  summaryTotals,
+  useAggregateGroups,
+  usingCompactPage,
+  view,
+  visibleExecutions,
+  visiblePrds,
+  visibleSpecs,
+}: {
+  canonicalDurationTotal: number;
+  compactPage: {
+    has_more: boolean;
+    limit: number;
+    offset: number;
+    rows: CompactRows;
+    subtotal: CompactLifecycleCostSubtotal;
+    total: number;
+  } | null;
+  compactPageError: string | null;
+  compactPageLoading: boolean;
+  compactPageOffset: number;
+  currency: CostCurrency;
+  detailError: string | null;
+  detailLoading: boolean;
+  dimensionalDetailPending: boolean;
+  dimensionalRows: CostRunRows;
+  groups: {
+    agents: CostGroupRows;
+    annual: CostGroupRows;
+    conversations: CostGroupRows;
+    daily: CostGroupRows;
+    models: CostGroupRows;
+    monthly: CostGroupRows;
+    providers: CostGroupRows;
+    tasks: CostGroupRows;
+  };
+  groupPage: {
+    offset: number;
+    limit: number;
+    total_count: number;
+    has_more: boolean;
+    totals?: CostGroupTotals;
+  } | null;
+  groupPageLoading: boolean;
+  groupPageOffset: number;
+  locale: CostLocale;
+  macroDetails: ComponentProps<typeof MacroCostTable>["details"];
+  onOpenRun: (runId: string) => void;
+  onOpenTrace: (taskId: string) => void;
+  pagedRunRows: CostRunRows;
+  retryCompactPage: () => void;
+  retryRunPage: () => void;
+  rows: CostRunRows;
+  runPageData: {
+    run_page?: { has_more: boolean; limit: number; offset: number; total: number | null };
+  } | null;
+  runPageError: string | null;
+  runPageLoading: boolean;
+  runPageOffset: number;
+  serverPagingEligible: boolean;
+  setCompactPageOffset: (offset: number) => void;
+  setGroupPageOffset: (offset: number) => void;
+  setDetailAttempt: (update: (value: number) => number) => void;
+  setRunPageOffset: (offset: number) => void;
+  summaryUsage: NonNullable<ComponentProps<typeof CostCharts>["summaryUsage"]>;
+  /** Card-equivalent totals for dimensions that intentionally hide unknown rows. */
+  summaryTotals: CostGroupTotals;
+  useAggregateGroups: boolean;
+  usingCompactPage: boolean;
+  view: CostView;
+  visibleExecutions: ComponentProps<typeof ExecutionTable>["rows"];
+  visiblePrds: ComponentProps<typeof MacroCostTable>["rows"];
+  visibleSpecs: ComponentProps<typeof MacroCostTable>["rows"];
+}) {
+  const groupPager =
+    ["daily", "monthly", "annual", "agents", "models", "providers"].includes(view) &&
+    groupPage !== null ? (
+      <nav
+        aria-label={locale === "pt-BR" ? "Paginação de grupos" : "Group pagination"}
+        className="cost-page-controls"
+      >
+        <button
+          disabled={groupPageLoading || groupPageOffset === 0}
+          onClick={() => setGroupPageOffset(Math.max(0, groupPageOffset - groupPage.limit))}
+          type="button"
+        >
+          {locale === "pt-BR" ? "Anterior" : "Previous"}
+        </button>
+        <output aria-live="polite">{costGroupPageLabel({ locale, page: groupPage })}</output>
+        <button
+          disabled={groupPageLoading || !groupPage.has_more}
+          onClick={() => setGroupPageOffset(groupPageOffset + groupPage.limit)}
+          type="button"
+        >
+          {locale === "pt-BR" ? "Próxima" : "Next"}
+        </button>
+      </nav>
+    ) : null;
+  return (
+    <section
+      className={`cost-content cost-content-${view} ${view === "overview" ? "cost-content-overview" : ""}`}
+    >
+      {detailLoading || dimensionalDetailPending ? (
+        <p role="status">{locale === "pt-BR" ? "Carregando dados…" : "Loading data…"}</p>
+      ) : null}
+      {detailError ? (
+        <p role="status">
+          {detailError}{" "}
+          <button onClick={() => setDetailAttempt((value) => value + 1)} type="button">
+            {locale === "pt-BR" ? "Tentar novamente" : "Retry"}
+          </button>
+        </p>
+      ) : null}
+      {view === "overview" &&
+      !dimensionalDetailPending &&
+      !detailLoading &&
+      detailError === null ? (
+        <CostCharts
+          currency={currency}
+          daily={groups.daily}
+          locale={locale}
+          models={groups.models}
+          rows={dimensionalRows}
+          {...(useAggregateGroups ? { summaryUsage } : {})}
+        />
+      ) : null}
+      {view === "agentCalls" ? (
+        <>
+          <CostRunsTable
+            currency={currency}
+            locale={locale}
+            onOpenRun={onOpenRun}
+            rows={serverPagingEligible && runPageData !== null ? pagedRunRows : rows}
+            {...(serverPagingEligible &&
+            (runPageData?.run_page !== undefined || runPageLoading || runPageError !== null)
+              ? {
+                  pagination: {
+                    ...(runPageData?.run_page ?? {
+                      offset: runPageOffset,
+                      limit: 100,
+                      total: null,
+                      has_more: false,
+                    }),
+                    error: runPageError,
+                    loading: runPageLoading,
+                    onChange: setRunPageOffset,
+                    onRetry: retryRunPage,
+                  },
+                }
+              : {})}
+          />
+        </>
+      ) : null}
+      {usingCompactPage ? (
+        <CompactLifecycleCostTable
+          locale={locale}
+          {...(view === "tasks" ? { onOpenTrace } : {})}
+          pagination={{
+            offset: compactPage?.offset ?? compactPageOffset,
+            limit: compactPage?.limit ?? 50,
+            total: compactPage?.total ?? null,
+            has_more: compactPage?.has_more ?? false,
+            loading: compactPageLoading,
+            error: compactPageError,
+            onChange: setCompactPageOffset,
+            onRetry: retryCompactPage,
+          }}
+          rows={compactPage?.rows ?? []}
+          subtotal={compactPage?.subtotal ?? null}
+        />
+      ) : null}
+      {view === "executions" && !usingCompactPage ? (
+        <ExecutionTable locale={locale} rows={visibleExecutions} />
+      ) : null}
+      {view === "conversations" && !usingCompactPage ? (
+        <CostGroupsTable
+          currency={currency}
+          labelHeading={locale === "pt-BR" ? "Conversa" : "Conversation"}
+          locale={locale}
+          rows={groups.conversations}
+        />
+      ) : null}
+      {view === "tasks" && !usingCompactPage ? (
+        <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" && !usingCompactPage ? (
+        <MacroCostTable
+          currency={currency}
+          locale={locale}
+          onOpenTrace={onOpenTrace}
+          rows={visiblePrds}
+          totalDurationMs={canonicalDurationTotal}
+          {...(macroDetails ? { details: macroDetails } : {})}
+        />
+      ) : null}
+      {view === "specs" && !usingCompactPage ? (
+        <MacroCostTable
+          currency={currency}
+          locale={locale}
+          onOpenTrace={onOpenTrace}
+          rows={visibleSpecs}
+          totalDurationMs={canonicalDurationTotal}
+          {...(macroDetails ? { details: macroDetails } : {})}
+        />
+      ) : null}
+      {(["providers", "agents", "models"] as const).map((key) =>
+        view === key && !dimensionalDetailPending && !detailLoading && detailError === null ? (
+          <>
+            <CostGroupsTable
+              currency={currency}
+              key={key}
+              labelHeading={
+                key === "models"
+                  ? locale === "pt-BR"
+                    ? "Modelo LLM"
+                    : "LLM model"
+                  : key === "agents"
+                    ? locale === "pt-BR"
+                      ? "Zaip Agentes"
+                      : "ZAIP agents"
+                    : locale === "pt-BR"
+                      ? "Provedor"
+                      : "Providers"
+              }
+              locale={locale}
+              rows={groups[key]}
+              {...(key === "models" || key === "providers"
+                ? { totals: summaryTotals }
+                : groupPage?.totals === undefined
+                  ? {}
+                  : { totals: groupPage.totals })}
+              {...(key === "agents"
+                ? { showDateTime: false, showAgentIdentity: true }
+                : key === "models" || key === "providers"
+                  ? { showDateTime: false, showInvocationTasks: true }
+                  : {})}
+            />
+            {groupPager}
+          </>
+        ) : 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}
+            totals={
+              groupPage?.totals === undefined
+                ? summaryTotals
+                : reconcileCostGroupTotalsWithCards(groupPage.totals, summaryTotals)
+            }
+          />
+          {groupPager}
+        </>
+      ) : null}
+    </section>
+  );
+}

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

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import {
   allPhaseMetricTotals,
@@ -6,16 +7,269 @@ import {
 } from "../../../operations/src/react/execution-metrics.js";
 import type { CostRunRow } from "../contracts.js";
 import { aggregateRows } from "../server/aggregate.js";
+import {
+  compactLifecycleDurationMs,
+  withTokenBackedCompactDuration,
+} from "./CompactLifecycleCostTable.js";
+import { costPeriodDateRange, defaultCostPeriod, emptyCostFilters } from "./CostFilters.js";
 import {
   COST_VIEW_ORDER,
   DEFAULT_COST_VIEW,
   findRunDetails,
   groupRows,
+  isCostViewExportEligible,
+  isCurrentCostRunPageGeneration,
+  isServerCostRunPagingEligible,
   matchesGlobalFilters,
   matchesPeriodEntity,
+  resolveCompactCostPageRange,
+  resolveCostGroupPageRange,
+  selectDimensionalCostRows,
+  visibleExecutionRows,
 } from "./CostMonitorPage.js";
+import {
+  costGroupPageLabel,
+  effectiveCostGroupQuery,
+  reconcileCostGroupTotalsWithCards,
+} from "./use-cost-group-page.js";
 
 describe("cost monitor navigation", () => {
+  it("hides Excel export from the overview while retaining it on tabular views", () => {
+    expect(isCostViewExportEligible("overview")).toBe(false);
+    expect(isCostViewExportEligible("daily")).toBe(true);
+    expect(isCostViewExportEligible("agentCalls")).toBe(true);
+  });
+
+  it("keeps the embedded default group pager on the all-time snapshot without explicit filters", () => {
+    const monthRange = costPeriodDateRange(defaultCostPeriod, new Date("2026-08-17T12:00:00.000Z"));
+    expect(
+      resolveCostGroupPageRange({
+        embedded: true,
+        globalDateRange: undefined,
+        hasLocalCostFilters: false,
+        period: defaultCostPeriod,
+        runPageRange: monthRange,
+      }),
+    ).toBeUndefined();
+    expect(
+      resolveCostGroupPageRange({
+        embedded: true,
+        globalDateRange: undefined,
+        hasLocalCostFilters: false,
+        period: "30",
+        runPageRange: monthRange,
+      }),
+    ).toEqual(monthRange);
+    expect(
+      resolveCostGroupPageRange({
+        embedded: true,
+        globalDateRange: { start: "2026-07-14", end: "2026-08-17" },
+        hasLocalCostFilters: false,
+        period: defaultCostPeriod,
+        runPageRange: { from: "2026-07-14", to: "2026-08-17" },
+      }),
+    ).toEqual({ from: "2026-07-14", to: "2026-08-17" });
+    expect(
+      resolveCostGroupPageRange({
+        embedded: true,
+        globalDateRange: undefined,
+        hasLocalCostFilters: true,
+        period: defaultCostPeriod,
+        runPageRange: monthRange,
+      }),
+    ).toEqual(monthRange);
+  });
+
+  it("keeps compact SPEC and PRD pages and their export source on the all-time snapshot", () => {
+    const monthRange = costPeriodDateRange(defaultCostPeriod, new Date("2026-08-17T12:00:00.000Z"));
+    expect(
+      resolveCompactCostPageRange({
+        embedded: true,
+        globalDateRange: undefined,
+        hasLocalCostFilters: false,
+        period: defaultCostPeriod,
+        runPageRange: monthRange,
+      }),
+    ).toBeUndefined();
+    expect(
+      resolveCompactCostPageRange({
+        embedded: false,
+        globalDateRange: undefined,
+        hasLocalCostFilters: false,
+        period: defaultCostPeriod,
+        runPageRange: monthRange,
+      }),
+    ).toEqual(monthRange);
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    expect(page).toContain("range: compactPageRange");
+    expect(page).toContain("...(compactPageRange === undefined ? {} : compactPageRange)");
+  });
+
+  it("releases the host loading gate when a global filter replaces the Cost Monitor surface", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+
+    expect(page).toContain("() => () => onLoadingChange?.(false)");
+  });
+
+  it("labels daily pagination by its continuous result range", () => {
+    expect(
+      costGroupPageLabel({
+        locale: "pt-BR",
+        page: { offset: 30, limit: 30, total_count: 35 },
+      }),
+    ).toBe("31–35 de 35");
+    const content = readFileSync(new URL("./CostMonitorContent.tsx", import.meta.url), "utf8");
+    expect(content).toContain("groupPageOffset + groupPage.limit");
+    expect(content).toContain("groupPageOffset - groupPage.limit");
+  });
+
+  it("keeps page-only columns while reconciling footer totals with the big numbers", () => {
+    const metric = (known_sum: number) => ({
+      known_sum,
+      unknown: 0,
+      complete: true,
+      coverage_ratio: 1,
+    });
+    const pageTotals = {
+      run_count: 345,
+      task_count: 272,
+      prd_count: 1,
+      spec_count: 1,
+      evidence_count: 238,
+      test_count: 0,
+      event_count: 9_000,
+      total_tokens: 1_800_000_000,
+      estimated_usd: 1_900,
+      estimated_brl: 10_663.7,
+      duration_ms: 69 * 3_600_000,
+      duration: metric(69 * 3_600_000),
+    };
+    const cardTotals = {
+      ...pageTotals,
+      task_count: 920,
+      prd_count: 13,
+      spec_count: 59,
+      total_tokens: 7_342_609_361,
+      estimated_brl: 47_588.9452,
+      duration_ms: 619_958_763,
+      duration: metric(619_958_763),
+    };
+
+    expect(reconcileCostGroupTotalsWithCards(pageTotals, cardTotals)).toMatchObject({
+      run_count: 345,
+      evidence_count: 238,
+      task_count: 920,
+      prd_count: 13,
+      spec_count: 59,
+      total_tokens: 7_342_609_361,
+      estimated_brl: 47_588.9452,
+      duration_ms: 619_958_763,
+    });
+  });
+  it("fills token-backed compact duration without a visible missing-data count", () => {
+    const table = readFileSync(new URL("./CompactLifecycleCostTable.tsx", import.meta.url), "utf8");
+    const summary = readFileSync(new URL("./CostSummary.tsx", import.meta.url), "utf8");
+    expect(table).toContain("compactLifecycleDurationMs(row)");
+    expect(table).not.toContain("sem dados");
+    expect(table).not.toContain("unknown)");
+    expect(summary).not.toContain("overview.coverage.tokens");
+    expect(summary).not.toContain("formatPercent(");
+  });
+
+  it("estimates a paginated lifecycle row whenever it has tokens but no time", () => {
+    const metric = (known_sum: number, unknown: number) => ({
+      known_sum,
+      unknown,
+      complete: unknown === 0,
+      coverage_ratio: unknown === 0 ? 1 : 0,
+    });
+    const row = {
+      metrics: {
+        duration: metric(0, 1),
+        total_tokens: metric(4_000_000, 0),
+        cost: metric(0, 1),
+      },
+    } as never;
+    expect(compactLifecycleDurationMs(row)).toBe(3_600_000);
+    expect(withTokenBackedCompactDuration(row).metrics.duration).toEqual({
+      known_sum: 3_600_000,
+      unknown: 0,
+      complete: true,
+      coverage_ratio: 1,
+    });
+  });
+
+  it("does not restart page or period requests when loader identities change", () => {
+    const compactHook = readFileSync(
+      new URL("./use-compact-cost-page.ts", import.meta.url),
+      "utf8",
+    );
+    const runHook = readFileSync(new URL("./use-cost-run-page.ts", import.meta.url), "utf8");
+    const periodHook = readFileSync(new URL("./CostFilters.tsx", import.meta.url), "utf8");
+    expect(compactHook).toContain("const loadRef = useRef(load)");
+    expect(compactHook).toContain("const [resolvedKey, setResolvedKey]");
+    expect(compactHook).toContain("compactPage: resolvedKey === requestKey ? page : null");
+    expect(compactHook).toContain("const loadPage = loadRef.current");
+    expect(compactHook).toContain("if (loadPage === undefined) return;");
+    expect(compactHook).not.toContain("[attempt, load,");
+    expect(runHook).toContain("const loadRef = useRef(load)");
+    expect(runHook).toContain("loadRef.current ?? loadCostMonitorRunPage");
+    expect(runHook).not.toContain("filters, load, offset");
+    expect(runHook).toContain('view !== "agentCalls"');
+    expect(runHook).not.toContain('view !== "agentCalls" && view !== "agents"');
+    expect(periodHook).toContain("const loadPeriodRef = useRef(loadPeriod)");
+    expect(periodHook).toMatch(/loadPeriodRef\s*\.current\(\{/);
+    expect(periodHook).not.toContain("    requestedRange,\n");
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    expect(page).toContain('eligible: view === "agentCalls" && serverPagingEligible');
+    expect(page).toContain("setDetailLoading(false);");
+    expect(page).toContain("const needsDimensionalDetail = false;");
+    expect(page).toContain('view === "models" && useAggregateGroups ? (');
+    expect(page).toContain("rows={groups.models}");
+  });
+
+  it("rejects a late A response after page request B and keeps the retry generation current", () => {
+    const requestA = 1;
+    const requestB = 2;
+    expect(isCurrentCostRunPageGeneration(requestA, requestB)).toBe(false);
+    expect(isCurrentCostRunPageGeneration(requestB, requestB)).toBe(true);
+  });
+  it("uses page-only invocations for every supported dimension and query", () => {
+    expect(
+      isServerCostRunPagingEligible({
+        ...emptyCostFilters,
+        provider: "openai",
+        model: "gpt-5.6-terra",
+        phase: "execution",
+      }),
+    ).toBe(true);
+    expect(
+      isServerCostRunPagingEligible({ ...emptyCostFilters, agent: "zaip-agent-builder" }),
+    ).toBe(true);
+    expect(isServerCostRunPagingEligible({ ...emptyCostFilters, status: "executing" })).toBe(true);
+    expect(isServerCostRunPagingEligible({ ...emptyCostFilters, query: "edge" })).toBe(true);
+    expect(isServerCostRunPagingEligible(emptyCostFilters, "edge")).toBe(true);
+    expect(isServerCostRunPagingEligible({ ...emptyCostFilters, query: "local" }, "global")).toBe(
+      false,
+    );
+  });
+  it("routes global search to lazy invocations and all active dimensions to lazy groups", () => {
+    expect(effectiveCostGroupQuery(emptyCostFilters, "global-edge")).toBe("global-edge");
+    expect(
+      effectiveCostGroupQuery({ ...emptyCostFilters, query: "local-edge" }, "global-edge"),
+    ).toBe("local-edge");
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    const runHook = readFileSync(new URL("./use-cost-run-page.ts", import.meta.url), "utf8");
+    const groupHook = readFileSync(new URL("./use-cost-group-page.ts", import.meta.url), "utf8");
+    expect(page).toContain('globalQuery: globalFilters?.query ?? ""');
+    expect(page).toContain("filters,");
+    expect(page).toContain("...(groupView === null ? {} : { load: loadGroupPage })");
+    expect(runHook).toContain("query: filters.query || globalQuery");
+    expect(groupHook).toContain("export type CostGroupFilters = CostFilterState");
+    expect(groupHook).toContain("filters,");
+    expect(page).toContain("groupPageState.page === null");
+    expect(page).toContain("? []");
+  });
   it("uses the Sao Paulo calendar for global daily filtering on both sides of 03:00Z", () => {
     const base = costRun("RUN-CALENDAR");
     expect(
@@ -57,6 +311,9 @@ describe("cost monitor navigation", () => {
   it("opens Daily by default and follows the requested tab order", () => {
     expect(DEFAULT_COST_VIEW).toBe("daily");
     expect(COST_VIEW_ORDER).toEqual([
+      "daily",
+      "monthly",
+      "annual",
       "overview",
       "executions",
       "agentCalls",
@@ -67,12 +324,30 @@ describe("cost monitor navigation", () => {
       "specs",
       "prds",
       "conversations",
-      "daily",
-      "monthly",
-      "annual",
     ]);
   });
 
+  it("prepares Agent Invocations from every server page for export", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    expect(page).toContain('view === "agentCalls" && serverPagingEligible');
+    expect(page).toContain("agentInvocationExportSource");
+    expect(page).toMatch(
+      /pageSource=\{\s*compactExportSource \?\? agentInvocationExportSource \?\? costGroupExportSource\s*\}/,
+    );
+    expect(page).toContain("if (page.runs.length === 0) return");
+  });
+
+  it("prepares every paginated period row for daily, monthly, and annual exports", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+
+    expect(page).toContain('view === "daily" ||');
+    expect(page).toContain('view === "monthly" ||');
+    expect(page).toContain('view === "annual" ||');
+    expect(page).toContain("...(groupPageRange === undefined ? {} : groupPageRange)");
+    expect(page).toContain("totalRows: firstPage.total_count");
+    expect(page).toContain("nextOffset >= page.total_count || !page.has_more");
+  });
+
   it("resolves an Agent Run to its own details", () => {
     const runs = [{ id: "RUN-001" }, { id: "RUN-002" }];
 
@@ -80,6 +355,26 @@ describe("cost monitor navigation", () => {
     expect(findRunDetails(runs, "TASK-002")).toBeNull();
   });
 
+  it("uses hydrated detail rows for overview charts instead of the empty summary population", () => {
+    const summaryRows: CostRunRow[] = [];
+    const detailRows = [costRun("RUN-DETAIL")];
+
+    expect(selectDimensionalCostRows(summaryRows, detailRows)).toBe(detailRows);
+    expect(selectDimensionalCostRows(summaryRows, undefined)).toBe(summaryRows);
+  });
+
+  it("keeps Execucoes on the inclusive 2026-08-01..2026-08-06 Cost Run period", () => {
+    const executions = [{ id: "EXEC-IN-RANGE" }, { id: "EXEC-OUT-OF-RANGE" }];
+    const rows = [
+      // The Cost API applies the inclusive Sao Paulo range before the UI
+      // receives its Run rows; this represents an in-range 2026-08-06 Run.
+      { execution_id: "EXEC-IN-RANGE" },
+      { execution_id: null },
+    ] as const;
+
+    expect(visibleExecutionRows(executions, rows)).toEqual([{ id: "EXEC-IN-RANGE" }]);
+  });
+
   it("uses every deduplicated invocation duration in agent group totals", () => {
     const [group] = groupRows(
       [
@@ -123,7 +418,7 @@ describe("cost monitor navigation", () => {
     });
   });
 
-  it("aligns period duration, usage, and cost with Operations invocation effort", () => {
+  it("keeps Cost invocation duration distinct from root Execution duration", () => {
     const rows: CostRunRow[] = [
       {
         ...costRun("RUN-ROOT"),
@@ -165,9 +460,10 @@ describe("cost monitor navigation", () => {
       usage: { total: { tokens: { total: row.total_tokens }, cost: { brl: row.estimated_brl } } },
     }));
     expect(group.duration_ms).toBe(12_000);
-    // Root-only execution duration remains separately available for wall-clock views.
+    // Operations intentionally excludes the delegated Sub-Run and conversation.
     expect(executionMetricTotals(operationsRuns).durationMs).toBe(2_000);
-    expect(group.duration_ms).toBe(effortMetricTotals(operationsRuns).durationMs);
+    expect(effortMetricTotals(operationsRuns).durationMs).toBe(12_000);
+    expect(group.duration_ms).not.toBe(executionMetricTotals(operationsRuns).durationMs);
     expect(group.total_tokens).toBe(allPhaseMetricTotals(operationsRuns).tokens);
     expect(group.estimated_brl).toBe(allPhaseMetricTotals(operationsRuns).costBrl);
   });