@zaip-ai/cli 1.3.2 → 1.3.5

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

@@ -1,4 +1,6 @@
 import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
 import {
   allPhaseMetricTotals,
@@ -24,6 +26,7 @@ import {
   matchesPeriodEntity,
   resolveCompactCostPageRange,
   resolveCostGroupPageRange,
+  resolveDeveloperAttributionRange,
   selectDimensionalCostRows,
   visibleExecutionRows,
 } from "./CostMonitorPage.js";
@@ -33,13 +36,110 @@ import {
   reconcileCostGroupTotalsWithCards,
 } from "./use-cost-group-page.js";
 
+declare global {
+  interface Window {
+    __costMonitorProbe: { localeChanges: number };
+  }
+}
+
 describe("cost monitor navigation", () => {
+  it("keeps an open filter popup through the embedded DOM cycle", async () => {
+    const browserRequire = createRequire(
+      fileURLToPath(new URL("../../../../tests/e2e/package.json", import.meta.url)),
+    );
+    const esbuild = browserRequire("esbuild");
+    const { chromium, expect: expectPlaywright } = browserRequire("@playwright/test");
+    const harness = await esbuild.build({
+      bundle: true,
+      define: { "import.meta.url": '"http://localhost/"' },
+      format: "iife",
+      loader: { ".css": "text", ".png": "dataurl" },
+      platform: "browser",
+      stdin: {
+        contents: `
+          import { createRoot } from "react-dom/client";
+          import React, { useState } from "react";
+          import { CostMonitorPage } from "../../../modules/cost-monitor/src/react/CostMonitorPage.js";
+          const coverage = { events: 0, tokens: 0, usd: 0, brl: 0 };
+          const data = {
+            currency: "BRL",
+            pricing: { catalog_updated_at: null, fx_rate: null, conversion_applied: false },
+            filters: { from: null, to: null },
+            overview: { task_count: 0, run_count: 0, event_count: 0, total_tokens: 0, estimated_usd: 0, estimated_brl: 0, recorded_usd: 0, recorded_brl: 0, average_run_cost_usd: null, average_run_cost_brl: null, average_run_duration_ms: null, known_tokens_per_cycle: null, top_10_token_share: null, coverage },
+            filters_available: { providers: ["OpenAI"], agents: [], models: [], statuses: [], priorities: [], risks: [], phases: [], origins: [], work_types: [] },
+            configured_agents: [], usage: {}, origins: {}, prds: [], specs: [], runs: [],
+            groups: { conversations: [], tasks: [], providers: [], agents: [], models: [], daily: [], monthly: [], annual: [] },
+          };
+          const probe = { localeChanges: 0 };
+          Object.assign(window, { __costMonitorProbe: probe });
+          function Harness() {
+            const [embedded, setEmbedded] = useState(false);
+            return <>
+              <button onClick={() => setEmbedded((current) => !current)} type="button">Alternar incorporado</button>
+              <CostMonitorPage data={data as any} embedded={embedded} lastUpdatedAt={null} locale="pt-BR" loading={false} loadPeriod={async () => data as any} onLocaleChange={() => { probe.localeChanges += 1; }} onOpenTrace={() => {}} onRefresh={() => {}} />
+            </>;
+          }
+          createRoot(document.getElementById("root")).render(<Harness />);
+        `,
+        loader: "tsx",
+        resolveDir: fileURLToPath(new URL("../../../../apps/frontend/src", import.meta.url)),
+        sourcefile: "CostMonitorPage.browser-harness.tsx",
+      },
+      write: false,
+    });
+    const browser = await chromium.launch({ headless: true });
+    try {
+      const page = await browser.newPage();
+      const pageErrors: string[] = [];
+      page.on("pageerror", (error: Error) => pageErrors.push(error.message));
+      await page.setContent('<div id="root"></div>');
+      await page.addScriptTag({ content: harness.outputFiles[0].text });
+      await page.waitForTimeout(100);
+      expect(pageErrors).toEqual([]);
+
+      const navigation = page.getByLabel("Navegação do Cost Monitor");
+      await navigation.getByRole("button", { name: "Filtros" }).click();
+      await expectPlaywright(page.locator(".cost-nav-filter-popup")).toBeVisible();
+      await page.getByRole("button", { name: "Alternar incorporado" }).click();
+      await expectPlaywright(page.getByLabel("Navegação do Cost Monitor")).toHaveCount(0);
+      await page.getByRole("button", { name: "Alternar incorporado" }).click();
+      await expectPlaywright(page.locator(".cost-nav-filter-popup")).toBeVisible();
+      await navigation.getByRole("button", { name: /PT-BR/ }).click();
+      await page.getByRole("button", { name: /English/ }).click();
+      await expectPlaywright
+        .poll(() => page.evaluate(() => window.__costMonitorProbe.localeChanges))
+        .toBe(1);
+    } finally {
+      await browser.close();
+    }
+  });
+
   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 embedded developers all-time despite residual local filters", () => {
+    const monthRange = { from: "2026-08-01", to: "2026-08-31" };
+    expect(
+      resolveDeveloperAttributionRange({
+        embedded: true,
+        runPageRange: monthRange,
+      }),
+    ).toBeUndefined();
+    expect(
+      resolveDeveloperAttributionRange({
+        embedded: true,
+        globalDateRange: { start: "2026-07-01", end: "2026-08-31" },
+        runPageRange: { from: "2026-07-01", to: "2026-08-31" },
+      }),
+    ).toEqual({ from: "2026-07-01", to: "2026-08-31" });
+    expect(resolveDeveloperAttributionRange({ embedded: false, runPageRange: monthRange })).toEqual(
+      monthRange,
+    );
+  });
+
   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(
@@ -365,16 +465,36 @@ describe("cost monitor navigation", () => {
     expect(content).toContain('{view === "developers" ? developerPanel : null}');
   });
 
+  it("prepares the complete developer API population with the same all-time range as the table", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    const exportSection = page.slice(
+      page.indexOf("const developerExportSource"),
+      page.indexOf("const costGroupExportSource"),
+    );
+
+    expect(exportSection).toContain('view === "developers"');
+    expect(exportSection).toContain("loadCostDeveloperAttribution");
+    expect(exportSection).toContain(
+      "...(developerAttributionRange === undefined ? {} : developerAttributionRange)",
+    );
+    expect(exportSection).toContain("totalRows: developerRows.length");
+    expect(page).toContain("const developerAttributionRange = resolveDeveloperAttributionRange");
+    expect(page).toContain("...(developerAttributionRange === undefined");
+    expect(page).toMatch(
+      /agentInvocationExportSource \?\?\s*developerExportSource \?\?\s*costGroupExportSource/,
+    );
+  });
+
   it("prepares Agent Invocations from every server page for export", () => {
     const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
     const exportSection = page.slice(
       page.indexOf("const agentInvocationExportSource"),
-      page.indexOf("const costGroupExportSource"),
+      page.indexOf("const developerExportSource"),
     );
     expect(page).toContain('view === "agentCalls" && serverPagingEligible');
     expect(page).toContain("agentInvocationExportSource");
     expect(page).toMatch(
-      /pageSource=\{\s*compactExportSource \?\? agentInvocationExportSource \?\? costGroupExportSource\s*\}/,
+      /pageSource=\{\s*compactExportSource \?\?\s*agentInvocationExportSource \?\?\s*developerExportSource \?\?\s*costGroupExportSource\s*\}/,
     );
     expect(page).toContain("if (page.runs.length === 0) return");
     expect(exportSection.match(/limit: 100/g)).toHaveLength(2);

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

@@ -11,7 +11,10 @@ import type { CostMonitorProjection } from "../contracts.js";
 import { normalizeCostProvider } from "../provider.js";
 import { aggregateTaskCostRows } from "../task-cost-groups.js";
 import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
-import { CostDeveloperAttributionPanel } from "./CostDeveloperAttributionPanel.js";
+import {
+  CostDeveloperAttributionPanel,
+  loadCostDeveloperAttribution,
+} from "./CostDeveloperAttributionPanel.js";
 import {
   type CostFilterState,
   CostFilters,
@@ -25,8 +28,8 @@ import {
   useCostMonitorPeriod,
 } from "./CostFilters.js";
 import { CostMonitorContent } from "./CostMonitorContent.js";
-import { ChevronDownIcon, ListFilterIcon, LocaleFlag, SettingsIcon } from "./CostMonitorIcons.js";
 import { CostMonitorLoadErrors } from "./CostMonitorLoadErrors.js";
+import { CostMonitorNavigation, type CostNavigationPopup } from "./CostMonitorNavigation.js";
 import { CostSummary } from "./CostSummary.js";
 import {
   groupRows,
@@ -64,8 +67,6 @@ import "./cost-monitor-responsive.css";
 import "./cost-run-origin.css";
 import "./cost-monitor-embedded.css";
 
-const zaipLogoUrl = new URL("../../../../../config/src/logo_novo_azul.png", import.meta.url).href;
-
 export {
   findRunDetails,
   isCurrentCostRunPageGeneration,
@@ -88,6 +89,20 @@ export function isCostViewExportEligible(view: CostView): boolean {
   return view !== "overview";
 }
 
+/** Developers has no local provider/model filter contract. In the embedded
+ * all-time surface, do not let those residual UI filters narrow it to month. */
+export function resolveDeveloperAttributionRange({
+  embedded,
+  globalDateRange,
+  runPageRange,
+}: {
+  embedded: boolean;
+  globalDateRange?: { start: string; end: string };
+  runPageRange?: { from: string; to: string };
+}): { from: string; to: string } | undefined {
+  return embedded && globalDateRange === undefined ? undefined : runPageRange;
+}
+
 /**
  * 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
@@ -183,9 +198,7 @@ export function CostMonitorPage({
     onCurrencyChange?.(next);
   };
   const [period, setPeriod] = useState<CostPeriod>(defaultCostPeriod);
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [localeOpen, setLocaleOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [navigationPopup, setNavigationPopup] = useState<CostNavigationPopup>(null);
   const [selectedRun, setSelectedRun] = useState<RunProjection | null>(null);
   const [detailData, setDetailData] = useState<CostMonitorProjection | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
@@ -216,6 +229,13 @@ export function CostMonitorPage({
     period,
     runPageRange,
   });
+  // Developers has no local provider/model filter contract. The embedded
+  // surface therefore remains all-time unless the host supplies a date range.
+  const developerAttributionRange = resolveDeveloperAttributionRange({
+    embedded,
+    ...(globalFilters?.dateRange === undefined ? {} : { globalDateRange: globalFilters.dateRange }),
+    ...(runPageRange === undefined ? {} : { runPageRange }),
+  });
   const compactPageRange = resolveCompactCostPageRange({
     embedded,
     globalDateRange: globalFilters?.dateRange,
@@ -545,6 +565,7 @@ export function CostMonitorPage({
   const usingCompactPage = compactKind !== null && loadReadModelPage !== undefined;
   const exportRows = useMemo(() => {
     if (usingCompactPage) return compactPage?.rows ?? staleCompactPage?.rows ?? [];
+    if (view === "developers") return [];
     if (view === "executions") return visibleExecutions;
     if (view === "conversations") return groups.conversations;
     if (view === "tasks") return groups.tasks;
@@ -651,6 +672,25 @@ export function CostMonitorPage({
           },
         }
       : undefined;
+  // The developer table is paginated only by the DataTable in the browser.
+  // Its API response is the full attributed population, so export from the
+  // same endpoint and exact active period instead of the visible ten rows.
+  const developerExportSource =
+    view === "developers"
+      ? {
+          prepare: async () => {
+            const developerRows = await loadCostDeveloperAttribution({
+              ...(developerAttributionRange === undefined ? {} : developerAttributionRange),
+            });
+            return {
+              totalRows: developerRows.length,
+              pages: async function* () {
+                yield developerRows as readonly Record<string, unknown>[];
+              },
+            };
+          },
+        }
+      : undefined;
   // Period views are paginated SQLite projections too.  Exporting their
   // already-rendered group rows truncates the workbook to the visible page
   // (and can lose the projection's factual duration).  Capture the same
@@ -749,151 +789,23 @@ export function CostMonitorPage({
         retryGroup={groupPageState.retry}
       />
       {embedded ? null : (
-        <>
-          <nav aria-label="Navegação do Cost Monitor" className="cost-monitor-nav">
-            <div className="cost-monitor-brand">
-              <strong className="cost-monitor-title">{text.title}</strong>
-              <small className="cost-last-updated">{updatedLabel}</small>
-            </div>
-            <img alt="ZAIP" className="cost-monitor-logo" src={zaipLogoUrl} />
-            <div className="cost-nav-actions">
-              <button
-                aria-label={text.refresh}
-                className="cost-nav-icon cost-refresh-action"
-                disabled={loading}
-                onClick={onRefresh}
-                type="button"
-              >
-                ↻
-              </button>
-              <div className="cost-nav-popup-anchor cost-filter-action">
-                <button
-                  className={filtersOpen ? "cost-nav-button is-active" : "cost-nav-button"}
-                  onClick={() => {
-                    setFiltersOpen((open) => !open);
-                    setLocaleOpen(false);
-                    setSettingsOpen(false);
-                  }}
-                  type="button"
-                >
-                  <ListFilterIcon /> {text.filters}
-                </button>
-                {filtersOpen ? (
-                  <div className="cost-nav-popup cost-nav-filter-popup">
-                    <CostFilters
-                      available={data.filters_available}
-                      hideQuery={embedded}
-                      locale={locale}
-                      onChange={setFilters}
-                      value={filters}
-                    />
-                  </div>
-                ) : null}
-              </div>
-              <div className="cost-nav-popup-anchor cost-locale-action">
-                <button
-                  className={localeOpen ? "cost-nav-button is-active" : "cost-nav-button"}
-                  onClick={() => {
-                    setLocaleOpen((open) => !open);
-                    setFiltersOpen(false);
-                    setSettingsOpen(false);
-                  }}
-                  type="button"
-                >
-                  <LocaleFlag locale={locale} />
-                  {locale === "pt-BR" ? "PT-BR" : "EN-US"}
-                  <ChevronDownIcon />
-                </button>
-                {localeOpen ? (
-                  <div className="cost-nav-popup cost-nav-locale-popup">
-                    <button onClick={() => changeLocale("pt-BR")} type="button">
-                      <LocaleFlag locale="pt-BR" /> Português do Brasil{" "}
-                      {locale === "pt-BR" ? "✓" : ""}
-                    </button>
-                    <button onClick={() => changeLocale("en-US")} type="button">
-                      <LocaleFlag locale="en-US" /> English {locale === "en-US" ? "✓" : ""}
-                    </button>
-                  </div>
-                ) : null}
-              </div>
-              <div className="cost-nav-popup-anchor cost-settings-action">
-                <button
-                  aria-label={text.settings}
-                  className={settingsOpen ? "cost-nav-icon is-active" : "cost-nav-icon"}
-                  onClick={() => {
-                    setSettingsOpen((open) => !open);
-                    setFiltersOpen(false);
-                    setLocaleOpen(false);
-                  }}
-                  type="button"
-                >
-                  <SettingsIcon />
-                </button>
-                {settingsOpen ? (
-                  <div className="cost-nav-popup cost-nav-settings-popup">
-                    <div className="cost-mobile-settings">
-                      <small className="cost-mobile-updated">{updatedLabel}</small>
-                      <button disabled={loading} onClick={onRefresh} type="button">
-                        ↻{" "}
-                        {loading
-                          ? locale === "pt-BR"
-                            ? "Atualizando…"
-                            : "Refreshing…"
-                          : text.refresh}
-                      </button>
-                      <label>
-                        <span>{locale === "pt-BR" ? "Idioma" : "Language"}</span>
-                        <select
-                          onChange={(event) => changeLocale(event.target.value as CostLocale)}
-                          value={locale}
-                        >
-                          <option value="pt-BR">Português do Brasil</option>
-                          <option value="en-US">English</option>
-                        </select>
-                      </label>
-                      <div className="cost-mobile-filters">
-                        <strong>{text.filters}</strong>
-                        <CostFilters
-                          available={data.filters_available}
-                          hideQuery={embedded}
-                          locale={locale}
-                          onChange={setFilters}
-                          value={filters}
-                        />
-                      </div>
-                    </div>
-                    <label>
-                      <span>{text.currency}</span>
-                      <select
-                        onChange={(event) => setCurrency(event.target.value as CostCurrency)}
-                        value={currency}
-                      >
-                        <option value="BRL">BRL · R$</option>
-                        <option value="USD">USD · $</option>
-                      </select>
-                    </label>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          </nav>
-          <header className="cost-hero">
-            <p className="cost-hero-description">{text.subtitle}</p>
-            <label className="cost-period">
-              <span>{text.period}</span>
-              <select
-                onChange={(event) => setPeriod(event.target.value as CostPeriod)}
-                value={period}
-              >
-                <option value="all">{text.allTime}</option>
-                <option value="7">{text.last7}</option>
-                <option value="30">{text.last30}</option>
-                <option value="90">{text.last90}</option>
-                <option value="month">{text.thisMonth}</option>
-              </select>
-            </label>
-          </header>
-        </>
+        <CostMonitorNavigation
+          currency={currency}
+          filters={filters}
+          filtersAvailable={data.filters_available}
+          loading={loading}
+          locale={locale}
+          onCurrencyChange={setCurrency}
+          onFiltersChange={setFilters}
+          onLocaleChange={changeLocale}
+          onPopupChange={setNavigationPopup}
+          onPeriodChange={setPeriod}
+          onRefresh={onRefresh}
+          period={period}
+          popup={navigationPopup}
+          text={text}
+          updatedLabel={updatedLabel}
+        />
       )}
       {embedded ? null : (
         <>
@@ -922,7 +834,10 @@ export function CostMonitorPage({
             <ExcelExportAction
               filters={{ ...filters, ...globalFilters, period }}
               pageSource={
-                compactExportSource ?? agentInvocationExportSource ?? costGroupExportSource
+                compactExportSource ??
+                agentInvocationExportSource ??
+                developerExportSource ??
+                costGroupExportSource
               }
               rows={exportRows as unknown as readonly Record<string, unknown>[]}
               view={`cost-${view}`}
@@ -944,9 +859,9 @@ export function CostMonitorPage({
           view === "developers" ? (
             <CostDeveloperAttributionPanel
               locale={locale}
-              {...(runPageRange === undefined
+              {...(developerAttributionRange === undefined
                 ? {}
-                : { from: runPageRange.from, to: runPageRange.to })}
+                : { from: developerAttributionRange.from, to: developerAttributionRange.to })}
             />
           ) : null
         }

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

@@ -537,7 +537,8 @@ export function formatExecutionAverageHint(
   totalDays: number,
   locale: OperationsLocale,
 ): string {
-  if (totalDurationMs <= 0 || totalTasks <= 0 || totalDays <= 0) {
+  if (totalTasks <= 0) return "0";
+  if (totalDurationMs <= 0 || totalDays <= 0) {
     return locale === "pt-BR"
       ? "Médias de execução indisponíveis"
       : "Execution averages unavailable";

package/templates/.agents/dashboard/modules/operations/src/react/OperationsOverview.test.ts

@@ -12,6 +12,7 @@ import {
   findLatestCreatedAt,
   findLatestTaskCreatedAt,
   formatExecutionAverageHint,
+  formatSummaryMetricValue,
   formatTokenThroughputHint,
   macroClassificationStats,
   macroStatusDistribution,
@@ -278,11 +279,12 @@ describe("execution average summary", () => {
     );
   });
 
-  it("localizes English and preserves unavailable coverage", () => {
+  it("localizes English and shows zero for an empty population", () => {
     expect(formatExecutionAverageHint(3_600_000, 3, 1, "en-US")).toBe(
       "20 min / task (1 h / day) (1 day)",
     );
-    expect(formatExecutionAverageHint(0, 0, 0, "pt-BR")).toBe("Médias de execução indisponíveis");
+    expect(formatExecutionAverageHint(0, 0, 0, "pt-BR")).toBe("0");
+    expect(formatExecutionAverageHint(0, 0, 0, "en-US")).toBe("0");
   });
 });
 
@@ -351,14 +353,20 @@ describe("overviewMetricAverages", () => {
     });
   });
 
-  it("passes unknown totals through as unavailable instead of coercing them to zero", () => {
+  it("keeps unknown totals null internally and renders zero only for an empty population", () => {
     const averages = overviewMetricAverages({ durationMs: null, tokens: null, costBrl: null }, 3);
     expect(averages).toEqual({ durationMs: null, tokens: null, costBrl: null });
     const source = readOverviewSource();
     expect(source).toContain(
       "durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric",
     );
-    expect(source).toContain("formatEntityDuration(averageDuration, locale)");
+    expect(formatSummaryMetricValue(null, 0, (value) => String(value), "pt-BR")).toBe("0");
+    expect(formatSummaryMetricValue(null, 0, (value) => String(value), "en-US")).toBe("0");
+    expect(formatSummaryMetricValue(null, 1, (value) => String(value), "pt-BR")).toBe(
+      "Indisponível",
+    );
+    expect(formatSummaryMetricValue(42, 0, (value) => String(value), "pt-BR")).toBe("42");
+    expect(source).toContain("formatSummaryMetricValue(\n        averageDuration,");
     expect(source).not.toContain("executionMetrics.durationMs ?? 0");
   });
 });

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

@@ -98,6 +98,20 @@ function formatEntityDuration(value: number | null, locale: OperationsLocale): s
   if (value !== null) return formatDurationMs(value, locale);
   return locale === "pt-BR" ? "Indisponível" : "Unavailable";
 }
+
+/**
+ * Keeps missing source facts as null while making a genuinely empty selected
+ * population readable as the factual numeric zero in the overview.
+ */
+export function formatSummaryMetricValue(
+  value: number | null,
+  populationCount: number | null,
+  formatKnownValue: (knownValue: number) => string,
+  locale: OperationsLocale,
+): string {
+  if (value !== null) return formatKnownValue(value);
+  return populationCount === 0 ? "0" : formatEntityDuration(null, locale);
+}
 export function OperationsOverview({
   currency,
   data,
@@ -399,18 +413,32 @@ export function OperationsOverview({
         : findLatestCreatedAt(tasks)
       : (selectedMacroAggregate?.latest_created_at ?? findLatestCreatedAt(selectedMacros));
   const metricStats = [
-    [text.averageTime, formatEntityDuration(averageDuration, locale)],
+    [
+      text.averageTime,
+      formatSummaryMetricValue(
+        averageDuration,
+        selectedCount,
+        (value) => formatDurationMs(value, locale),
+        locale,
+      ),
+    ],
     [
       text.averageTokens,
-      averageTokens === null
-        ? formatEntityDuration(null, locale)
-        : formatCompactNumber(averageTokens, locale),
+      formatSummaryMetricValue(
+        averageTokens,
+        selectedCount,
+        (value) => formatCompactNumber(value, locale),
+        locale,
+      ),
     ],
     [
       text.averageCost,
-      averageCost === null
-        ? formatEntityDuration(null, locale)
-        : formatCurrency(averageCost, currency, locale),
+      formatSummaryMetricValue(
+        averageCost,
+        selectedCount,
+        (value) => formatCurrency(value, currency, locale),
+        locale,
+      ),
     ],
   ] as const;
   const aggregateTopTasks: EntityMetric[] = (overviewMetrics?.top_tasks ?? []).map((metric) => ({
@@ -580,14 +608,23 @@ export function OperationsOverview({
                 ? `${text.totalExecutionTime} de ${copy.shortPlural}`
                 : `${copy.shortPlural} ${text.totalExecutionTime.toLowerCase()}`
           }
-          value={formatEntityDuration(totalDurationMetric, locale)}
+          value={formatSummaryMetricValue(
+            totalDurationMetric,
+            metricPopulationCount,
+            (value) => formatDurationMs(value, locale),
+            locale,
+          )}
         />
         <Kpi
           hint={
             tokensPerTask === null || tokensPerHour === null
-              ? locale === "pt-BR"
-                ? "Tokens por tarefa e por hora indisponíveis"
-                : "Tokens per task and hour unavailable"
+              ? metricPopulationCount === 0
+                ? locale === "pt-BR"
+                  ? `0 / ${metricUnit} (0 / hora)`
+                  : `0 / ${metricUnit} (0 / hour)`
+                : locale === "pt-BR"
+                  ? "Tokens por tarefa e por hora indisponíveis"
+                  : "Tokens per task and hour unavailable"
               : locale === "pt-BR"
                 ? `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hora)`
                 : `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
@@ -601,18 +638,23 @@ export function OperationsOverview({
                 ? `Tokens gastos por ${copy.shortPlural}`
                 : `${copy.shortPlural} tokens spent`
           }
-          value={
-            totalTokensMetric === null
-              ? formatEntityDuration(null, locale)
-              : formatCompactNumber(totalTokensMetric, locale)
-          }
+          value={formatSummaryMetricValue(
+            totalTokensMetric,
+            metricPopulationCount,
+            (value) => formatCompactNumber(value, locale),
+            locale,
+          )}
         />
         <Kpi
           hint={
             hourlyCost === null || costPerTask === null
-              ? locale === "pt-BR"
-                ? "Custo por tarefa e por hora indispon\u00edvel"
-                : "Cost per task and hour unavailable"
+              ? metricPopulationCount === 0
+                ? locale === "pt-BR"
+                  ? `${formatRoundedCurrency(0, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(0, currency, locale)} / hora)`
+                  : `${formatRoundedCurrency(0, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(0, currency, locale)} / hour)`
+                : locale === "pt-BR"
+                  ? "Custo por tarefa e por hora indispon\u00edvel"
+                  : "Cost per task and hour unavailable"
               : locale === "pt-BR"
                 ? `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hora)`
                 : `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hour)`
@@ -626,11 +668,12 @@ export function OperationsOverview({
                 ? `Custo de ${copy.shortPlural}`
                 : `${copy.shortPlural} cost`
           }
-          value={
-            totalCostMetric === null
-              ? formatEntityDuration(null, locale)
-              : formatRoundedCurrency(totalCostMetric, currency, locale)
-          }
+          value={formatSummaryMetricValue(
+            totalCostMetric,
+            metricPopulationCount,
+            (value) => formatRoundedCurrency(value, currency, locale),
+            locale,
+          )}
         />
       </div>