@zaip-ai/cli 2.2.0 → 3.0.0

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

@@ -11,9 +11,9 @@ import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
 import type { CostView } from "./cost-monitor-views.js";
 import { MacroCostTable } from "./MacroCostTable.js";
 import {
+  type CostGroupPage,
   type CostGroupTotals,
   costGroupPageLabel,
-  reconcileCostGroupTotalsWithCards,
 } from "./use-cost-group-page.js";
 
 type CostRunRows = ComponentProps<typeof CostRunsTable>["rows"];
@@ -90,13 +90,7 @@ export function CostMonitorContent({
     providers: CostGroupRows;
     tasks: CostGroupRows;
   };
-  groupPage: {
-    offset: number;
-    limit: number;
-    total_count: number;
-    has_more: boolean;
-    totals?: CostGroupTotals;
-  } | null;
+  groupPage: Omit<CostGroupPage, "rows"> | null;
   groupPageLoading: boolean;
   groupPageOffset: number;
   locale: CostLocale;
@@ -290,15 +284,7 @@ export function CostMonitorContent({
               locale={locale}
               loading={groupPageLoading}
               rows={groups[key]}
-              {...(key === "models"
-                ? groupPage?.totals === undefined
-                  ? {}
-                  : { totals: groupPage.totals }
-                : key === "providers"
-                  ? { totals: summaryTotals }
-                  : groupPage?.totals === undefined
-                    ? {}
-                    : { totals: groupPage.totals })}
+              {...(groupPage?.totals === undefined ? {} : { totals: groupPage.totals })}
               {...(key === "agents"
                 ? { showDateTime: false, showAgentIdentity: true }
                 : key === "models"
@@ -316,6 +302,10 @@ export function CostMonitorContent({
           <CostPeriodAverageCards
             currency={currency}
             locale={locale}
+            loading={groupPageLoading}
+            {...(groupPage === null
+              ? {}
+              : { average: groupPage.period_averages?.[currency] ?? null })}
             period={view}
             rows={groups[view]}
           />
@@ -326,11 +316,7 @@ export function CostMonitorContent({
             period={view}
             rows={groups[view]}
             showDateTime={false}
-            totals={
-              groupPage?.totals === undefined
-                ? summaryTotals
-                : reconcileCostGroupTotalsWithCards(groupPage.totals, summaryTotals)
-            }
+            totals={groupPage?.totals ?? summaryTotals}
           />
           {groupPager}
         </>

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

@@ -456,30 +456,35 @@ describe("cost monitor navigation", () => {
 
   it("places the shared developer table inside the Cost Monitor content section", () => {
     const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    const panel = readFileSync(new URL("./CostDeveloperPanelSlot.tsx", import.meta.url), "utf8");
     const content = readFileSync(new URL("./CostMonitorContent.tsx", import.meta.url), "utf8");
 
-    expect(page).toMatch(
-      /developerPanel=\{\s*view === "developers" \? \(\s*<CostDeveloperAttributionPanel\b/,
-    );
+    expect(page).toContain('from "./CostDeveloperPanelSlot.js"');
+    expect(page).toMatch(/developerPanel=\{\s*<CostDeveloperPanelSlot/);
+    expect(panel).toContain('view === "developers"');
+    expect(panel).toContain("CostDeveloperAttributionPanel");
     expect(page).not.toMatch(/<\/CostMonitorContent>\s*\{view === "developers"/);
     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"),
+    const exportSources = readFileSync(
+      new URL("./cost-monitor-export-sources.ts", import.meta.url),
+      "utf8",
     );
+    const panel = readFileSync(new URL("./CostDeveloperPanelSlot.tsx", import.meta.url), "utf8");
 
-    expect(exportSection).toContain('view === "developers"');
-    expect(exportSection).toContain("loadCostDeveloperAttribution");
-    expect(exportSection).toContain(
+    expect(page).toContain('from "./cost-monitor-export-sources.js"');
+    expect(page).toContain("buildCostMonitorExportSources({");
+    expect(exportSources).toContain('view === "developers"');
+    expect(exportSources).toContain("loadCostDeveloperAttribution");
+    expect(exportSources).toContain(
       "...(developerAttributionRange === undefined ? {} : developerAttributionRange)",
     );
-    expect(exportSection).toContain("totalRows: developerRows.length");
+    expect(exportSources).toContain("totalRows: developerRows.length");
     expect(page).toContain("const developerAttributionRange = resolveDeveloperAttributionRange");
-    expect(page).toContain("...(developerAttributionRange === undefined");
+    expect(panel).toContain("range === undefined ? {} : range");
     expect(page).toMatch(
       /agentInvocationExportSource \?\?\s*developerExportSource \?\?\s*costGroupExportSource/,
     );
@@ -505,13 +510,18 @@ describe("cost monitor navigation", () => {
 
   it("prepares every paginated period row for daily, monthly, and annual exports", () => {
     const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    const exportSources = readFileSync(
+      new URL("./cost-monitor-export-sources.ts", 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");
+    expect(page).toContain("buildCostMonitorExportSources({");
+    expect(exportSources).toContain('view === "daily" ||');
+    expect(exportSources).toContain('view === "monthly" ||');
+    expect(exportSources).toContain('view === "annual" ||');
+    expect(exportSources).toContain("...(groupPageRange === undefined ? {} : groupPageRange)");
+    expect(exportSources).toContain("totalRows: firstPage.total_count");
+    expect(exportSources).toContain("nextOffset >= page.total_count || !page.has_more");
   });
 
   it("resolves an Agent Run to its own details", () => {

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

@@ -3,7 +3,7 @@ import {
   type RunProjection,
   saoPauloPeriodKey,
 } from "@zaip-ai/dashboard-operations/contracts";
-import { EntityDetailsDialog, ExcelExportAction } from "@zaip-ai/dashboard-operations/react";
+import { ExcelExportAction } from "@zaip-ai/dashboard-operations/react";
 import { DashboardHeader } from "@zaip-ai/dashboard-ui";
 import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { includeConfiguredAgentGroups } from "../agent-groups.js";
@@ -11,10 +11,6 @@ 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,
-  loadCostDeveloperAttribution,
-} from "./CostDeveloperAttributionPanel.js";
 import {
   type CostFilterState,
   CostFilters,
@@ -44,13 +40,12 @@ export {
   matchesPeriodEntity,
 } from "./cost-monitor-row-filters.js";
 
-import {
-  type CostCurrency,
-  type CostLocale,
-  costCopy,
-  localeCurrency,
-} from "./cost-monitor-copy.js";
-import { findRunDetails, selectDimensionalCostRows } from "./cost-monitor-page-helpers.js";
+import { CostDeveloperPanelSlot } from "./CostDeveloperPanelSlot.js";
+import { CostMonitorRunDialog } from "./CostMonitorRunDialog.js";
+import { type CostCurrency, type CostLocale, costCopy } from "./cost-monitor-copy.js";
+import { buildCostMonitorExportSources } from "./cost-monitor-export-sources.js";
+import { changeCostLocale, openCostRunDetails } from "./cost-monitor-page-actions.js";
+import { 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 { resolveCompactCostPageRange, resolveCostGroupPageRange } from "./cost-page-range.js";
@@ -72,64 +67,26 @@ export {
   isCurrentCostRunPageGeneration,
   selectDimensionalCostRows,
 } from "./cost-monitor-page-helpers.js";
-export {
-  COST_VIEW_ORDER,
-  type CostView,
-  DEFAULT_COST_VIEW,
-} from "./cost-monitor-views.js";
+export { COST_VIEW_ORDER, type CostView, DEFAULT_COST_VIEW } from "./cost-monitor-views.js";
 export { resolveCompactCostPageRange, resolveCostGroupPageRange } from "./cost-page-range.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 overview is a summary surface, not an exportable table view. */
-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
- * 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 === ""
-  );
-}
+import {
+  isCostViewExportEligible,
+  isServerCostRunPagingEligible,
+  resolveDeveloperAttributionRange,
+  visibleExecutionRows,
+} from "./cost-monitor-page-selectors.js";
 
+export {
+  isCostViewExportEligible,
+  isServerCostRunPagingEligible,
+  resolveDeveloperAttributionRange,
+  visibleExecutionRows,
+} from "./cost-monitor-page-selectors.js";
 export function CostMonitorPage({
   capabilityNavigation,
   data,
@@ -158,11 +115,7 @@ export function CostMonitorPage({
   data: CostMonitorProjection;
   dashboardTitle?: string;
   embedded?: boolean;
-  globalFilters?: {
-    query: string;
-    datePreset: string;
-    dateRange?: { start: string; end: string };
-  };
+  globalFilters?: { query: string; datePreset: string; dateRange?: { start: string; end: string } };
   lastUpdatedAt: string | null;
   locale: CostLocale;
   loading: boolean;
@@ -209,10 +162,7 @@ export function CostMonitorPage({
   // remote table is reloaded without remounting the Cost Monitor surface.
   const dataRevisionRef = useRef({ data, revision: 0 });
   if (dataRevisionRef.current.data !== data) {
-    dataRevisionRef.current = {
-      data,
-      revision: dataRevisionRef.current.revision + 1,
-    };
+    dataRevisionRef.current = { data, revision: dataRevisionRef.current.revision + 1 };
   }
   const dataRevision = dataRevisionRef.current.revision;
   const loadDetailRef = useRef(loadDetail);
@@ -420,10 +370,7 @@ export function CostMonitorPage({
   const macroDetails = useMemo(() => {
     if (operations === undefined) return undefined;
     const visibleRunIds = new Set(rows.map((row) => row.run_id));
-    return {
-      ...operations,
-      runs: operations.runs.filter((run) => visibleRunIds.has(run.id)),
-    };
+    return { ...operations, runs: operations.runs.filter((run) => visibleRunIds.has(run.id)) };
   }, [operations, rows]);
   const periodEntities = useMemo(
     () => ({
@@ -539,17 +486,13 @@ export function CostMonitorPage({
   );
   const overview = useAggregateGroups
     ? activeData.overview
-    : {
-        ...summarizeCostRows(rows, activeData.overview),
-        task_count: periodEntities.tasks.length,
-      };
+    : { ...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.
+  // Card totals are a fallback for local, non-paged data only. Remote tables
+  // retain the full filtered totals returned alongside their paginated rows.
   const cardMetrics = operations?.summary.overview_metrics;
   const cardDurationTotal = cardMetrics ? cardMetrics.duration_ms : canonicalDurationTotal;
   const summaryTotals = {
@@ -686,80 +629,17 @@ 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
-  // paged query used by the table so an All Time selection keeps its unbound
-  // range and every other selection retains its exact range and filters.
-  const costGroupExportSource =
-    (view === "daily" ||
-      view === "monthly" ||
-      view === "annual" ||
-      view === "agents" ||
-      view === "models" ||
-      view === "providers") &&
-    loadGroupPage !== undefined
-      ? {
-          prepare: async () => {
-            const query = filters.query || globalFilters?.query || "";
-            const firstPage = await loadGroupPage({
-              view,
-              offset: 0,
-              limit: 50,
-              filters,
-              ...(query ? { query } : {}),
-              ...(groupPageRange === undefined ? {} : groupPageRange),
-            });
-            return {
-              totalRows: firstPage.total_count,
-              pages: async function* () {
-                let page = firstPage;
-                while (true) {
-                  if (page.rows.length === 0) return;
-                  yield page.rows as unknown as readonly Record<string, unknown>[];
-                  const nextOffset = page.offset + page.rows.length;
-                  if (nextOffset >= page.total_count || !page.has_more) return;
-                  page = await loadGroupPage({
-                    view,
-                    offset: nextOffset,
-                    limit: page.limit,
-                    filters,
-                    ...(query ? { query } : {}),
-                    ...(groupPageRange === undefined ? {} : groupPageRange),
-                  });
-                }
-              },
-            };
-          },
-        }
-      : undefined;
-  const changeLocale = (next: CostLocale) => {
-    onLocaleChange(next);
-    setCurrency(localeCurrency(next));
-  };
-  const openRunDetails = (runId: string) => {
-    const run = findRunDetails(operations?.runs ?? [], runId);
-    if (run) setSelectedRun(run);
-  };
+  const { developerExportSource, costGroupExportSource } = buildCostMonitorExportSources({
+    developerAttributionRange,
+    filters,
+    globalFilters,
+    groupPageRange,
+    loadGroupPage,
+    view,
+  });
+  const changeLocale = (next: CostLocale) => changeCostLocale(next, onLocaleChange, setCurrency);
+  const openRunDetails = (runId: string) =>
+    openCostRunDetails(runId, operations?.runs ?? [], setSelectedRun);
   const Root = embedded ? "section" : "main";
   return (
     <Root className={embedded ? "cost-page cost-page-embedded" : "cost-page"}>
@@ -782,26 +662,26 @@ export function CostMonitorPage({
           onRefresh={onRefresh}
           settings={
             <label>
-              <span>{text.currency}</span>
+              {" "}
+              <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>
+                <option value="BRL">BRL · R$</option> <option value="USD">USD · $</option>{" "}
+              </select>{" "}
             </label>
           }
           {...(repositoryName === undefined ? {} : { repositoryName })}
           title={dashboardTitle}
         />
-      )}
+      )}{" "}
       <CostMonitorLoadErrors
         groupError={groupView === null ? null : groupPageState.error}
         locale={locale}
         periodError={periodError}
         retryGroup={groupPageState.retry}
-      />
+      />{" "}
       {embedded ? null : (
         <CostMonitorNavigation
           currency={currency}
@@ -820,15 +700,17 @@ export function CostMonitorPage({
           text={text}
           updatedLabel={updatedLabel}
         />
-      )}
+      )}{" "}
       {embedded ? null : (
         <>
-          <CostSummary currency={currency} locale={locale} overview={overview} />
-          {capabilityNavigation}
+          <CostSummary currency={currency} locale={locale} overview={overview} />{" "}
+          {capabilityNavigation}{" "}
         </>
-      )}
+      )}{" "}
       <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}
@@ -839,12 +721,14 @@ export function CostMonitorPage({
               }}
               type="button"
             >
-              {text.tabs[key]}
+              {" "}
+              {text.tabs[key]}{" "}
             </button>
-          ))}
-        </nav>
+          ))}{" "}
+        </nav>{" "}
         {isCostViewExportEligible(view) ? (
           <div className="cost-tab-export">
+            {" "}
             <ExcelExportAction
               filters={{ ...filters, ...globalFilters, period }}
               pageSource={
@@ -855,11 +739,11 @@ export function CostMonitorPage({
               }
               rows={exportRows as unknown as readonly Record<string, unknown>[]}
               view={`cost-${view}`}
-            />
+            />{" "}
           </div>
         ) : null}
-      </div>
-      {/* CostMonitorContent owns `view === "models" && useAggregateGroups ? (` and `rows={groups.models}`. */}
+      </div>{" "}
+      {/* CostMonitorContent owns `view === "models" && useAggregateGroups ? (` and `rows={groups.models}`. */}{" "}
       <CostMonitorContent
         canonicalDurationTotal={canonicalDurationTotal}
         compactPage={compactPage ?? staleCompactPage}
@@ -870,14 +754,7 @@ export function CostMonitorPage({
         detailError={detailError}
         detailLoading={detailLoading}
         developerPanel={
-          view === "developers" ? (
-            <CostDeveloperAttributionPanel
-              locale={locale}
-              {...(developerAttributionRange === undefined
-                ? {}
-                : { from: developerAttributionRange.from, to: developerAttributionRange.to })}
-            />
-          ) : null
+          <CostDeveloperPanelSlot locale={locale} range={developerAttributionRange} view={view} />
         }
         dimensionalDetailPending={dimensionalDetailPending}
         dimensionalRows={dimensionalRows}
@@ -910,14 +787,12 @@ export function CostMonitorPage({
         visibleExecutions={visibleExecutions}
         visiblePrds={visiblePrds}
         visibleSpecs={visibleSpecs}
-      />
-      {selectedRun ? (
-        <EntityDetailsDialog
-          details={{ kind: "run", row: selectedRun }}
-          locale={locale}
-          onClose={() => setSelectedRun(null)}
-        />
-      ) : null}
+      />{" "}
+      <CostMonitorRunDialog
+        locale={locale}
+        onClose={() => setSelectedRun(null)}
+        selectedRun={selectedRun}
+      />{" "}
     </Root>
   );
 }

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

@@ -0,0 +1,20 @@
+import type { RunProjection } from "@zaip-ai/dashboard-operations/contracts";
+import { EntityDetailsDialog } from "@zaip-ai/dashboard-operations/react";
+import type { CostLocale } from "./cost-monitor-copy.js";
+export function CostMonitorRunDialog({
+  locale,
+  selectedRun,
+  onClose,
+}: {
+  locale: CostLocale;
+  selectedRun: RunProjection | null;
+  onClose: () => void;
+}) {
+  return selectedRun ? (
+    <EntityDetailsDialog
+      details={{ kind: "run", row: selectedRun }}
+      locale={locale}
+      onClose={onClose}
+    />
+  ) : null;
+}

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

@@ -5,49 +5,73 @@ import {
   formatNumber,
   PeriodAverageCards,
 } from "@zaip-ai/dashboard-ui";
-import type { CostGroupRow } from "../contracts.js";
+import type { CostGroupRow, CostPeriodAverages } from "../contracts.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
 import { type CostPeriodGranularity, summarizeCostPeriodAverages } from "./period-cost-groups.js";
 
 export function CostPeriodAverageCards({
   currency,
   locale,
+  loading = false,
+  average: suppliedAverage,
   period,
   rows,
 }: {
   currency: CostCurrency;
   locale: CostLocale;
+  loading?: boolean;
+  average?: CostPeriodAverages | null;
   period: CostPeriodGranularity;
   rows: readonly CostGroupRow[];
 }) {
-  const average = summarizeCostPeriodAverages(rows, currency);
+  if (loading) {
+    return <p role="status">{locale === "pt-BR" ? "Carregando médias…" : "Loading averages…"}</p>;
+  }
+  // A server page without full-population averages is unavailable, never a page-only average.
+  const average =
+    suppliedAverage === undefined
+      ? summarizeCostPeriodAverages(rows, currency)
+      : (suppliedAverage ?? {
+          tasks: null,
+          specs: null,
+          prds: null,
+          durationMs: null,
+          tokens: null,
+          cost: null,
+        });
+  const unavailable = locale === "pt-BR" ? "Indisponível" : "Unavailable";
   return (
     <PeriodAverageCards
       ariaLabel={periodAverageAriaLabel(period, locale)}
       metrics={[
         {
           label: periodAverageMetricLabel(locale === "pt-BR" ? "Tarefas" : "Tasks", period, locale),
-          value: formatNumber(average.tasks, locale, 1),
+          value: average.tasks === null ? unavailable : formatNumber(average.tasks, locale, 1),
         },
         {
           label: periodAverageMetricLabel("SPECs", period, locale),
-          value: formatNumber(average.specs, locale, 1),
+          value: average.specs === null ? unavailable : formatNumber(average.specs, locale, 1),
         },
         {
           label: periodAverageMetricLabel("PRDs", period, locale),
-          value: formatNumber(average.prds, locale, 1),
+          value: average.prds === null ? unavailable : formatNumber(average.prds, locale, 1),
         },
         {
           label: periodAverageMetricLabel(locale === "pt-BR" ? "Tempo" : "Time", period, locale),
-          value: formatAverageDurationMs(average.durationMs, locale),
+          value:
+            average.durationMs === null
+              ? unavailable
+              : formatAverageDurationMs(average.durationMs, locale),
         },
         {
           label: periodAverageMetricLabel("Tokens", period, locale),
-          value: formatCompactNumber(average.tokens, locale),
+          value:
+            average.tokens === null ? unavailable : formatCompactNumber(average.tokens, locale),
         },
         {
           label: periodAverageMetricLabel(locale === "pt-BR" ? "Custo" : "Cost", period, locale),
-          value: formatCurrency(average.cost, currency, locale),
+          value:
+            average.cost === null ? unavailable : formatCurrency(average.cost, currency, locale),
         },
       ]}
     />