@zaip-ai/cli 1.0.7 → 1.0.8

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

@@ -6,16 +6,32 @@ import {
 } from "@zaip-ai/dashboard-ui";
 import type { CostGroupRow, CostRunRow, DurationCoverage } from "../contracts.js";
 import { MoreVerticalIcon } from "./CostTableIcons.js";
-import { durationContributors } from "./cost-duration.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+import type { CostGroupTotals } from "./use-cost-group-page.js";
 import {
   agentRunModelPresentation,
   formatApiSpeedScenario,
   localizedDescription,
   sumNumbers,
 } from "./cost-table-metrics.js";
+import {
+  costGroupsScrollLabel,
+  costPeriodTotalAriaLabel,
+  costRunsDurationTotal,
+  costRunsScrollLabel,
+  formatBrlRate,
+  formatCostPeriodLabel,
+  formatDateTime,
+  formatMultiplierPair,
+  formatRate,
+  formatReasoningEffort,
+  formatServiceTier,
+  formatUsd,
+  isCompactRunColumnVisible,
+} from "./cost-table-presentation.js";
 
 export { CostModelsAuditTable } from "./CostModelsAuditTable.js";
+
 export {
   agentRunModelPresentation,
   contextUpliftUsd,
@@ -26,22 +42,35 @@ export {
   scenario,
   sumNumbers,
 } from "./cost-table-metrics.js";
+export {
+  costGroupsScrollLabel,
+  costPeriodTotalAriaLabel,
+  costRunsDurationTotal,
+  costRunsScrollLabel,
+  formatBrlRate,
+  formatCostPeriodLabel,
+  formatDateTime,
+  formatMultiplierPair,
+  formatRate,
+  formatReasoningEffort,
+  formatServiceTier,
+  formatUsd,
+  isCompactRunColumnVisible,
+} from "./cost-table-presentation.js";
 
-const unavailableMetricLabels: Readonly<Record<CostLocale, string>> = {
-  "pt-BR": "Indisponível",
-  "en-US": "Unavailable",
-};
-function unavailableMetricLabel(locale: CostLocale): string {
-  return unavailableMetricLabels[locale];
+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")
+    : label;
 }
 
 export function formatAuditableNumber(value: number | null, locale: CostLocale): string {
-  if (value === null) return unavailableMetricLabel(locale);
-  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value ?? 0);
 }
 
 export function formatAuditableCompactNumber(value: number | null, locale: CostLocale): string {
-  return value === null ? unavailableMetricLabel(locale) : formatCompactNumber(value, locale);
+  return formatCompactNumber(value ?? 0, locale);
 }
 
 export function formatAuditableCurrency(
@@ -49,16 +78,94 @@ export function formatAuditableCurrency(
   currency: CostCurrency,
   locale: CostLocale,
 ): string {
-  return value === null ? unavailableMetricLabel(locale) : formatCurrency(value, currency, locale);
+  return formatCurrency(value ?? 0, currency, locale);
 }
 
 export function formatAuditableDuration(value: number | null, locale: CostLocale): string {
-  return value === null ? unavailableMetricLabel(locale) : formatDurationMs(value, locale);
+  if (value === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  return value === 0 ? "0" : formatDurationMs(value, locale);
+}
+
+const formatInvocationNumber = (value: number | null, locale: CostLocale) =>
+  formatAuditableNumber(value, locale);
+const formatInvocationCurrency = (
+  value: number | null,
+  currency: CostCurrency,
+  locale: CostLocale,
+) => formatAuditableCurrency(value, currency, locale);
+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 formatInvocationBrlRate = (value: number | null, locale: CostLocale) =>
+  formatBrlRate(value, locale);
+const formatInvocationMultiplierPair = (
+  input: number | null,
+  output: number | null,
+  locale: CostLocale,
+) => formatMultiplierPair(input, output, locale);
+
+function invocationMetricDescription(locale: CostLocale, metric: string): string {
+  const source =
+    locale === "pt-BR"
+      ? "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."],
+  };
+  const detail = details[metric] ?? ["Métrica numérica desta invocação.", "Numeric metric for this invocation."];
+  return `${detail[locale === "pt-BR" ? 0 : 1]} ${source}`;
 }
 
 export function formatDurationCoverage(value: DurationCoverage, locale: CostLocale): string {
-  if (value.complete || value.coverage_ratio > 0) return formatDurationMs(value.known_sum, locale);
-  return unavailableMetricLabel(locale);
+  // `known_sum` is a factual elapsed-time observation even when another
+  // activity in the population is unavailable.  Keep completeness and the
+  // unknown count as coverage metadata; hiding the known portion would turn a
+  // true observation into an indistinguishable absence.
+  if (value.known_sum <= 0 && !value.complete)
+    return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  return value.known_sum <= 0 ? "0" : formatDurationMs(value.known_sum, locale);
+}
+
+export function hasKnownDuration(value: DurationCoverage): boolean {
+  return value.known_sum > 0 || value.coverage_ratio > 0;
+}
+
+export function formatTokenBackedDuration(
+  value: DurationCoverage,
+  _totalTokens: number | null,
+  locale: CostLocale,
+): string {
+  // Token presence is a financial observation, not evidence of elapsed time.
+  return formatDurationCoverage(value, locale);
+}
+
+export function costRunsFooterLabel(locale: CostLocale, pageOnly: boolean): string {
+  if (!pageOnly) return locale === "pt-BR" ? "Total" : "Total";
+  return locale === "pt-BR" ? "Subtotal da página" : "Page subtotal";
 }
 
 /** Keeps table ordering tied to the raw monetary value, not its localized label. */
@@ -85,25 +192,38 @@ export function CostRunsTable({
   currency,
   locale,
   compact = false,
+  pagination,
 }: {
   rows: readonly CostRunRow[];
   onOpenRun: (runId: string) => void;
   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;
+  };
 }) {
+  const footerLabel = costRunsFooterLabel(locale, pagination !== undefined);
   const total = (key: keyof CostRunRow) => sumNumbers(rows.map((row) => row[key]));
+  const totalTokens = sumNumbers(rows.map(inclusiveTokenTotal));
   const durationTotal = costRunsDurationTotal(rows);
   const show = (select: (row: CostRunRow) => number | string | null) =>
     !compact || isCompactRunColumnVisible(rows, select);
-  return (
+  const table = (
     <DataTable
       columns={[
         {
           key: "startedAt",
           label: locale === "pt-BR" ? "Data e hora" : "Date and time",
           render: (row) => formatDateTime(row.started_at, locale),
-          footer: locale === "pt-BR" ? "Total" : "Total",
+          footer: footerLabel,
         },
         {
           key: "run",
@@ -129,20 +249,12 @@ export function CostRunsTable({
         },
         {
           key: "duration",
-          label: locale === "pt-BR" ? "Tempo de execução" : "Execution time",
-          render: (row) =>
-            row.duration_provenance === "legacy_inferred" ? (
-              <>
-                <span>{formatAuditableDuration(row.duration_ms, locale)}</span>
-                <small>{locale === "pt-BR" ? "Tempo inferido" : "Inferred time"}</small>
-              </>
-            ) : (
-              formatAuditableDuration(row.duration_ms, locale)
-            ),
+          label: locale === "pt-BR" ? "Tempo" : "Time",
+          description: invocationMetricDescription(locale, "duration"),
+          render: (row) => formatInvocationDuration(row.duration_ms, locale),
           sortValue: (row) => row.duration_ms,
           align: "right",
-          footer: formatAuditableDuration(durationTotal, locale),
-          hidden: !show((row) => row.duration_ms),
+          footer: formatInvocationDuration(durationTotal, locale),
         },
         {
           key: "agent",
@@ -182,120 +294,93 @@ export function CostRunsTable({
         },
         {
           key: "inputTokens",
-          label: locale === "pt-BR" ? "Tokens entrada" : "Input tokens",
-          render: (row) => formatAuditableNumber(row.input_tokens, locale),
+          label: locale === "pt-BR" ? "Input total" : "Total input",
+          description: invocationMetricDescription(locale, "inputTokens"),
+          render: (row) => formatInvocationNumber(row.input_tokens, locale),
           sortValue: (row) => row.input_tokens,
           align: "right",
-          footer: formatAuditableNumber(total("input_tokens"), locale),
-          hidden: !show((row) => row.input_tokens),
+          footer: formatInvocationNumber(total("input_tokens"), locale),
         },
         {
           key: "cachedInputTokens",
           label: locale === "pt-BR" ? "Tokens cache" : "Cached tokens",
-          render: (row) => formatAuditableNumber(row.cached_input_tokens, locale),
+          description: invocationMetricDescription(locale, "cachedInputTokens"),
+          render: (row) => formatInvocationNumber(row.cached_input_tokens, locale),
           sortValue: (row) => row.cached_input_tokens,
           align: "right",
-          footer: formatAuditableNumber(total("cached_input_tokens"), locale),
-          hidden: !show((row) => row.cached_input_tokens),
-        },
-        {
-          key: "uncachedInputTokens",
-          label: locale === "pt-BR" ? "Entrada sem cache" : "Uncached input",
-          render: (row) => formatAuditableNumber(row.uncached_input_tokens, locale),
-          sortValue: (row) => row.uncached_input_tokens,
-          align: "right",
-          footer: formatAuditableNumber(total("uncached_input_tokens"), locale),
-          hidden: !show((row) => row.uncached_input_tokens),
+          footer: formatInvocationNumber(total("cached_input_tokens"), locale),
         },
         {
           key: "outputTokens",
-          label: locale === "pt-BR" ? "Tokens saída" : "Output tokens",
-          render: (row) => formatAuditableNumber(row.output_tokens, locale),
+          label: locale === "pt-BR" ? "Output total" : "Total output",
+          description: invocationMetricDescription(locale, "outputTokens"),
+          render: (row) => formatInvocationNumber(row.output_tokens, locale),
           sortValue: (row) => row.output_tokens,
           align: "right",
-          footer: formatAuditableNumber(total("output_tokens"), locale),
-          hidden: !show((row) => row.output_tokens),
+          footer: formatInvocationNumber(total("output_tokens"), locale),
         },
         {
           key: "reasoningTokens",
           label: locale === "pt-BR" ? "Tokens raciocínio" : "Reasoning tokens",
-          render: (row) => formatAuditableNumber(row.reasoning_tokens, locale),
+          description: invocationMetricDescription(locale, "reasoningTokens"),
+          render: (row) => formatInvocationNumber(row.reasoning_tokens, locale),
           sortValue: (row) => row.reasoning_tokens,
           align: "right",
-          footer: formatAuditableNumber(total("reasoning_tokens"), locale),
-          hidden: !show((row) => row.reasoning_tokens),
-        },
-        {
-          key: "visibleOutputTokens",
-          label: locale === "pt-BR" ? "Saída visível" : "Visible output",
-          render: (row) => formatAuditableNumber(row.visible_output_tokens, locale),
-          sortValue: (row) => row.visible_output_tokens,
-          align: "right",
-          footer: formatAuditableNumber(total("visible_output_tokens"), locale),
-          hidden: !show((row) => row.visible_output_tokens),
+          footer: formatInvocationNumber(total("reasoning_tokens"), locale),
         },
         {
           key: "totalTokens",
           label: locale === "pt-BR" ? "Total tokens" : "Total tokens",
+          description: invocationMetricDescription(locale, "totalTokens"),
           render: (row) =>
-            formatAuditableNumber(
-              row.input_tokens !== null && row.output_tokens !== null
-                ? row.input_tokens + row.output_tokens
-                : row.total_tokens,
+            formatInvocationNumber(
+              inclusiveTokenTotal(row),
               locale,
             ),
           sortValue: (row) =>
-            row.input_tokens !== null && row.output_tokens !== null
-              ? row.input_tokens + row.output_tokens
-              : row.total_tokens,
+            inclusiveTokenTotal(row),
           align: "right",
-          footer: formatAuditableNumber(total("total_tokens"), locale),
-          hidden: !show((row) => row.total_tokens),
+          footer: formatInvocationNumber(totalTokens, locale),
         },
         {
           key: "inputRate",
           label: "USD/M entrada",
-          render: (row) => formatRate(row.input_rate_usd_per_million, locale),
+          description: invocationMetricDescription(locale, "inputRate"),
+          render: (row) => formatInvocationRate(row.input_rate_usd_per_million, locale),
           align: "right",
-          hidden: !show((row) => row.input_rate_usd_per_million),
         },
         {
           key: "cacheRate",
           label: "USD/M cache",
-          render: (row) => formatRate(row.cached_input_rate_usd_per_million, locale),
+          description: invocationMetricDescription(locale, "cacheRate"),
+          render: (row) => formatInvocationRate(row.cached_input_rate_usd_per_million, locale),
           align: "right",
-          hidden: !show((row) => row.cached_input_rate_usd_per_million),
         },
         {
           key: "outputRate",
           label: "USD/M saída",
-          render: (row) => formatRate(row.output_rate_usd_per_million, locale),
+          description: invocationMetricDescription(locale, "outputRate"),
+          render: (row) => formatInvocationRate(row.output_rate_usd_per_million, locale),
           align: "right",
-          hidden: !show((row) => row.output_rate_usd_per_million),
         },
         {
           key: "reasoningRate",
           label: "USD/M raciocínio",
-          render: (row) => formatRate(row.reasoning_rate_usd_per_million, locale),
+          description: invocationMetricDescription(locale, "reasoningRate"),
+          render: (row) => formatInvocationRate(row.reasoning_rate_usd_per_million, locale),
           align: "right",
-          hidden: !show((row) => row.reasoning_rate_usd_per_million),
         },
         {
           key: "contextMultiplier",
           label: "Mult. contexto E/S",
-          description: localizedDescription(
-            locale,
-            "Multiplicadores aplicados aos segmentos de uso desta Invocação de Agente quando o limite de contexto do modelo é ultrapassado. O total da invocação agrega os segmentos sem expor cada Chamada LLM.",
-            "Multipliers applied to this Agent Invocation's usage segments when the model context limit is exceeded. The invocation total aggregates segments without exposing each LLM Call.",
-          ),
+          description: invocationMetricDescription(locale, "contextMultiplier"),
           render: (row) =>
-            formatMultiplierPair(
+            formatInvocationMultiplierPair(
               row.context_input_multiplier,
               row.context_output_multiplier,
               locale,
             ),
           align: "right",
-          hidden: !show((row) => row.context_input_multiplier),
         },
         {
           key: "speedMultiplier",
@@ -312,101 +397,96 @@ export function CostRunsTable({
         {
           key: "inputCost",
           label: "USD entrada",
-          render: (row) => formatUsd(row.input_cost_usd, locale),
+          description: invocationMetricDescription(locale, "inputCost"),
+          render: (row) => formatInvocationUsd(row.input_cost_usd, locale),
           align: "right",
-          footer: formatUsd(total("input_cost_usd"), locale),
-          hidden: !show((row) => row.input_cost_usd),
+          footer: formatInvocationUsd(total("input_cost_usd"), locale),
         },
         {
           key: "cacheCost",
           label: "USD cache",
-          render: (row) => formatUsd(row.cached_input_cost_usd, locale),
+          description: invocationMetricDescription(locale, "cacheCost"),
+          render: (row) => formatInvocationUsd(row.cached_input_cost_usd, locale),
           align: "right",
-          footer: formatUsd(total("cached_input_cost_usd"), locale),
-          hidden: !show((row) => row.cached_input_cost_usd),
+          footer: formatInvocationUsd(total("cached_input_cost_usd"), locale),
         },
         {
           key: "outputCost",
           label: "USD saída",
-          render: (row) => formatUsd(row.output_cost_usd, locale),
+          description: invocationMetricDescription(locale, "outputCost"),
+          render: (row) => formatInvocationUsd(row.output_cost_usd, locale),
           align: "right",
-          footer: formatUsd(total("output_cost_usd"), locale),
-          hidden: !show((row) => row.output_cost_usd),
+          footer: formatInvocationUsd(total("output_cost_usd"), locale),
         },
         {
           key: "reasoningCost",
           label: "USD raciocínio",
-          render: (row) => formatUsd(row.reasoning_cost_usd, locale),
+          description: invocationMetricDescription(locale, "reasoningCost"),
+          render: (row) => formatInvocationUsd(row.reasoning_cost_usd, locale),
           align: "right",
-          footer: formatUsd(total("reasoning_cost_usd"), locale),
-          hidden: !show((row) => row.reasoning_cost_usd),
+          footer: formatInvocationUsd(total("reasoning_cost_usd"), locale),
         },
         {
           key: "standardCost",
           label: "USD padrão",
-          render: (row) => formatUsd(row.standard_cost_usd, locale),
+          description: invocationMetricDescription(locale, "standardCost"),
+          render: (row) => formatInvocationUsd(row.standard_cost_usd, locale),
           align: "right",
-          footer: formatUsd(total("standard_cost_usd"), locale),
-          hidden: !show((row) => row.standard_cost_usd),
+          footer: formatInvocationUsd(total("standard_cost_usd"), locale),
         },
         {
           key: "speedUplift",
           label: "USD acréscimo rápido",
-          description: localizedDescription(
-            locale,
-            "Parcela adicional causada pela velocidade Priority/Fast. Este valor já está incluído no custo efetivo e no total; é exibido separadamente apenas para auditoria.",
-            "Additional amount caused by Priority/Fast speed. This value is already included in the effective cost and total; it is shown separately for auditing only.",
-          ),
-          render: (row) => formatUsd(row.speed_uplift_usd, locale),
+          description: invocationMetricDescription(locale, "speedUplift"),
+          render: (row) => formatInvocationUsd(row.speed_uplift_usd, locale),
           align: "right",
-          footer: formatUsd(total("speed_uplift_usd"), locale),
-          hidden: !show((row) => row.speed_uplift_usd),
+          footer: formatInvocationUsd(total("speed_uplift_usd"), locale),
         },
         {
           key: "finalUsd",
           label: locale === "pt-BR" ? "USD estimado API" : "Estimated API USD",
-          render: (row) => formatUsd(row.estimated_usd, locale),
+          description: invocationMetricDescription(locale, "finalUsd"),
+          render: (row) => formatInvocationUsd(row.estimated_usd, locale),
           align: "right",
-          footer: formatUsd(total("estimated_usd"), locale),
-          hidden: !show((row) => row.estimated_usd),
+          footer: formatInvocationUsd(total("estimated_usd"), locale),
         },
         {
           key: "fxRate",
           label: locale === "pt-BR" ? "Cotação atual" : "Current exchange rate",
-          render: (row) => formatBrlRate(row.fx_rate, locale),
+          description: invocationMetricDescription(locale, "fxRate"),
+          render: (row) => formatInvocationBrlRate(row.fx_rate, locale),
           align: "right",
-          hidden: !show((row) => row.fx_rate),
         },
         {
           key: "recordedFxRate",
           label: locale === "pt-BR" ? "Cotação no período" : "Period exchange rate",
-          render: (row) => formatBrlRate(row.recorded_fx_rate, locale),
+          description: invocationMetricDescription(locale, "recordedFxRate"),
+          render: (row) => formatInvocationBrlRate(row.recorded_fx_rate, locale),
           align: "right",
-          hidden: !show((row) => row.recorded_fx_rate),
         },
         {
           key: "recordedBrl",
           label: locale === "pt-BR" ? "Custo Final no Período" : "Period final cost",
-          render: (row) => formatAuditableCurrency(row.recorded_brl, "BRL", locale),
+          description: invocationMetricDescription(locale, "recordedBrl"),
+          render: (row) => formatInvocationCurrency(row.recorded_brl, "BRL", locale),
           align: "right",
-          footer: formatAuditableCurrency(total("recorded_brl"), "BRL", locale),
-          hidden: !show((row) => row.recorded_brl),
+          footer: formatInvocationCurrency(total("recorded_brl"), "BRL", locale),
         },
         {
           key: "cost",
           label: locale === "pt-BR" ? "Custo Final atual" : "Current final cost",
+          description: invocationMetricDescription(locale, "cost"),
           render: (row) => {
             const value = currency === "BRL" ? row.estimated_brl : row.estimated_usd;
-            return formatAuditableCurrency(value, currency, locale);
+            return formatInvocationCurrency(value, currency, locale);
           },
           sortValue: (row) => sortCostValue(currency, row.estimated_brl, row.estimated_usd),
           align: "right",
-          footer: formatAuditableCurrency(
+          footer: formatInvocationCurrency(
             total(currency === "BRL" ? "estimated_brl" : "estimated_usd"),
             currency,
             locale,
           ),
-          hidden: !show((row) => (currency === "BRL" ? row.estimated_brl : row.estimated_usd)),
         },
         {
           key: "trace",
@@ -427,7 +507,7 @@ export function CostRunsTable({
         },
       ]}
       locale={locale}
-      pageSize={100}
+      pageSize={pagination ? null : 100}
       rowKey={(row) => row.run_id}
       onRowClick={(row) => onOpenRun(row.run_id)}
       rows={rows}
@@ -436,156 +516,86 @@ export function CostRunsTable({
       sortable
     />
   );
+  return pagination ? (
+    <>
+      {table}
+      <CostRunServerPagination locale={locale} pagination={pagination} />
+    </>
+  ) : (
+    table
+  );
 }
 
-export function costRunsDurationTotal(rows: readonly CostRunRow[]): number | null {
-  return sumNumbers(durationContributors(rows).map((row) => row.duration_ms));
-}
-
-export function isCompactRunColumnVisible(
-  rows: readonly CostRunRow[],
-  select: (row: CostRunRow) => number | string | null,
-): boolean {
-  return rows.some((row) => {
-    const value = select(row);
-    return value !== null && value !== 0 && value !== "";
-  });
-}
-
-export function formatRate(value: number | null, locale: CostLocale): string {
-  if (value === null) return unavailableMetricLabel(locale);
-  return new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(value);
-}
-
-export function formatBrlRate(value: number | null, locale: CostLocale): string {
-  if (value === null) return unavailableMetricLabel(locale);
-  return `R$ ${new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(value)}`;
-}
-
-export function formatUsd(value: number | null, locale: CostLocale): string {
-  if (value === null) return unavailableMetricLabel(locale);
-  return new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(value);
-}
-
-function formatMultiplier(value: number | null, locale: CostLocale): string {
-  return value === null
-    ? unavailableMetricLabel(locale)
-    : `${value.toLocaleString("en-US", { maximumFractionDigits: 3 })}×`;
-}
-
-export function formatMultiplierPair(
-  input: number | null,
-  output: number | null,
-  locale: CostLocale,
-): string {
-  if (input === null || output === null) return unavailableMetricLabel(locale);
-  return `${formatMultiplier(input, locale)} / ${formatMultiplier(output, locale)}`;
-}
-
-function formatRuntimeDetail(
-  value: string | null,
-  kind: "effort" | "speed",
-  locale: CostLocale,
-): string {
-  if (value === null || value.trim() === "" || value.trim().toLowerCase() === "unknown") return "-";
-  if (locale !== "pt-BR") return value;
-  const labels: Record<string, string> = {
-    low: "Leve",
-    medium: "Médio",
-    high: "Alto",
-    xhigh: "Extra alto",
-    max: "Ultra",
-    default: kind === "speed" ? "Padrão" : "Padrão",
-    priority: "Rápido",
-  };
-  return labels[value] ?? value;
-}
-
-export function formatReasoningEffort(
-  effective: string | null,
-  requested: string | null,
-  locale: CostLocale,
-): string {
-  const effectiveValue = normalizedRuntimeValue(effective);
-  if (effectiveValue !== null) return formatRuntimeDetail(effectiveValue, "effort", locale);
-  const requestedValue = normalizedRuntimeValue(requested);
-  if (requestedValue === null) return "-";
-  const formatted = formatRuntimeDetail(requestedValue, "effort", locale);
-  return locale === "pt-BR"
-    ? `${formatted} (solicitado; efetivo -)`
-    : `${formatted} (requested; effective -)`;
-}
-
-export function formatServiceTier(value: string | null, locale: CostLocale): string {
-  const normalized = normalizedRuntimeValue(value);
-  if (normalized === null) return locale === "pt-BR" ? "Padrão" : "Standard";
-  return formatRuntimeDetail(normalized, "speed", locale);
-}
-
-function normalizedRuntimeValue(value: string | null): string | null {
-  const normalized = value?.trim() ?? "";
-  return normalized === "" || normalized.toLowerCase() === "unknown" ? null : normalized;
-}
-
-export function costRunsScrollLabel(locale: CostLocale): string {
-  return locale === "pt-BR"
-    ? "Tabela de custos por invocação com rolagem horizontal"
-    : "Agent invocation costs table with horizontal scrolling";
-}
-
-export function costGroupsScrollLabel(locale: CostLocale): string {
-  return locale === "pt-BR"
-    ? "Tabela de custos agrupados com rolagem horizontal"
-    : "Grouped costs table with horizontal scrolling";
-}
-
-export function formatDateTime(value: string, locale: CostLocale): string {
-  if (!value || Number.isNaN(Date.parse(value))) return "—";
-  return new Intl.DateTimeFormat(locale, {
-    dateStyle: "short",
-    timeStyle: "medium",
-  }).format(new Date(value));
-}
-
-export function formatCostPeriodLabel(
-  value: string,
-  period: "daily" | "monthly" | "annual",
-  locale: CostLocale,
-): string {
-  if (period === "annual") return value.slice(0, 4);
-  if (period === "monthly") return value.slice(0, 7);
-  const date = new Date(`${value}T12:00:00.000Z`);
-  if (Number.isNaN(date.getTime())) return value;
-  return new Intl.DateTimeFormat(locale, { dateStyle: "short", timeZone: "UTC" }).format(date);
+function inclusiveTokenTotal(
+  row: Pick<CostRunRow, "input_tokens" | "output_tokens" | "total_tokens">,
+): number | null {
+  return row.input_tokens !== null && row.output_tokens !== null
+    ? row.input_tokens + row.output_tokens
+    : row.total_tokens;
 }
 
-export function costPeriodTotalAriaLabel({
+function CostRunServerPagination({
   locale,
-  duration,
-  tokens,
-  cost,
-  currency,
+  pagination,
 }: {
   locale: CostLocale;
-  duration: string;
-  tokens: string;
-  cost: string;
-  currency: CostCurrency;
-}): string {
-  return locale === "pt-BR"
-    ? `Total geral — Tempo: ${duration}; Tokens: ${tokens}; ${currency}: ${cost}`
-    : `Grand total — Time: ${duration}; Tokens: ${tokens}; Cost (${currency}): ${cost}`;
+  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";
+  }
+  return period === "daily" ? "Dia" : period === "monthly" ? "Mês" : "Ano";
 }
 
 export function CostGroupsTable({
@@ -595,8 +605,11 @@ export function CostGroupsTable({
   onOpenTrace,
   period,
   showDateTime = true,
+  showAgentIdentity = false,
+  showInvocationTasks = false,
   dateHeading,
   labelHeading,
+  totals: suppliedTotals,
 }: {
   rows: readonly CostGroupRow[];
   currency: CostCurrency;
@@ -604,19 +617,15 @@ export function CostGroupsTable({
   onOpenTrace?: (taskId: string) => void;
   period?: "daily" | "monthly" | "annual";
   showDateTime?: boolean;
+  showAgentIdentity?: boolean;
+  showInvocationTasks?: boolean;
   dateHeading?: string;
   labelHeading?: string;
+  totals?: CostGroupTotals;
 }) {
-  const totals = {
+  const pageTotals = {
     runs: rows.reduce((sum, row) => sum + row.run_count, 0),
-    tasks: rows.reduce(
-      (sum, row) =>
-        sum +
-        (period === undefined
-          ? row.task_count
-          : (row.taskDaysActive ?? row.tasksActive ?? row.task_count)),
-      0,
-    ),
+    tasks: rows.reduce((sum, row) => sum + (row.task_count ?? 0), 0),
     prds: rows.reduce((sum, row) => sum + row.prd_count, 0),
     specs: rows.reduce((sum, row) => sum + row.spec_count, 0),
     evidences: rows.reduce((sum, row) => sum + row.evidence_count, 0),
@@ -627,11 +636,30 @@ export function CostGroupsTable({
     usd: sumNumbers(rows.map((row) => row.estimated_usd)),
     brl: sumNumbers(rows.map((row) => row.estimated_brl)),
   };
-  const totalDurationDisplay = !totals.durationPartial
-    ? formatAuditableDuration(totals.durationKnownMs, locale)
-    : totals.durationKnownMs === 0
-      ? unavailableMetricLabel(locale)
-      : formatDurationMs(totals.durationKnownMs, locale);
+  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,
+      unknown: totals.durationPartial ? 1 : 0,
+      complete: !totals.durationPartial,
+      // Group-level coverage is intentionally preserved separately from the
+      // factual known sum. Individual rows retain their original provenance.
+      coverage_ratio: totals.durationPartial ? 0 : 1,
+    },
+    locale,
+  );
   const totalTokensDisplay = formatAuditableCompactNumber(totals.tokens, locale);
   const totalCostDisplay = formatAuditableCurrency(
     currency === "BRL" ? totals.brl : totals.usd,
@@ -656,52 +684,55 @@ export function CostGroupsTable({
           hidden: !showDateTime,
           footer: showDateTime ? <output aria-label={totalLabel}>Total</output> : undefined,
         },
+        ...(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: "label",
           label:
             period === undefined
               ? (labelHeading ?? (locale === "pt-BR" ? "Grupo" : "Group"))
-              : locale === "pt-BR"
-                ? "Período"
-                : "Period",
-          render: (row) =>
-            period === undefined ? (
+              : costPeriodHeading(period, locale),
+          render: (row) => {
+            if (period !== undefined) {
+              return <strong>{formatCostPeriodLabel(row.key, period, locale)}</strong>;
+            }
+            const displayLabel = displayCostGroupLabel(row.label, locale);
+            const unavailableLabel = displayLabel !== row.label;
+            return (
               <>
-                <strong>{row.label}</strong>
-                {row.key === row.label ? null : <small>{row.key}</small>}
+                <strong>{displayLabel}</strong>
+                {unavailableLabel || row.key === row.label ? null : <small>{row.key}</small>}
               </>
-            ) : (
-              <strong>{formatCostPeriodLabel(row.key, period, locale)}</strong>
-            ),
+            );
+          },
           sortValue: (row) => row.key,
           footer: showDateTime ? undefined : <output aria-label={totalLabel}>Total</output>,
         },
-        {
-          key: "runs",
-          label: locale === "pt-BR" ? "Invocações" : "Agent invocations",
-          render: (row) => row.run_count,
-          align: "right",
-          footer: totals.runs,
-        },
-        {
-          key: "tasks",
-          label:
-            period === undefined
-              ? locale === "pt-BR"
-                ? "Tarefas ativas"
-                : "Active tasks"
-              : locale === "pt-BR"
-                ? "Dias-tarefa ativos"
-                : "Active task-days",
-          render: (row) =>
-            period === undefined
-              ? row.task_count
-              : (row.taskDaysActive ?? row.tasksActive ?? row.task_count),
-          align: "right",
-          footer: totals.tasks,
-        },
         ...(period === undefined
-          ? []
+          ? [
+              {
+                key: "runs",
+                label: locale === "pt-BR" ? "Invocações" : "Agent invocations",
+                render: (row: CostGroupRow) => row.run_count,
+                align: "right" as const,
+                footer: totals.runs,
+              },
+              ...(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: "prds",
@@ -718,25 +749,39 @@ export function CostGroupsTable({
                 footer: totals.specs,
               },
               {
-                key: "evidences",
-                label: locale === "pt-BR" ? "Evidências" : "Evidence",
-                render: (row: CostGroupRow) => row.evidence_count,
+                key: "tasks",
+                label: locale === "pt-BR" ? "Tarefas criadas" : "Tasks created",
+                render: (row: CostGroupRow) => row.task_count ?? 0,
                 align: "right" as const,
-                footer: totals.evidences,
+                footer: totals.tasks,
+              },
+              {
+                key: "runs",
+                label: "Runs",
+                render: (row: CostGroupRow) => row.run_count,
+                align: "right" as const,
+                footer: totals.runs,
               },
               {
                 key: "tests",
-                label: "Tests",
+                label: locale === "pt-BR" ? "Testes" : "Tests",
                 render: (row: CostGroupRow) => row.test_count,
                 align: "right" as const,
                 footer: totals.tests,
               },
+              {
+                key: "evidences",
+                label: locale === "pt-BR" ? "Evidências" : "Evidence",
+                render: (row: CostGroupRow) => row.evidence_count,
+                align: "right" as const,
+                footer: totals.evidences,
+              },
             ]),
         {
           key: "duration",
           label: "Tempo",
-          render: (row) => formatDurationCoverage(row.duration, locale),
-          sortValue: (row) => (row.duration.coverage_ratio > 0 ? row.duration.known_sum : null),
+          render: (row) => formatTokenBackedDuration(row.duration, row.total_tokens, locale),
+          sortValue: (row) => (hasKnownDuration(row.duration) ? row.duration.known_sum : null),
           align: "right",
           footer: <output aria-label={totalAriaLabel}>{totalDurationDisplay}</output>,
         },
@@ -750,7 +795,14 @@ export function CostGroupsTable({
         },
         {
           key: "cost",
-          label: locale === "pt-BR" ? "Custo" : "Cost",
+          label:
+            period === undefined
+              ? locale === "pt-BR"
+                ? "Custo"
+                : "Cost"
+              : locale === "pt-BR"
+                ? "Custos"
+                : "Costs",
           render: (row) =>
             formatAuditableCurrency(
               currency === "BRL" ? row.estimated_brl : row.estimated_usd,