@zaip-ai/cli 1.3.2 → 1.3.5

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

@@ -8,6 +8,50 @@ export function needsAtomicCostSnapshot(dashboardView: unknown, costsLoaded: boo
   return false;
 }
 
+/**
+ * State updates from a period picker are asynchronous. Keep the authoritative
+ * loaded flag in the decision so a navigation event cannot use the previous
+ * render's matching currency and skip the replacement Cost snapshot.
+ */
+export function shouldLoadCostSummary({
+  costsLoaded,
+  currency,
+  snapshotCurrency,
+}: {
+  costsLoaded: boolean;
+  currency: string;
+  snapshotCurrency: string | undefined;
+}): boolean {
+  return !costsLoaded || snapshotCurrency !== currency;
+}
+
+/** A late summary from another period or currency must never restore stale costs. */
+export function isCurrentCostSummaryRequest({
+  aborted,
+  currentCurrency,
+  currentPeriod,
+  currentRequestVersion,
+  requestVersion,
+  requestedCurrency,
+  requestedPeriod,
+}: {
+  aborted: boolean;
+  currentCurrency: string;
+  currentPeriod: { from: string | null; to: string | null };
+  currentRequestVersion: number;
+  requestVersion: number;
+  requestedCurrency: string;
+  requestedPeriod: { from: string | null; to: string | null };
+}): boolean {
+  return (
+    !aborted &&
+    requestVersion === currentRequestVersion &&
+    requestedCurrency === currentCurrency &&
+    requestedPeriod.from === currentPeriod.from &&
+    requestedPeriod.to === currentPeriod.to
+  );
+}
+
 export function isCurrentDashboardRequest(requestVersion: number, currentVersion: number): boolean {
   return requestVersion === currentVersion;
 }

package/templates/.agents/dashboard/apps/frontend/src/cost-period-refresh.test.ts

@@ -1,6 +1,11 @@
 import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
-import { isCurrentDashboardRequest, needsAtomicCostSnapshot } from "./App.js";
+import {
+  isCurrentCostSummaryRequest,
+  isCurrentDashboardRequest,
+  needsAtomicCostSnapshot,
+  shouldLoadCostSummary,
+} from "./App.js";
 
 describe("Cost period refresh", () => {
   it("does not retain a prior Cost Monitor snapshot while Todo o Período is loading", () => {
@@ -16,6 +21,102 @@ describe("Cost period refresh", () => {
     expect(exportedSnapshot).toBeNull();
   });
 
+  it("starts a fresh Cost request when a period change invalidates a same-currency snapshot", () => {
+    // This reproduces clicking Monitor de Custos before React commits the
+    // `setCosts(null)` render: the event closure can still see BRL, but the
+    // ref was invalidated synchronously by the period transition.
+    expect(
+      shouldLoadCostSummary({
+        costsLoaded: false,
+        currency: "BRL",
+        snapshotCurrency: "BRL",
+      }),
+    ).toBe(true);
+    expect(
+      shouldLoadCostSummary({
+        costsLoaded: true,
+        currency: "BRL",
+        snapshotCurrency: "BRL",
+      }),
+    ).toBe(false);
+  });
+
+  it("invalidates and aborts an old Cost summary on a global period transition", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    const periodChange = app.slice(
+      app.indexOf("onDateChange={(preset, range) => {"),
+      app.indexOf("settings={"),
+    );
+
+    expect(periodChange).toContain("costSummaryAbortRef.current?.abort();");
+    expect(periodChange).toContain("++costSummaryRequestVersion.current;");
+    expect(app).toContain("isCurrentCostSummaryRequest({");
+    expect(app).toContain('if (failedArea === "costs") void loadCostSummary();');
+  });
+
+  it("reloads the invalidated BRL Cost snapshot for Cost Monitor and All Time presentation", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    const activeCostReload = app.slice(
+      app.indexOf("// A global period change invalidates the Cost snapshot"),
+      app.indexOf("const loadMoreTraceTasks"),
+    );
+
+    expect(activeCostReload).toContain('dashboardView !== "cost-monitor" && operationsPeriod.preset !== "all"');
+    expect(activeCostReload).toContain("costSummaryAbortRef.current !== null");
+    expect(activeCostReload).toContain("costsLoaded: costsLoadedRef.current");
+    expect(activeCostReload).toContain("void loadCostSummary();");
+    expect(activeCostReload).toContain("operationsPeriod.preset");
+    expect(activeCostReload).not.toContain("failedArea");
+  });
+
+  it("does not make the all-time data request depend on its displayed factual range", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+
+    expect(app).toContain('operationsPeriod.preset === "all"');
+    expect(app).toContain('? "all"');
+    expect(app).toContain("const operationsRequestPeriod = useMemo(");
+    expect(app).toContain("[api, currency, operationsRequestPeriod]");
+  });
+
+  it("rejects a late all-time summary after a newer period or currency takes ownership", () => {
+    const allTime = { from: null, to: null };
+    const currentMonth = { from: "2026-08-01", to: "2026-08-31" };
+
+    expect(
+      isCurrentCostSummaryRequest({
+        aborted: false,
+        currentCurrency: "BRL",
+        currentPeriod: currentMonth,
+        currentRequestVersion: 3,
+        requestVersion: 2,
+        requestedCurrency: "BRL",
+        requestedPeriod: allTime,
+      }),
+    ).toBe(false);
+    expect(
+      isCurrentCostSummaryRequest({
+        aborted: false,
+        currentCurrency: "USD",
+        currentPeriod: allTime,
+        currentRequestVersion: 3,
+        requestVersion: 3,
+        requestedCurrency: "BRL",
+        requestedPeriod: allTime,
+      }),
+    ).toBe(false);
+    expect(
+      isCurrentCostSummaryRequest({
+        aborted: false,
+        currentCurrency: "BRL",
+        currentPeriod: allTime,
+        currentRequestVersion: 3,
+        requestVersion: 3,
+        requestedCurrency: "BRL",
+        requestedPeriod: allTime,
+      }),
+    ).toBe(true);
+  });
+
   it("mounts Cost from a Daily seed without a full summary request", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
     const refresh = app.slice(
@@ -35,7 +136,7 @@ describe("Cost period refresh", () => {
     );
     expect(refresh).toContain("setDisplayedCosts(null);");
     expect(refresh).toContain("const activeDashboardView = dashboardViewRef.current");
-    expect(refresh).toContain("[api, currency, operationsPeriod]");
+    expect(refresh).toContain("[api, currency, operationsRequestPeriod]");
     expect(refresh).not.toContain("[api, currency, dashboardView, operationsPeriod]");
   });
 

package/templates/.agents/dashboard/apps/frontend/src/dashboard-capability-nav.css

@@ -10,6 +10,17 @@
   background: rgba(8, 14, 25, 0.72);
 }
 
+.dashboard-capability-shell {
+  flex: 0 0 auto;
+}
+
+/* The landing and Traceability surfaces have no temporal/search result to filter.
+ * Keep the controls available for the two capability views that consume them. */
+.dashboard-capability-shell--initial + .dashboard-global-filters,
+.dashboard-capability-shell--traceability + .dashboard-global-filters {
+  display: none;
+}
+
 .dashboard-capability-nav button {
   display: flex;
   min-height: 52px;

package/templates/.agents/dashboard/apps/frontend/src/operations-period-contract.test.ts

@@ -39,6 +39,20 @@ describe("Operations period request contract", () => {
     expect(requestPeriodForOperations({ preset: "all", range })).toEqual({ from: null, to: null });
   });
 
+  it("keeps an All Time request unbounded when its displayed factual range changes", () => {
+    const initialDisplay = { start: "2026-09-01", end: "2026-09-01" };
+    const factualDisplay = { start: "2026-06-02", end: "2026-09-01" };
+
+    expect(requestPeriodForOperations({ preset: "all", range: initialDisplay })).toEqual({
+      from: null,
+      to: null,
+    });
+    expect(requestPeriodForOperations({ preset: "all", range: factualDisplay })).toEqual({
+      from: null,
+      to: null,
+    });
+  });
+
   it("keeps the latest Today/Yesterday selection when rapid requests resolve out of order", () => {
     const today = { start: "2026-08-08", end: "2026-08-08" };
     const yesterday = { start: "2026-08-07", end: "2026-08-07" };

package/templates/.agents/dashboard/apps/frontend/src/operations-period.test.ts

@@ -2,12 +2,9 @@ import { describe, expect, it } from "vitest";
 import { defaultOperationsPeriod, requestPeriodForOperations } from "./operations-period.js";
 
 describe("dashboard default Operations period", () => {
-  it("opens in This Month with its visible date bounds", () => {
-    expect(defaultOperationsPeriod.preset).toBe("this-month");
-    expect(requestPeriodForOperations(defaultOperationsPeriod)).toEqual({
-      from: defaultOperationsPeriod.range.start,
-      to: defaultOperationsPeriod.range.end,
-    });
+  it("opens in All Time without date bounds", () => {
+    expect(defaultOperationsPeriod.preset).toBe("all");
+    expect(requestPeriodForOperations(defaultOperationsPeriod)).toEqual({ from: null, to: null });
   });
 
   it("keeps an explicit Sao Paulo This Month selection bounded", () => {

package/templates/.agents/dashboard/apps/frontend/src/operations-period.ts

@@ -9,9 +9,10 @@ export interface OperationsPeriodState {
   range: OperationDateRange;
 }
 
-/** Operations opens on the current Sao Paulo month, like every dashboard tab. */
+/** Operations opens across the full available period for the dashboard overview. */
 export const defaultOperationsPeriod: OperationsPeriodState = {
-  preset: "this-month",
+  preset: "all",
+  // All Time deliberately ignores these display bounds in requests.
   range: dateRangeForPreset("this-month"),
 };
 

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>
+    </>
+  );
+}