@zaip-ai/cli 2.2.0 → 3.0.0

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

@@ -0,0 +1,171 @@
+import { formatDateTime, formatPercent } from "@zaip-ai/dashboard-ui";
+import type { overviewCopy, overviewText } from "./OperationsOverview.helpers.js";
+import { donutGradient, PanelHeader } from "./OperationsOverviewPanels.js";
+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({
+  locale,
+  copy,
+  text,
+  statusStats,
+  statusTotal,
+  classificationStats,
+  selectedCount,
+  metricStats,
+  latestCreatedAt,
+  onStatusSelect,
+  onClassificationSelect,
+}: {
+  locale: OperationsLocale;
+  copy: ReturnType<typeof overviewCopy>;
+  text: ReturnType<typeof overviewText>;
+  statusStats: Array<{ key: string; label: string; color: string; count: number }>;
+  statusTotal: number;
+  classificationStats: Array<{ key: string; label: string; color: string; count: number }>;
+  selectedCount: number | null;
+  metricStats: readonly (readonly string[])[];
+  latestCreatedAt: string | null;
+  onStatusSelect: (stage: WorkStage) => void;
+  onClassificationSelect: (classification: OverviewClassification) => void;
+}) {
+  return (
+    <>
+      <article className="operations-panel operations-panel-wide">
+        {" "}
+        <PanelHeader hint={text.statusHint} title={copy.statusTitle} />{" "}
+        <div aria-hidden="true" className="operations-stacked-bar">
+          {" "}
+          {statusStats.map((item) => (
+            <i
+              key={item.key}
+              style={{
+                background: item.color,
+                flexGrow: item.count,
+                display: item.count === 0 ? "none" : undefined,
+              }}
+            />
+          ))}{" "}
+        </div>{" "}
+        <div className="operations-legend-grid">
+          {" "}
+          {statusStats.map((item) => {
+            const content = (
+              <>
+                {" "}
+                <i style={{ background: item.color }} />
+                <span>{item.label}</span>{" "}
+                <span className="operations-legend-value">
+                  {" "}
+                  <strong>{item.count}</strong>{" "}
+                  <small>
+                    {" "}
+                    {formatPercent(statusTotal === 0 ? 0 : item.count / statusTotal, locale)}{" "}
+                  </small>{" "}
+                </span>{" "}
+              </>
+            );
+            return item.key !== "unclassified" ? (
+              <button
+                aria-label={`${item.label}: ${item.count}, ${formatPercent(statusTotal === 0 ? 0 : item.count / statusTotal, locale)}`}
+                className="operations-legend-row operations-status-filter"
+                key={item.key}
+                onClick={() => onStatusSelect(item.key as WorkStage)}
+                type="button"
+              >
+                {" "}
+                {content}{" "}
+              </button>
+            ) : (
+              <div className="operations-legend-row" key={item.key}>
+                {" "}
+                {content}{" "}
+              </div>
+            );
+          })}{" "}
+        </div>
+      </article>
+      <article className="operations-panel operations-panel-risk">
+        {" "}
+        <PanelHeader hint={copy.classificationHint} title={copy.classificationTitle} />{" "}
+        <div className="operations-donut-wrap">
+          {" "}
+          <div
+            aria-hidden="true"
+            className="operations-donut"
+            style={{
+              background: donutGradient(classificationStats, Math.max(selectedCount ?? 0, 1)),
+            }}
+          />{" "}
+          <div>
+            {" "}
+            <strong>{selectedCount ?? "—"}</strong> <span>{copy.shortPlural}</span>{" "}
+          </div>{" "}
+        </div>{" "}
+        <div className="operations-legend-grid">
+          {" "}
+          {classificationStats.map((item) => {
+            const content = (
+              <>
+                {" "}
+                <i style={{ background: item.color }} /> <span>{item.label}</span>{" "}
+                <span className="operations-legend-value">
+                  {" "}
+                  <strong>{item.count}</strong>{" "}
+                  <small>
+                    {" "}
+                    {formatPercent(
+                      selectedCount === null || selectedCount === 0
+                        ? 0
+                        : item.count / selectedCount,
+                      locale,
+                    )}{" "}
+                  </small>{" "}
+                </span>{" "}
+              </>
+            );
+            return item.key !== "unclassified" ? (
+              <button
+                aria-label={`${item.label}: ${item.count}, ${formatPercent(selectedCount === null || selectedCount === 0 ? 0 : item.count / selectedCount, locale)}`}
+                className="operations-legend-row operations-status-filter"
+                key={item.key}
+                onClick={() => onClassificationSelect(item.key as OverviewClassification)}
+                type="button"
+              >
+                {" "}
+                {content}{" "}
+              </button>
+            ) : (
+              <div className="operations-legend-row" key={item.key}>
+                {" "}
+                {content}{" "}
+              </div>
+            );
+          })}{" "}
+        </div>{" "}
+      </article>
+      <article
+        className={`operations-panel operations-panel-type${locale === "en-US" ? " is-en-us" : ""}`}
+      >
+        {" "}
+        <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>{" "}
+            </div>
+          ))}{" "}
+        </div>{" "}
+        <footer className="operations-latest-task-created">
+          {" "}
+          <span>{copy.latestLabel}</span>{" "}
+          <strong>
+            {" "}
+            {latestCreatedAt === null ? "—" : formatDateTime(latestCreatedAt, locale)}{" "}
+          </strong>{" "}
+        </footer>{" "}
+      </article>
+    </>
+  );
+}

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import type { MacroProjection, OperationsProjection } from "../contracts.js";
+import { statusColors } from "./OperationsOverview.helpers.js";
+import type { OperationsLocale } from "./status-labels.js";
+import { macroWorkStage, taskWorkStage, workStageLabel, workStages } from "./work-board-model.js";
+
+export function PanelHeader({
+  title,
+  hint,
+  action,
+}: {
+  title: string;
+  hint: string;
+  action?: ReactNode;
+}) {
+  return (
+    <header className="operations-panel-header">
+      <div className="operations-panel-header-title">
+        <h2>{title}</h2>
+        {action}
+      </div>
+      <small>{hint}</small>
+    </header>
+  );
+}
+
+export function taskStatusDistribution(
+  tasks: readonly Parameters<typeof taskWorkStage>[0][],
+  locale: OperationsLocale,
+) {
+  return workStages.map((stage) => ({
+    key: stage,
+    label: workStageLabel(stage, locale),
+    color: statusColors[stage],
+    count: tasks.filter((task) => taskWorkStage(task) === stage).length,
+  }));
+}
+
+export function macroStatusDistribution(
+  macros: readonly MacroProjection[],
+  tasks: OperationsProjection["tasks"],
+  locale: OperationsLocale,
+) {
+  return workStages.map((stage) => ({
+    key: stage,
+    label: workStageLabel(stage, locale),
+    color: statusColors[stage],
+    count: macros.filter((macro) => macroWorkStage(macro, tasks) === stage).length,
+  }));
+}
+
+export function donutGradient(
+  rows: readonly { color: string; count: number }[],
+  total: number,
+): string {
+  let start = 0;
+  const stops = rows.map((row) => {
+    const end = start + (row.count / total) * 100;
+    const stop = `${row.color} ${start}% ${end}%`;
+    start = end;
+    return stop;
+  });
+  return start === 0 ? "rgba(36, 52, 72, 0.86)" : `conic-gradient(${stops.join(", ")})`;
+}

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

@@ -88,6 +88,7 @@ export function OperationsPage({
   currency,
   data,
   dashboardTitle = "Dashboard Zaip AIOS",
+  lastUpdatedAt = data.summary.latest_token_collected_at ?? null,
   loading,
   onLoadingChange,
   locale,
@@ -118,6 +119,7 @@ export function OperationsPage({
   repositoryName,
   settings,
   factualCostTotal,
+  factualCostFact,
   factualCostPeriods,
   resolveRunCost,
 }: OperationsPageProps) {
@@ -146,6 +148,7 @@ export function OperationsPage({
     dateRange: controlledDateRange,
     fallbackPreset: localDatePreset,
     fallbackRange: localDateRange,
+    allTimeRange: defaultDateRange,
   });
   const isPeriodControlled = periodControl.controlled;
   const dateRange = periodControl.dateRange;
@@ -160,20 +163,8 @@ export function OperationsPage({
     },
     [isPeriodControlled, onDateChange, onPeriodChange],
   );
-  // A controlled parent initially owns the range selected before the factual
-  // Cost summary arrives. Once it does, synchronize only All Time's displayed
-  // coverage range; requestPeriodForOperations still omits both bounds.
-  useEffect(() => {
-    if (
-      datePreset !== "all" ||
-      (dateRange.start === defaultDateRange.start && dateRange.end === defaultDateRange.end)
-    )
-      return;
-    updatePeriod("all", defaultDateRange);
-  }, [datePreset, dateRange.end, dateRange.start, defaultDateRange, updatePeriod]);
-  useEffect(() => {
-    if (!isPeriodControlled && datePreset === "all") setLocalDateRange(defaultDateRange);
-  }, [datePreset, defaultDateRange, isPeriodControlled]);
+  // Coverage is derived display data, not a user selection. Never feed it
+  // back through onDateChange: a delayed effect can overwrite a newer period.
   const showFilterLoading = useCallback(() => {
     setFilterLoading(true);
     if (filterLoadingTimer.current !== null) window.clearTimeout(filterLoadingTimer.current);
@@ -505,7 +496,7 @@ export function OperationsPage({
             dateRange.start !== defaultDateRange.start ||
             dateRange.end !== defaultDateRange.end,
         )}
-        lastUpdatedAt={data.summary.source_latest_at}
+        lastUpdatedAt={lastUpdatedAt}
         loading={isLoading}
         locale={locale}
         onLocaleChange={onLocaleChange}
@@ -518,11 +509,11 @@ export function OperationsPage({
       <header className="operations-hero">
         <div>
           <small className="operations-last-updated">
-            {data.summary.source_latest_at === null
+            {lastUpdatedAt === null
               ? locale === "pt-BR"
                 ? "Aguardando atualização"
                 : "Waiting for refresh"
-              : `${locale === "pt-BR" ? "Atualizado" : "Updated"} ${new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "medium" }).format(new Date(data.summary.source_latest_at))}`}
+              : `${locale === "pt-BR" ? "Atualizado" : "Updated"} ${new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "medium" }).format(new Date(lastUpdatedAt))}`}
           </small>
         </div>
         <div className="operations-actions">
@@ -679,6 +670,7 @@ export function OperationsPage({
               prds={prds}
               query={query}
               factualCostTotal={factualCostTotal}
+              factualCostFact={factualCostFact}
               resolveRunCost={resolveRunCost}
               runs={runs}
               searchInputRef={searchInputRef}

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

@@ -19,6 +19,7 @@ export function OperationsPageOverview({
   dateRange,
   defaultDateRange,
   factualCostTotal,
+  factualCostFact,
   includeLegacyEffort,
   locale,
   onOpenTask,
@@ -47,6 +48,7 @@ export function OperationsPageOverview({
   dateRange: OperationDateRange;
   defaultDateRange: OperationDateRange;
   factualCostTotal: OverviewProps["factualCostTotal"];
+  factualCostFact: OverviewProps["factualCostFact"];
   includeLegacyEffort: boolean;
   locale: OperationsLocale;
   onOpenTask: OverviewProps["onOpenTask"];
@@ -74,6 +76,7 @@ export function OperationsPageOverview({
         data={data}
         currency={currency}
         factualCostTotal={factualCostTotal}
+        factualCostFact={factualCostFact}
         datePreset={datePreset}
         dateRange={dateRange}
         locale={locale}

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

@@ -0,0 +1,46 @@
+import {
+  factualCostMetricHint,
+  factualCostMetricLabel,
+  Kpi,
+  overviewCostRateHint,
+} from "./OperationsOverview.helpers.js";
+import type { FactualCostFact } from "./operations-page-contract.js";
+import { formatRoundedCurrency, formatSummaryMetricValue } from "./overview-metric-format.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+/** Compact presentation, preserving completeness and matching population semantics. */
+export function OverviewCostKpi({
+  fact,
+  unit,
+  locale,
+  currency,
+  count,
+  perItem,
+  perHour,
+  total,
+  label,
+}: {
+  fact: FactualCostFact | undefined;
+  unit: string;
+  locale: OperationsLocale;
+  currency: "BRL" | "USD";
+  count: number | null;
+  perItem: number | null;
+  perHour: number | null;
+  total: number | null;
+  label?: string | undefined;
+}) {
+  return (
+    <Kpi
+      hint={overviewCostRateHint(fact, unit, locale, currency, count, perItem, perHour)}
+      description={factualCostMetricHint(fact, unit, locale) ?? undefined}
+      label={label ?? factualCostMetricLabel(fact, locale)}
+      value={formatSummaryMetricValue(
+        total,
+        count,
+        (value) => formatRoundedCurrency(value, currency, locale),
+        locale,
+      )}
+    />
+  );
+}

package/templates/.agents/dashboard/modules/operations/src/react/PrdDocumentDialog.test.tsx

@@ -1,9 +1,10 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
+import { readAppCompositionSource } from "../../../../apps/frontend/src/__tests__/app-composition-support.js";
 
 const component = source("PrdDocumentDialog.tsx");
 const styles = source("macro-planning-dialog.css");
-const app = source("../../../../apps/frontend/src/App.tsx");
+const app = readAppCompositionSource();
 const traceDocuments = source("../../../../apps/frontend/src/use-app-trace-documents.ts");
 describe("MacroDocumentDialog loading states", () => {
   it("keeps known identity visible before body hydration", () => {

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

@@ -2,9 +2,36 @@ import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { describe, expect, it } from "vitest";
 import type { DashboardTaskProjection, MacroProjection, RunProjection } from "../contracts.js";
-import { buildWorkListRows, formatWorkListDuration } from "./UnifiedWorkList.js";
+import {
+  buildWorkListRows,
+  formatWorkListDuration,
+  workListStageLabel,
+} from "./UnifiedWorkList.js";
 
 describe("buildWorkListRows", () => {
+  it("retains unexecuted Task drafts without labeling them as SPEC planning", () => {
+    const task = {
+      id: "TASK-DRAFT",
+      title: "Unprepared work",
+      status: "draft",
+      progress: 0,
+      spec_id: null,
+      execution_started: false,
+      execution_count: 0,
+      attempt_count: 0,
+    } as DashboardTaskProjection;
+    const [row] = buildWorkListRows({
+      allSpecs: [],
+      allTasks: [task],
+      changes: [],
+      items: [{ kind: "task", row: task }],
+      runs: [],
+    });
+    expect(row?.stage).toBe("draft");
+    if (row === undefined) throw new Error("Expected the draft to remain visible in the list");
+    expect(workListStageLabel(row.stage, "pt-BR")).toBe("Rascunho");
+    expect(workListStageLabel(row.stage, "en-US")).toBe("Draft");
+  });
   it("labels only active missing time as in progress and preserves temporal absence elsewhere", () => {
     expect(formatWorkListDuration(null, "executing", "pt-BR")).toBe("Em andamento");
     expect(formatWorkListDuration(null, "blocked", "pt-BR")).toBe("Sem atribuição temporal");

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

@@ -26,10 +26,11 @@ import {
 type WorkItem =
   | { kind: "task"; row: DashboardTaskProjection }
   | { kind: "prd" | "spec"; row: MacroProjection };
+type WorkListStage = WorkStage | "draft" | "unstaged";
 
 interface WorkListRow {
   item: WorkItem;
-  stage: WorkStage;
+  stage: WorkListStage;
   risk: string | null;
   progress: string;
   durationMs: number | null;
@@ -109,7 +110,7 @@ export function UnifiedWorkList({
               label: "Status",
               render: ({ stage }) => (
                 <span className={`operations-status is-${stage}`}>
-                  {workStageLabel(stage, locale)}
+                  {workListStageLabel(stage, locale)}
                 </span>
               ),
               sortValue: ({ stage }) => stage,
@@ -214,7 +215,7 @@ export function UnifiedWorkList({
 
 export function formatWorkListDuration(
   durationMs: number | null,
-  stage: WorkStage,
+  stage: WorkListStage,
   locale: OperationsLocale,
 ): string {
   if (durationMs !== null) return formatRoundedDuration(durationMs);
@@ -224,6 +225,12 @@ export function formatWorkListDuration(
   );
 }
 
+export function workListStageLabel(stage: WorkListStage, locale: OperationsLocale): string {
+  if (stage === "draft") return locale === "pt-BR" ? "Rascunho" : "Draft";
+  if (stage === "unstaged") return locale === "pt-BR" ? "Sem etapa" : "Unstaged";
+  return workStageLabel(stage, locale);
+}
+
 export function buildWorkListRows({
   allSpecs,
   allTasks,
@@ -269,7 +276,7 @@ export function buildWorkListRows({
     }
     return {
       item,
-      stage: taskWorkStage(task) ?? "planning",
+      stage: taskWorkStage(task) ?? (task.status === "draft" ? "draft" : "unstaged"),
       risk: task.risk ?? null,
       progress: `${Math.round(task.progress)}%`,
       durationMs: taskUsage?.durationMs ?? (hasProvenNoTaskActivity(task, relatedRuns) ? 0 : null),

package/templates/.agents/dashboard/modules/operations/src/react/index.ts

@@ -6,6 +6,7 @@ export * from "./MacroBoard.js";
 export * from "./MacroPlanningDialog.js";
 export * from "./OperationsPage.js";
 export * from "./operation-date-range.js";
+export type { FactualCostFact } from "./operations-page-contract.js";
 export * from "./PrdDocumentDialog.js";
 export * from "./TaskBoard.js";
 export * from "./TaskDetailsDialog.js";

package/templates/.agents/dashboard/modules/operations/src/react/manual-work-priority.test.ts

@@ -1,9 +1,10 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
+import { readAppCompositionSource } from "../../../../apps/frontend/src/__tests__/app-composition-support.js";
 import { mergeManualWorkOrder, openWorkCardLabel, sortWorkItems } from "./UnifiedWorkBoard.js";
 
 const board = readFileSync(new URL("UnifiedWorkBoard.tsx", import.meta.url), "utf8");
-const app = readFileSync(new URL("../../../../apps/frontend/src/App.tsx", import.meta.url), "utf8");
+const app = readAppCompositionSource();
 const priorityHandler = app.slice(
   app.indexOf("onPriorityChange={async"),
   app.indexOf("onPeriodChange="),

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

@@ -4,7 +4,9 @@ import { overviewMetricTotals } from "../server/build-operations-projection.js";
 
 describe("Operations persisted aggregate display", () => {
   it("removes the telemetry notice and its styling entirely", () => {
-    const overview = readFileSync(new URL("OperationsOverview.tsx", import.meta.url), "utf8");
+    const overview = ["OperationsOverview.tsx", "overview-metric-format.ts"]
+      .map((file) => readFileSync(new URL(file, import.meta.url), "utf8"))
+      .join("\n");
     const styles = readFileSync(new URL("operations-overview.css", import.meta.url), "utf8");
 
     expect(overview).not.toContain("operations-coverage-toast");
@@ -37,7 +39,9 @@ describe("Operations persisted aggregate display", () => {
   });
 
   it("preserves unavailable aggregate totals and renders zero only for an empty population", () => {
-    const overview = readFileSync(new URL("OperationsOverview.tsx", import.meta.url), "utf8");
+    const overview = ["OperationsOverview.tsx", "overview-metric-format.ts"]
+      .map((file) => readFileSync(new URL(file, import.meta.url), "utf8"))
+      .join("\n");
 
     expect(overview).toContain("overviewMetrics?.duration_ms ??");
     expect(overview).toContain("const totalTokensMetric = scopedOverviewMetric(");
@@ -45,8 +49,8 @@ describe("Operations persisted aggregate display", () => {
     expect(overview).toContain("const totalDurationMetric = scopedOverviewMetric(");
     expect(overview).toContain("selectedMacroTotals?.durationMs,");
     expect(overview).toContain("const totalCostMetric =");
-    expect(overview).toContain(
-      "durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric",
+    expect(overview).toMatch(
+      /durationMs: totalDurationMetric,\s*tokens: totalTokensMetric,\s*costBrl: rateCost/,
     );
     expect(overview).toContain("formatSummaryMetricValue(\n        averageDuration,");
     expect(overview).toContain('populationCount === 0 ? "0"');

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

@@ -1,5 +1,6 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
+import { readAppCompositionSource } from "../../../../apps/frontend/src/__tests__/app-composition-support.js";
 import { resolveOperationsPeriodControl, shouldRenderOperationsContent } from "./OperationsPage.js";
 import { workListTypeOnViewChange } from "./operations-page-contract.js";
 
@@ -50,13 +51,30 @@ describe("overview period filter", () => {
     expect(shouldRenderOperationsContent(true)).toBe(false);
   });
 
-  it("synchronizes the controlled All Time display after factual cost coverage arrives", () => {
+  it("derives All Time coverage without dispatching a selection or replacing bounded input", () => {
     const source = readFileSync(new URL("OperationsPage.tsx", import.meta.url), "utf8");
-
-    expect(source).toContain('datePreset !== "all"');
-    expect(source).toContain("dateRange.start === defaultDateRange.start");
-    expect(source).toContain('updatePeriod("all", defaultDateRange);');
-    expect(source).toContain("requestPeriodForOperations still omits both bounds");
+    const input = {
+      datePreset: "all" as const,
+      dateRange: { start: "2026-09-01", end: "2026-09-10" },
+      fallbackPreset: "all" as const,
+      fallbackRange: { start: "2026-09-10", end: "2026-09-10" },
+    };
+    const coverage = { start: "2026-06-02", end: "2026-09-10" };
+    expect(resolveOperationsPeriodControl({ ...input, allTimeRange: coverage })).toEqual({
+      controlled: true,
+      datePreset: "all",
+      dateRange: coverage,
+    });
+    expect(
+      resolveOperationsPeriodControl({
+        ...input,
+        datePreset: "this-month",
+        allTimeRange: coverage,
+      }),
+    ).toEqual({ controlled: true, datePreset: "this-month", dateRange: input.dateRange });
+    expect(input.datePreset).toBe("all");
+    expect(source).toContain("allTimeRange: defaultDateRange");
+    expect(source).not.toContain('updatePeriod("all", defaultDateRange)');
   });
 
   it("derives all big-number KPIs from the period-filtered global aggregate", () => {
@@ -87,12 +105,15 @@ describe("overview period filter", () => {
       "utf8",
     );
     const periods = readFileSync(new URL("PeriodSummaryTable.tsx", import.meta.url), "utf8");
+    const costCard = readFileSync(new URL("OverviewCostKpi.tsx", import.meta.url), "utf8");
 
     expect(source).toContain('currency: "BRL" | "USD"');
     expect(source).toContain("const selectedCurrencyCost =");
     expect(source).toContain("formatCurrency(value, currency, locale)");
-    expect(source).toContain("formatSummaryMetricValue(\n            totalCostMetric,");
-    expect(source).toContain("formatRoundedCurrency(value, currency, locale)");
+    expect(source).toContain("<OverviewCostKpi");
+    expect(source).toContain("total={totalCostMetric}");
+    expect(source).toContain("currency={currency}");
+    expect(costCard).toContain("formatRoundedCurrency(value, currency, locale)");
     expect(source).toContain("const topEntitiesCost =");
     expect(topPanel).toContain("formatCurrency(topCost, currency, locale)");
     expect(periods).toContain("resolveRunCost?: ((runId: string) => number | null)");
@@ -101,10 +122,7 @@ describe("overview period filter", () => {
   });
 
   it("pairs the global language selector with its currency before passing it to Operations", () => {
-    const app = readFileSync(
-      new URL("../../../../apps/frontend/src/App.tsx", import.meta.url),
-      "utf8",
-    );
+    const app = readAppCompositionSource();
 
     expect(app).toContain("const changeDashboardLocale = useCallback");
     expect(app).toContain('setCurrency(next === "en-US" ? "USD" : "BRL")');
@@ -116,10 +134,7 @@ describe("overview period filter", () => {
   });
 
   it("loads the quick overview first while retaining the detail hydration fallback", () => {
-    const app = readFileSync(
-      new URL("../../../../apps/frontend/src/App.tsx", import.meta.url),
-      "utf8",
-    );
+    const app = readAppCompositionSource();
     const hydration = readFileSync(
       new URL("../../../../apps/frontend/src/operations-detail-hydration.ts", import.meta.url),
       "utf8",
@@ -133,7 +148,7 @@ describe("overview period filter", () => {
     expect(app).toContain("const requestVersion = ++refreshVersion.current;");
     expect(app).toContain("operationsDetailLoadedRef.current = true;");
     expect(app).toContain("isCurrentDashboardRequest(requestVersion, refreshVersion.current)");
-    expect(app).toContain("if (!isCurrentRequest()) return;");
+    expect(app).toContain("if (!isCurrentRequest()) return false;");
     expect(app).toContain("useAppEffects({");
     expect(effects).toContain("shouldHydrateOperationsDetails(");
     expect(effects).toContain("scheduleOperationsDetail(async (signal)");
@@ -145,14 +160,11 @@ describe("overview period filter", () => {
   });
 
   it("invalidates the full detail snapshot before loading a new period overview", () => {
-    const app = readFileSync(
-      new URL("../../../../apps/frontend/src/App.tsx", import.meta.url),
-      "utf8",
-    );
+    const app = readAppCompositionSource();
 
     expect(app).toContain("operationsDetailLoadedRef.current = false;");
     expect(app).toContain("costsLoadedRef.current = false;");
-    expect(app).toContain("setOperationsPeriod({ preset, range });");
+    expect(app).toContain("setOperationsPeriod(nextPeriod);");
   });
 
   it("treats completed as a Run status in the Runs view, not a work stage", () => {

package/templates/.agents/dashboard/modules/operations/src/react/operations-overview.status-cards.test.ts

@@ -1,7 +1,9 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 
-const source = readFileSync(new URL("./OperationsOverview.tsx", import.meta.url), "utf8");
+const source = ["OperationsOverview.tsx", "OperationsOverviewCharts.tsx"]
+  .map((file) => readFileSync(new URL(file, import.meta.url), "utf8"))
+  .join("\n");
 const dialogSource = readFileSync(
   new URL("./OperationsFilteredStatusDialog.tsx", import.meta.url),
   "utf8",