@zaip-ai/cli 1.0.8 → 1.3.1

package/templates/.agents/dashboard/modules/cost-monitor/src/react/use-cost-group-page.ts

@@ -4,10 +4,40 @@ import type { CostFilterState } from "./CostFilters.js";
 import type { CostLocale } from "./cost-monitor-copy.js";
 
 /** Pre-pagination aggregate for the exact page query. */
-export type CostGroupTotals = Pick<CostGroupRow, "run_count" | "task_count" | "prd_count" | "spec_count" | "evidence_count" | "test_count" | "event_count" | "total_tokens" | "estimated_usd" | "estimated_brl" | "duration_ms" | "duration">;
-export type CostGroupPage = { offset: number; limit: number; total_count: number; has_more: boolean; rows: readonly CostGroupRow[]; totals?: CostGroupTotals };
+export type CostGroupTotals = Pick<
+  CostGroupRow,
+  | "run_count"
+  | "task_count"
+  | "prd_count"
+  | "spec_count"
+  | "evidence_count"
+  | "test_count"
+  | "event_count"
+  | "total_tokens"
+  | "estimated_usd"
+  | "estimated_brl"
+  | "duration_ms"
+  | "duration"
+>;
+export type CostGroupPage = {
+  offset: number;
+  limit: number;
+  total_count: number;
+  has_more: boolean;
+  rows: readonly CostGroupRow[];
+  totals?: CostGroupTotals;
+};
 export type CostGroupFilters = CostFilterState;
-export type LoadCostGroupPage = (request: { view: "daily" | "monthly" | "annual" | "agents" | "models" | "providers"; from?: string; to?: string; offset: number; limit: number; query?: string; filters: CostGroupFilters; signal?: AbortSignal }) => Promise<CostGroupPage>;
+export type LoadCostGroupPage = (request: {
+  view: "daily" | "monthly" | "annual" | "agents" | "models" | "providers";
+  from?: string;
+  to?: string;
+  offset: number;
+  limit: number;
+  query?: string;
+  filters: CostGroupFilters;
+  signal?: AbortSignal;
+}) => Promise<CostGroupPage>;
 
 export function effectiveCostGroupQuery(filters: CostGroupFilters, globalQuery: string): string {
   return filters.query || globalQuery;
@@ -18,6 +48,18 @@ export function isCurrentCostGroupPage(resolvedKey: string | null, requestKey: s
   return resolvedKey === requestKey;
 }
 
+/**
+ * A changed offset may keep its own tab's data visible, but switching tabs,
+ * ranges, or filters must never briefly render a different table schema.
+ */
+export function isSameCostGroupSurface(resolvedKey: string | null, requestKey: string): boolean {
+  if (resolvedKey === null) return false;
+  return (
+    resolvedKey.slice(0, resolvedKey.lastIndexOf("\u0000")) ===
+    requestKey.slice(0, requestKey.lastIndexOf("\u0000"))
+  );
+}
+
 export function costGroupPageLabel({
   locale,
   page,
@@ -49,12 +91,92 @@ export function reconcileCostGroupTotalsWithCards(
   };
 }
 
-export function useCostGroupPage({ view, range, globalQuery, filters, load }: { view: "daily" | "monthly" | "annual" | "agents" | "models" | "providers"; range?: { from: string; to: string }; globalQuery: string; filters: CostGroupFilters; load?: LoadCostGroupPage }) {
-  const [offset, setOffset] = useState(0); const [page, setPage] = useState<CostGroupPage | null>(null); const [resolvedKey, setResolvedKey] = useState<string | null>(null); const [loading, setLoading] = useState(false); const generation = useRef(0); const loader = useRef(load); loader.current = load;
+export function useCostGroupPage({
+  active = true,
+  view,
+  range,
+  globalQuery,
+  limit = 50,
+  filters,
+  load,
+}: {
+  active?: boolean;
+  view: "daily" | "monthly" | "annual" | "agents" | "models" | "providers";
+  range?: { from: string; to: string };
+  globalQuery: string;
+  limit?: number;
+  filters: CostGroupFilters;
+  load?: LoadCostGroupPage;
+}) {
+  const [offset, setOffset] = useState(0);
+  const [page, setPage] = useState<CostGroupPage | null>(null);
+  const [resolvedKey, setResolvedKey] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+  const generation = useRef(0);
+  const loader = useRef(load);
+  loader.current = load;
   const query = effectiveCostGroupQuery(filters, globalQuery);
   const filterKey = `${Object.values(filters).join("\u0000")}\u0000${query}`;
-  const requestKey = `${view}\u0000${range?.from ?? ""}\u0000${range?.to ?? ""}\u0000${filterKey}\u0000${offset}`;
-  useEffect(() => { setOffset(0); }, [view, range?.from, range?.to, filterKey]);
-  useEffect(() => { if (!loader.current) return; const controller = new AbortController(); const current = ++generation.current; const limit = view === "daily" ? 30 : 50; setLoading(true); void loader.current({ view, offset, limit, ...(query ? { query } : {}), filters, ...(range ?? {}), signal: controller.signal }).then((next) => { if (!controller.signal.aborted && current === generation.current) { setPage(next); setResolvedKey(requestKey); } }).finally(() => { if (!controller.signal.aborted && current === generation.current) setLoading(false); }); return () => controller.abort(); }, [filterKey, offset, range?.from, range?.to, requestKey, view]);
-  return { page: isCurrentCostGroupPage(resolvedKey, requestKey) ? page : null, loading, offset, setOffset };
+  const paginationKey = `${view}\u0000${limit}\u0000${range?.from ?? ""}\u0000${range?.to ?? ""}\u0000${filterKey}`;
+  const requestKey = `${paginationKey}\u0000${offset}`;
+  const requestInputRef = useRef({ filters, limit, query, range, view });
+  requestInputRef.current = { filters, limit, query, range, view };
+  useEffect(() => {
+    void paginationKey;
+    setOffset(0);
+  }, [paginationKey]);
+  useEffect(() => {
+    void attempt;
+    // Increment before the inactive branch so an aborted group request cannot
+    // publish or clear state after the user switches to a non-group tab.
+    const current = ++generation.current;
+    if (!active || !loader.current) {
+      setPage(null);
+      setResolvedKey(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    const controller = new AbortController();
+    const requestInput = requestInputRef.current;
+    setLoading(true);
+    setError(null);
+    void loader
+      .current({
+        view: requestInput.view,
+        offset,
+        limit: requestInput.limit,
+        ...(requestInput.query ? { query: requestInput.query } : {}),
+        filters: requestInput.filters,
+        ...(requestInput.range ?? {}),
+        signal: controller.signal,
+      })
+      .then((next) => {
+        if (!controller.signal.aborted && current === generation.current) {
+          setPage(next);
+          setResolvedKey(requestKey);
+        }
+      })
+      .catch((cause: unknown) => {
+        if (!controller.signal.aborted && current === generation.current)
+          setError(cause instanceof Error ? cause.message : String(cause));
+      })
+      .finally(() => {
+        if (!controller.signal.aborted && current === generation.current) setLoading(false);
+      });
+    return () => controller.abort();
+  }, [active, attempt, offset, requestKey]);
+  return {
+    error,
+    page: isCurrentCostGroupPage(resolvedKey, requestKey) ? page : null,
+    // Keep the preceding page only while moving within its own tab. A tab,
+    // range, or filter change may have a different row schema.
+    stalePage: isSameCostGroupSurface(resolvedKey, requestKey) ? page : null,
+    loading,
+    offset,
+    retry: () => setAttempt((value) => value + 1),
+    setOffset,
+  };
 }

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

@@ -10,6 +10,7 @@ export function useCostRunPage({
   currency,
   filters,
   globalQuery,
+  limit = 10,
   range,
   refresh,
   load,
@@ -19,6 +20,7 @@ export function useCostRunPage({
   currency: CostCurrency;
   filters: CostFilterState;
   globalQuery: string;
+  limit?: number;
   range: { from: string; to: string } | undefined;
   refresh: string | null;
   load: typeof loadCostMonitorRunPage | undefined;
@@ -35,13 +37,36 @@ export function useCostRunPage({
   const rangeTo = range?.to;
   const effectiveFilters = { ...filters, query: filters.query || globalQuery };
   const paginationKey = `${Object.values(effectiveFilters).join("\u0000")}\u0000${rangeFrom ?? ""}\u0000${rangeTo ?? ""}`;
+  const requestKey = `${view}\u0000${eligible}\u0000${currency}\u0000${limit}\u0000${paginationKey}\u0000${refresh ?? ""}`;
+  const requestInputRef = useRef({
+    view,
+    eligible,
+    currency,
+    effectiveFilters,
+    rangeFrom,
+    rangeTo,
+    refresh,
+    limit,
+  });
+  requestInputRef.current = {
+    view,
+    eligible,
+    currency,
+    effectiveFilters,
+    rangeFrom,
+    rangeTo,
+    refresh,
+    limit,
+  };
   useEffect(() => {
     void paginationKey;
     setOffset(0);
   }, [paginationKey]);
   useEffect(() => {
     void attempt;
-    if (view !== "agentCalls" || !eligible) {
+    void requestKey;
+    const requestInput = requestInputRef.current;
+    if (requestInput.view !== "agentCalls" || !requestInput.eligible) {
       setData(null);
       setError(null);
       setLoading(false);
@@ -52,11 +77,14 @@ export function useCostRunPage({
     setLoading(true);
     setError(null);
     void (loadRef.current ?? loadCostMonitorRunPage)({
-      currency,
-      filters: effectiveFilters,
-      ...(rangeFrom === undefined || rangeTo === undefined ? {} : { from: rangeFrom, to: rangeTo }),
+      currency: requestInput.currency,
+      filters: requestInput.effectiveFilters,
+      ...(requestInput.rangeFrom === undefined || requestInput.rangeTo === undefined
+        ? {}
+        : { from: requestInput.rangeFrom, to: requestInput.rangeTo }),
       offset,
-      refresh,
+      limit: requestInput.limit,
+      refresh: requestInput.refresh,
       signal: controller.signal,
     })
       .then((next) => {
@@ -83,18 +111,7 @@ export function useCostRunPage({
     return () => controller.abort();
     // Do not depend on App's inline loader identity: a render caused by loading
     // state must not cancel and recreate the same page request.
-  }, [
-    attempt,
-    currency,
-    eligible,
-    filters,
-    globalQuery,
-    offset,
-    rangeFrom,
-    rangeTo,
-    refresh,
-    view,
-  ]);
+  }, [attempt, offset, requestKey]);
   return {
     runPageOffset: offset,
     setRunPageOffset: setOffset,

package/templates/.agents/dashboard/modules/cost-monitor/src/server/build-cost-monitor-projection.test.ts

@@ -680,30 +680,6 @@ describe("Cost Monitor V2", () => {
     });
     expect(specialized.runs[0]?.agent_name).toBe("zaip-agent-reviewer");
   });
-  it("uses the catalog agent id for Sub-Runs even when their inherited name is stale", () => {
-    const operations = operationsWithPricedRun();
-    const source = operations.runs[0];
-    if (source === undefined) throw new Error("priced Run fixture is missing");
-    source.agent = "agent-finalizer";
-    source.agent_name = "zaip-agent-orchestrator";
-    source.run_kind = "subrun";
-    source.parent_run_id = "RUN-PARENT";
-    const projection = buildCostMonitorProjection(operations, undefined, {
-      agentNamesById: { "agent-finalizer": "zaip-agent-finalizer" },
-    });
-    expect(projection.runs[0]?.agent_name).toBe("zaip-agent-finalizer");
-  });
-  it("maps an unmapped orchestrator internal id through its catalog role", () => {
-    const operations = operationsWithPricedRun();
-    const source = operations.runs[0];
-    if (source === undefined) throw new Error("priced Run fixture is missing");
-    source.agent = "orchestrator";
-    source.agent_name = "orchestrator";
-    const projection = buildCostMonitorProjection(operations, undefined, {
-      agentNamesByRole: { orchestrator: "zaip-agent-orchestrator" },
-    });
-    expect(projection.runs[0]?.agent_name).toBe("zaip-agent-orchestrator");
-  });
   it("maps the canonical orchestrator id when catalog loading is unavailable", () => {
     const operations = operationsWithPricedRun();
     const source = operations.runs[0];