@zaip-ai/cli 1.0.7 → 1.3.0

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

@@ -0,0 +1,290 @@
+import {
+  DataTable,
+  formatCompactNumber,
+  formatCurrency,
+  formatDurationMs,
+} from "@zaip-ai/dashboard-ui";
+import { estimatedDurationMs } from "../duration-estimate.js";
+import type { CostLocale } from "./cost-monitor-copy.js";
+import { formatDateTime } from "./cost-table-presentation.js";
+
+export interface CompactLifecycleCostRow {
+  id: string;
+  title: string;
+  kind: "task" | "spec" | "prd" | "execution" | "conversation";
+  status: string | null;
+  risk: string | null;
+  occurred_at: string;
+  window_at?: string;
+  parent_id: string | null;
+  run_count: number;
+  cost_currency: string | null;
+  metrics: {
+    duration: KnownMetric;
+    total_tokens: KnownMetric;
+    cost: KnownMetric;
+  };
+}
+
+interface KnownMetric {
+  known_sum: number;
+  unknown: number;
+  complete: boolean;
+  coverage_ratio: number;
+}
+
+export interface CompactLifecycleCostSubtotal {
+  entity_count: number;
+  run_count: KnownMetric;
+  metrics: {
+    duration: KnownMetric;
+    total_tokens: KnownMetric;
+    cost_brl: KnownMetric;
+    cost_usd: KnownMetric;
+  };
+}
+
+export interface CompactLifecycleCostPage {
+  data_source: "lifecycle_daily_read_models";
+  snapshot_id: string | null;
+  source_latest_at: string | null;
+  kind: "tasks" | "specs" | "prds" | "executions" | "conversations";
+  offset: number;
+  limit: number;
+  total: number;
+  has_more: boolean;
+  next_cursor: string | null;
+  subtotal: CompactLifecycleCostSubtotal;
+  rows: readonly CompactLifecycleCostRow[];
+}
+
+interface CompactPagination {
+  offset: number;
+  limit: number;
+  total: number | null;
+  has_more: boolean;
+  loading: boolean;
+  error: string | null;
+  onChange: (offset: number) => void;
+  onRetry: () => void;
+}
+
+export function CompactLifecycleCostTable({
+  rows,
+  locale,
+  pagination,
+  subtotal,
+  onOpenTrace,
+}: {
+  rows: readonly CompactLifecycleCostRow[];
+  locale: CostLocale;
+  pagination: CompactPagination;
+  subtotal: CompactLifecycleCostSubtotal | null;
+  onOpenTrace?: (id: string) => void;
+}) {
+  const metric = (value: KnownMetric, format: (known: number) => string) => {
+    return format(value.known_sum ?? 0);
+  };
+  const durationMetric = (row: CompactLifecycleCostRow) => {
+    const value = row.metrics.duration;
+    const effective = compactLifecycleDurationMs(row);
+    if (effective === null || (value.unknown > 0 && effective === 0)) return "0";
+    return formatDurationMs(effective, locale);
+  };
+  const subtotalMetric = (value: KnownMetric, format: (known: number) => string) => {
+    if (subtotal === null) return undefined;
+    return format(value.known_sum ?? 0);
+  };
+  const subtotalMetricUnavailable = (value: KnownMetric) =>
+    value.unknown > 0 && value.known_sum === 0;
+  const showSubtotal =
+    subtotal !== null &&
+    ![
+      subtotal.run_count,
+      subtotal.metrics.duration,
+      subtotal.metrics.total_tokens,
+      subtotal.metrics.cost_brl,
+    ].every(subtotalMetricUnavailable);
+  const number = (value: number) => new Intl.NumberFormat(locale).format(value);
+  const subtotalLabel = !showSubtotal
+    ? undefined
+    : subtotal === null
+      ? "Total"
+      : `${locale === "pt-BR" ? "Subtotal filtrado" : "Filtered subtotal"} · ${number(subtotal.entity_count)} ${locale === "pt-BR" ? "registros" : "records"}`;
+  const subtotalCost =
+    !showSubtotal || subtotal === null
+      ? undefined
+      : subtotalMetric(subtotal.metrics.cost_brl, (brl) => formatCurrency(brl, "BRL", locale));
+  return (
+    <>
+      <DataTable
+        columns={[
+          {
+            key: "occurredAt",
+            label: locale === "pt-BR" ? "Última atividade" : "Last activity",
+            render: (row) => formatDateTime(row.occurred_at, locale),
+            footer: subtotalLabel,
+          },
+          {
+            key: "entity",
+            label: locale === "pt-BR" ? "Registro" : "Record",
+            render: (row) => (
+              <>
+                <strong>{row.title}</strong>
+                <small>{row.id}</small>
+              </>
+            ),
+            footer: !showSubtotal || subtotal === null ? undefined : number(subtotal.entity_count),
+          },
+          { key: "status", label: "Status", render: (row) => row.status ?? "—" },
+          {
+            key: "runs",
+            label: locale === "pt-BR" ? "Invocações" : "Invocations",
+            render: (row) => new Intl.NumberFormat(locale).format(row.run_count),
+            align: "right",
+            footer:
+              !showSubtotal || subtotal === null
+                ? undefined
+                : subtotalMetric(subtotal.run_count, number),
+          },
+          {
+            key: "duration",
+            label: locale === "pt-BR" ? "Tempo observado" : "Observed time",
+            render: durationMetric,
+            align: "right",
+            footer:
+              !showSubtotal || subtotal === null
+                ? undefined
+                : subtotalMetric(subtotal.metrics.duration, (value) =>
+                    value === 0 ? "0" : formatDurationMs(value, locale),
+                  ),
+          },
+          {
+            key: "tokens",
+            label: "Tokens",
+            render: (row) =>
+              metric(row.metrics.total_tokens, (value) => formatCompactNumber(value, locale)),
+            align: "right",
+            footer:
+              !showSubtotal || subtotal === null
+                ? undefined
+                : subtotalMetric(subtotal.metrics.total_tokens, (value) =>
+                    formatCompactNumber(value, locale),
+                  ),
+          },
+          {
+            key: "cost",
+            label: locale === "pt-BR" ? "Custo registrado" : "Recorded cost",
+            render: (row) =>
+              metric(row.metrics.cost, (value) =>
+                row.cost_currency === "BRL" || row.cost_currency === "USD"
+                  ? formatCurrency(value, row.cost_currency, locale)
+                  : new Intl.NumberFormat(locale).format(value),
+              ),
+            align: "right",
+            footer: subtotalCost,
+          },
+          ...(onOpenTrace === undefined
+            ? []
+            : [
+                {
+                  key: "trace",
+                  label: "",
+                  render: (row: CompactLifecycleCostRow) => (
+                    <button onClick={() => onOpenTrace(row.id)} type="button">
+                      {locale === "pt-BR" ? "Abrir" : "Open"}
+                    </button>
+                  ),
+                },
+              ]),
+        ]}
+        locale={locale}
+        pageSize={null}
+        rowKey={(row) => row.id}
+        rows={rows}
+        sortable
+      />
+      <CompactLifecyclePagination locale={locale} pagination={pagination} />
+    </>
+  );
+}
+
+export function compactLifecycleDurationMs(row: CompactLifecycleCostRow): number | null {
+  return withTokenBackedCompactDuration(row).metrics.duration.known_sum;
+}
+
+export function withTokenBackedCompactDuration(
+  row: CompactLifecycleCostRow,
+): CompactLifecycleCostRow {
+  const duration = row.metrics.duration;
+  const tokenTotal = row.metrics.total_tokens.known_sum;
+  if (tokenTotal <= 0 || duration.known_sum > 0) return row;
+  const durationMs = estimatedDurationMs(tokenTotal);
+  if (durationMs === null || durationMs <= 0) return row;
+  return {
+    ...row,
+    metrics: {
+      ...row.metrics,
+      duration: { known_sum: durationMs, unknown: 0, complete: true, coverage_ratio: 1 },
+    },
+  };
+}
+
+function CompactLifecyclePagination({
+  locale,
+  pagination,
+}: {
+  locale: CostLocale;
+  pagination: CompactPagination;
+}) {
+  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 dos dados agregados" : "Aggregate data 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 dados…"
+            : "Loading data…"
+          : 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>
+  );
+}

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

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 import type { CostGroupRow } from "../contracts.js";
-import { costChartsCopy, lastSevenDays, modelsWithObservedCost } from "./CostCharts.js";
+import {
+  chartPhaseMetrics,
+  chartTokenMix,
+  costChartsCopy,
+  lastSevenDays,
+  modelsWithObservedCost,
+} from "./CostCharts.js";
 
 describe("costChartsCopy", () => {
   it("provides complete English chart copy", () => {
@@ -16,10 +22,11 @@ describe("costChartsCopy", () => {
       tokenMix: "Token mix",
       phases: "PHASES",
       totalsByPhase: "Totals by phase",
-      input: "Input",
-      cache: "Cache",
-      output: "Output",
+      inputWithoutCache: "Uncached input",
+      cachedInput: "Cached input",
+      visibleOutput: "Visible output",
       reasoning: "Reasoning",
+      total: "Total (input + output)",
     });
   });
 
@@ -31,33 +38,36 @@ describe("costChartsCopy", () => {
       composition: "COMPOSIÇÃO",
       tokenMix: "Mix de tokens",
       phases: "FASES",
-      input: "Entrada",
-      output: "Saída",
+      inputWithoutCache: "Input sem cache",
+      visibleOutput: "Output visível",
       reasoning: "Raciocínio",
+      total: "Total (input + output)",
     });
   });
 });
 
 describe("lastSevenDays", () => {
-  it("returns today and the six preceding calendar days, filling missing costs with zero", () => {
+  it("uses the last daily buckets from the active interval", () => {
     const rows = [
       { key: "2026-07-10", estimated_brl: 12.5, estimated_usd: 2.3 },
       { key: "2026-07-15", estimated_brl: 8, estimated_usd: 1.5 },
       { key: "2026-07-08", estimated_brl: 99, estimated_usd: 18 },
     ] as CostGroupRow[];
 
-    const result = lastSevenDays(rows, "BRL", new Date(2026, 6, 15, 12));
+    const result = lastSevenDays(rows, "BRL");
 
-    expect(result.map((day) => day.key)).toEqual([
-      "2026-07-09",
-      "2026-07-10",
-      "2026-07-11",
-      "2026-07-12",
-      "2026-07-13",
-      "2026-07-14",
-      "2026-07-15",
-    ]);
-    expect(result.map((day) => day.value)).toEqual([0, 12.5, 0, 0, 0, 0, 8]);
+    expect(result.map((day) => day.key)).toEqual(["2026-07-08", "2026-07-10", "2026-07-15"]);
+    expect(result.map((day) => day.value)).toEqual([99, 12.5, 8]);
+  });
+
+  it("keeps a present daily bucket with unavailable cost distinct from an absent day", () => {
+    const result = lastSevenDays(
+      [{ key: "2026-07-15", estimated_brl: null, estimated_usd: null }] as CostGroupRow[],
+      "BRL",
+    );
+
+    expect(result.at(-1)?.value).toBeNull();
+    expect(result).toHaveLength(1);
   });
 });
 
@@ -70,6 +80,110 @@ describe("modelsWithObservedCost", () => {
     ] as unknown as Parameters<typeof modelsWithObservedCost>[0];
 
     expect(modelsWithObservedCost(rows, "BRL").map((row) => row.key)).toEqual(["sol"]);
-    expect(modelsWithObservedCost(rows, "USD").map((row) => row.key)).toEqual(["sol", "gpt-5"]);
+    expect(modelsWithObservedCost(rows, "USD").map((row) => row.key)).toEqual(["gpt-5", "sol"]);
+  });
+});
+
+describe("aggregate-only overview metrics", () => {
+  it("uses inclusive input/output totals for token mix and phases when the Run transport is intentionally empty", () => {
+    const usage = {
+      conversation: metric({ input: 10, cached_input: 1, output: 5, reasoning: 3, total: 15 }, 2),
+      planning: metric({ input: 20, cached_input: 2, output: 10, reasoning: 6, total: 30 }, 3),
+      execution: metric(
+        { input: 30, cached_input: 3, output: 15, reasoning: 9, total: 45 },
+        4,
+        12_000,
+      ),
+      total: metric({ input: 60, cached_input: 6, output: 30, reasoning: 18, total: 90 }, 9),
+    };
+
+    expect(chartTokenMix([], usage, costChartsCopy("pt-BR")).map(([, value]) => value)).toEqual([
+      54, 6, 12, 18, 90,
+    ]);
+    expect(chartPhaseMetrics("execution", [], usage, "BRL")).toEqual({
+      duration: 12_000,
+      tokens: 45,
+      cost: 4,
+    });
+  });
+
+  it("keeps observed duration zero distinct from unavailable aggregate duration", () => {
+    const base = {
+      conversation: metric({ input: 0, cached_input: 0, output: 0, reasoning: 0, total: 0 }, 0),
+      planning: metric({ input: 0, cached_input: 0, output: 0, reasoning: 0, total: 0 }, 0),
+      total: metric({ input: 0, cached_input: 0, output: 0, reasoning: 0, total: 0 }, 0),
+    };
+    expect(
+      chartPhaseMetrics(
+        "execution",
+        [],
+        {
+          ...base,
+          execution: metric({ input: 0, cached_input: 0, output: 0, reasoning: 0, total: 0 }, 0, 0),
+        },
+        "BRL",
+      ).duration,
+    ).toBe(0);
+    expect(
+      chartPhaseMetrics(
+        "execution",
+        [],
+        {
+          ...base,
+          execution: metric(
+            { input: 0, cached_input: 0, output: 0, reasoning: 0, total: 0 },
+            0,
+            null,
+          ),
+        },
+        "BRL",
+      ).duration,
+    ).toBeNull();
+  });
+
+  it("marks an invalid cached or reasoning subset unavailable without changing inclusive totals", () => {
+    const usage = {
+      total: metric({ input: 4, cached_input: 5, output: 6, reasoning: 7, total: 10 }, 1),
+    };
+    expect(chartTokenMix([], usage, costChartsCopy("en-US"))).toEqual([
+      ["Uncached input", null],
+      ["Cached input", null],
+      ["Visible output", null],
+      ["Reasoning", null],
+      ["Total (input + output)", 10],
+    ]);
+  });
+
+  it("preserves canonical output when a partial source total diverges", () => {
+    const usage = {
+      total: metric(
+        {
+          input: 400_000,
+          cached_input: 390_000,
+          output: 30_000,
+          reasoning: 10_000,
+          total: 445_099,
+        },
+        1,
+      ),
+    };
+
+    expect(chartTokenMix([], usage, costChartsCopy("pt-BR")).map(([, value]) => value)).toEqual([
+      10_000, 390_000, 20_000, 10_000, 430_000,
+    ]);
   });
 });
+
+function metric(
+  tokens: { input: number; cached_input: number; output: number; reasoning: number; total: number },
+  brl: number,
+  duration_ms: number | null = null,
+) {
+  return {
+    events: 1,
+    duration_ms,
+    tokens,
+    cost: { usd: brl / 5, brl },
+    coverage: { events: 1, tokens: 1, usd: 1, brl: 1 },
+  };
+}