@zaip-ai/cli 2.2.0 → 3.0.0

package/templates/.agents/dashboard/apps/frontend/src/ProjectSettingsPage.tsx

@@ -1,10 +1,19 @@
-import { type FormEvent, type ReactNode, useEffect, useState } from "react";
+import { type FormEvent, type ReactNode, useCallback, useEffect, useState } from "react";
 import type {
   DashboardApiClient,
   ProjectConfigSettings,
   ProjectOverview,
 } from "./dashboard-api.js";
 import { StackComponentEditor, StackVersions } from "./ProjectStackEditor.js";
+import {
+  type InstallationDimensionStatus,
+  projectInstallationStatus,
+  projectSettingsSummaryMetrics,
+} from "./project-installation-status.js";
+import {
+  projectSettingsCopy as copy,
+  type ProjectSettingsLocale as Locale,
+} from "./project-settings-copy.js";
 import {
   buildProjectSettingsPayload,
   defaultAutonomousExecution,
@@ -16,131 +25,7 @@ import {
 } from "./project-settings-model.js";
 import "./project-settings-page.css";
 import "./project-stack-versions.css";
-
-type Locale = "pt-BR" | "en-US";
-const copy = {
-  "pt-BR": {
-    eyebrow: "Configurações",
-    title: "Configuração do projeto",
-    intro: "Edite o arquivo central do projeto com validação do schema antes da gravação.",
-    loading: "Carregando…",
-    back: "Voltar ao dashboard",
-    save: "Salvar configurações",
-    saving: "Validando e salvando…",
-    saved: "Configurações salvas e validadas.",
-    framework: "Framework ZAIP-AIOS",
-    frameworkHint: "Ativa ou desativa o framework para este projeto.",
-    identity: "Identidade do projeto",
-    stack: "Stack e linguagens",
-    execution: "Execução",
-    assurance: "Assurance",
-    executionToggleHint:
-      "Grava ou remove o bloco execution. Sem ele, o projeto usa execução manual.",
-    runtimeHint:
-      "Manual apenas materializa o trabalho; autonomous executa a DAG pelo provider configurado quando as precondições passam.",
-    providerHint: "Provider que inicia os agentes da execução autônoma: Codex ou Claude.",
-    executionModelHint:
-      "Modelo-base do runtime autônomo. A política automática de PRD/SPEC ainda pode selecionar um modelo permitido por agente.",
-    parallelismHint:
-      "Teto de agentes simultâneos. O valor efetivo é o menor limite entre projeto, DAG, provider e squad.",
-    leaseHint:
-      "Valor persistido no projeto. O coordenador atual ainda usa internamente um lease fixo de 60 segundos.",
-    assuranceToggleHint:
-      "Ativa ou remove os gates de evidência, revisão e qualidade do projeto. Recomenda-se manter ativo.",
-    assuranceVersionHint: "Versão do contrato de assurance. É fixa e somente leitura.",
-    assuranceDepthHint:
-      "Auto ajusta o rigor ao escopo; base exige o conjunto padrão; elevated amplia validações para mudanças mais abrangentes.",
-    finalCommitHint:
-      "Exige que as evidências comprovem o commit final integrado. Sinais de produção ou migração ainda podem exigir isso mesmo quando desativado.",
-    context: "Contexto",
-    overview: "Visão geral do projeto",
-    available: "Criado",
-    unavailable: "Ainda não criado",
-    componentGuide:
-      "Preencha cada responsabilidade separadamente. A versão fica sem prefixos (^, ~, >=) e a referência identifica o pacote, imagem ou serviço.",
-    versionHint: "Versão exata: 22.16.0 ou 17.6. Deixe vazio para serviços sem versão fixada.",
-    referenceHint:
-      "Ex.: npm:hono, docker:node:22.16.0-bookworm-slim, service:supabase ou provider:cloudflare-pages.",
-    overrides: "Opções avançadas (JSON)",
-    overridesHint:
-      "Use apenas fatos técnicos transversais confirmados. Deixe vazio quando não houver exceções.",
-    versions: "Versões detectadas no workspace",
-    exact: "Verificada",
-    constraint: "Requisito",
-    versionUnavailable: "Não encontrada",
-    runtime: "Runtime do Dashboard",
-    installed: "Instalado no projeto",
-    missing: "Ausente no projeto",
-    bundled: "Empacotado no Dashboard",
-    current: "Atual",
-    configured: "Configurado",
-    contextGuide:
-      "O contexto começa pelas fontes canônicas e inclui somente arquivos relevantes para a tarefa. Saídas geradas são consultadas apenas em setup, release ou checagem de paridade.",
-    contextDomains:
-      "Branding, Marketing, Growth e Sales são usados sob demanda pelos respectivos especialistas, quando houver uma tarefa e artefatos desses domínios. Não os adicione aqui apenas por existirem como capacidades.",
-  },
-  "en-US": {
-    eyebrow: "Settings",
-    title: "Project settings",
-    intro: "Edit the central project file with schema validation before writing.",
-    loading: "Loading project settings…",
-    back: "Back to dashboard",
-    save: "Save settings",
-    saving: "Validating and saving…",
-    saved: "Settings saved and validated.",
-    framework: "ZAIP-AIOS framework",
-    frameworkHint: "Enable or disable the framework for this project.",
-    identity: "Project identity",
-    stack: "Stack and languages",
-    execution: "Execution",
-    assurance: "Assurance",
-    executionToggleHint:
-      "Writes or removes the execution block. Without it, the project uses manual execution.",
-    runtimeHint:
-      "Manual only materializes work; autonomous runs the DAG through the configured provider after preconditions pass.",
-    providerHint: "Provider that starts autonomous execution agents: Codex or Claude.",
-    executionModelHint:
-      "Base model for the autonomous runtime. PRD/SPEC automatic policy may still select an allowed model per agent.",
-    parallelismHint:
-      "Maximum simultaneous agents. Effective parallelism is the smallest project, DAG, provider, and squad limit.",
-    leaseHint:
-      "Value persisted in the project. The current coordinator still uses a fixed internal 60-second lease.",
-    assuranceToggleHint:
-      "Enables or removes project evidence, review, and quality gates. Keeping it enabled is recommended.",
-    assuranceVersionHint: "Assurance contract version. It is fixed and read-only.",
-    assuranceDepthHint:
-      "Auto adapts rigor to scope; base uses the standard set; elevated expands validation for broader changes.",
-    finalCommitHint:
-      "Requires evidence for the final integrated commit. Production or migration signals may still require it when disabled.",
-    context: "Context",
-    overview: "Project overview",
-    available: "Created",
-    unavailable: "Not created yet",
-    componentGuide:
-      "Fill each responsibility separately. Versions have no prefixes (^, ~, >=), and the reference identifies the package, image, or service.",
-    versionHint:
-      "Exact version: 22.16.0 or 17.6. Leave blank for services without a pinned version.",
-    referenceHint:
-      "E.g. npm:hono, docker:node:22.16.0-bookworm-slim, service:supabase, or provider:cloudflare-pages.",
-    overrides: "Advanced options (JSON)",
-    overridesHint:
-      "Use only confirmed cross-cutting technical facts. Leave empty when there are no exceptions.",
-    versions: "Versions detected in the workspace",
-    exact: "Verified",
-    constraint: "Requirement",
-    versionUnavailable: "Not found",
-    runtime: "Dashboard runtime",
-    installed: "Installed in project",
-    missing: "Missing from project",
-    bundled: "Bundled in Dashboard",
-    current: "Current",
-    configured: "Configured",
-    contextGuide:
-      "Context starts from canonical sources and includes only files relevant to the task. Generated outputs are consulted only for setup, release, or parity checks.",
-    contextDomains:
-      "Branding, Marketing, Growth, and Sales are used on demand by their respective specialists when there is a task and artifacts in those domains. Do not add them here merely because they exist as capabilities.",
-  },
-} as const;
+import { AutonomySettings } from "./AutonomySettings.js";
 
 export function ProjectSettingsPage({
   api,
@@ -157,23 +42,44 @@ export function ProjectSettingsPage({
   const [stackComponents, setStackComponents] = useState<StackComponentsDraft | null>(null);
   const [otherOverrides, setOtherOverrides] = useState("{}");
   const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
+  const [installationToastVisible, setInstallationToastVisible] = useState(false);
+  const installation = overview === null ? null : projectInstallationStatus(overview);
 
-  useEffect(() => {
-    void Promise.all([api.projectSettings(), api.projectOverview()])
-      .then(([loaded, projectOverview]) => {
-        const draft = projectSettingsDraft(loaded);
-        setConfig(loaded);
-        setOverview(projectOverview);
-        setStackComponents(
-          withDetectedStackVersions(draft.components, projectOverview.stack_components),
-        );
-        setOtherOverrides(draft.otherOverrides);
-      })
-      .catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+  const loadProjectSettings = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [loaded, projectOverview] = await Promise.all([
+        api.projectSettings(),
+        api.projectOverview(),
+      ]);
+      const draft = projectSettingsDraft(loaded);
+      setConfig(loaded);
+      setOverview(projectOverview);
+      setStackComponents(
+        withDetectedStackVersions(draft.components, projectOverview.stack_components),
+      );
+      setOtherOverrides(draft.otherOverrides);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setLoading(false);
+    }
   }, [api]);
 
+  useEffect(() => {
+    void loadProjectSettings();
+  }, [loadProjectSettings]);
+
+  useEffect(() => {
+    setInstallationToastVisible(
+      overview !== null && projectInstallationStatus(overview).hasMissingDependencies,
+    );
+  }, [overview]);
+
   async function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     if (config === null) return;
@@ -203,7 +109,7 @@ export function ProjectSettingsPage({
   }
 
   if (config === null) {
-    const isLoading = error === null;
+    const isLoading = loading && error === null;
     return (
       <main aria-busy={isLoading} className="project-settings-state">
         <div
@@ -213,7 +119,13 @@ export function ProjectSettingsPage({
         >
           {isLoading ? <span aria-hidden="true" className="project-settings-loader" /> : null}
           <p>{text.eyebrow}</p>
-          <h1>{error ?? text.loading}</h1>
+          <h1>{error ? text.loadError : text.loading}</h1>
+          {error ? <p className="project-settings-state-error">{error}</p> : null}
+          {error ? (
+            <button onClick={() => void loadProjectSettings()} type="button">
+              {text.retry}
+            </button>
+          ) : null}
           <button onClick={onClose} type="button">
             ← {text.back}
           </button>
@@ -236,7 +148,11 @@ export function ProjectSettingsPage({
           </button>
         </header>
 
-        {error ? <div className="project-settings-message is-error">{error}</div> : null}
+        {error ? (
+          <div className="project-settings-message is-error" role="alert">
+            {error}
+          </div>
+        ) : null}
         {notice ? (
           <div className="project-settings-message is-success" role="status">
             {notice}
@@ -261,12 +177,16 @@ export function ProjectSettingsPage({
         </section>
 
         <section className="project-settings-summary" aria-label={text.overview}>
-          {overview?.metrics.map((metric) => (
-            <div className="project-settings-metric" key={metric.id}>
-              <strong>{metric.value}</strong>
-              <span>{metric.label}</span>
-            </div>
-          ))}
+          {overview &&
+            projectSettingsSummaryMetrics(overview.metrics).map((metric) => (
+              <div className="project-settings-metric" key={metric.id}>
+                <strong>{metric.value}</strong>
+                <span>{text.metricLabels[metric.id]}</span>
+              </div>
+            ))}
+          {installation ? (
+            <InstallationMetrics installation={installation} locale={locale} />
+          ) : null}
         </section>
 
         <SettingsCard className="is-wide" title={text.overview}>
@@ -274,17 +194,29 @@ export function ProjectSettingsPage({
             {overview?.areas.map((area) => (
               <div className="project-overview-item" key={area.id}>
                 <div>
-                  <strong>{area.label}</strong>
+                  <strong>{text.areaLabels[area.id]}</strong>
                   <code>{area.artifact}</code>
                 </div>
                 <span className={area.available ? "is-available" : "is-unavailable"}>
-                  {area.available ? text.available : text.unavailable}
+                  {area.available === true
+                    ? text.available
+                    : area.available === false
+                      ? text.artifactUnavailable
+                      : text.unavailable}
                 </span>
               </div>
             ))}
           </div>
         </SettingsCard>
 
+        <SettingsCard className="is-wide project-detected-versions" title={text.versions}>
+          <StackVersions
+            components={overview?.stack_components ?? []}
+            text={text}
+            showTitle={false}
+          />
+        </SettingsCard>
+
         <div className="project-settings-grid">
           <SettingsCard className="is-wide project-identity-card" title={text.identity}>
             <Field label="Schema">
@@ -339,7 +271,6 @@ export function ProjectSettingsPage({
                 versionHint={text.versionHint}
               />
             ) : null}
-            <StackVersions components={overview?.stack_components ?? []} text={text} />
             <details className="project-settings-advanced">
               <summary>{text.overrides}</summary>
               <Field
@@ -367,7 +298,9 @@ export function ProjectSettingsPage({
               onChange={(checked) =>
                 setConfig({
                   ...config,
-                  execution: checked ? { runtime: "manual" } : undefined,
+                  execution: checked
+                    ? { ...defaultAutonomousExecution(), runtime: "managed" }
+                    : undefined,
                 })
               }
             />
@@ -376,27 +309,44 @@ export function ProjectSettingsPage({
                 <Field hint={text.runtimeHint} label="Runtime">
                   <select
                     value={config.execution.runtime}
+                    aria-label="Runtime"
                     onChange={(event) =>
                       setConfig({
                         ...config,
                         execution:
                           event.target.value === "manual"
                             ? { runtime: "manual" }
-                            : defaultAutonomousExecution(),
+                            : {
+                                ...defaultAutonomousExecution(),
+                                runtime:
+                                  event.target.value === "managed" ? "managed" : "autonomous",
+                              },
                       })
                     }
                   >
                     <option value="manual">manual</option>
+                    <option value="managed">managed (PRD/SPEC)</option>
                     <option value="autonomous">autonomous</option>
                   </select>
                 </Field>
-                {config.execution.runtime === "autonomous" ? (
+                {config.execution.runtime !== "manual" ? (
                   <AutonomousExecutionFields config={config} setConfig={setConfig} text={text} />
                 ) : null}
               </>
             ) : null}
           </SettingsCard>
 
+          <SettingsCard
+            title={locale === "pt-BR" ? "Autonomia e recuperação" : "Autonomy and recovery"}
+          >
+            <AutonomySettings
+              value={config.autonomy}
+              disabled={saving}
+              locale={locale}
+              onChange={(autonomy) => setConfig({ ...config, autonomy })}
+            />
+          </SettingsCard>
+
           <SettingsCard title={text.assurance}>
             <OptionalSectionToggle
               checked={config.assurance !== undefined}
@@ -554,10 +504,101 @@ export function ProjectSettingsPage({
           </button>
         </footer>
       </form>
+      {installationToastVisible && installation?.hasMissingDependencies ? (
+        <div aria-live="assertive" className="project-installation-toast" role="alert">
+          <span>{text.incompleteInstallation}</span>
+          <button
+            aria-label={text.dismiss}
+            onClick={() => setInstallationToastVisible(false)}
+            type="button"
+          >
+            ×
+          </button>
+        </div>
+      ) : null}
     </main>
   );
 }
 
+function formatInstallationPercentage(percentage: number, locale: Locale) {
+  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(percentage)}%`;
+}
+
+function InstallationMetrics({
+  installation,
+  locale,
+}: {
+  installation: ReturnType<typeof projectInstallationStatus>;
+  locale: Locale;
+}) {
+  const text = copy[locale];
+  return (
+    <>
+      <p className="project-installation-health">
+        {text.health}:{" "}
+        {installation.health.state === "healthy"
+          ? locale === "pt-BR"
+            ? "Saudável"
+            : "Healthy"
+          : installation.health.state === "degraded"
+            ? locale === "pt-BR"
+              ? "Degradada"
+              : "Degraded"
+            : text.unknown}
+      </p>
+      <InstallationMetric
+        dimension={installation.dependencies}
+        label={text.dependencies}
+        locale={locale}
+      />
+      <InstallationMetric
+        dimension={installation.documentation}
+        label={text.documentation}
+        locale={locale}
+      />
+    </>
+  );
+}
+
+function InstallationMetric({
+  dimension,
+  label,
+  locale,
+}: {
+  dimension: InstallationDimensionStatus;
+  label: string;
+  locale: Locale;
+}) {
+  const text = copy[locale];
+  const detail =
+    dimension.state === "not_applicable"
+      ? text.notApplicable
+      : dimension.percentage === null
+        ? text.unknown
+        : formatInstallationPercentage(dimension.percentage, locale);
+  const stateLabel = installationStateLabel(dimension.state, locale);
+  return (
+    <div className={`project-settings-metric installation-metric is-${dimension.state}`}>
+      <strong>{detail}</strong>
+      <span>
+        {dimension.total === null || dimension.completed === null
+          ? label
+          : `${label} · ${dimension.completed}/${dimension.total}`}
+      </span>
+      <small>{stateLabel}</small>
+    </div>
+  );
+}
+
+function installationStateLabel(state: InstallationDimensionStatus["state"], locale: Locale) {
+  const text = copy[locale];
+  if (state === "complete") return text.complete;
+  if (state === "incomplete") return text.incomplete;
+  if (state === "not_applicable") return text.notApplicable;
+  if (state === "unavailable") return text.unavailable;
+  return text.unknown;
+}
+
 function SettingsCard({
   children,
   className = "",
@@ -626,14 +667,20 @@ function AutonomousExecutionFields({
   text: (typeof copy)[Locale];
 }) {
   const execution =
-    config.execution?.runtime === "autonomous" ? config.execution : defaultAutonomousExecution();
+    config.execution && config.execution.runtime !== "manual"
+      ? config.execution
+      : defaultAutonomousExecution();
   const update = (autonomous: typeof execution.autonomous) =>
-    setConfig({ ...config, execution: { runtime: "autonomous", autonomous } });
+    setConfig({ ...config, execution: { runtime: execution.runtime, autonomous } });
   return (
     <>
-      <Field hint={text.providerHint} label="Provider">
+      <Field
+        hint={config.autonomy?.version === 1 ? text.autonomyProviderHint : text.providerHint}
+        label="Provider"
+      >
         <select
           value={execution.autonomous.provider}
+          aria-label="Provider"
           onChange={(event) =>
             update({
               ...execution.autonomous,
@@ -642,7 +689,9 @@ function AutonomousExecutionFields({
           }
         >
           <option value="codex">codex</option>
-          <option value="claude">claude</option>
+          <option value="claude" disabled={config.autonomy?.version === 1}>
+            claude
+          </option>
         </select>
       </Field>
       <Field hint={text.executionModelHint} label="Model">

package/templates/.agents/dashboard/apps/frontend/src/ProjectStackEditor.tsx

@@ -125,9 +125,11 @@ export function StackComponentEditor({
 
 export function StackVersions({
   components,
+  showTitle = true,
   text,
 }: {
   components: ProjectOverview["stack_components"];
+  showTitle?: boolean;
   text: {
     versions: string;
     versionUnavailable: string;
@@ -144,7 +146,7 @@ export function StackVersions({
   if (components.length === 0) return null;
   return (
     <section className="project-stack-versions" aria-label={text.versions}>
-      <h3>{text.versions}</h3>
+      {showTitle ? <h3>{text.versions}</h3> : null}
       <div>
         {components.map((component) => (
           <article key={component.name}>

package/templates/.agents/dashboard/apps/frontend/src/__tests__/app-composition-support.ts

@@ -0,0 +1,12 @@
+import { readFileSync } from "node:fs";
+/** Explicit composition owners; moving a boundary must keep its contract checks. */
+export function readAppCompositionSource(): string {
+  return [
+    "use-dashboard-app-model.tsx",
+    "AppDashboardContent.tsx",
+    "use-app-work-board.ts",
+    "dashboard-cost-facts.ts",
+  ]
+    .map((path) => readFileSync(new URL(`../${path}`, import.meta.url), "utf8"))
+    .join("\n");
+}

package/templates/.agents/dashboard/apps/frontend/src/cost-monitor-population.test.tsx

@@ -0,0 +1,149 @@
+import type { ComponentProps } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { CostMonitorContent } from "../../../modules/cost-monitor/src/react/CostMonitorContent.js";
+import { CostPeriodAverageCards } from "../../../modules/cost-monitor/src/react/CostPeriodAverageCards.js";
+
+const metric = {
+  events: 0,
+  tokens: { input: null, cached_input: null, output: null, reasoning: null, total: null },
+  cost: { usd: null, brl: null },
+  coverage: { events: 0, tokens: 0, usd: 0, brl: 0 },
+};
+const totals = {
+  run_count: 2,
+  task_count: 1,
+  prd_count: 0,
+  spec_count: 0,
+  evidence_count: 0,
+  test_count: 0,
+  event_count: 2,
+  total_tokens: 20,
+  estimated_usd: 10,
+  estimated_brl: 50,
+  duration_ms: 2000,
+  duration: { known_sum: 2000, unknown: 0, complete: true, coverage_ratio: 1 },
+};
+const row = {
+  ...totals,
+  key: "openai",
+  label: "openai",
+  latest_started_at: "2026-09-10T12:00:00Z",
+  coverage: { events: 2, tokens: 2, usd: 2, brl: 2 },
+};
+function props(): ComponentProps<typeof CostMonitorContent> {
+  return {
+    canonicalDurationTotal: 2000,
+    compactPage: null,
+    compactPageError: null,
+    compactPageLoading: false,
+    compactPageOffset: 0,
+    currency: "BRL",
+    detailError: null,
+    detailLoading: false,
+    developerPanel: null,
+    dimensionalDetailPending: false,
+    dimensionalRows: [],
+    groups: {
+      agents: [],
+      annual: [],
+      conversations: [],
+      daily: [],
+      models: [],
+      monthly: [],
+      providers: [row],
+      tasks: [],
+    },
+    groupPage: { offset: 0, limit: 10, total_count: 1, has_more: false, totals },
+    groupPageLoading: false,
+    groupPageOffset: 0,
+    locale: "pt-BR",
+    macroDetails: undefined,
+    onOpenRun: () => {},
+    onOpenTrace: () => {},
+    pagedRunRows: [],
+    retryCompactPage: () => {},
+    retryRunPage: () => {},
+    rows: [],
+    runPageData: null,
+    runPageError: null,
+    runPageLoading: false,
+    runPageOffset: 0,
+    serverPagingEligible: true,
+    setCompactPageOffset: () => {},
+    setGroupPageOffset: () => {},
+    setDetailAttempt: () => {},
+    setRunPageOffset: () => {},
+    summaryUsage: { conversation: metric, planning: metric, execution: metric, total: metric },
+    summaryTotals: { ...totals, estimated_brl: 999, estimated_usd: 199 },
+    useAggregateGroups: true,
+    usingCompactPage: false,
+    view: "providers",
+    visibleExecutions: [],
+    visiblePrds: [],
+    visibleSpecs: [],
+  };
+}
+
+describe("Cost monitor rendered populations", () => {
+  it("retains temporal query totals instead of overwriting them with unrelated cards", () => {
+    const base = props();
+    const html = renderToStaticMarkup(
+      <CostMonitorContent
+        {...base}
+        view="daily"
+        groups={{ ...base.groups, daily: [{ ...row, key: "2026-09-10", label: "2026-09-10" }] }}
+      />,
+    );
+    expect(html).toContain("50,00");
+    expect(html).not.toContain("999");
+  });
+  it("renders full-period averages independently of page rows and distinguishes missing metadata", () => {
+    const base = props();
+    const averages = { tasks: 1.5, specs: 0, prds: 0, durationMs: 1000, tokens: 500, cost: 75 };
+    if (base.groupPage === null) throw new Error("Expected fixture page");
+    const page = {
+      ...base.groupPage,
+      period_averages: { BRL: averages, USD: { ...averages, cost: 15 } },
+    };
+    const html = renderToStaticMarkup(
+      <CostMonitorContent {...base} view="daily" groupPage={page} />,
+    );
+    expect(html).toContain("75,00");
+    expect(html).toContain("1,5");
+    const absent = renderToStaticMarkup(<CostMonitorContent {...base} view="daily" />);
+    expect(absent).toContain("Indisponível");
+    expect(absent).not.toContain("75,00");
+  });
+  it.each([
+    "BRL",
+    "USD",
+  ] as const)("uses provider query totals, not unrelated global totals (%s)", (currency) => {
+    const html = renderToStaticMarkup(<CostMonitorContent {...props()} currency={currency} />);
+    expect(html).toContain("openai");
+    expect(html).not.toContain("999");
+    expect(html).not.toContain("199");
+    expect(html).toContain(currency === "BRL" ? "50,00" : "10,00");
+  });
+
+  it("shows a loading status rather than zero or stale averages on a pending period", () => {
+    const html = renderToStaticMarkup(
+      <CostMonitorContent {...props()} view="daily" groupPageLoading />,
+    );
+    expect(html).toContain("Carregando médias");
+    expect(html).not.toContain("Médio por dia");
+  });
+
+  it("distinguishes loaded zero from loading, including English", () => {
+    const loaded = renderToStaticMarkup(
+      <CostPeriodAverageCards currency="BRL" locale="pt-BR" period="daily" rows={[]} />,
+    );
+    expect(loaded).toContain("Médio por dia");
+    expect(loaded).not.toContain("Carregando");
+    const loading = renderToStaticMarkup(
+      <CostPeriodAverageCards currency="USD" locale="en-US" period="monthly" rows={[]} loading />,
+    );
+    expect(loading).toContain("Loading averages");
+    expect(loading).not.toContain("Monthly average");
+  });
+});