@zaip-ai/cli 1.3.1 → 1.3.4

package/templates/.agents/dashboard/apps/frontend/src/snapshot-coherence.test.ts

@@ -74,11 +74,11 @@ describe("atomic Cost snapshot loading", () => {
     expect(initialLoad).not.toContain("api.snapshot(currency, period)");
   });
 
-  it("retries a failed Cost snapshot through refresh instead of a summary-only Cost request", () => {
+  it("retries a failed Cost snapshot through its summary request", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
     const retry = app.slice(app.indexOf("const retryLastLoad"), app.indexOf("const setupRoute"));
 
-    expect(retry).toContain('if (failedArea === "costs") void refresh();');
+    expect(retry).toContain('if (failedArea === "costs") void loadCostSummary();');
     expect(retry).not.toContain("loadCosts");
   });
 

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

@@ -0,0 +1,60 @@
+import { describe, expect, it, vi } from "vitest";
+import { loadCostDeveloperAttribution } from "./CostDeveloperAttributionPanel.js";
+
+describe("loadCostDeveloperAttribution", () => {
+  it("requests the active period and returns every row supplied by the API", async () => {
+    const rows = Array.from({ length: 11 }, (_, index) => ({
+      account_id: String(index + 1),
+      login_snapshot: `dev-${index + 1}`,
+      prd_count: 0,
+      spec_count: 0,
+      task_count: 1,
+      run_count: 1,
+      test_count: null,
+      evidence_count: null,
+      total_duration_ms: null,
+      total_tokens: null,
+      total_cost_brl: null,
+      duration_covered_runs: 0,
+      token_covered_runs: 0,
+      brl_covered_runs: 0,
+    }));
+    const fetcher = vi
+      .fn<typeof fetch>()
+      .mockResolvedValue(new Response(JSON.stringify({ rows }), { status: 200 }));
+
+    await expect(
+      loadCostDeveloperAttribution({
+        from: "2026-08-01",
+        to: "2026-08-31",
+        fetcher,
+      }),
+    ).resolves.toEqual(rows);
+    expect(fetcher).toHaveBeenCalledWith("/api/v2/developers?from=2026-08-01&to=2026-08-31", {});
+  });
+
+  it("keeps the embedded all-time population unbounded and returns all 25 developers", async () => {
+    const rows = Array.from({ length: 25 }, (_, index) => ({
+      account_id: String(index + 1),
+      login_snapshot: `dev-${index + 1}`,
+      prd_count: 0,
+      spec_count: 0,
+      task_count: 1,
+      run_count: 1,
+      test_count: null,
+      evidence_count: null,
+      total_duration_ms: null,
+      total_tokens: null,
+      total_cost_brl: null,
+      duration_covered_runs: 0,
+      token_covered_runs: 0,
+      brl_covered_runs: 0,
+    }));
+    const fetcher = vi
+      .fn<typeof fetch>()
+      .mockResolvedValue(new Response(JSON.stringify({ rows }), { status: 200 }));
+
+    await expect(loadCostDeveloperAttribution({ fetcher })).resolves.toHaveLength(25);
+    expect(fetcher).toHaveBeenCalledWith("/api/v2/developers", {});
+  });
+});

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

@@ -2,6 +2,28 @@ import { useEffect, useState } from "react";
 import { type CostDeveloperAttributionRow, CostDeveloperAttributionTable } from "./CostTables.js";
 import type { CostLocale } from "./cost-monitor-copy.js";
 
+export async function loadCostDeveloperAttribution({
+  from,
+  to,
+  signal,
+  fetcher = fetch,
+}: {
+  from?: string;
+  to?: string;
+  signal?: AbortSignal;
+  fetcher?: typeof fetch;
+}): Promise<readonly CostDeveloperAttributionRow[]> {
+  const params = new URLSearchParams();
+  if (from) params.set("from", from);
+  if (to) params.set("to", to);
+  const response = await fetcher(`/api/v2/developers${params.size === 0 ? "" : `?${params}`}`, {
+    ...(signal === undefined ? {} : { signal }),
+  });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const payload = (await response.json()) as { rows?: CostDeveloperAttributionRow[] };
+  return payload.rows ?? [];
+}
+
 /** Cost-specific rendering of the factual developer aggregate endpoint. */
 export function CostDeveloperAttributionPanel({
   from,
@@ -19,18 +41,13 @@ export function CostDeveloperAttributionPanel({
   }>({ loading: true, error: null, rows: [] });
   useEffect(() => {
     const controller = new AbortController();
-    const params = new URLSearchParams();
-    if (from) params.set("from", from);
-    if (to) params.set("to", to);
     setState((previous) => ({ ...previous, loading: true, error: null }));
-    fetch(`/api/v2/developers${params.size === 0 ? "" : `?${params}`}`, {
+    loadCostDeveloperAttribution({
+      ...(from === undefined ? {} : { from }),
+      ...(to === undefined ? {} : { to }),
       signal: controller.signal,
     })
-      .then(async (response) => {
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        return response.json() as Promise<{ rows?: CostDeveloperAttributionRow[] }>;
-      })
-      .then((payload) => setState({ loading: false, error: null, rows: payload.rows ?? [] }))
+      .then((rows) => setState({ loading: false, error: null, rows }))
       .catch((error: unknown) => {
         if ((error as { name?: string }).name !== "AbortError")
           setState({

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

@@ -0,0 +1,189 @@
+import type { CostMonitorProjection } from "../contracts.js";
+import { type CostFilterState, CostFilters, type CostPeriod } from "./CostFilters.js";
+import { ChevronDownIcon, ListFilterIcon, LocaleFlag, SettingsIcon } from "./CostMonitorIcons.js";
+import type { CostCurrency, CostLocale, costCopy } from "./cost-monitor-copy.js";
+
+const zaipLogoUrl = new URL("../../../../../config/src/logo_novo_azul.png", import.meta.url).href;
+
+type CostNavigationCopy = (typeof costCopy)[CostLocale];
+
+export type CostNavigationPopup = "filters" | "locale" | "settings" | null;
+
+export function toggleCostNavigationPopup(
+  popup: CostNavigationPopup,
+  requestedPopup: Exclude<CostNavigationPopup, null>,
+): CostNavigationPopup {
+  return popup === requestedPopup ? null : requestedPopup;
+}
+
+export function CostMonitorNavigation({
+  currency,
+  filters,
+  loading,
+  locale,
+  onCurrencyChange,
+  onFiltersChange,
+  onLocaleChange,
+  onPopupChange,
+  onPeriodChange,
+  onRefresh,
+  period,
+  popup,
+  text,
+  updatedLabel,
+  filtersAvailable,
+}: {
+  currency: CostCurrency;
+  filters: CostFilterState;
+  filtersAvailable: CostMonitorProjection["filters_available"];
+  loading: boolean;
+  locale: CostLocale;
+  onCurrencyChange: (currency: CostCurrency) => void;
+  onFiltersChange: (filters: CostFilterState) => void;
+  onLocaleChange: (locale: CostLocale) => void;
+  onPopupChange: (popup: CostNavigationPopup) => void;
+  onPeriodChange: (period: CostPeriod) => void;
+  onRefresh: () => void;
+  period: CostPeriod;
+  popup: CostNavigationPopup;
+  text: CostNavigationCopy;
+  updatedLabel: string;
+}) {
+  const filtersOpen = popup === "filters";
+  const localeOpen = popup === "locale";
+  const settingsOpen = popup === "settings";
+  const changeLocale = (next: CostLocale) => {
+    onLocaleChange(next);
+  };
+
+  return (
+    <>
+      <nav aria-label="Navegação do Cost Monitor" className="cost-monitor-nav">
+        <div className="cost-monitor-brand">
+          <strong className="cost-monitor-title">{text.title}</strong>
+          <small className="cost-last-updated">{updatedLabel}</small>
+        </div>
+        <img alt="ZAIP" className="cost-monitor-logo" src={zaipLogoUrl} />
+        <div className="cost-nav-actions">
+          <button
+            aria-label={text.refresh}
+            className="cost-nav-icon cost-refresh-action"
+            disabled={loading}
+            onClick={onRefresh}
+            type="button"
+          >
+            ↻
+          </button>
+          <div className="cost-nav-popup-anchor cost-filter-action">
+            <button
+              className={filtersOpen ? "cost-nav-button is-active" : "cost-nav-button"}
+              onClick={() => onPopupChange(toggleCostNavigationPopup(popup, "filters"))}
+              type="button"
+            >
+              <ListFilterIcon /> {text.filters}
+            </button>
+            {filtersOpen ? (
+              <div className="cost-nav-popup cost-nav-filter-popup">
+                <CostFilters
+                  available={filtersAvailable}
+                  hideQuery={false}
+                  locale={locale}
+                  onChange={onFiltersChange}
+                  value={filters}
+                />
+              </div>
+            ) : null}
+          </div>
+          <div className="cost-nav-popup-anchor cost-locale-action">
+            <button
+              className={localeOpen ? "cost-nav-button is-active" : "cost-nav-button"}
+              onClick={() => onPopupChange(toggleCostNavigationPopup(popup, "locale"))}
+              type="button"
+            >
+              <LocaleFlag locale={locale} />
+              {locale === "pt-BR" ? "PT-BR" : "EN-US"}
+              <ChevronDownIcon />
+            </button>
+            {localeOpen ? (
+              <div className="cost-nav-popup cost-nav-locale-popup">
+                <button onClick={() => changeLocale("pt-BR")} type="button">
+                  <LocaleFlag locale="pt-BR" /> Português do Brasil {locale === "pt-BR" ? "✓" : ""}
+                </button>
+                <button onClick={() => changeLocale("en-US")} type="button">
+                  <LocaleFlag locale="en-US" /> English {locale === "en-US" ? "✓" : ""}
+                </button>
+              </div>
+            ) : null}
+          </div>
+          <div className="cost-nav-popup-anchor cost-settings-action">
+            <button
+              aria-label={text.settings}
+              className={settingsOpen ? "cost-nav-icon is-active" : "cost-nav-icon"}
+              onClick={() => onPopupChange(toggleCostNavigationPopup(popup, "settings"))}
+              type="button"
+            >
+              <SettingsIcon />
+            </button>
+            {settingsOpen ? (
+              <div className="cost-nav-popup cost-nav-settings-popup">
+                <div className="cost-mobile-settings">
+                  <small className="cost-mobile-updated">{updatedLabel}</small>
+                  <button disabled={loading} onClick={onRefresh} type="button">
+                    ↻{" "}
+                    {loading ? (locale === "pt-BR" ? "Atualizando…" : "Refreshing…") : text.refresh}
+                  </button>
+                  <label>
+                    <span>{locale === "pt-BR" ? "Idioma" : "Language"}</span>
+                    <select
+                      onChange={(event) => changeLocale(event.target.value as CostLocale)}
+                      value={locale}
+                    >
+                      <option value="pt-BR">Português do Brasil</option>
+                      <option value="en-US">English</option>
+                    </select>
+                  </label>
+                  <div className="cost-mobile-filters">
+                    <strong>{text.filters}</strong>
+                    <CostFilters
+                      available={filtersAvailable}
+                      hideQuery={false}
+                      locale={locale}
+                      onChange={onFiltersChange}
+                      value={filters}
+                    />
+                  </div>
+                </div>
+                <label>
+                  <span>{text.currency}</span>
+                  <select
+                    onChange={(event) => onCurrencyChange(event.target.value as CostCurrency)}
+                    value={currency}
+                  >
+                    <option value="BRL">BRL · R$</option>
+                    <option value="USD">USD · $</option>
+                  </select>
+                </label>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </nav>
+      <header className="cost-hero">
+        <p className="cost-hero-description">{text.subtitle}</p>
+        <label className="cost-period">
+          <span>{text.period}</span>
+          <select
+            onChange={(event) => onPeriodChange(event.target.value as CostPeriod)}
+            value={period}
+          >
+            <option value="all">{text.allTime}</option>
+            <option value="7">{text.last7}</option>
+            <option value="30">{text.last30}</option>
+            <option value="90">{text.last90}</option>
+            <option value="month">{text.thisMonth}</option>
+          </select>
+        </label>
+      </header>
+    </>
+  );
+}

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

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