@zaip-ai/cli 3.8.0 → 4.1.0

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

@@ -1,4 +1,5 @@
-import { formatSummaryMetricValue } from "./overview-metric-format.js";
+import { formatSummaryMetricValue, unmeasuredZeroDescription } from "./overview-metric-format.js";
+import { overviewMetricStats } from "./overview-metric-stats.js";
 
 export { formatSummaryMetricValue } from "./overview-metric-format.js";
 
@@ -104,6 +105,7 @@ export function OperationsOverview({
   tasks = data.tasks,
   factualCostTotal,
   factualCostFact,
+  costLoading = false,
   resolveRunCost,
   includeLegacyEffort: _includeLegacyEffort = false,
 }: {
@@ -141,6 +143,7 @@ export function OperationsOverview({
   factualCostTotal?: number | null | undefined;
   /** Measurement completeness for the matching Cost Monitor snapshot. */
   factualCostFact?: FactualCostFact | undefined;
+  costLoading?: boolean | undefined;
   resolveRunCost?: ((runId: string) => number | null) | undefined;
   includeLegacyEffort?: boolean;
 }) {
@@ -392,39 +395,23 @@ export function OperationsOverview({
         ? (overviewMetrics?.latest_task_created_at ?? null)
         : findLatestCreatedAt(tasks)
       : (selectedMacroAggregate?.latest_created_at ?? findLatestCreatedAt(selectedMacros));
-  const metricStats = [
-    [
-      text.averageTime,
-      formatSummaryMetricValue(
-        averageDuration,
-        selectedCount,
-        (value) => formatDurationMs(value, locale),
-        locale,
-      ),
-    ],
-    [
-      text.averageTokens,
-      formatSummaryMetricValue(
-        averageTokens,
-        selectedCount,
-        (value) => formatCompactNumber(value, locale),
-        locale,
-      ),
-    ],
-    [
-      factualCostAverageLabel(
-        overviewView === "tasks" ? factualCostFact : undefined,
-        selectedCount,
-        locale,
-      ),
-      formatSummaryMetricValue(
-        averageCost,
-        selectedCount,
-        (value) => formatCurrency(value, currency, locale),
-        locale,
-      ),
-    ],
-  ] as const;
+  const metricStats = overviewMetricStats({
+    averageCost,
+    averageDuration,
+    averageTokens,
+    costLabel: factualCostAverageLabel(
+      overviewView === "tasks" ? factualCostFact : undefined,
+      selectedCount,
+      locale,
+    ),
+    count: selectedCount,
+    formatCost: (value) => formatCurrency(value, currency, locale),
+    formatDuration: (value) => formatDurationMs(value, locale),
+    formatTokens: (value) => formatCompactNumber(value, locale),
+    locale,
+    timeLabel: text.averageTime,
+    tokensLabel: text.averageTokens,
+  });
   const aggregateTopTasks: EntityMetric[] = (overviewMetrics?.top_tasks ?? []).map((metric) => ({
     id: metric.task_id,
     title: tasks.find((task) => task.id === metric.task_id)?.title ?? metric.task_id,
@@ -605,6 +592,12 @@ export function OperationsOverview({
             metricPopulationCount,
             (value) => formatDurationMs(value, locale),
             locale,
+            true,
+          )}
+          description={unmeasuredZeroDescription(
+            totalDurationMetric,
+            metricPopulationCount,
+            locale,
           )}
         />{" "}
         <Kpi
@@ -615,8 +608,8 @@ export function OperationsOverview({
                   ? `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"
+                  ? "Sem tokens medidos para calcular médias"
+                  : "No measured tokens for averages"
               : locale === "pt-BR"
                 ? `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hora)`
                 : `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
@@ -635,9 +628,12 @@ export function OperationsOverview({
             metricPopulationCount,
             (value) => formatCompactNumber(value, locale),
             locale,
+            true,
           )}
+          description={unmeasuredZeroDescription(totalTokensMetric, metricPopulationCount, locale)}
         />{" "}
         <OverviewCostKpi
+          loading={costLoading && overviewView === "tasks"}
           fact={overviewView === "tasks" ? factualCostFact : undefined}
           unit={metricUnit}
           locale={locale}
@@ -658,6 +654,7 @@ export function OperationsOverview({
       <div className="operations-chart-grid">
         {" "}
         <OperationsOverviewCharts
+          costLoading={costLoading && overviewView === "tasks"}
           locale={locale}
           copy={copy}
           text={text}
@@ -685,6 +682,7 @@ export function OperationsOverview({
           }}
         />
         <OperationsOverviewTopPanel
+          costLoading={costLoading && overviewView === "tasks"}
           copy={{ empty: copy.emptyTop, hint: topHint, title: copy.topTitle }}
           currency={currency}
           locale={locale}

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

@@ -5,6 +5,7 @@ import type { OverviewClassification } from "./operations-page-contract.js";
 import type { OperationsLocale } from "./status-labels.js";
 import type { WorkStage } from "./work-board-model.js";
 export function OperationsOverviewCharts({
+  costLoading = false,
   locale,
   copy,
   text,
@@ -17,6 +18,7 @@ export function OperationsOverviewCharts({
   onStatusSelect,
   onClassificationSelect,
 }: {
+  costLoading?: boolean;
   locale: OperationsLocale;
   copy: ReturnType<typeof overviewCopy>;
   text: ReturnType<typeof overviewText>;
@@ -151,9 +153,16 @@ export function OperationsOverviewCharts({
         <PanelHeader hint={copy.averageHint} title={copy.averageTitle} />{" "}
         <div className="operations-type-summary">
           {" "}
-          {metricStats.map(([label, value]) => (
-            <div key={label}>
-              <span>{label}</span> <strong>{value}</strong>{" "}
+          {metricStats.map(([label, value], index) => (
+            <div aria-busy={(costLoading && index === 2) || undefined} key={label}>
+              <span>{label}</span>{" "}
+              <strong>
+                {costLoading && index === 2 ? (
+                  <i className="operations-skeleton-line" aria-hidden="true" />
+                ) : (
+                  value
+                )}
+              </strong>{" "}
             </div>
           ))}{" "}
         </div>{" "}

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

@@ -10,13 +10,10 @@ import type { OperationsLocale } from "./status-labels.js";
 type OverviewView = "tasks" | "specs" | "prds";
 
 const duration = (value: number | null, locale: OperationsLocale) =>
-  value === null
-    ? locale === "pt-BR"
-      ? "Indisponível"
-      : "Unavailable"
-    : formatDurationMs(value, locale);
+  value === null ? "0" : formatDurationMs(value, locale);
 
 export function OperationsOverviewTopPanel({
+  costLoading = false,
   copy,
   currency,
   locale,
@@ -28,6 +25,7 @@ export function OperationsOverviewTopPanel({
   topEntities,
   view,
 }: {
+  costLoading?: boolean;
   copy: { empty: string; hint: string; title: string };
   currency: "BRL" | "USD";
   locale: OperationsLocale;
@@ -108,16 +106,16 @@ export function OperationsOverviewTopPanel({
             </div>
             <div>
               <span>{text.topFiveCost}</span>
-              <strong>
-                {topCost === null
-                  ? duration(null, locale)
-                  : formatCurrency(topCost, currency, locale)}
+              <strong aria-busy={costLoading || undefined}>
+                {costLoading ? (
+                  <i className="operations-skeleton-line" aria-hidden="true" />
+                ) : topCost === null ? (
+                  duration(null, locale)
+                ) : (
+                  formatCurrency(topCost, currency, locale)
+                )}
               </strong>
-              <small>
-                {summary.tokens === null
-                  ? text.tokensUnavailable
-                  : `${formatCompactNumber(summary.tokens, locale)} tokens`}
-              </small>
+              <small>{`${formatCompactNumber(summary.tokens, locale)} tokens`}</small>
             </div>
           </div>
         </>

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

@@ -13,6 +13,7 @@ import {
 import { OperationsMainContent } from "./OperationsMainContent.js";
 import { OperationsViewTabs } from "./OperationsPageNavigation.js";
 import { OperationsPageLoading, OperationsPageOverview } from "./OperationsPageOverview.js";
+import { shouldRenderOperationsContent } from "./operations-content-visibility.js";
 import {
   type OperationsPageProps,
   resolveOperationsPeriodControl,
@@ -77,7 +78,7 @@ export function OperationsPage({
   capabilityNavigation,
   currency,
   data,
-  dashboardTitle = "Dashboard Zaip AIOS",
+  dashboardTitle = "Dashboard ZAIP AIOS",
   lastUpdatedAt = data.summary.latest_token_collected_at ?? null,
   loading,
   onLoadingChange,
@@ -110,6 +111,7 @@ export function OperationsPage({
   settings,
   factualCostTotal,
   factualCostFact,
+  costLoading,
   factualCostPeriods,
   resolveRunCost,
 }: OperationsPageProps) {
@@ -662,6 +664,7 @@ export function OperationsPage({
               query={query}
               factualCostTotal={factualCostTotal}
               factualCostFact={factualCostFact}
+              costLoading={costLoading}
               resolveRunCost={resolveRunCost}
               runs={runs}
               searchInputRef={searchInputRef}
@@ -758,6 +761,3 @@ export function OperationsPage({
 }
 
 /** Loading is never a valid zero-valued Operations projection. */
-export function shouldRenderOperationsContent(loading: boolean): boolean {
-  return !loading;
-}

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

@@ -20,6 +20,7 @@ export function OperationsPageOverview({
   defaultDateRange,
   factualCostTotal,
   factualCostFact,
+  costLoading,
   includeLegacyEffort,
   locale,
   onOpenTask,
@@ -49,6 +50,7 @@ export function OperationsPageOverview({
   defaultDateRange: OperationDateRange;
   factualCostTotal: OverviewProps["factualCostTotal"];
   factualCostFact: OverviewProps["factualCostFact"];
+  costLoading: OverviewProps["costLoading"];
   includeLegacyEffort: boolean;
   locale: OperationsLocale;
   onOpenTask: OverviewProps["onOpenTask"];
@@ -77,6 +79,7 @@ export function OperationsPageOverview({
         currency={currency}
         factualCostTotal={factualCostTotal}
         factualCostFact={factualCostFact}
+        costLoading={costLoading}
         datePreset={datePreset}
         dateRange={dateRange}
         locale={locale}
@@ -163,13 +166,29 @@ export function OperationsPageLoading({ locale }: { locale: OperationsLocale })
   return (
     <section
       aria-busy="true"
-      aria-live="polite"
+      aria-label={
+        locale === "pt-BR" ? "Carregando o período selecionado" : "Loading selected period"
+      }
       className="operations-content-skeleton"
       role="status"
     >
-      <span>
-        {locale === "pt-BR" ? "Carregando o período selecionado…" : "Loading selected period…"}
-      </span>
+      <div className="operations-skeleton-kpis" aria-hidden="true">
+        {["tasks", "specs", "prds", "duration", "tokens", "cost"].map((metric) => (
+          <article className="operations-skeleton-block" key={metric}>
+            <i className="operations-skeleton-line is-short" />
+            <i className="operations-skeleton-line is-value" />
+            <i className="operations-skeleton-line" />
+          </article>
+        ))}
+      </div>
+      <div className="operations-skeleton-panels" aria-hidden="true">
+        {["status", "classification", "average", "top"].map((panel) => (
+          <article className="operations-skeleton-block" key={panel}>
+            <i className="operations-skeleton-line is-short" />
+            <i className="operations-skeleton-chart" />
+          </article>
+        ))}
+      </div>
     </section>
   );
 }

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

@@ -5,7 +5,11 @@ import {
   overviewCostRateHint,
 } from "./OperationsOverview.helpers.js";
 import type { FactualCostFact } from "./operations-page-contract.js";
-import { formatRoundedCurrency, formatSummaryMetricValue } from "./overview-metric-format.js";
+import {
+  formatRoundedCurrency,
+  formatSummaryMetricValue,
+  unmeasuredZeroDescription,
+} from "./overview-metric-format.js";
 import type { OperationsLocale } from "./status-labels.js";
 
 /** Compact presentation, preserving completeness and matching population semantics. */
@@ -19,6 +23,7 @@ export function OverviewCostKpi({
   perHour,
   total,
   label,
+  loading = false,
 }: {
   fact: FactualCostFact | undefined;
   unit: string;
@@ -29,17 +34,40 @@ export function OverviewCostKpi({
   perHour: number | null;
   total: number | null;
   label?: string | undefined;
+  loading?: boolean;
 }) {
+  if (loading)
+    return (
+      <article
+        aria-busy="true"
+        aria-label={locale === "pt-BR" ? "Carregando custo estimado" : "Loading estimated cost"}
+        className="operations-kpi"
+        role="status"
+      >
+        <span>{label ?? (locale === "pt-BR" ? "Custo Estimado" : "Estimated Cost")}</span>
+        <strong>
+          <i className="operations-skeleton-line is-value" aria-hidden="true" />
+        </strong>
+        <small>
+          <i className="operations-skeleton-line" aria-hidden="true" />
+        </small>
+      </article>
+    );
   return (
     <Kpi
       hint={overviewCostRateHint(fact, unit, locale, currency, count, perItem, perHour)}
-      description={factualCostMetricHint(fact, unit, locale) ?? undefined}
+      description={
+        unmeasuredZeroDescription(total, count, locale) ??
+        factualCostMetricHint(fact, unit, locale) ??
+        undefined
+      }
       label={label ?? factualCostMetricLabel(fact, locale)}
       value={formatSummaryMetricValue(
         total,
         count,
         (value) => formatRoundedCurrency(value, currency, locale),
         locale,
+        true,
       )}
     />
   );

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

@@ -69,23 +69,12 @@ export function TaskDetailsDialog({
               label={copy.duration}
               value={formatOperationDuration(telemetry.durationMs, locale)}
             />
-            <Detail
-              label="Tokens"
-              value={
-                telemetry.tokens === null
-                  ? locale === "pt-BR"
-                    ? "Indisponível"
-                    : "Unavailable"
-                  : formatCompactNumber(telemetry.tokens, locale)
-              }
-            />
+            <Detail label="Tokens" value={formatCompactNumber(telemetry.tokens, locale)} />
             <Detail
               label={locale === "pt-BR" ? "Custo" : "Cost"}
               value={
                 telemetry.costBrl === null
-                  ? locale === "pt-BR"
-                    ? "Indisponível"
-                    : "Unavailable"
+                  ? "0"
                   : new Intl.NumberFormat(locale, { style: "currency", currency: "BRL" }).format(
                       telemetry.costBrl,
                     )

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

@@ -1,7 +1,14 @@
 import { describe, expect, it } from "vitest";
-import { mergeManualWorkOrder, sortWorkItems } from "./UnifiedWorkBoard.js";
+import { mergeManualWorkOrder, sortWorkItems, workColumnState } from "./UnifiedWorkBoard.js";
 
 describe("UnifiedWorkBoard priority path", () => {
+  it("does not claim an unrequested or in-flight column is empty", () => {
+    expect(workColumnState(0, 0, undefined)).toBe("loading");
+    expect(workColumnState(0, 2, { loading: false, error: null })).toBe("loading");
+    expect(workColumnState(0, 0, { loading: true, error: null })).toBe("loading");
+    expect(workColumnState(0, 0, { loading: false, error: null })).toBe("empty");
+    expect(workColumnState(0, 0, { loading: false, error: "falhou" })).toBe("error");
+  });
   const item = (id: string, rank: number | null, createdAt = "2026-08-04T10:00:00.000Z") =>
     ({ kind: "task", row: { id, manual_order: rank, updated_at: createdAt } }) as never;
 

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

@@ -18,6 +18,7 @@ import { TaskDetailsDialog } from "./TaskDetailsDialog.js";
 import { taskOrigin } from "./task-origin.js";
 import { useCurrentTime } from "./use-current-time.js";
 import { useInfiniteColumn } from "./use-infinite-column.js";
+import { WorkColumnState } from "./WorkColumnState.js";
 import {
   isWorkItemVisible,
   type MacroWorkProgress,
@@ -30,6 +31,9 @@ import {
   workStageLabel,
   workStages,
 } from "./work-board-model.js";
+import { openWorkCardLabel } from "./work-card-label.js";
+import { workColumnState } from "./work-column-state.js";
+import { filterWorkItems } from "./work-item-filter.js";
 import "./unified-work-board.css";
 
 type WorkItem =
@@ -323,6 +327,7 @@ function WorkColumn({
     totalItems,
     onLoadMore,
   );
+  const displayState = workColumnState(items.length, totalItems, state);
   return (
     <article className={`operations-column is-${stage}`}>
       <header>
@@ -371,9 +376,7 @@ function WorkColumn({
             totalsByTask={totalsByTask}
           />
         ))}
-        {items.length === 0 && !state?.loading ? (
-          <p className="operations-empty">{locale === "pt-BR" ? "Sem itens" : "No items"}</p>
-        ) : null}
+        <WorkColumnState error={state?.error} locale={locale} state={displayState} />
         {hasMore ? (
           <div
             aria-live="polite"
@@ -543,9 +546,8 @@ function WorkCard({
   );
 }
 
-export function openWorkCardLabel(locale: OperationsLocale, title: string): string {
-  return locale === "pt-BR" ? `Abrir ${title}` : `Open ${title}`;
-}
+export { openWorkCardLabel } from "./work-card-label.js";
+export { workColumnState } from "./work-column-state.js";
 
 /** Replaces only visible-column slots, preserving the global order of all other work. */
 export function mergeManualWorkOrder(
@@ -561,16 +563,6 @@ export function mergeManualWorkOrder(
   );
 }
 
-export function filterWorkItems(items: readonly WorkItem[], query: string): WorkItem[] {
-  const normalized = query.trim().toLocaleLowerCase();
-  if (!normalized) return [...items];
-  return items.filter((item) =>
-    [item.row.id, item.row.title, item.kind].some((value) =>
-      value.toLocaleLowerCase().includes(normalized),
-    ),
-  );
-}
-
 function WorkColumnDialog({
   items,
   locale,

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

@@ -0,0 +1,34 @@
+import type { OperationsLocale } from "./status-labels.js";
+
+export function WorkColumnState({
+  state,
+  error,
+  locale,
+}: {
+  state: "loading" | "empty" | "error" | "content";
+  error: string | null | undefined;
+  locale: OperationsLocale;
+}) {
+  if (state === "loading")
+    return (
+      <div
+        aria-busy="true"
+        aria-label={locale === "pt-BR" ? "Carregando itens da coluna" : "Loading column items"}
+        className="operations-column-skeleton"
+        role="status"
+      >
+        <span />
+        <span />
+        <span />
+      </div>
+    );
+  if (state === "error")
+    return (
+      <p className="operations-empty" role="alert">
+        {error}
+      </p>
+    );
+  return state === "empty" ? (
+    <p className="operations-empty">{locale === "pt-BR" ? "Sem itens" : "No items"}</p>
+  ) : null;
+}

package/templates/.agents/dashboard/modules/operations/src/react/operation-duration.test.ts

@@ -11,7 +11,7 @@ import {
 
 describe("formatOperationDuration", () => {
   it("preserves unavailable and observed zero as different states", () => {
-    expect(formatOperationDuration(null, "pt-BR")).toBe("Indisponível");
+    expect(formatOperationDuration(null, "pt-BR")).toBe("0");
     expect(formatOperationDuration(0, "pt-BR")).toBe("0 seg");
   });
 

package/templates/.agents/dashboard/modules/operations/src/react/operation-duration.ts

@@ -9,7 +9,7 @@ export interface OperationalTiming {
 }
 
 export function formatOperationDuration(value: number | null, locale: OperationsLocale): string {
-  if (value === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  if (value === null) return "0";
   if (value === 0) return locale === "pt-BR" ? "0 seg" : "0 sec";
   return formatDurationMs(value, locale);
 }

package/templates/.agents/dashboard/modules/operations/src/react/operations-average-unmeasured.test.ts

@@ -0,0 +1,10 @@
+import { expect, it } from "vitest";
+import { formatExecutionAverageHint } from "./OperationsOverview.js";
+
+it("keeps the known macro average when execution days are unavailable", () => {
+  expect(formatExecutionAverageHint(3_600_000, 3, 0, "pt-BR")).toBe("20 min / item");
+  expect(formatExecutionAverageHint(3_600_000, 3, 0, "en-US")).toBe("20 min / item");
+  expect(formatExecutionAverageHint(0, 3, 0, "pt-BR")).toBe(
+    "Sem tempo medido para calcular médias",
+  );
+});

package/templates/.agents/dashboard/modules/operations/src/react/operations-content-visibility.ts

@@ -0,0 +1,3 @@
+export function shouldRenderOperationsContent(loading: boolean): boolean {
+  return !loading;
+}

package/templates/.agents/dashboard/modules/operations/src/react/operations-coverage-toast.test.ts

@@ -38,7 +38,7 @@ describe("Operations persisted aggregate display", () => {
     expect(totals).toMatchObject({ duration_ms: null, tokens: 0, cost_brl: 0 });
   });
 
-  it("preserves unavailable aggregate totals and renders zero only for an empty population", () => {
+  it("preserves unavailable aggregate facts and opts overview cards into disclosed zero", () => {
     const overview = ["OperationsOverview.tsx", "overview-metric-format.ts"]
       .map((file) => readFileSync(new URL(file, import.meta.url), "utf8"))
       .join("\n");
@@ -52,8 +52,9 @@ describe("Operations persisted aggregate display", () => {
     expect(overview).toMatch(
       /durationMs: totalDurationMetric,\s*tokens: totalTokensMetric,\s*costBrl: rateCost/,
     );
-    expect(overview).toContain("formatSummaryMetricValue(\n        averageDuration,");
-    expect(overview).toContain('populationCount === 0 ? "0"');
+    expect(overview).toContain("overviewMetricStats");
+    expect(overview).toMatch(/populationCount === 0 \|\| displayUnmeasuredAsZero\s*\? "0"/);
+    expect(overview).toMatch(/unmeasuredZeroDescription\(\s*totalDurationMetric/);
     expect(overview).not.toContain("allPhaseMetrics.tokens ?? 0");
     expect(overview).not.toContain("executionMetrics.durationMs ?? 0");
   });

package/templates/.agents/dashboard/modules/operations/src/react/operations-overview-period-filter.test.ts

@@ -1,10 +1,21 @@
 import { readFileSync } from "node:fs";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 import { readAppCompositionSource } from "../../../../apps/frontend/src/__tests__/app-composition-support.js";
-import { resolveOperationsPeriodControl, shouldRenderOperationsContent } from "./OperationsPage.js";
+import { resolveOperationsPeriodControl } from "./OperationsPage.js";
+import { OperationsPageLoading } from "./OperationsPageOverview.js";
+import { shouldRenderOperationsContent } from "./operations-content-visibility.js";
 import { workListTypeOnViewChange } from "./operations-page-contract.js";
 
 describe("overview period filter", () => {
+  it("renders independent KPI and panel skeletons without fake zeros or unavailable values", () => {
+    const html = renderToStaticMarkup(createElement(OperationsPageLoading, { locale: "pt-BR" }));
+    expect(html.match(/operations-skeleton-block/g)).toHaveLength(10);
+    expect(html).not.toContain("Indisponível");
+    expect(html).not.toContain(">0<");
+    expect(html).toContain('aria-busy="true"');
+  });
   it("passes activity-filtered entities and Runs to every overview metric", () => {
     const overview = readFileSync(new URL("OperationsPageOverview.tsx", import.meta.url), "utf8");
 

package/templates/.agents/dashboard/modules/operations/src/react/operations-page-contract.ts

@@ -97,6 +97,7 @@ export interface OperationsPageProps {
   /** Timestamp of the immutable projection supplied by the composition root. */
   lastUpdatedAt?: string | null;
   loading: boolean;
+  costLoading?: boolean | undefined;
   onLoadingChange?: (loading: boolean) => void;
   currency: "BRL" | "USD";
   locale: OperationsLocale;