@zaip-ai/cli 1.3.0 → 1.3.2

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

@@ -11,6 +11,7 @@ import type { CostMonitorProjection } from "../contracts.js";
 import { normalizeCostProvider } from "../provider.js";
 import { aggregateTaskCostRows } from "../task-cost-groups.js";
 import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
+import { CostDeveloperAttributionPanel } from "./CostDeveloperAttributionPanel.js";
 import {
   type CostFilterState,
   CostFilters,
@@ -25,6 +26,7 @@ import {
 } from "./CostFilters.js";
 import { CostMonitorContent } from "./CostMonitorContent.js";
 import { ChevronDownIcon, ListFilterIcon, LocaleFlag, SettingsIcon } from "./CostMonitorIcons.js";
+import { CostMonitorLoadErrors } from "./CostMonitorLoadErrors.js";
 import { CostSummary } from "./CostSummary.js";
 import {
   groupRows,
@@ -48,6 +50,7 @@ import {
 import { findRunDetails, selectDimensionalCostRows } from "./cost-monitor-page-helpers.js";
 import { summarizeCostRows } from "./cost-monitor-summary.js";
 import { COST_VIEW_ORDER, type CostView, DEFAULT_COST_VIEW } from "./cost-monitor-views.js";
+import { resolveCompactCostPageRange, resolveCostGroupPageRange } from "./cost-page-range.js";
 import { enrichPeriodCostGroups } from "./period-cost-groups.js";
 import {
   compactReadModelKind,
@@ -73,6 +76,7 @@ export {
   type CostView,
   DEFAULT_COST_VIEW,
 } from "./cost-monitor-views.js";
+export { resolveCompactCostPageRange, resolveCostGroupPageRange } from "./cost-page-range.js";
 
 export type { LoadCompactCostPage } from "./use-compact-cost-page.js";
 export type { LoadCostGroupPage } from "./use-cost-group-page.js";
@@ -111,43 +115,6 @@ export function isServerCostRunPagingEligible(filters: CostFilterState, globalQu
   );
 }
 
-/**
- * The embedded default view is backed by the App's all-time atomic snapshot.
- * Keep the group pager on that same population until a period, global date, or
- * local Cost filter explicitly narrows it.
- */
-export function resolveCostGroupPageRange({
-  embedded,
-  globalDateRange,
-  hasLocalCostFilters,
-  period,
-  runPageRange,
-}: {
-  embedded: boolean;
-  globalDateRange: { start: string; end: string } | undefined;
-  hasLocalCostFilters: boolean;
-  period: CostPeriod;
-  runPageRange: { from: string; to: string } | undefined;
-}): { from: string; to: string } | undefined {
-  if (
-    embedded &&
-    globalDateRange === undefined &&
-    period === defaultCostPeriod &&
-    !hasLocalCostFilters
-  )
-    return undefined;
-  return runPageRange;
-}
-
-/**
- * Compact lifecycle tables share the embedded all-time snapshot contract with
- * the group pager. In particular, the default month control is a display
- * choice on that surface, not a hidden bound for SPEC/PRD rows or XLSX.
- */
-export function resolveCompactCostPageRange(args: Parameters<typeof resolveCostGroupPageRange>[0]) {
-  return resolveCostGroupPageRange(args);
-}
-
 export function CostMonitorPage({
   capabilityNavigation,
   data,
@@ -268,23 +235,33 @@ export function CostMonitorPage({
       ? candidate
       : null;
   const groupView = costGroupViewName(view);
+  // Visual tables are intentionally bounded. Export sources below retain
+  // their independent 50/100-row transport batches and always traverse all
+  // pages, so this is never an export limit.
+  const compactPageLimit = 10;
+  const groupPageLimit = 10;
   const groupPageState = useCostGroupPage({
+    active: groupView !== null,
     view: groupView ?? "daily",
     ...(groupPageRange === undefined ? {} : { range: groupPageRange }),
     globalQuery: globalFilters?.query ?? "",
     filters,
+    limit: groupPageLimit,
     ...(groupView === null ? {} : { load: loadGroupPage }),
   });
+  const displayedGroupPage = groupPageState.page ?? groupPageState.stalePage;
   const {
     compactPageOffset,
     setCompactPageOffset,
     compactPage,
+    staleCompactPage,
     compactPageLoading,
     compactPageError,
     retryCompactPage,
   } = useCompactCostPage({
     view,
     load: loadReadModelPage,
+    limit: compactPageLimit,
     range: compactPageRange,
     query: globalFilters?.query,
     filters,
@@ -306,7 +283,11 @@ export function CostMonitorPage({
     currency,
     filters,
     globalQuery: globalFilters?.query ?? "",
-    range: runPageRange,
+    limit: 10,
+    // Agent Invocations follows the same effective snapshot as the other
+    // remote tables. In the embedded all-time view, the hidden default month
+    // must not silently add a date range and bypass the fast all-time page.
+    range: groupPageRange,
     refresh: lastUpdatedAt,
     load: loadRunPage,
   });
@@ -330,9 +311,8 @@ export function CostMonitorPage({
       runPageLoading,
     ],
   );
-  // A global period/filter change deliberately unmounts this surface while it
-  // replaces the atomic Cost Monitor snapshot. Requests belonging to the old
-  // surface are aborted, so their normal completion path cannot clear the
+  // A global period/filter change unmounts this surface and replaces its atomic snapshot.
+  // Requests belonging to the old surface are aborted, so completion cannot clear the
   // host-level loading gate. Always release that gate on unmount; the newly
   // mounted surface will immediately assert its own loading state if needed.
   useEffect(() => () => onLoadingChange?.(false), [onLoadingChange]);
@@ -512,16 +492,16 @@ export function CostMonitorPage({
         : {
             ...groups,
             [groupView]:
-              groupPageState.page === null
+              displayedGroupPage === null
                 ? []
-                : groupView === "agents"
+                : groupView === "agents" && loadGroupPage === undefined
                   ? includeConfiguredAgentGroups(
-                      groupPageState.page.rows,
+                      displayedGroupPage.rows,
                       activeData.configured_agents,
                     )
-                  : [...groupPageState.page.rows],
+                  : [...displayedGroupPage.rows],
           },
-    [activeData.configured_agents, groups, groupPageState.page, groupView],
+    [activeData.configured_agents, displayedGroupPage, groups, groupView, loadGroupPage],
   );
   const overview = useAggregateGroups
     ? activeData.overview
@@ -564,7 +544,7 @@ export function CostMonitorPage({
   const compactKind = compactReadModelKind(view);
   const usingCompactPage = compactKind !== null && loadReadModelPage !== undefined;
   const exportRows = useMemo(() => {
-    if (usingCompactPage) return compactPage?.rows ?? [];
+    if (usingCompactPage) return compactPage?.rows ?? staleCompactPage?.rows ?? [];
     if (view === "executions") return visibleExecutions;
     if (view === "conversations") return groups.conversations;
     if (view === "tasks") return groups.tasks;
@@ -578,6 +558,7 @@ export function CostMonitorPage({
     groups,
     rows,
     usingCompactPage,
+    staleCompactPage?.rows,
     view,
     visibleExecutions,
     visiblePrds,
@@ -637,7 +618,8 @@ export function CostMonitorPage({
             const firstPage = await loadRunPage({
               currency,
               filters: effectiveFilters,
-              ...(runPageRange === undefined ? {} : runPageRange),
+              ...(groupPageRange === undefined ? {} : groupPageRange),
+              limit: 100,
               offset: 0,
               refresh: lastUpdatedAt,
             });
@@ -658,7 +640,8 @@ export function CostMonitorPage({
                   page = await loadRunPage({
                     currency,
                     filters: effectiveFilters,
-                    ...(runPageRange === undefined ? {} : runPageRange),
+                    ...(groupPageRange === undefined ? {} : groupPageRange),
+                    limit: 100,
                     offset: nextOffset,
                     refresh: lastUpdatedAt,
                   });
@@ -759,13 +742,12 @@ export function CostMonitorPage({
           title={dashboardTitle}
         />
       )}
-      {periodError ? (
-        <p className="cost-period-error" role="status">
-          {locale === "pt-BR"
-            ? `Não foi possível carregar o período selecionado: ${periodError}`
-            : `Could not load the selected period: ${periodError}`}
-        </p>
-      ) : null}
+      <CostMonitorLoadErrors
+        groupError={groupView === null ? null : groupPageState.error}
+        locale={locale}
+        periodError={periodError}
+        retryGroup={groupPageState.retry}
+      />
       {embedded ? null : (
         <>
           <nav aria-label="Navegação do Cost Monitor" className="cost-monitor-nav">
@@ -951,17 +933,27 @@ export function CostMonitorPage({
       {/* CostMonitorContent owns `view === "models" && useAggregateGroups ? (` and `rows={groups.models}`. */}
       <CostMonitorContent
         canonicalDurationTotal={canonicalDurationTotal}
-        compactPage={compactPage}
+        compactPage={compactPage ?? staleCompactPage}
         compactPageError={compactPageError}
         compactPageLoading={compactPageLoading}
         compactPageOffset={compactPageOffset}
         currency={currency}
         detailError={detailError}
         detailLoading={detailLoading}
+        developerPanel={
+          view === "developers" ? (
+            <CostDeveloperAttributionPanel
+              locale={locale}
+              {...(runPageRange === undefined
+                ? {}
+                : { from: runPageRange.from, to: runPageRange.to })}
+            />
+          ) : null
+        }
         dimensionalDetailPending={dimensionalDetailPending}
         dimensionalRows={dimensionalRows}
         groups={displayGroups}
-        groupPage={groupView === null ? null : groupPageState.page}
+        groupPage={groupView === null ? null : displayedGroupPage}
         groupPageLoading={groupView === null ? false : groupPageState.loading}
         groupPageOffset={groupPageState.offset}
         setGroupPageOffset={groupPageState.setOffset}

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

@@ -0,0 +1,132 @@
+import { describe, expect, it } from "vitest";
+import {
+  activeCostPeriodData,
+  costPeriodDateRange,
+  defaultCostPeriod,
+  emptyCostFilters,
+  loadCostMonitorPeriod,
+  shouldFetchCostPeriod,
+} from "./CostFilters.js";
+
+describe("period-driven Cost Monitor loading", () => {
+  it("drops a stale in-memory Cost period response when refresh replaces its base snapshot", () => {
+    const stale = { runs: [{ run_id: "RUN-OBSERVED", duration_ms: 31 * 3_600_000 }] } as never;
+    const refreshed = { runs: [{ run_id: "RUN-PROJECTED", duration_ms: 413_659_026 }] } as never;
+    expect(activeCostPeriodData(refreshed, stale, stale)).toBe(refreshed);
+    expect(activeCostPeriodData(refreshed, refreshed, refreshed)).toBe(refreshed);
+  });
+
+  it("does not issue a second Cost request after an embedded default atomic snapshot", () => {
+    const filters = {
+      query: "",
+      provider: "",
+      phase: "",
+      origin: "",
+      workType: "",
+      agent: "",
+      model: "",
+      status: "",
+      priority: "",
+      risk: "",
+    };
+    expect(shouldFetchCostPeriod({ filters, period: "month", snapshotBacked: true })).toBe(false);
+    expect(shouldFetchCostPeriod({ filters, period: "all", snapshotBacked: true })).toBe(true);
+    expect(shouldFetchCostPeriod({ filters, period: "7", snapshotBacked: true })).toBe(true);
+    expect(
+      shouldFetchCostPeriod({
+        filters: { ...filters, phase: "execution" },
+        period: "month",
+        snapshotBacked: true,
+      }),
+    ).toBe(true);
+  });
+
+  it("uses the current month for the default period and keeps All Time explicit", async () => {
+    expect(defaultCostPeriod).toBe("month");
+    expect(costPeriodDateRange("all", new Date("2026-08-01T03:30:00.000Z"))).toBeUndefined();
+    expect(costPeriodDateRange("month", new Date("2026-08-01T03:30:00.000Z"))).toEqual({
+      from: "2026-08-01",
+      to: "2026-08-01",
+    });
+    const calls: string[] = [];
+    await loadCostMonitorPeriod({
+      currency: "BRL",
+      fetcher: async (url) => {
+        calls.push(String(url));
+        return new Response(JSON.stringify({ runs: [] }), { status: 200 });
+      },
+    });
+    expect(calls).toEqual(["/api/v2/cost-monitor?currency=BRL&scope=summary"]);
+  });
+
+  it("derives an inclusive current-month range without inspecting materialized Runs", () => {
+    expect(costPeriodDateRange("month", new Date("2026-07-26T15:00:00.000Z"))).toEqual({
+      from: "2026-07-01",
+      to: "2026-07-26",
+    });
+    expect(costPeriodDateRange("7", new Date("2026-07-26T15:00:00.000Z"))).toEqual({
+      from: "2026-07-20",
+      to: "2026-07-26",
+    });
+  });
+
+  it("requests the selected range from the local runtime and forwards cancellation", async () => {
+    const calls: Array<{ url: string; signal: AbortSignal | null | undefined }> = [];
+    const controller = new AbortController();
+    const projection = { runs: [] };
+    const loaded = await loadCostMonitorPeriod({
+      currency: "BRL",
+      from: "2026-07-01",
+      to: "2026-07-26",
+      filters: {
+        query: "TASK-1",
+        provider: "openai",
+        phase: "execution",
+        origin: "spec",
+        workType: "rework",
+        agent: "zaip-agent-builder",
+        model: "gpt-5.6-terra",
+        status: "completed",
+        priority: "high",
+        risk: "standard",
+      },
+      signal: controller.signal,
+      fetcher: async (url, init) => {
+        calls.push({ url: String(url), signal: init?.signal });
+        return new Response(JSON.stringify(projection), {
+          headers: { "content-type": "application/json" },
+          status: 200,
+        });
+      },
+    });
+    expect(loaded).toEqual(projection);
+    expect(calls).toEqual([
+      {
+        url:
+          "/api/v2/cost-monitor?currency=BRL&scope=summary&from=2026-07-01&to=2026-07-26" +
+          "&provider=openai&phase=execution&agent=zaip-agent-builder" +
+          "&model=gpt-5.6-terra&status=completed",
+        signal: controller.signal,
+      },
+    ]);
+  });
+
+  it("never leaves period/filter hydration scope-less or on detail", async () => {
+    const calls: string[] = [];
+    await loadCostMonitorPeriod({
+      currency: "USD",
+      filters: { ...emptyCostFilters, provider: "openai", model: "gpt-5.6-terra" },
+      fetcher: async (url) => {
+        calls.push(String(url));
+        return new Response(JSON.stringify({ runs: [] }), { status: 200 });
+      },
+    });
+    const [firstCall] = calls;
+    if (firstCall === undefined) {
+      throw new Error("Expected a Cost Monitor request.");
+    }
+    const request = new URL(firstCall, "http://dashboard.local");
+    expect(request.searchParams.get("scope")).toBe("summary");
+    expect(request.searchParams.get("scope")).not.toBe("detail");
+  });
+});

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

@@ -0,0 +1,70 @@
+import type { CostLocale } from "./cost-monitor-copy.js";
+
+/** The bounded Invocation table's server page state. */
+export type CostRunPagination = {
+  offset: number;
+  limit: number;
+  total: number | null;
+  has_more: boolean;
+  loading: boolean;
+  error: string | null;
+  onChange: (offset: number) => void;
+  onRetry: () => void;
+};
+
+export function CostRunServerPagination({
+  locale,
+  pagination,
+}: {
+  locale: CostLocale;
+  pagination: CostRunPagination;
+}) {
+  const first = pagination.total === 0 ? 0 : pagination.offset + 1;
+  const last =
+    pagination.total === null
+      ? pagination.offset + pagination.limit
+      : Math.min(pagination.offset + pagination.limit, pagination.total);
+  const previous = Math.max(0, pagination.offset - pagination.limit);
+  const next = pagination.offset + pagination.limit;
+  return (
+    <nav
+      aria-label={locale === "pt-BR" ? "Paginação das invocações" : "Invocation pagination"}
+      className="ui-table-pagination"
+    >
+      <button
+        disabled={pagination.loading || pagination.offset === 0}
+        onClick={() => pagination.onChange(previous)}
+        type="button"
+      >
+        {locale === "pt-BR" ? "Anterior" : "Previous"}
+      </button>
+      <span aria-live="polite">
+        {pagination.loading
+          ? locale === "pt-BR"
+            ? "Carregando invocações…"
+            : "Loading invocations…"
+          : pagination.total === null
+            ? `${first}–${last}${pagination.has_more ? "+" : ""}`
+            : `${first}–${last} ${locale === "pt-BR" ? "de" : "of"} ${pagination.total}`}
+      </span>
+      <button
+        disabled={
+          pagination.loading ||
+          (!pagination.has_more && (pagination.total === null || next >= pagination.total))
+        }
+        onClick={() => pagination.onChange(next)}
+        type="button"
+      >
+        {locale === "pt-BR" ? "Próxima" : "Next"}
+      </button>
+      {pagination.error ? (
+        <span role="status">
+          {pagination.error}{" "}
+          <button onClick={pagination.onRetry} type="button">
+            {locale === "pt-BR" ? "Tentar novamente" : "Retry"}
+          </button>
+        </span>
+      ) : null}
+    </nav>
+  );
+}