@zaip-ai/cli 1.3.0 → 1.3.1

package/templates/.agents/dashboard/apps/frontend/src/work-list-load-dedup.ts

@@ -0,0 +1,27 @@
+import type { OperationsPageFilters } from "./dashboard-api.js";
+
+export type WorkListLoadIntent = "explicit" | "filter-hydration";
+
+export function workListLoadKey(
+  filters: OperationsPageFilters,
+  period: { from: string | null; to: string | null },
+): string {
+  return JSON.stringify([
+    filters.query,
+    filters.status,
+    filters.risk,
+    filters.origin ?? "",
+    filters.kind ?? "",
+    period.from ?? "",
+    period.to ?? "",
+  ]);
+}
+
+/** Explicit type/reentry/page loads must remain actionable; delayed hydration is idempotent. */
+export function shouldStartWorkListLoad(
+  intent: WorkListLoadIntent,
+  key: string,
+  knownKey: string | null,
+): boolean {
+  return intent === "explicit" || key !== knownKey;
+}

package/templates/.agents/dashboard/apps/frontend/src/work-list-pagination.test.ts

@@ -1,9 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
-import {
-  collectWorkListPages,
-  normalizeWorkListFilters,
-  selectedWorkListKinds,
-} from "./work-list-pagination.js";
+import { describe, expect, it } from "vitest";
+import { normalizeWorkListFilters, selectedWorkListKinds } from "./work-list-pagination.js";
 
 describe("Trabalho (Lista) canonical pagination", () => {
   it("keeps a server-selected PRD/SPEC kind instead of refetching every kind", () => {
@@ -33,14 +29,42 @@ describe("Trabalho (Lista) canonical pagination", () => {
     expect(kanban).toEqual({ query: "kanban", status: "ready", risk: "", kind: "" });
   });
 
-  it("continues from the returned offset until the canonical total is complete", async () => {
-    const loadPage = vi
-      .fn()
-      .mockResolvedValueOnce({ total: 59, received: 50, value: "first" })
-      .mockResolvedValueOnce({ total: 59, received: 9, value: "second" });
+  it("retains the active origin for the paginated List request and export", async () => {
+    const selected = normalizeWorkListFilters(
+      { query: "", status: "", risk: "", origin: "standalone", kind: "standalone-task" },
+      { query: "", status: "", risk: "", origin: "", kind: "" },
+    );
+    const loader = await import("node:fs/promises").then(({ readFile }) =>
+      readFile(new URL("./use-app-work-list-page.ts", import.meta.url), "utf8"),
+    );
+    const exportSource = await import("node:fs/promises").then(({ readFile }) =>
+      readFile(new URL("./use-operations-detail-export.ts", import.meta.url), "utf8"),
+    );
+
+    expect(selected.origin).toBe("standalone");
+    expect(loader).toContain(
+      "...(normalizedFilters.origin ? { origin: normalizedFilters.origin } : {})",
+    );
+    expect(loader).toContain("{ status: normalizedFilters.status }");
+    expect(exportSource).toContain("...(filters.origin ? { origin: filters.origin } : {})");
+    expect(exportSource).toContain("...(filters.status ? { status: filters.status } : {})");
+  });
+
+  it("uses one bounded SQLite page for visual List loading", async () => {
+    const loader = await import("node:fs/promises").then(({ readFile }) =>
+      readFile(new URL("./use-app-work-list-page.ts", import.meta.url), "utf8"),
+    );
+    const list = await import("node:fs/promises").then(({ readFile }) =>
+      readFile(
+        new URL("../../../modules/operations/src/react/PagedWorkList.tsx", import.meta.url),
+        "utf8",
+      ),
+    );
 
-    await expect(collectWorkListPages(loadPage)).resolves.toEqual(["first", "second"]);
-    expect(loadPage).toHaveBeenNthCalledWith(1, 0);
-    expect(loadPage).toHaveBeenNthCalledWith(2, 50);
+    expect(loader).toContain('"operations_work_list"');
+    expect(loader).toContain("limit: 10");
+    expect(loader).not.toContain("collectWorkListPages");
+    expect(loader).not.toContain("Promise.all(");
+    expect(list).toContain("row.kind ?? row.entity_kind");
   });
 });

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { type CostDeveloperAttributionRow, CostDeveloperAttributionTable } from "./CostTables.js";
+import type { CostLocale } from "./cost-monitor-copy.js";
+
+/** Cost-specific rendering of the factual developer aggregate endpoint. */
+export function CostDeveloperAttributionPanel({
+  from,
+  to,
+  locale,
+}: {
+  from?: string;
+  to?: string;
+  locale: CostLocale;
+}) {
+  const [state, setState] = useState<{
+    loading: boolean;
+    error: string | null;
+    rows: readonly CostDeveloperAttributionRow[];
+  }>({ 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}`}`, {
+      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 ?? [] }))
+      .catch((error: unknown) => {
+        if ((error as { name?: string }).name !== "AbortError")
+          setState({
+            loading: false,
+            error: error instanceof Error ? error.message : "unknown",
+            rows: [],
+          });
+      });
+    return () => controller.abort();
+  }, [from, to]);
+  if (state.loading)
+    return (
+      <p className="operations-empty" role="status">
+        {locale === "pt-BR" ? "Carregando desenvolvedores…" : "Loading developers…"}
+      </p>
+    );
+  if (state.error)
+    return (
+      <p className="operations-empty" role="alert">
+        {locale === "pt-BR"
+          ? "Não foi possível carregar desenvolvedores."
+          : "Could not load developers."}{" "}
+        {state.error}
+      </p>
+    );
+  return <CostDeveloperAttributionTable locale={locale} rows={state.rows} />;
+}

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

@@ -0,0 +1,191 @@
+import {
+  DataTable,
+  formatCompactNumber,
+  formatCurrency as formatDashboardCurrency,
+  formatDurationMs,
+} from "@zaip-ai/dashboard-ui";
+import type { CostLocale } from "./cost-monitor-copy.js";
+
+export type CostDeveloperAttributionRow = {
+  account_id: string;
+  login_snapshot: string | null;
+  prd_count: number;
+  spec_count: number;
+  task_count: number;
+  run_count: number;
+  test_count: number | null;
+  evidence_count: number | null;
+  total_duration_ms: number | null;
+  total_tokens: number | null;
+  total_cost_brl: number | null;
+  duration_covered_runs: number;
+  token_covered_runs: number;
+  brl_covered_runs: number;
+};
+
+const visuallyHiddenStyle = {
+  clip: "rect(0, 0, 0, 0)",
+  height: 1,
+  margin: -1,
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  width: 1,
+} as const;
+
+function formatCount(value: number | null, locale: CostLocale): string {
+  return value === null
+    ? "—"
+    : new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+}
+
+function formatDuration(value: number | null, locale: CostLocale): string {
+  if (value === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  return value === 0 ? "0" : formatDurationMs(value, locale);
+}
+
+function formatBrlCurrency(value: number | null, locale: CostLocale): string {
+  return value === null ? "—" : formatDashboardCurrency(value, "BRL", locale);
+}
+
+function formatTokens(value: number | null, locale: CostLocale): string {
+  return value === null
+    ? locale === "pt-BR"
+      ? "Indisponível"
+      : "Unavailable"
+    : formatCompactNumber(value, locale);
+}
+
+function partialMetric(
+  formatted: string,
+  coveredRuns: number,
+  runCount: number,
+  locale: CostLocale,
+) {
+  if (coveredRuns >= runCount) return formatted;
+  const label =
+    locale === "pt-BR"
+      ? `Valor parcial: telemetria conhecida em ${coveredRuns} de ${runCount} runs.`
+      : `Partial value: telemetry is known for ${coveredRuns} of ${runCount} runs.`;
+  return (
+    <span title={label}>
+      <span aria-hidden="true">{formatted}</span>
+      <span style={visuallyHiddenStyle}>{`${label} ${formatted}`}</span>
+    </span>
+  );
+}
+
+/**
+ * Developer facts are intentionally separate from the Operations table. The
+ * Cost Monitor reports only structural and financial facts tied to an
+ * attributed developer Run.
+ */
+export function CostDeveloperAttributionTable({
+  locale,
+  rows,
+}: {
+  locale: CostLocale;
+  rows: readonly CostDeveloperAttributionRow[];
+}) {
+  return (
+    <DataTable
+      columns={[
+        {
+          key: "developer",
+          label: locale === "pt-BR" ? "Desenvolvedor" : "Developer",
+          render: (row) => (
+            <>
+              <strong>{row.login_snapshot ?? row.account_id}</strong>
+              <small>#{row.account_id}</small>
+            </>
+          ),
+          sortValue: (row) => row.login_snapshot ?? row.account_id,
+        },
+        {
+          key: "prds",
+          label: "PRDs",
+          render: (row) => formatCount(row.prd_count, locale),
+          align: "right",
+        },
+        {
+          key: "specs",
+          label: "SPECs",
+          render: (row) => formatCount(row.spec_count, locale),
+          align: "right",
+        },
+        {
+          key: "tasks",
+          label: locale === "pt-BR" ? "Tarefas" : "Tasks",
+          render: (row) => formatCount(row.task_count, locale),
+          align: "right",
+        },
+        {
+          key: "runs",
+          label: "Runs",
+          render: (row) => formatCount(row.run_count, locale),
+          align: "right",
+        },
+        {
+          key: "tests",
+          label: locale === "pt-BR" ? "Testes" : "Tests",
+          render: (row) => formatCount(row.test_count, locale),
+          align: "right",
+        },
+        {
+          key: "evidences",
+          label: locale === "pt-BR" ? "Evidências" : "Evidence",
+          render: (row) => formatCount(row.evidence_count, locale),
+          align: "right",
+        },
+        {
+          key: "duration",
+          label: locale === "pt-BR" ? "Tempo" : "Time",
+          render: (row) =>
+            partialMetric(
+              formatDuration(row.total_duration_ms, locale),
+              row.duration_covered_runs,
+              row.run_count,
+              locale,
+            ),
+          sortValue: (row) => row.total_duration_ms,
+          align: "right",
+        },
+        {
+          key: "tokens",
+          label: "Tokens",
+          render: (row) =>
+            partialMetric(
+              formatTokens(row.total_tokens, locale),
+              row.token_covered_runs,
+              row.run_count,
+              locale,
+            ),
+          sortValue: (row) => row.total_tokens,
+          align: "right",
+        },
+        {
+          key: "cost",
+          label: locale === "pt-BR" ? "Custos" : "Costs",
+          render: (row) =>
+            partialMetric(
+              formatBrlCurrency(row.total_cost_brl, locale),
+              row.brl_covered_runs,
+              row.run_count,
+              locale,
+            ),
+          sortValue: (row) => row.total_cost_brl,
+          align: "right",
+        },
+      ]}
+      defaultSort={{ key: "cost", direction: "desc" }}
+      emptyMessage={locale === "pt-BR" ? "Nenhum dado disponível." : "No data available."}
+      locale={locale}
+      pageSize={10}
+      rowKey={(row) => row.account_id}
+      rows={rows}
+      scrollLabel={locale === "pt-BR" ? "Métricas por desenvolvedor" : "Developer metrics"}
+      showColumnInfo
+      sortable
+    />
+  );
+}

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

@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+describe("Cost period loading lifecycle", () => {
+  it("clears a filtered request when the embedded snapshot becomes sufficient", () => {
+    const source = readFileSync(new URL("./CostFilters.tsx", import.meta.url), "utf8");
+
+    expect(source).toContain("const generation = ++generationRef.current;");
+    expect(source).toContain("if (!shouldFetch)");
+    expect(source).toContain("setPeriodLoading(false);");
+    expect(source).toContain("setPeriodData(null);");
+    expect(source).toContain("generation === generationRef.current");
+  });
+});

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostFilters.run-page.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { loadCostMonitorRunPage } from "./CostFilters.js";
+
+describe("Cost Monitor invocation page loading", () => {
+  it("uses a ten-row default for the remote invocation page", async () => {
+    const calls: string[] = [];
+    await loadCostMonitorRunPage({
+      currency: "BRL",
+      offset: 0,
+      fetcher: async (url) => {
+        calls.push(String(url));
+        return new Response(JSON.stringify({ runs: [] }), { status: 200 });
+      },
+    });
+
+    expect(new URL(calls[0]!, "http://dashboard.local").searchParams.get("limit")).toBe("10");
+  });
+});

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

@@ -107,6 +107,7 @@ export async function loadCostMonitorRunPage({
   currency,
   filters,
   from,
+  limit = 10,
   offset,
   refresh,
   to,
@@ -116,6 +117,7 @@ export async function loadCostMonitorRunPage({
   currency: CostCurrency;
   filters?: CostFilterState;
   from?: string;
+  limit?: number;
   offset: number;
   refresh?: string | null;
   to?: string;
@@ -131,7 +133,7 @@ export async function loadCostMonitorRunPage({
   });
   query.set("scope", "runs");
   query.set("offset", String(Math.max(0, offset)));
-  query.set("limit", "100");
+  query.set("limit", String(Math.max(1, limit)));
   const response = await fetcher(`/api/v2/cost-monitor?${query.toString()}`, {
     ...(signal === undefined ? {} : { signal }),
   });
@@ -143,7 +145,7 @@ export async function loadCostMonitorRunPage({
   return {
     page_only: true,
     runs: payload.runs,
-    run_page: payload.run_page ?? { offset, limit: 100, total: null, has_more: false },
+    run_page: payload.run_page ?? { offset, limit, total: null, has_more: false },
   };
 }
 
@@ -212,6 +214,7 @@ export function useCostMonitorPeriod({
   const [periodLoading, setPeriodLoading] = useState(false);
   const [periodError, setPeriodError] = useState<string | null>(null);
   const initialDataRef = useRef(true);
+  const generationRef = useRef(0);
   const loadPeriodRef = useRef(loadPeriod);
   loadPeriodRef.current = loadPeriod;
   const requestedRange =
@@ -222,8 +225,16 @@ export function useCostMonitorPeriod({
   const requestedTo = requestedRange?.to;
   const shouldFetch = shouldFetchCostPeriod({ filters, period, snapshotBacked });
   useEffect(() => {
+    const generation = ++generationRef.current;
     if (!shouldFetch) {
       initialDataRef.current = false;
+      // A filtered request can be aborted immediately before this embedded
+      // default snapshot becomes sufficient again. There is no successor
+      // request in that branch to release the loading gate.
+      setPeriodLoading(false);
+      setPeriodError(null);
+      setPeriodData(null);
+      setPeriodDataBase(null);
       return;
     }
     if (initialDataRef.current && Object.values(filters).every((value) => value === "")) {
@@ -255,7 +266,11 @@ export function useCostMonitorPeriod({
         }
       })
       .finally(() => {
-        if (!controller.signal.aborted) setPeriodLoading(false);
+        // An aborted predecessor must not clear a newer request. Conversely,
+        // an active request always releases its own loading gate, including an
+        // HTTP failure handled above.
+        if (!controller.signal.aborted && generation === generationRef.current)
+          setPeriodLoading(false);
       });
     return () => controller.abort();
   }, [currency, data, filters, lastUpdatedAt, requestedFrom, requestedTo, shouldFetch]);

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

@@ -1,5 +1,5 @@
 import { ExecutionTable } from "@zaip-ai/dashboard-operations/react";
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import {
   type CompactLifecycleCostSubtotal,
   CompactLifecycleCostTable,
@@ -29,6 +29,7 @@ export function CostMonitorContent({
   currency,
   detailError,
   detailLoading,
+  developerPanel,
   dimensionalDetailPending,
   dimensionalRows,
   groups,
@@ -76,6 +77,7 @@ export function CostMonitorContent({
   currency: CostCurrency;
   detailError: string | null;
   detailLoading: boolean;
+  developerPanel: ReactNode;
   dimensionalDetailPending: boolean;
   dimensionalRows: CostRunRows;
   groups: {
@@ -152,6 +154,7 @@ export function CostMonitorContent({
     ) : null;
   return (
     <section
+      aria-busy={groupPageLoading || compactPageLoading || runPageLoading || undefined}
       className={`cost-content cost-content-${view} ${view === "overview" ? "cost-content-overview" : ""}`}
     >
       {detailLoading || dimensionalDetailPending ? (
@@ -178,6 +181,7 @@ export function CostMonitorContent({
           {...(useAggregateGroups ? { summaryUsage } : {})}
         />
       ) : null}
+      {view === "developers" ? developerPanel : null}
       {view === "agentCalls" ? (
         <>
           <CostRunsTable
@@ -191,7 +195,7 @@ export function CostMonitorContent({
                   pagination: {
                     ...(runPageData?.run_page ?? {
                       offset: runPageOffset,
-                      limit: 100,
+                      limit: 10,
                       total: null,
                       has_more: false,
                     }),
@@ -284,6 +288,7 @@ export function CostMonitorContent({
                       : "Providers"
               }
               locale={locale}
+              loading={groupPageLoading}
               rows={groups[key]}
               {...(key === "models" || key === "providers"
                 ? { totals: summaryTotals }
@@ -311,6 +316,7 @@ export function CostMonitorContent({
           <CostGroupsTable
             currency={currency}
             locale={locale}
+            loading={groupPageLoading}
             period={view}
             rows={groups[view]}
             showDateTime={false}

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

@@ -0,0 +1,35 @@
+import type { CostLocale } from "./cost-monitor-copy.js";
+
+export function CostMonitorLoadErrors({
+  groupError,
+  locale,
+  periodError,
+  retryGroup,
+}: {
+  groupError: string | null;
+  locale: CostLocale;
+  periodError: string | null;
+  retryGroup: () => void;
+}) {
+  return (
+    <>
+      {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}
+      {groupError ? (
+        <p className="cost-period-error" role="status">
+          {locale === "pt-BR"
+            ? `Não foi possível carregar esta aba: ${groupError}`
+            : `Could not load this tab: ${groupError}`}
+          <button onClick={retryGroup} type="button">
+            {locale === "pt-BR" ? "Tentar novamente" : "Try again"}
+          </button>
+        </p>
+      ) : null}
+    </>
+  );
+}

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

@@ -111,6 +111,22 @@ describe("cost monitor navigation", () => {
     expect(page).toContain("() => () => onLoadingChange?.(false)");
   });
 
+  it("does not fetch group pages for a non-group Cost Monitor tab and exposes a retryable error", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+
+    expect(page).toContain("active: groupView !== null");
+    expect(page).toContain("groupPageState.retry");
+  });
+
+  it("requests exactly ten remote rows for the slow Cost Monitor tabs", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+
+    expect(page).toContain("const compactPageLimit = 10;");
+    expect(page).toContain("const groupPageLimit = 10;");
+    expect(page).toContain("limit: 10,");
+    expect(page).toContain("range: groupPageRange");
+  });
+
   it("labels daily pagination by its continuous result range", () => {
     expect(
       costGroupPageLabel({
@@ -267,9 +283,19 @@ describe("cost monitor navigation", () => {
     expect(runHook).toContain("query: filters.query || globalQuery");
     expect(groupHook).toContain("export type CostGroupFilters = CostFilterState");
     expect(groupHook).toContain("filters,");
-    expect(page).toContain("groupPageState.page === null");
+    expect(page).toContain(
+      "const displayedGroupPage = groupPageState.page ?? groupPageState.stalePage",
+    );
     expect(page).toContain("? []");
   });
+
+  it("keeps the Agents visual page bounded when the server page loader is available", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+
+    expect(page).toContain('groupView === "agents" && loadGroupPage === undefined');
+    expect(page).toContain(": [...displayedGroupPage.rows]");
+    expect(page).toContain("const groupPageLimit = 10;");
+  });
   it("uses the Sao Paulo calendar for global daily filtering on both sides of 03:00Z", () => {
     const base = costRun("RUN-CALENDAR");
     expect(
@@ -314,6 +340,7 @@ describe("cost monitor navigation", () => {
       "daily",
       "monthly",
       "annual",
+      "developers",
       "overview",
       "executions",
       "agentCalls",
@@ -327,14 +354,33 @@ describe("cost monitor navigation", () => {
     ]);
   });
 
+  it("places the shared developer table inside the Cost Monitor content section", () => {
+    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+    const content = readFileSync(new URL("./CostMonitorContent.tsx", import.meta.url), "utf8");
+
+    expect(page).toMatch(
+      /developerPanel=\{\s*view === "developers" \? \(\s*<CostDeveloperAttributionPanel\b/,
+    );
+    expect(page).not.toMatch(/<\/CostMonitorContent>\s*\{view === "developers"/);
+    expect(content).toContain('{view === "developers" ? developerPanel : null}');
+  });
+
   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"),
+    );
     expect(page).toContain('view === "agentCalls" && serverPagingEligible');
     expect(page).toContain("agentInvocationExportSource");
     expect(page).toMatch(
       /pageSource=\{\s*compactExportSource \?\? agentInvocationExportSource \?\? costGroupExportSource\s*\}/,
     );
     expect(page).toContain("if (page.runs.length === 0) return");
+    expect(exportSection.match(/limit: 100/g)).toHaveLength(2);
+    expect(exportSection).toContain("nextOffset >= page.run_page.total");
+    expect(exportSection).toContain("...(groupPageRange === undefined ? {} : groupPageRange)");
+    expect(exportSection).not.toContain("...(runPageRange === undefined ? {} : runPageRange)");
   });
 
   it("prepares every paginated period row for daily, monthly, and annual exports", () => {