@zaip-ai/cli 1.0.8 → 1.3.0

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

@@ -7,7 +7,6 @@ import {
 import type { CostGroupRow, CostRunRow, DurationCoverage } from "../contracts.js";
 import { MoreVerticalIcon } from "./CostTableIcons.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
-import type { CostGroupTotals } from "./use-cost-group-page.js";
 import {
   agentRunModelPresentation,
   formatApiSpeedScenario,
@@ -29,6 +28,7 @@ import {
   formatUsd,
   isCompactRunColumnVisible,
 } from "./cost-table-presentation.js";
+import type { CostGroupTotals } from "./use-cost-group-page.js";
 
 export { CostModelsAuditTable } from "./CostModelsAuditTable.js";
 
@@ -61,7 +61,9 @@ export {
 export function displayCostGroupLabel(label: string, locale: CostLocale): string {
   const normalized = label.trim().toLowerCase();
   return normalized.length === 0 || normalized === "unknown"
-    ? (locale === "pt-BR" ? "Sem modelo/provedor atribuído" : "No model/provider assigned")
+    ? locale === "pt-BR"
+      ? "Sem modelo/provedor atribuído"
+      : "No model/provider assigned"
     : label;
 }
 
@@ -97,8 +99,7 @@ const formatInvocationDuration = (value: number | null, locale: CostLocale) =>
   formatAuditableDuration(value, locale);
 const formatInvocationRate = (value: number | null, locale: CostLocale) =>
   formatRate(value, locale);
-const formatInvocationUsd = (value: number | null, locale: CostLocale) =>
-  formatUsd(value, locale);
+const formatInvocationUsd = (value: number | null, locale: CostLocale) => formatUsd(value, locale);
 const formatInvocationBrlRate = (value: number | null, locale: CostLocale) =>
   formatBrlRate(value, locale);
 const formatInvocationMultiplierPair = (
@@ -113,30 +114,99 @@ function invocationMetricDescription(locale: CostLocale, metric: string): string
       ? "Valor da projeção SQLite/API desta Invocação de Agente. Fato canônico nulo permanece indisponível e não é convertido em zero."
       : "Value from this Agent Invocation's SQLite/API projection. A null canonical fact remains unavailable and is not converted to zero.";
   const details: Record<string, readonly [string, string]> = {
-    duration: ["Tempo factual da invocação, quando capturado ou reconciliado.", "Factual invocation duration, when captured or reconciled."],
-    inputTokens: ["Input total informado pela fonte; inclui a parcela de cache.", "Source-reported total input; includes the cached portion."],
-    cachedInputTokens: ["Parcela de cache já incluída no input total.", "Cached portion already included in total input."],
-    outputTokens: ["Output total informado pela fonte; inclui a parcela de raciocínio.", "Source-reported total output; includes the reasoning portion."],
-    reasoningTokens: ["Parcela de raciocínio já incluída no output total.", "Reasoning portion already included in total output."],
-    totalTokens: ["Soma de entrada e saída quando ambas são conhecidas; caso contrário, total informado pela fonte.", "Input plus output when both are known; otherwise the source-reported total."],
-    inputRate: ["Tarifa efetiva de entrada em USD por milhão de tokens.", "Effective input rate in USD per million tokens."],
-    cacheRate: ["Tarifa efetiva de entrada em cache em USD por milhão de tokens.", "Effective cached-input rate in USD per million tokens."],
-    outputRate: ["Tarifa efetiva de saída em USD por milhão de tokens.", "Effective output rate in USD per million tokens."],
-    reasoningRate: ["Tarifa efetiva de raciocínio em USD por milhão de tokens.", "Effective reasoning rate in USD per million tokens."],
-    contextMultiplier: ["Multiplicadores de contexto de entrada/saída aplicados aos segmentos internos.", "Input/output context multipliers applied to internal segments."],
-    inputCost: ["Custo USD de entrada calculado com tokens e tarifa efetiva.", "Input USD cost calculated from tokens and the effective rate."],
-    cacheCost: ["Custo USD da entrada em cache calculado com tokens e tarifa efetiva.", "Cached-input USD cost calculated from tokens and the effective rate."],
-    outputCost: ["Custo USD de saída calculado com tokens e tarifa efetiva.", "Output USD cost calculated from tokens and the effective rate."],
-    reasoningCost: ["Custo USD de raciocínio calculado com tokens e tarifa efetiva.", "Reasoning USD cost calculated from tokens and the effective rate."],
-    standardCost: ["Custo USD no cenário Standard, antes do acréscimo de velocidade.", "USD cost in the Standard scenario, before the speed uplift."],
-    speedUplift: ["Acréscimo USD do cenário Priority/Fast, já incluído no custo efetivo.", "USD uplift from the Priority/Fast scenario, already included in the effective cost."],
-    finalUsd: ["Custo final estimado da API em USD, somando os componentes de custo desta invocação.", "Estimated final API cost in USD, summing this invocation's cost components."],
-    fxRate: ["Câmbio BRL/USD atual aplicado para converter o custo final atual.", "Current BRL/USD exchange rate used to convert the current final cost."],
-    recordedFxRate: ["Câmbio BRL/USD registrado no período da atividade.", "BRL/USD exchange rate recorded for the activity period."],
-    recordedBrl: ["Custo final BRL registrado no período, preservado para auditoria histórica.", "Final BRL cost recorded in the period, retained for historical audit."],
-    cost: ["Custo final atual: USD estimado ou sua conversão BRL pelo câmbio atual selecionado.", "Current final cost: estimated USD or its BRL conversion at the selected current exchange rate."],
+    duration: [
+      "Tempo factual da invocação, quando capturado ou reconciliado.",
+      "Factual invocation duration, when captured or reconciled.",
+    ],
+    inputTokens: [
+      "Input total informado pela fonte; inclui a parcela de cache.",
+      "Source-reported total input; includes the cached portion.",
+    ],
+    cachedInputTokens: [
+      "Parcela de cache já incluída no input total.",
+      "Cached portion already included in total input.",
+    ],
+    outputTokens: [
+      "Output total informado pela fonte; inclui a parcela de raciocínio.",
+      "Source-reported total output; includes the reasoning portion.",
+    ],
+    reasoningTokens: [
+      "Parcela de raciocínio já incluída no output total.",
+      "Reasoning portion already included in total output.",
+    ],
+    totalTokens: [
+      "Soma de entrada e saída quando ambas são conhecidas; caso contrário, total informado pela fonte.",
+      "Input plus output when both are known; otherwise the source-reported total.",
+    ],
+    inputRate: [
+      "Tarifa efetiva de entrada em USD por milhão de tokens.",
+      "Effective input rate in USD per million tokens.",
+    ],
+    cacheRate: [
+      "Tarifa efetiva de entrada em cache em USD por milhão de tokens.",
+      "Effective cached-input rate in USD per million tokens.",
+    ],
+    outputRate: [
+      "Tarifa efetiva de saída em USD por milhão de tokens.",
+      "Effective output rate in USD per million tokens.",
+    ],
+    reasoningRate: [
+      "Tarifa efetiva de raciocínio em USD por milhão de tokens.",
+      "Effective reasoning rate in USD per million tokens.",
+    ],
+    contextMultiplier: [
+      "Multiplicadores de contexto de entrada/saída aplicados aos segmentos internos.",
+      "Input/output context multipliers applied to internal segments.",
+    ],
+    inputCost: [
+      "Custo USD de entrada calculado com tokens e tarifa efetiva.",
+      "Input USD cost calculated from tokens and the effective rate.",
+    ],
+    cacheCost: [
+      "Custo USD da entrada em cache calculado com tokens e tarifa efetiva.",
+      "Cached-input USD cost calculated from tokens and the effective rate.",
+    ],
+    outputCost: [
+      "Custo USD de saída calculado com tokens e tarifa efetiva.",
+      "Output USD cost calculated from tokens and the effective rate.",
+    ],
+    reasoningCost: [
+      "Custo USD de raciocínio calculado com tokens e tarifa efetiva.",
+      "Reasoning USD cost calculated from tokens and the effective rate.",
+    ],
+    standardCost: [
+      "Custo USD no cenário Standard, antes do acréscimo de velocidade.",
+      "USD cost in the Standard scenario, before the speed uplift.",
+    ],
+    speedUplift: [
+      "Acréscimo USD do cenário Priority/Fast, já incluído no custo efetivo.",
+      "USD uplift from the Priority/Fast scenario, already included in the effective cost.",
+    ],
+    finalUsd: [
+      "Custo final estimado da API em USD, somando os componentes de custo desta invocação.",
+      "Estimated final API cost in USD, summing this invocation's cost components.",
+    ],
+    fxRate: [
+      "Câmbio BRL/USD atual aplicado para converter o custo final atual.",
+      "Current BRL/USD exchange rate used to convert the current final cost.",
+    ],
+    recordedFxRate: [
+      "Câmbio BRL/USD registrado no período da atividade.",
+      "BRL/USD exchange rate recorded for the activity period.",
+    ],
+    recordedBrl: [
+      "Custo final BRL registrado no período, preservado para auditoria histórica.",
+      "Final BRL cost recorded in the period, retained for historical audit.",
+    ],
+    cost: [
+      "Custo final atual: USD estimado ou sua conversão BRL pelo câmbio atual selecionado.",
+      "Current final cost: estimated USD or its BRL conversion at the selected current exchange rate.",
+    ],
   };
-  const detail = details[metric] ?? ["Métrica numérica desta invocação.", "Numeric metric for this invocation."];
+  const detail = details[metric] ?? [
+    "Métrica numérica desta invocação.",
+    "Numeric metric for this invocation.",
+  ];
   return `${detail[locale === "pt-BR" ? 0 : 1]} ${source}`;
 }
 
@@ -332,13 +402,8 @@ export function CostRunsTable({
           key: "totalTokens",
           label: locale === "pt-BR" ? "Total tokens" : "Total tokens",
           description: invocationMetricDescription(locale, "totalTokens"),
-          render: (row) =>
-            formatInvocationNumber(
-              inclusiveTokenTotal(row),
-              locale,
-            ),
-          sortValue: (row) =>
-            inclusiveTokenTotal(row),
+          render: (row) => formatInvocationNumber(inclusiveTokenTotal(row), locale),
+          sortValue: (row) => inclusiveTokenTotal(row),
           align: "right",
           footer: formatInvocationNumber(totalTokens, locale),
         },
@@ -636,19 +701,22 @@ export function CostGroupsTable({
     usd: sumNumbers(rows.map((row) => row.estimated_usd)),
     brl: sumNumbers(rows.map((row) => row.estimated_brl)),
   };
-  const totals = suppliedTotals === undefined ? pageTotals : {
-    runs: suppliedTotals.run_count,
-    tasks: suppliedTotals.task_count ?? 0,
-    prds: suppliedTotals.prd_count,
-    specs: suppliedTotals.spec_count,
-    evidences: suppliedTotals.evidence_count,
-    tests: suppliedTotals.test_count,
-    durationKnownMs: suppliedTotals.duration.known_sum,
-    durationPartial: !suppliedTotals.duration.complete,
-    tokens: suppliedTotals.total_tokens,
-    usd: suppliedTotals.estimated_usd,
-    brl: suppliedTotals.estimated_brl,
-  };
+  const totals =
+    suppliedTotals === undefined
+      ? pageTotals
+      : {
+          runs: suppliedTotals.run_count,
+          tasks: suppliedTotals.task_count ?? 0,
+          prds: suppliedTotals.prd_count,
+          specs: suppliedTotals.spec_count,
+          evidences: suppliedTotals.evidence_count,
+          tests: suppliedTotals.test_count,
+          durationKnownMs: suppliedTotals.duration.known_sum,
+          durationPartial: !suppliedTotals.duration.complete,
+          tokens: suppliedTotals.total_tokens,
+          usd: suppliedTotals.estimated_usd,
+          brl: suppliedTotals.estimated_brl,
+        };
   const totalDurationDisplay = formatDurationCoverage(
     suppliedTotals?.duration ?? {
       known_sum: totals.durationKnownMs,
@@ -686,8 +754,16 @@ export function CostGroupsTable({
         },
         ...(showAgentIdentity
           ? [
-              { key: "persona", label: locale === "pt-BR" ? "Persona" : "Persona", render: (row: CostGroupRow) => row.persona ?? "" },
-              { key: "job", label: locale === "pt-BR" ? "Cargo" : "Job", render: (row: CostGroupRow) => row.job ?? "" },
+              {
+                key: "persona",
+                label: locale === "pt-BR" ? "Persona" : "Persona",
+                render: (row: CostGroupRow) => row.persona ?? "",
+              },
+              {
+                key: "job",
+                label: locale === "pt-BR" ? "Cargo" : "Job",
+                render: (row: CostGroupRow) => row.job ?? "",
+              },
             ]
           : []),
         {
@@ -724,14 +800,21 @@ export function CostGroupsTable({
               ...(showAgentIdentity
                 ? []
                 : [
-              {
-                key: "tasks",
-                label: showAgentIdentity || showInvocationTasks ? (locale === "pt-BR" ? "Tarefas com invocação" : "Tasks with invocations") : (locale === "pt-BR" ? "Tarefas criadas" : "Tasks created"),
-                render: (row: CostGroupRow) => row.task_count ?? 0,
-                align: "right" as const,
-                footer: totals.tasks,
-              },
-                ]),
+                    {
+                      key: "tasks",
+                      label:
+                        showAgentIdentity || showInvocationTasks
+                          ? locale === "pt-BR"
+                            ? "Tarefas com invocação"
+                            : "Tasks with invocations"
+                          : locale === "pt-BR"
+                            ? "Tarefas criadas"
+                            : "Tasks created",
+                      render: (row: CostGroupRow) => row.task_count ?? 0,
+                      align: "right" as const,
+                      footer: totals.tasks,
+                    },
+                  ]),
             ]
           : [
               {
@@ -835,7 +918,13 @@ export function CostGroupsTable({
             ]
           : []),
       ]}
-      defaultSort={period === undefined ? null : { key: "label", direction: "desc" }}
+      defaultSort={
+        showAgentIdentity
+          ? { key: "cost", direction: "desc" }
+          : period === undefined
+            ? null
+            : { key: "label", direction: "desc" }
+      }
       locale={locale}
       pageSize={100}
       rowKey={(row) => row.key}

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

@@ -237,14 +237,17 @@
   min-width: 0;
   table-layout: fixed;
 }
-.cost-content:is(.cost-content-daily, .cost-content-monthly, .cost-content-annual) .cost-page-controls {
+.cost-content:is(.cost-content-daily, .cost-content-monthly, .cost-content-annual)
+  .cost-page-controls {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 12px;
 }
-.cost-content:is(.cost-content-daily, .cost-content-monthly, .cost-content-annual) .cost-page-controls output {
+.cost-content:is(.cost-content-daily, .cost-content-monthly, .cost-content-annual)
+  .cost-page-controls
+  output {
   min-width: 8.5rem;
   color: var(--muted);
   font-size: 0.78rem;

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

@@ -1,5 +1,5 @@
+export type { CompactLifecycleCostPage } from "./CompactLifecycleCostTable.js";
 export * from "./CostMonitorPage.js";
 export { CostRunsTable } from "./CostTables.js";
-export type { CompactLifecycleCostPage } from "./CompactLifecycleCostTable.js";
-export { matches as matchesCostRunFilter } from "./cost-monitor-row-filters.js";
 export type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+export { matches as matchesCostRunFilter } from "./cost-monitor-row-filters.js";

package/templates/.agents/dashboard/modules/cost-monitor/src/react/period-cost-groups.ts

@@ -127,7 +127,8 @@ export function summarizeCostPeriodAverages(
 ): CostPeriodAverages {
   const divisor = rows.length;
   return {
-    tasks: divisor === 0 ? null : rows.reduce((sum, row) => sum + (row.task_count ?? 0), 0) / divisor,
+    tasks:
+      divisor === 0 ? null : rows.reduce((sum, row) => sum + (row.task_count ?? 0), 0) / divisor,
     specs: divisor === 0 ? null : rows.reduce((sum, row) => sum + row.spec_count, 0) / divisor,
     prds: divisor === 0 ? null : rows.reduce((sum, row) => sum + row.prd_count, 0) / divisor,
     durationMs: averagePerPeriod(

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

@@ -3,8 +3,8 @@ import {
   type CompactLifecycleCostPage,
   withTokenBackedCompactDuration,
 } from "./CompactLifecycleCostTable.js";
-import type { CostView } from "./cost-monitor-views.js";
 import type { CostFilterState } from "./CostFilters.js";
+import type { CostView } from "./cost-monitor-views.js";
 
 type CompactReadModelKind = CompactLifecycleCostPage["kind"];
 export type LoadCompactCostPage = (request: {
@@ -43,6 +43,7 @@ export function useCompactCostPage({
 }) {
   const [offset, setOffset] = useState(0);
   const [page, setPage] = useState<CompactLifecycleCostPage | 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);
@@ -54,6 +55,9 @@ export function useCompactCostPage({
   const rangeTo = range?.to;
   const filterKey = Object.values(filters).join("\u0000");
   const paginationKey = `${view}\u0000${query ?? ""}\u0000${rangeFrom ?? ""}\u0000${rangeTo ?? ""}\u0000${filterKey}`;
+  const requestKey = `${paginationKey}\u0000${offset}`;
+  const requestInputRef = useRef({ filters, query, rangeFrom, rangeTo });
+  requestInputRef.current = { filters, query, rangeFrom, rangeTo };
   useEffect(() => {
     void paginationKey;
     setOffset(0);
@@ -73,18 +77,23 @@ export function useCompactCostPage({
     setError(null);
     const loadPage = loadRef.current;
     if (loadPage === undefined) return;
+    const requestInput = requestInputRef.current;
     void loadPage({
       kind,
       offset,
       limit: 50,
-      ...(rangeFrom === undefined || rangeTo === undefined ? {} : { from: rangeFrom, to: rangeTo }),
-      ...(query ? { query } : {}),
-      filters,
+      ...(requestInput.rangeFrom === undefined || requestInput.rangeTo === undefined
+        ? {}
+        : { from: requestInput.rangeFrom, to: requestInput.rangeTo }),
+      ...(requestInput.query ? { query: requestInput.query } : {}),
+      filters: requestInput.filters,
       signal: controller.signal,
     })
       .then((next) => {
-        if (!controller.signal.aborted && generation === generationRef.current)
+        if (!controller.signal.aborted && generation === generationRef.current) {
           setPage({ ...next, rows: next.rows.map(withTokenBackedCompactDuration) });
+          setResolvedKey(requestKey);
+        }
       })
       .catch((cause: unknown) => {
         if (!controller.signal.aborted && generation === generationRef.current)
@@ -96,11 +105,13 @@ export function useCompactCostPage({
     return () => controller.abort();
     // App supplies an inline loader. Its identity changes after state updates;
     // retaining it here would abort/restart this exact request forever.
-  }, [attempt, filterKey, hasLoad, offset, query, rangeFrom, rangeTo, view]);
+  }, [attempt, hasLoad, offset, requestKey, view]);
   return {
     compactPageOffset: offset,
     setCompactPageOffset: setOffset,
-    compactPage: page,
+    // A response for another tab, range, filter, or offset must never occupy
+    // this view while the next request is in flight.
+    compactPage: resolvedKey === requestKey ? page : null,
     compactPageLoading: loading,
     compactPageError: error,
     retryCompactPage: () => setAttempt((value) => value + 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;
@@ -49,12 +79,68 @@ 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({
+  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;
   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${range?.from ?? ""}\u0000${range?.to ?? ""}\u0000${filterKey}`;
+  const requestKey = `${paginationKey}\u0000${offset}`;
+  const requestInputRef = useRef({ filters, query, range, view });
+  requestInputRef.current = { filters, query, range, view };
+  useEffect(() => {
+    void paginationKey;
+    setOffset(0);
+  }, [paginationKey]);
+  useEffect(() => {
+    if (!loader.current) return;
+    const controller = new AbortController();
+    const current = ++generation.current;
+    const requestInput = requestInputRef.current;
+    const limit = requestInput.view === "daily" ? 30 : 50;
+    setLoading(true);
+    void loader
+      .current({
+        view: requestInput.view,
+        offset,
+        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);
+        }
+      })
+      .finally(() => {
+        if (!controller.signal.aborted && current === generation.current) setLoading(false);
+      });
+    return () => controller.abort();
+  }, [offset, requestKey]);
+  return {
+    page: isCurrentCostGroupPage(resolvedKey, requestKey) ? page : null,
+    loading,
+    offset,
+    setOffset,
+  };
 }

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

@@ -35,13 +35,34 @@ 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${paginationKey}\u0000${refresh ?? ""}`;
+  const requestInputRef = useRef({
+    view,
+    eligible,
+    currency,
+    effectiveFilters,
+    rangeFrom,
+    rangeTo,
+    refresh,
+  });
+  requestInputRef.current = {
+    view,
+    eligible,
+    currency,
+    effectiveFilters,
+    rangeFrom,
+    rangeTo,
+    refresh,
+  };
   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 +73,13 @@ 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,
+      refresh: requestInput.refresh,
       signal: controller.signal,
     })
       .then((next) => {
@@ -83,18 +106,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];