@zaip-ai/cli 1.0.8 → 1.3.1

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,12 +76,18 @@ 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";
 export type LoadCostMonitorDetail = typeof loadCostMonitorDetail;
 export type LoadCostRunPage = typeof loadCostMonitorRunPage;
 
+/** The overview is a summary surface, not an exportable table view. */
+export function isCostViewExportEligible(view: CostView): boolean {
+  return view !== "overview";
+}
+
 /**
  * The Cost period request filters Runs, while Operations is the global snapshot
  * used for shared entity detail. Keep the Executions tab on that same active
@@ -106,33 +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;
-}
-
 export function CostMonitorPage({
   capabilityNavigation,
   data,
@@ -234,6 +216,13 @@ export function CostMonitorPage({
     period,
     runPageRange,
   });
+  const compactPageRange = resolveCompactCostPageRange({
+    embedded,
+    globalDateRange: globalFilters?.dateRange,
+    hasLocalCostFilters,
+    period,
+    runPageRange,
+  });
   const costGroupViewName = (
     candidate: CostView,
   ): "daily" | "monthly" | "annual" | "agents" | "models" | "providers" | null =>
@@ -246,24 +235,34 @@ 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,
-    range: runPageRange,
+    limit: compactPageLimit,
+    range: compactPageRange,
     query: globalFilters?.query,
     filters,
   });
@@ -284,17 +283,39 @@ 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,
   });
   useEffect(
     () =>
       onLoadingChange?.(
-        loading || periodLoading || runPageLoading || groupPageState.loading || compactPageLoading || detailLoading,
+        loading ||
+          periodLoading ||
+          runPageLoading ||
+          groupPageState.loading ||
+          compactPageLoading ||
+          detailLoading,
       ),
-    [compactPageLoading, detailLoading, groupPageState.loading, loading, onLoadingChange, periodLoading, runPageLoading],
+    [
+      compactPageLoading,
+      detailLoading,
+      groupPageState.loading,
+      loading,
+      onLoadingChange,
+      periodLoading,
+      runPageLoading,
+    ],
   );
+  // 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]);
   useEffect(() => {
     if (!hasLocalCostFilters) onActiveDataChange?.(activeData);
   }, [activeData, hasLocalCostFilters, onActiveDataChange]);
@@ -471,13 +492,16 @@ export function CostMonitorPage({
         : {
             ...groups,
             [groupView]:
-              groupPageState.page === null
+              displayedGroupPage === null
                 ? []
-                : groupView === "agents"
-                  ? includeConfiguredAgentGroups(groupPageState.page.rows, activeData.configured_agents)
-                  : [...groupPageState.page.rows],
+                : groupView === "agents" && loadGroupPage === undefined
+                  ? includeConfiguredAgentGroups(
+                      displayedGroupPage.rows,
+                      activeData.configured_agents,
+                    )
+                  : [...displayedGroupPage.rows],
           },
-    [activeData.configured_agents, groups, groupPageState.page, groupView],
+    [activeData.configured_agents, displayedGroupPage, groups, groupView, loadGroupPage],
   );
   const overview = useAggregateGroups
     ? activeData.overview
@@ -520,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;
@@ -534,38 +558,143 @@ export function CostMonitorPage({
     groups,
     rows,
     usingCompactPage,
+    staleCompactPage?.rows,
     view,
     visibleExecutions,
     visiblePrds,
     visibleSpecs,
   ]);
   const compactExportSource =
-    usingCompactPage &&
-    compactKind !== null &&
-    compactPage !== null &&
-    loadReadModelPage !== undefined
+    usingCompactPage && compactKind !== null && loadReadModelPage !== undefined
       ? {
-          totalRows: compactPage.total,
-          pages: async function* () {
-            const seen = new Set<string>();
-            for (let offset = 0; offset < compactPage.total; offset += compactPage.limit) {
-              const page = await loadReadModelPage({
-                kind: compactKind,
-                offset,
-                limit: compactPage.limit,
-                filters,
-                ...(runPageRange === undefined ? {} : runPageRange),
-                ...(globalFilters?.query ? { query: globalFilters.query } : {}),
-              });
-              const unique = page.rows
-                .filter((row) => {
-                  if (seen.has(row.id)) return false;
-                  seen.add(row.id);
-                  return true;
-                })
-                .map(withTokenBackedCompactDuration);
-              if (unique.length > 0) yield unique as unknown as readonly Record<string, unknown>[];
-            }
+          prepare: async () => {
+            const firstPage = await loadReadModelPage({
+              kind: compactKind,
+              offset: 0,
+              limit: 50,
+              filters,
+              ...(compactPageRange === undefined ? {} : compactPageRange),
+              ...(globalFilters?.query ? { query: globalFilters.query } : {}),
+            });
+            return {
+              totalRows: firstPage.total,
+              pages: async function* () {
+                let page = firstPage;
+                const seen = new Set<string>();
+                while (true) {
+                  const unique = page.rows
+                    .filter((row) => {
+                      if (seen.has(row.id)) return false;
+                      seen.add(row.id);
+                      return true;
+                    })
+                    .map(withTokenBackedCompactDuration);
+                  if (unique.length > 0)
+                    yield unique as unknown as readonly Record<string, unknown>[];
+                  const nextOffset = page.offset + page.rows.length;
+                  if (nextOffset >= page.total || !page.has_more) return;
+                  page = await loadReadModelPage({
+                    kind: compactKind,
+                    offset: nextOffset,
+                    limit: page.limit,
+                    filters,
+                    ...(compactPageRange === undefined ? {} : compactPageRange),
+                    ...(globalFilters?.query ? { query: globalFilters.query } : {}),
+                  });
+                }
+              },
+            };
+          },
+        }
+      : undefined;
+  const agentInvocationExportSource =
+    view === "agentCalls" && serverPagingEligible && loadRunPage !== undefined
+      ? {
+          prepare: async () => {
+            const effectiveFilters = {
+              ...filters,
+              query: filters.query || globalFilters?.query || "",
+            };
+            const firstPage = await loadRunPage({
+              currency,
+              filters: effectiveFilters,
+              ...(groupPageRange === undefined ? {} : groupPageRange),
+              limit: 100,
+              offset: 0,
+              refresh: lastUpdatedAt,
+            });
+            const totalRows = firstPage.run_page.total ?? firstPage.runs.length;
+            return {
+              totalRows,
+              pages: async function* () {
+                let page = firstPage;
+                while (true) {
+                  if (page.runs.length === 0) return;
+                  yield page.runs as unknown as readonly Record<string, unknown>[];
+                  const nextOffset = page.run_page.offset + page.runs.length;
+                  if (
+                    (page.run_page.total !== null && nextOffset >= page.run_page.total) ||
+                    !page.run_page.has_more
+                  )
+                    return;
+                  page = await loadRunPage({
+                    currency,
+                    filters: effectiveFilters,
+                    ...(groupPageRange === undefined ? {} : groupPageRange),
+                    limit: 100,
+                    offset: nextOffset,
+                    refresh: lastUpdatedAt,
+                  });
+                }
+              },
+            };
+          },
+        }
+      : undefined;
+  // Period views are paginated SQLite projections too.  Exporting their
+  // already-rendered group rows truncates the workbook to the visible page
+  // (and can lose the projection's factual duration).  Capture the same
+  // paged query used by the table so an All Time selection keeps its unbound
+  // range and every other selection retains its exact range and filters.
+  const costGroupExportSource =
+    (view === "daily" ||
+      view === "monthly" ||
+      view === "annual" ||
+      view === "agents" ||
+      view === "models" ||
+      view === "providers") &&
+    loadGroupPage !== undefined
+      ? {
+          prepare: async () => {
+            const query = filters.query || globalFilters?.query || "";
+            const firstPage = await loadGroupPage({
+              view,
+              offset: 0,
+              limit: 50,
+              filters,
+              ...(query ? { query } : {}),
+              ...(groupPageRange === undefined ? {} : groupPageRange),
+            });
+            return {
+              totalRows: firstPage.total_count,
+              pages: async function* () {
+                let page = firstPage;
+                while (true) {
+                  if (page.rows.length === 0) return;
+                  yield page.rows as unknown as readonly Record<string, unknown>[];
+                  const nextOffset = page.offset + page.rows.length;
+                  if (nextOffset >= page.total_count || !page.has_more) return;
+                  page = await loadGroupPage({
+                    view,
+                    offset: nextOffset,
+                    limit: page.limit,
+                    filters,
+                    ...(query ? { query } : {}),
+                    ...(groupPageRange === undefined ? {} : groupPageRange),
+                  });
+                }
+              },
+            };
           },
         }
       : undefined;
@@ -613,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">
@@ -789,29 +917,43 @@ export function CostMonitorPage({
             </button>
           ))}
         </nav>
-        <div className="cost-tab-export">
-          <ExcelExportAction
-            filters={{ ...filters, ...globalFilters, period }}
-            {...(compactExportSource === undefined ? {} : { pageSource: compactExportSource })}
-            rows={exportRows as unknown as readonly Record<string, unknown>[]}
-            view={`cost-${view}`}
-          />
-        </div>
+        {isCostViewExportEligible(view) ? (
+          <div className="cost-tab-export">
+            <ExcelExportAction
+              filters={{ ...filters, ...globalFilters, period }}
+              pageSource={
+                compactExportSource ?? agentInvocationExportSource ?? costGroupExportSource
+              }
+              rows={exportRows as unknown as readonly Record<string, unknown>[]}
+              view={`cost-${view}`}
+            />
+          </div>
+        ) : null}
       </div>
       {/* 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>
+  );
+}