@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,260 @@
+import { formatCompactNumber, formatCurrency, formatDurationMs } from "@zaip-ai/dashboard-ui";
+import type { CostGroupRow, CostRunRow } from "../contracts.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+
+const colors = ["#00b0f0", "#5ea7ff", "#a78bfa", "#f5c451", "#fb7185", "#94a3b8"];
+
+export function CostCharts({
+  rows,
+  daily,
+  models,
+  currency,
+  locale,
+}: {
+  rows: readonly CostRunRow[];
+  daily: readonly CostGroupRow[];
+  models: readonly CostGroupRow[];
+  currency: CostCurrency;
+  locale: CostLocale;
+}) {
+  const copy = costChartsCopy(locale);
+  const tokenMix = [
+    [copy.input, observed(rows.map((row) => row.input_tokens))],
+    [copy.cache, observed(rows.map((row) => row.cached_input_tokens))],
+    [copy.output, observed(rows.map((row) => row.output_tokens))],
+    [copy.reasoning, observed(rows.map((row) => row.reasoning_tokens))],
+  ] as const;
+  const availableModels = modelsWithObservedCost(models, currency);
+  const maxModel = Math.max(1, ...availableModels.map((row) => cost(row, currency) ?? 0));
+  const sevenDays = lastSevenDays(daily, currency);
+  const maxDaily = Math.max(1, ...sevenDays.map((day) => day.value));
+  const trendPoints = sevenDays.map((day, index) => ({
+    ...day,
+    x: (index / (sevenDays.length - 1)) * 100,
+    y: 82 - (day.value / maxDaily) * 58,
+  }));
+  const points = trendPoints.map((point) => `${point.x},${point.y}`).join(" ");
+  return (
+    <section className="cost-chart-grid" aria-label={copy.analyticsView}>
+      <article className="cost-chart cost-chart-trend">
+        <header>
+          <div>
+            <small>{copy.trend}</small>
+            <h2>{copy.dailyCost}</h2>
+          </div>
+          <strong>{copy.sevenDays}</strong>
+        </header>
+        <div className="cost-trend-plot">
+          <svg
+            className="cost-line-chart"
+            role="img"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+          >
+            <title>{copy.dailyCostChart}</title>
+            <defs>
+              <linearGradient id="cost-area" x1="0" x2="0" y1="0" y2="1">
+                <stop stopColor="#00b0f0" stopOpacity=".34" />
+                <stop offset="1" stopColor="#00b0f0" stopOpacity="0" />
+              </linearGradient>
+            </defs>
+            <polygon fill="url(#cost-area)" points={`0,100 ${points} 100,100`} />
+            <polyline
+              fill="none"
+              points={points}
+              stroke="#00b0f0"
+              strokeWidth="2"
+              vectorEffect="non-scaling-stroke"
+            />
+          </svg>
+          {trendPoints.map((point, index) => (
+            <span
+              className={`cost-trend-value${index === 0 ? " is-first" : index === trendPoints.length - 1 ? " is-last" : ""}`}
+              key={point.key}
+              style={{ left: `${point.x}%`, top: `${point.y}%` }}
+            >
+              {formatCurrency(point.value, currency, locale)}
+            </span>
+          ))}
+        </div>
+        <div className="cost-trend-days">
+          {trendPoints.map((point) => (
+            <span key={point.key}>{formatTrendDay(point.date, locale)}</span>
+          ))}
+        </div>
+      </article>
+      <article className="cost-chart cost-chart-model">
+        <header>
+          <div>
+            <small>{copy.distribution}</small>
+            <h2>{copy.costByModel}</h2>
+          </div>
+        </header>
+        <div className="cost-bar-list">
+          {availableModels.slice(0, 6).map((row, index) => (
+            <div key={row.key}>
+              <span>{row.label}</span>
+              <i>
+                <b
+                  style={{
+                    width: `${((cost(row, currency) ?? 0) / maxModel) * 100}%`,
+                    background: colors[index],
+                  }}
+                />
+              </i>
+              <strong>{formatCurrency(cost(row, currency), currency, locale)}</strong>
+            </div>
+          ))}
+        </div>
+      </article>
+      <article className="cost-chart">
+        <header>
+          <div>
+            <small>{copy.composition}</small>
+            <h2>{copy.tokenMix}</h2>
+          </div>
+        </header>
+        <div className="token-mix">
+          {tokenMix.map(([label, value], index) => (
+            <div key={label}>
+              <i style={{ background: colors[index] }} />
+              <span>{label}</span>
+              <strong>{formatCompactNumber(value, locale)}</strong>
+            </div>
+          ))}
+        </div>
+      </article>
+      <article className="cost-chart cost-chart-phases">
+        <header>
+          <div>
+            <small>{copy.phases}</small>
+            <h2>{copy.totalsByPhase}</h2>
+          </div>
+        </header>
+        <div className="phase-strip">
+          {(["conversation", "planning", "execution"] as const).map((phase, index) => {
+            const phaseRows = rows.filter((row) => row.phase === phase);
+            const duration = observed(phaseRows.map((row) => row.duration_ms));
+            const tokens = observed(phaseRows.map((row) => row.total_tokens));
+            const phaseCost = observed(
+              phaseRows.map((row) => (currency === "BRL" ? row.estimated_brl : row.estimated_usd)),
+            );
+            return (
+              <div key={phase}>
+                <div className="phase-name">
+                  <i style={{ background: colors[index] }} />
+                  <span>{phaseLabel(phase, locale)}</span>
+                </div>
+                <dl className="phase-metrics">
+                  <div>
+                    <dt>{locale === "pt-BR" ? "Tempo" : "Time"}</dt>
+                    <dd>{formatDurationMs(duration, locale)}</dd>
+                  </div>
+                  <div>
+                    <dt>Tokens</dt>
+                    <dd>{formatCompactNumber(tokens, locale)}</dd>
+                  </div>
+                  <div>
+                    <dt>{locale === "pt-BR" ? "Custo" : "Cost"}</dt>
+                    <dd>{formatCurrency(phaseCost, currency, locale)}</dd>
+                  </div>
+                </dl>
+              </div>
+            );
+          })}
+        </div>
+      </article>
+    </section>
+  );
+}
+
+export function costChartsCopy(locale: CostLocale) {
+  return locale === "pt-BR"
+    ? {
+        analyticsView: "Visão analítica",
+        trend: "TENDÊNCIA",
+        dailyCost: "Custo diário",
+        sevenDays: "7 dias",
+        dailyCostChart: "Custo diário dos últimos 7 dias",
+        distribution: "DISTRIBUIÇÃO",
+        costByModel: "Custo por modelo",
+        composition: "COMPOSIÇÃO",
+        tokenMix: "Mix de tokens",
+        phases: "FASES",
+        totalsByPhase: "Totais por fase",
+        input: "Entrada",
+        cache: "Cache",
+        output: "Saída",
+        reasoning: "Raciocínio",
+      }
+    : {
+        analyticsView: "Analytics overview",
+        trend: "TREND",
+        dailyCost: "Daily cost",
+        sevenDays: "7 days",
+        dailyCostChart: "Daily cost for the last 7 days",
+        distribution: "DISTRIBUTION",
+        costByModel: "Cost by model",
+        composition: "COMPOSITION",
+        tokenMix: "Token mix",
+        phases: "PHASES",
+        totalsByPhase: "Totals by phase",
+        input: "Input",
+        cache: "Cache",
+        output: "Output",
+        reasoning: "Reasoning",
+      };
+}
+
+function phaseLabel(phase: "conversation" | "planning" | "execution", locale: CostLocale) {
+  if (locale === "en-US")
+    return phase === "conversation"
+      ? "Conversation"
+      : phase === "planning"
+        ? "Planning"
+        : "Execution";
+  return phase === "conversation" ? "Conversa" : phase === "planning" ? "Planejamento" : "Execução";
+}
+
+function cost(row: CostGroupRow, currency: CostCurrency) {
+  return currency === "BRL" ? row.estimated_brl : row.estimated_usd;
+}
+
+export function modelsWithObservedCost(models: readonly CostGroupRow[], currency: CostCurrency) {
+  return models.filter((row) => cost(row, currency) !== null);
+}
+
+export function lastSevenDays(
+  daily: readonly CostGroupRow[],
+  currency: CostCurrency,
+  now = new Date(),
+) {
+  const values = new Map(daily.map((row) => [row.key, cost(row, currency) ?? 0]));
+  return Array.from({ length: 7 }, (_, index) => {
+    const date = new Date(now.getFullYear(), now.getMonth(), now.getDate() - (6 - index));
+    const key = localDateKey(date);
+    return { date, key, value: values.get(key) ?? 0 };
+  });
+}
+
+function localDateKey(date: Date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function formatTrendDay(date: Date, locale: CostLocale) {
+  return new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+    day: "2-digit",
+    month: "2-digit",
+  })
+    .format(date)
+    .replace(".", "");
+}
+
+function observed(values: readonly (number | null)[]): number | null {
+  const present = values.filter((value): value is number => value !== null);
+  return present.length ? present.reduce((sum, value) => sum + value, 0) : null;
+}

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

@@ -0,0 +1,351 @@
+import { saoPauloPeriodKey } from "@zaip-ai/dashboard-operations/contracts";
+import { useEffect, useRef, useState } from "react";
+import type { CostMonitorProjection } from "../contracts.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+
+export type CostPeriod = "all" | "7" | "30" | "90" | "month";
+export const defaultCostPeriod: CostPeriod = "all";
+
+export function costPeriodDateRange(
+  period: CostPeriod,
+  now = new Date(),
+): { from: string; to: string } | undefined {
+  if (Number.isNaN(now.getTime())) throw new RangeError("Invalid Cost Monitor period anchor");
+  const to = saoPauloPeriodKey(now.toISOString(), "day");
+  if (to === null) throw new RangeError("Invalid Cost Monitor period anchor");
+  if (period === "all") return undefined;
+  if (period === "month") return { from: `${to.slice(0, 7)}-01`, to };
+  const from = new Date(`${to}T12:00:00.000Z`);
+  from.setUTCDate(from.getUTCDate() - (Number(period) - 1));
+  return { from: saoPauloPeriodKey(from.toISOString(), "day") ?? to, to };
+}
+
+export async function loadCostMonitorPeriod({
+  currency,
+  filters,
+  from,
+  refresh,
+  to,
+  signal,
+  fetcher = fetch,
+}: {
+  currency: CostCurrency;
+  filters?: CostFilterState;
+  from?: string;
+  refresh?: string | null;
+  to?: string;
+  signal?: AbortSignal;
+  fetcher?: typeof fetch;
+}): Promise<CostMonitorProjection> {
+  const query = new URLSearchParams({ currency });
+  if (from !== undefined) query.set("from", from);
+  if (to !== undefined) query.set("to", to);
+  if (filters) {
+    const manifestFilters = [
+      ["provider", filters.provider],
+      ["phase", filters.phase],
+      ["agent", filters.agent],
+      ["model", filters.model],
+      ["status", filters.status],
+    ] as const;
+    for (const [key, value] of manifestFilters) {
+      if (value) query.set(key, value);
+    }
+  }
+  if (refresh) query.set("refresh", refresh);
+  const response = await fetcher(`/api/v2/cost-monitor?${query.toString()}`, {
+    ...(signal === undefined ? {} : { signal }),
+  });
+  if (!response.ok) {
+    const detail = (await response.text()).trim();
+    throw new Error(detail || `Cost Monitor period request failed (${response.status})`);
+  }
+  return (await response.json()) as CostMonitorProjection;
+}
+
+export function useCostMonitorPeriod({
+  currency,
+  data,
+  dateRange,
+  filters,
+  lastUpdatedAt,
+  loadPeriod,
+  period,
+  snapshotBacked = false,
+}: {
+  currency: CostCurrency;
+  data: CostMonitorProjection;
+  dateRange?: { start: string; end: string };
+  filters: CostFilterState;
+  lastUpdatedAt: string | null;
+  loadPeriod: typeof loadCostMonitorPeriod;
+  period: CostPeriod;
+  snapshotBacked?: boolean;
+}): {
+  activeData: CostMonitorProjection;
+  periodError: string | null;
+  periodLoading: boolean;
+} {
+  const [periodData, setPeriodData] = useState<CostMonitorProjection | null>(null);
+  const [periodDataBase, setPeriodDataBase] = useState<CostMonitorProjection | null>(null);
+  const [periodLoading, setPeriodLoading] = useState(false);
+  const [periodError, setPeriodError] = useState<string | null>(null);
+  const initialDataRef = useRef(true);
+  const requestedRange =
+    dateRange === undefined
+      ? costPeriodDateRange(period)
+      : { from: dateRange.start, to: dateRange.end };
+  const shouldFetch = shouldFetchCostPeriod({ filters, period, snapshotBacked });
+  useEffect(() => {
+    if (!shouldFetch) {
+      initialDataRef.current = false;
+      return;
+    }
+    if (initialDataRef.current && Object.values(filters).every((value) => value === "")) {
+      initialDataRef.current = false;
+      return;
+    }
+    initialDataRef.current = false;
+    const controller = new AbortController();
+    setPeriodLoading(true);
+    setPeriodError(null);
+    void loadPeriod({
+      currency,
+      filters,
+      ...(requestedRange === undefined ? {} : { from: requestedRange.from, to: requestedRange.to }),
+      refresh: lastUpdatedAt,
+      signal: controller.signal,
+    })
+      .then((nextPeriodData) => {
+        if (controller.signal.aborted) return;
+        setPeriodDataBase(data);
+        setPeriodData(nextPeriodData);
+      })
+      .catch((cause: unknown) => {
+        if (!controller.signal.aborted) {
+          setPeriodError(cause instanceof Error ? cause.message : String(cause));
+        }
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setPeriodLoading(false);
+      });
+    return () => controller.abort();
+  }, [
+    currency,
+    data,
+    filters,
+    lastUpdatedAt,
+    loadPeriod,
+    requestedRange?.from,
+    requestedRange?.to,
+    shouldFetch,
+    requestedRange,
+  ]);
+  return {
+    activeData: activeCostPeriodData(data, periodData, periodDataBase),
+    periodError,
+    periodLoading,
+  };
+}
+
+/** An embedded default view is already covered by App's atomic snapshot. */
+export function shouldFetchCostPeriod({
+  filters,
+  period,
+  snapshotBacked,
+}: {
+  filters: CostFilterState;
+  period: CostPeriod;
+  snapshotBacked: boolean;
+}): boolean {
+  return !(
+    snapshotBacked &&
+    period === defaultCostPeriod &&
+    Object.values(filters).every((value) => value === "")
+  );
+}
+
+/** A filtered response belongs only to the base snapshot that requested it. */
+export function activeCostPeriodData(
+  data: CostMonitorProjection,
+  periodData: CostMonitorProjection | null,
+  periodDataBase: CostMonitorProjection | null,
+): CostMonitorProjection {
+  return periodData !== null && periodDataBase === data ? periodData : data;
+}
+
+export interface CostFilterState {
+  query: string;
+  provider: string;
+  phase: string;
+  origin: string;
+  workType: string;
+  agent: string;
+  model: string;
+  status: string;
+  priority: string;
+  risk: string;
+}
+
+export const emptyCostFilters: CostFilterState = {
+  query: "",
+  provider: "",
+  phase: "",
+  origin: "",
+  workType: "",
+  agent: "",
+  model: "",
+  status: "",
+  priority: "",
+  risk: "",
+};
+
+export function CostFilters({
+  available,
+  hideQuery = false,
+  locale,
+  value,
+  onChange,
+}: {
+  available: CostMonitorProjection["filters_available"];
+  hideQuery?: boolean;
+  locale: CostLocale;
+  value: CostFilterState;
+  onChange: (value: CostFilterState) => void;
+}) {
+  const update = (key: keyof CostFilterState, next: string) => onChange({ ...value, [key]: next });
+  const labels =
+    locale === "en-US"
+      ? {
+          search: "Search costs",
+          placeholder: "Invocation, task, model…",
+          agent: "Agent",
+          model: "Model",
+          priority: "Priority",
+          risk: "Risk",
+          phase: "Phase",
+          origin: "Origin",
+          work: "Work",
+          all: "All",
+          clear: "Clear",
+        }
+      : {
+          search: "Buscar custos",
+          placeholder: "Invocação, tarefa, modelo…",
+          agent: "Agente",
+          model: "Modelo",
+          priority: "Prioridade",
+          risk: "Risco",
+          phase: "Fase",
+          origin: "Entrada",
+          work: "Trabalho",
+          all: "Todos",
+          clear: "Limpar",
+        };
+  return (
+    <section className="cost-filters">
+      {hideQuery ? null : (
+        <input
+          aria-label={labels.search}
+          onChange={(event) => update("query", event.target.value)}
+          placeholder={labels.placeholder}
+          value={value.query}
+        />
+      )}
+      <Select
+        allLabel={labels.all}
+        label="Provider"
+        onChange={(next) => update("provider", next)}
+        options={available.providers}
+        value={value.provider}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.agent}
+        onChange={(next) => update("agent", next)}
+        options={available.agents}
+        value={value.agent}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.model}
+        onChange={(next) => update("model", next)}
+        options={available.models}
+        value={value.model}
+      />
+      <Select
+        label="Status"
+        allLabel={labels.all}
+        onChange={(next) => update("status", next)}
+        options={available.statuses}
+        value={value.status}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.priority}
+        onChange={(next) => update("priority", next)}
+        options={available.priorities}
+        value={value.priority}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.risk}
+        onChange={(next) => update("risk", next)}
+        options={available.risks}
+        value={value.risk}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.phase}
+        onChange={(next) => update("phase", next)}
+        options={available.phases}
+        value={value.phase}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.origin}
+        onChange={(next) => update("origin", next)}
+        options={available.origins}
+        value={value.origin}
+      />
+      <Select
+        allLabel={labels.all}
+        label={labels.work}
+        onChange={(next) => update("workType", next)}
+        options={available.work_types}
+        value={value.workType}
+      />
+      <button onClick={() => onChange(emptyCostFilters)} type="button">
+        {labels.clear}
+      </button>
+    </section>
+  );
+}
+
+function Select({
+  allLabel = "Todos",
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  allLabel?: string;
+  label: string;
+  value: string;
+  options: readonly string[];
+  onChange: (value: string) => void;
+}) {
+  return (
+    <label>
+      <span>{label}</span>
+      <select onChange={(event) => onChange(event.target.value)} value={value}>
+        <option value="">{allLabel}</option>
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import {
+  CostModelsAuditTable,
+  coverageLabel,
+  pricingCoverageLabel,
+} from "./CostModelsAuditTable.js";
+
+describe("CostModelsAuditTable coverage", () => {
+  it("keeps price coverage separate from usage coverage", () => {
+    const rows = [
+      { total_tokens: 100, estimated_usd: 0.1 },
+      { total_tokens: null, estimated_usd: 0.2 },
+    ] as never;
+    expect(coverageLabel(rows, "total_tokens")).toBe("1/2");
+    expect(coverageLabel(rows, "estimated_usd")).toBe("2/2");
+  });
+
+  it("marks pricing unavailable when a model has a ledger estimate but no pricing rates", () => {
+    const rows = [
+      {
+        model: "unknown",
+        estimated_usd: 0.2,
+        input_rate_usd_per_million: null,
+        cached_input_rate_usd_per_million: null,
+        output_rate_usd_per_million: null,
+        reasoning_rate_usd_per_million: null,
+      },
+    ] as never;
+    expect(pricingCoverageLabel(rows)).toBe("0/1");
+  });
+
+  it("keeps the final current-cost model header visible", () => {
+    const table = CostModelsAuditTable({ rows: [], locale: "pt-BR" });
+    const currentCost = (
+      table.props.columns as Array<{ key: string; visuallyHiddenLabel?: boolean }>
+    ).find((column) => column.key === "estimatedBrl");
+    expect(currentCost?.visuallyHiddenLabel).toBeUndefined();
+  });
+
+  it("does not render duration coverage as a partial-observed annotation", () => {
+    const tables = readFileSync(new URL("./CostTables.tsx", import.meta.url), "utf8");
+    const models = readFileSync(new URL("./CostModelsAuditTable.tsx", import.meta.url), "utf8");
+
+    expect(tables).not.toContain("Parcial ·");
+    expect(tables).not.toContain("Partial ·");
+    expect(tables).not.toContain("durationCoverageDetail");
+    expect(models).not.toContain("durationCoverageDetail");
+    expect(models).toContain("aggregateDurationCoverage");
+  });
+});