@zaip-ai/cli 1.0.8 → 1.3.1

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

@@ -6,8 +6,8 @@ import {
 } from "@zaip-ai/dashboard-ui";
 import type { CostGroupRow, CostRunRow, DurationCoverage } from "../contracts.js";
 import { MoreVerticalIcon } from "./CostTableIcons.js";
+import { type CostRunPagination, CostRunServerPagination } from "./CostTableLoading.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
-import type { CostGroupTotals } from "./use-cost-group-page.js";
 import {
   agentRunModelPresentation,
   formatApiSpeedScenario,
@@ -29,7 +29,12 @@ import {
   formatUsd,
   isCompactRunColumnVisible,
 } from "./cost-table-presentation.js";
+import type { CostGroupTotals } from "./use-cost-group-page.js";
 
+export {
+  type CostDeveloperAttributionRow,
+  CostDeveloperAttributionTable,
+} from "./CostDeveloperAttributionTable.js";
 export { CostModelsAuditTable } from "./CostModelsAuditTable.js";
 
 export {
@@ -61,7 +66,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 +104,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 +119,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}`;
 }
 
@@ -199,16 +274,7 @@ export function CostRunsTable({
   currency: CostCurrency;
   locale: CostLocale;
   compact?: boolean;
-  pagination?: {
-    offset: number;
-    limit: number;
-    total: number | null;
-    has_more: boolean;
-    loading: boolean;
-    error: string | null;
-    onChange: (offset: number) => void;
-    onRetry: () => void;
-  };
+  pagination?: CostRunPagination;
 }) {
   const footerLabel = costRunsFooterLabel(locale, pagination !== undefined);
   const total = (key: keyof CostRunRow) => sumNumbers(rows.map((row) => row[key]));
@@ -332,13 +398,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),
         },
@@ -534,63 +595,6 @@ function inclusiveTokenTotal(
     : row.total_tokens;
 }
 
-function CostRunServerPagination({
-  locale,
-  pagination,
-}: {
-  locale: CostLocale;
-  pagination: NonNullable<Parameters<typeof CostRunsTable>[0]["pagination"]>;
-}) {
-  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>
-  );
-}
-
 function costPeriodHeading(period: "daily" | "monthly" | "annual", locale: CostLocale): string {
   if (locale === "en-US") {
     return period === "daily" ? "Day" : period === "monthly" ? "Month" : "Year";
@@ -610,6 +614,7 @@ export function CostGroupsTable({
   dateHeading,
   labelHeading,
   totals: suppliedTotals,
+  loading = false,
 }: {
   rows: readonly CostGroupRow[];
   currency: CostCurrency;
@@ -622,6 +627,7 @@ export function CostGroupsTable({
   dateHeading?: string;
   labelHeading?: string;
   totals?: CostGroupTotals;
+  loading?: boolean;
 }) {
   const pageTotals = {
     runs: rows.reduce((sum, row) => sum + row.run_count, 0),
@@ -636,19 +642,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 +695,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 +741,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,8 +859,23 @@ 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}
+      emptyMessage={
+        loading
+          ? locale === "pt-BR"
+            ? "Carregando…"
+            : "Loading…"
+          : locale === "pt-BR"
+            ? "Nenhum dado disponível."
+            : "No data available."
+      }
       pageSize={100}
       rowKey={(row) => row.key}
       onRowClick={onOpenTrace === undefined ? undefined : (row) => onOpenTrace(row.key)}

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

@@ -37,6 +37,7 @@ export const costCopy = {
       daily: "Diário",
       monthly: "Mensal",
       annual: "Anual",
+      developers: "Desenvolvedores",
     },
   },
   "en-US": {
@@ -73,6 +74,7 @@ export const costCopy = {
       daily: "Daily",
       monthly: "Monthly",
       annual: "Annual",
+      developers: "Developers",
     },
   },
 } as const;

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

@@ -11,7 +11,8 @@ export type CostView =
   | "models"
   | "daily"
   | "monthly"
-  | "annual";
+  | "annual"
+  | "developers";
 
 export const DEFAULT_COST_VIEW: CostView = "daily";
 
@@ -19,6 +20,7 @@ export const COST_VIEW_ORDER: readonly CostView[] = [
   "daily",
   "monthly",
   "annual",
+  "developers",
   "overview",
   "executions",
   "agentCalls",

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/cost-page-range.ts

@@ -0,0 +1,35 @@
+import { type CostPeriod, defaultCostPeriod } from "./CostFilters.js";
+
+export type CostPageDateRange = { from: string; to: string };
+
+/**
+ * Embedded pages use the host's all-time atomic snapshot until an explicit
+ * period, date range, or local Cost filter narrows the population.
+ */
+export function resolveCostGroupPageRange({
+  embedded,
+  globalDateRange,
+  hasLocalCostFilters,
+  period,
+  runPageRange,
+}: {
+  embedded: boolean;
+  globalDateRange: { start: string; end: string } | undefined;
+  hasLocalCostFilters: boolean;
+  period: CostPeriod;
+  runPageRange: CostPageDateRange | undefined;
+}): CostPageDateRange | undefined {
+  if (
+    embedded &&
+    globalDateRange === undefined &&
+    period === defaultCostPeriod &&
+    !hasLocalCostFilters
+  )
+    return undefined;
+  return runPageRange;
+}
+
+/** Compact lifecycle tables share the same embedded snapshot contract. */
+export function resolveCompactCostPageRange(args: Parameters<typeof resolveCostGroupPageRange>[0]) {
+  return resolveCostGroupPageRange(args);
+}

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: {
@@ -28,21 +28,33 @@ export function compactReadModelKind(view: CostView): CompactReadModelKind | nul
     : null;
 }
 
+/** A page fallback is valid only for the same compact table surface. */
+export function isSameCompactCostSurface(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 useCompactCostPage({
   view,
   load,
+  limit = 50,
   range,
   query,
   filters,
 }: {
   view: CostView;
   load: LoadCompactCostPage | undefined;
+  limit?: number;
   range: { from: string; to: string } | undefined;
   query: string | undefined;
   filters: CostFilterState;
 }) {
   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);
@@ -53,7 +65,10 @@ export function useCompactCostPage({
   const rangeFrom = range?.from;
   const rangeTo = range?.to;
   const filterKey = Object.values(filters).join("\u0000");
-  const paginationKey = `${view}\u0000${query ?? ""}\u0000${rangeFrom ?? ""}\u0000${rangeTo ?? ""}\u0000${filterKey}`;
+  const paginationKey = `${view}\u0000${limit}\u0000${query ?? ""}\u0000${rangeFrom ?? ""}\u0000${rangeTo ?? ""}\u0000${filterKey}`;
+  const requestKey = `${paginationKey}\u0000${offset}`;
+  const requestInputRef = useRef({ filters, limit, query, rangeFrom, rangeTo });
+  requestInputRef.current = { filters, limit, query, rangeFrom, rangeTo };
   useEffect(() => {
     void paginationKey;
     setOffset(0);
@@ -73,18 +88,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,
+      limit: requestInput.limit,
+      ...(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 +116,14 @@ 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,
+    staleCompactPage: isSameCompactCostSurface(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.test.ts

@@ -1,7 +1,9 @@
+import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
-import { isCurrentCostGroupPage } from "./use-cost-group-page.js";
+import { isSameCompactCostSurface } from "./use-compact-cost-page.js";
+import { isCurrentCostGroupPage, isSameCostGroupSurface } from "./use-cost-group-page.js";
 
-describe("Cost group page request identity", () => {
+describe("useCostGroupPage loading lifecycle", () => {
   it("masks a resolved monthly page while the annual request is pending", () => {
     const monthly = "monthly\u0000\u0000\u0000\u0000\u00000";
     const annual = "annual\u0000\u0000\u0000\u0000\u00000";
@@ -9,4 +11,37 @@ describe("Cost group page request identity", () => {
     expect(isCurrentCostGroupPage(monthly, annual)).toBe(false);
     expect(isCurrentCostGroupPage(annual, annual)).toBe(true);
   });
+
+  it("never reuses rows from another tab while its slow request is pending", () => {
+    const daily = "daily\u000010\u00002026-08-01\u00002026-08-25\u0000\u00000";
+    const models = "models\u000010\u00002026-08-01\u00002026-08-25\u0000\u00000";
+    const executions = "executions\u000010\u0000\u00002026-08-01\u00002026-08-25\u0000\u00000";
+    const tasks = "tasks\u000010\u0000\u00002026-08-01\u00002026-08-25\u0000\u00000";
+
+    expect(isSameCostGroupSurface(daily, models)).toBe(false);
+    expect(isSameCompactCostSurface(executions, tasks)).toBe(false);
+  });
+
+  it("keeps previous rows only while the next page of the same tab is pending", () => {
+    const firstPage = "daily\u000010\u00002026-08-01\u00002026-08-25\u0000\u00000";
+    const secondPage = "daily\u000010\u00002026-08-01\u00002026-08-25\u0000\u000010";
+
+    expect(isSameCostGroupSurface(firstPage, secondPage)).toBe(true);
+  });
+
+  it("invalidates an aborted request before clearing an inactive group view", () => {
+    const source = readFileSync(new URL("./use-cost-group-page.ts", import.meta.url), "utf8");
+
+    expect(source).toContain("const current = ++generation.current;");
+    expect(source).toContain("if (!active || !loader.current)");
+    expect(source).toContain("setLoading(false);");
+  });
+
+  it("handles loader failures instead of leaving a rejected promise", () => {
+    const source = readFileSync(new URL("./use-cost-group-page.ts", import.meta.url), "utf8");
+
+    expect(source).toContain(".catch((cause: unknown) => {");
+    expect(source).toContain("setError(cause instanceof Error ? cause.message : String(cause));");
+    expect(source).toContain("retry: () => setAttempt");
+  });
 });