@zaip-ai/cli 3.7.0 → 4.0.0

package/templates/.agents/dashboard/modules/operations/src/react/WorkColumnState.tsx

@@ -0,0 +1,34 @@
+import type { OperationsLocale } from "./status-labels.js";
+
+export function WorkColumnState({
+  state,
+  error,
+  locale,
+}: {
+  state: "loading" | "empty" | "error" | "content";
+  error: string | null | undefined;
+  locale: OperationsLocale;
+}) {
+  if (state === "loading")
+    return (
+      <div
+        aria-busy="true"
+        aria-label={locale === "pt-BR" ? "Carregando itens da coluna" : "Loading column items"}
+        className="operations-column-skeleton"
+        role="status"
+      >
+        <span />
+        <span />
+        <span />
+      </div>
+    );
+  if (state === "error")
+    return (
+      <p className="operations-empty" role="alert">
+        {error}
+      </p>
+    );
+  return state === "empty" ? (
+    <p className="operations-empty">{locale === "pt-BR" ? "Sem itens" : "No items"}</p>
+  ) : null;
+}

package/templates/.agents/dashboard/modules/operations/src/react/operation-duration.test.ts

@@ -11,7 +11,7 @@ import {
 
 describe("formatOperationDuration", () => {
   it("preserves unavailable and observed zero as different states", () => {
-    expect(formatOperationDuration(null, "pt-BR")).toBe("Indisponível");
+    expect(formatOperationDuration(null, "pt-BR")).toBe("0");
     expect(formatOperationDuration(0, "pt-BR")).toBe("0 seg");
   });
 

package/templates/.agents/dashboard/modules/operations/src/react/operation-duration.ts

@@ -9,7 +9,7 @@ export interface OperationalTiming {
 }
 
 export function formatOperationDuration(value: number | null, locale: OperationsLocale): string {
-  if (value === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  if (value === null) return "0";
   if (value === 0) return locale === "pt-BR" ? "0 seg" : "0 sec";
   return formatDurationMs(value, locale);
 }

package/templates/.agents/dashboard/modules/operations/src/react/operations-average-unmeasured.test.ts

@@ -0,0 +1,10 @@
+import { expect, it } from "vitest";
+import { formatExecutionAverageHint } from "./OperationsOverview.js";
+
+it("keeps the known macro average when execution days are unavailable", () => {
+  expect(formatExecutionAverageHint(3_600_000, 3, 0, "pt-BR")).toBe("20 min / item");
+  expect(formatExecutionAverageHint(3_600_000, 3, 0, "en-US")).toBe("20 min / item");
+  expect(formatExecutionAverageHint(0, 3, 0, "pt-BR")).toBe(
+    "Sem tempo medido para calcular médias",
+  );
+});

package/templates/.agents/dashboard/modules/operations/src/react/operations-content-visibility.ts

@@ -0,0 +1,3 @@
+export function shouldRenderOperationsContent(loading: boolean): boolean {
+  return !loading;
+}

package/templates/.agents/dashboard/modules/operations/src/react/operations-coverage-toast.test.ts

@@ -38,7 +38,7 @@ describe("Operations persisted aggregate display", () => {
     expect(totals).toMatchObject({ duration_ms: null, tokens: 0, cost_brl: 0 });
   });
 
-  it("preserves unavailable aggregate totals and renders zero only for an empty population", () => {
+  it("preserves unavailable aggregate facts and opts overview cards into disclosed zero", () => {
     const overview = ["OperationsOverview.tsx", "overview-metric-format.ts"]
       .map((file) => readFileSync(new URL(file, import.meta.url), "utf8"))
       .join("\n");
@@ -52,8 +52,9 @@ describe("Operations persisted aggregate display", () => {
     expect(overview).toMatch(
       /durationMs: totalDurationMetric,\s*tokens: totalTokensMetric,\s*costBrl: rateCost/,
     );
-    expect(overview).toContain("formatSummaryMetricValue(\n        averageDuration,");
-    expect(overview).toContain('populationCount === 0 ? "0"');
+    expect(overview).toContain("overviewMetricStats");
+    expect(overview).toMatch(/populationCount === 0 \|\| displayUnmeasuredAsZero\s*\? "0"/);
+    expect(overview).toMatch(/unmeasuredZeroDescription\(\s*totalDurationMetric/);
     expect(overview).not.toContain("allPhaseMetrics.tokens ?? 0");
     expect(overview).not.toContain("executionMetrics.durationMs ?? 0");
   });

package/templates/.agents/dashboard/modules/operations/src/react/operations-overview-period-filter.test.ts

@@ -1,10 +1,21 @@
 import { readFileSync } from "node:fs";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 import { readAppCompositionSource } from "../../../../apps/frontend/src/__tests__/app-composition-support.js";
-import { resolveOperationsPeriodControl, shouldRenderOperationsContent } from "./OperationsPage.js";
+import { resolveOperationsPeriodControl } from "./OperationsPage.js";
+import { OperationsPageLoading } from "./OperationsPageOverview.js";
+import { shouldRenderOperationsContent } from "./operations-content-visibility.js";
 import { workListTypeOnViewChange } from "./operations-page-contract.js";
 
 describe("overview period filter", () => {
+  it("renders independent KPI and panel skeletons without fake zeros or unavailable values", () => {
+    const html = renderToStaticMarkup(createElement(OperationsPageLoading, { locale: "pt-BR" }));
+    expect(html.match(/operations-skeleton-block/g)).toHaveLength(10);
+    expect(html).not.toContain("Indisponível");
+    expect(html).not.toContain(">0<");
+    expect(html).toContain('aria-busy="true"');
+  });
   it("passes activity-filtered entities and Runs to every overview metric", () => {
     const overview = readFileSync(new URL("OperationsPageOverview.tsx", import.meta.url), "utf8");
 

package/templates/.agents/dashboard/modules/operations/src/react/operations-page-contract.ts

@@ -97,6 +97,7 @@ export interface OperationsPageProps {
   /** Timestamp of the immutable projection supplied by the composition root. */
   lastUpdatedAt?: string | null;
   loading: boolean;
+  costLoading?: boolean | undefined;
   onLoadingChange?: (loading: boolean) => void;
   currency: "BRL" | "USD";
   locale: OperationsLocale;

package/templates/.agents/dashboard/modules/operations/src/react/operations-skeleton.css

@@ -0,0 +1,80 @@
+.operations-content-skeleton {
+  display: grid;
+  gap: 16px;
+  min-height: 360px;
+  padding: 24px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(17, 24, 39, 0.68);
+  color: var(--muted);
+}
+
+.operations-skeleton-kpis,
+.operations-skeleton-panels {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+.operations-skeleton-panels {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.operations-skeleton-block {
+  display: grid;
+  gap: 14px;
+  min-height: 118px;
+  padding: 20px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(17, 24, 39, 0.8);
+}
+.operations-skeleton-panels .operations-skeleton-block {
+  min-height: 280px;
+}
+.operations-skeleton-line,
+.operations-skeleton-chart,
+.operations-column-skeleton span {
+  display: block;
+  height: 14px;
+  border-radius: 7px;
+  background: linear-gradient(90deg, #263348 20%, #415575 50%, #263348 80%);
+  background-size: 200% 100%;
+  animation: operations-skeleton-pulse 1.4s ease-in-out infinite;
+}
+.operations-skeleton-line.is-short {
+  width: 55%;
+}
+.operations-skeleton-line.is-value {
+  width: 38%;
+  height: 34px;
+}
+.operations-skeleton-chart {
+  height: 180px;
+}
+.operations-column-skeleton {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+}
+.operations-column-skeleton span {
+  height: 56px;
+}
+@keyframes operations-skeleton-pulse {
+  to {
+    background-position-x: -200%;
+  }
+}
+@media (max-width: 900px) {
+  .operations-skeleton-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .operations-skeleton-panels {
+    grid-template-columns: 1fr;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .operations-skeleton-line,
+  .operations-skeleton-chart,
+  .operations-column-skeleton span {
+    animation: none;
+  }
+}

package/templates/.agents/dashboard/modules/operations/src/react/operations.css

@@ -1,3 +1,5 @@
+@import "./operations-skeleton.css";
+
 .operations-page {
   width: min(1600px, 100%);
   margin: 0 auto;
@@ -782,14 +784,3 @@
   background: rgba(37, 99, 235, 0.16);
   color: #cde3ff;
 }
-
-.operations-content-skeleton {
-  display: grid;
-  gap: 16px;
-  min-height: 360px;
-  padding: 24px;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  background: rgba(17, 24, 39, 0.68);
-  color: var(--muted);
-}

package/templates/.agents/dashboard/modules/operations/src/react/overview-cost-card.test.tsx

@@ -9,6 +9,42 @@ import {
 import { OverviewCostKpi } from "./OverviewCostKpi.js";
 
 describe("compact estimated cost card", () => {
+  it("keeps only the cost card busy until its factual snapshot arrives", () => {
+    const markup = renderToStaticMarkup(
+      <OverviewCostKpi
+        loading
+        fact={{ state: "unavailable", knownSum: null, coverage: null }}
+        unit="tarefa"
+        locale="pt-BR"
+        currency="BRL"
+        count={3}
+        perItem={null}
+        perHour={null}
+        total={null}
+      />,
+    );
+    expect(markup).toContain('aria-busy="true"');
+    expect(markup).toContain("operations-skeleton-line");
+    expect(markup).not.toContain("Indisponível");
+    expect(markup).not.toContain(">0<");
+  });
+  it("shows zero with a missing-measurement disclosure after loading", () => {
+    const markup = renderToStaticMarkup(
+      <OverviewCostKpi
+        fact={{ state: "unavailable", knownSum: null, coverage: null }}
+        unit="tarefa"
+        locale="pt-BR"
+        currency="BRL"
+        count={4}
+        perItem={null}
+        perHour={null}
+        total={null}
+      />,
+    );
+    expect(markup).toContain("<strong>0</strong>");
+    expect(markup).toContain("não é um valor observado");
+    expect(markup).not.toContain("Indisponível");
+  });
   it.each([
     ["BRL", "pt-BR", "R$\u00a052.629", "R$\u00a049 / tarefa (R$\u00a0259 / hora)"],
     ["USD", "en-US", "$52,629", "$49 / task ($259 / hour)"],

package/templates/.agents/dashboard/modules/operations/src/react/overview-metric-format.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { formatSummaryMetricValue, unmeasuredAverageLabel } from "./overview-metric-format.js";
+
+describe("unmeasured overview averages", () => {
+  it("discloses presentation zero while retaining the absent measurement", () => {
+    expect(formatSummaryMetricValue(null, 1, String, "pt-BR", true)).toBe("0");
+    expect(unmeasuredAverageLabel("Custo médio", null, 4, "pt-BR")).toBe(
+      "Custo médio (sem medição)",
+    );
+  });
+});

package/templates/.agents/dashboard/modules/operations/src/react/overview-metric-format.ts

@@ -18,15 +18,40 @@ function formatEntityDuration(value: number | null, locale: OperationsLocale): s
 }
 
 /**
- * Keeps missing source facts as null while making a genuinely empty selected
- * population readable as the factual numeric zero in the overview.
+ * Keeps source facts unchanged. Empty populations display factual zero;
+ * opted-in overview cards also display zero for unmeasured populations and
+ * provide a separate disclosure so the value is not mistaken for observation.
  */
 export function formatSummaryMetricValue(
   value: number | null,
   populationCount: number | null,
   formatKnownValue: (knownValue: number) => string,
   locale: OperationsLocale,
+  displayUnmeasuredAsZero = false,
 ): string {
   if (value !== null) return formatKnownValue(value);
-  return populationCount === 0 ? "0" : formatEntityDuration(null, locale);
+  return populationCount === 0 || displayUnmeasuredAsZero
+    ? "0"
+    : formatEntityDuration(null, locale);
+}
+
+export function unmeasuredZeroDescription(
+  value: number | null,
+  populationCount: number | null,
+  locale: OperationsLocale,
+): string | undefined {
+  if (value !== null || populationCount === null || populationCount === 0) return undefined;
+  return locale === "pt-BR"
+    ? "Zero exibido por falta de medição; não é um valor observado."
+    : "Zero displayed because no measurement was recorded; this is not an observed value.";
+}
+
+export function unmeasuredAverageLabel(
+  label: string,
+  value: number | null,
+  populationCount: number | null,
+  locale: OperationsLocale,
+): string {
+  if (value !== null || populationCount === null || populationCount === 0) return label;
+  return `${label} (${locale === "pt-BR" ? "sem medição" : "unmeasured"})`;
 }

package/templates/.agents/dashboard/modules/operations/src/react/overview-metric-stats.ts

@@ -0,0 +1,44 @@
+import { formatSummaryMetricValue, unmeasuredAverageLabel } from "./overview-metric-format.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+export function overviewMetricStats({
+  averageCost,
+  averageDuration,
+  averageTokens,
+  costLabel,
+  count,
+  formatCost,
+  formatDuration,
+  formatTokens,
+  locale,
+  timeLabel,
+  tokensLabel,
+}: {
+  averageCost: number | null;
+  averageDuration: number | null;
+  averageTokens: number | null;
+  costLabel: string | null;
+  count: number | null;
+  formatCost: (value: number) => string;
+  formatDuration: (value: number) => string;
+  formatTokens: (value: number) => string;
+  locale: OperationsLocale;
+  timeLabel: string;
+  tokensLabel: string;
+}) {
+  const resolvedCostLabel = costLabel ?? (locale === "pt-BR" ? "Custo médio" : "Average cost");
+  return [
+    [
+      unmeasuredAverageLabel(timeLabel, averageDuration, count, locale),
+      formatSummaryMetricValue(averageDuration, count, formatDuration, locale, true),
+    ],
+    [
+      unmeasuredAverageLabel(tokensLabel, averageTokens, count, locale),
+      formatSummaryMetricValue(averageTokens, count, formatTokens, locale, true),
+    ],
+    [
+      unmeasuredAverageLabel(resolvedCostLabel, averageCost, count, locale),
+      formatSummaryMetricValue(averageCost, count, formatCost, locale, true),
+    ],
+  ] as const;
+}

package/templates/.agents/dashboard/modules/operations/src/react/work-card-label.ts

@@ -0,0 +1,5 @@
+import type { OperationsLocale } from "./status-labels.js";
+
+export function openWorkCardLabel(locale: OperationsLocale, title: string): string {
+  return locale === "pt-BR" ? `Abrir ${title}` : `Open ${title}`;
+}

package/templates/.agents/dashboard/modules/operations/src/react/work-column-state.ts

@@ -0,0 +1,11 @@
+export type WorkColumnLoadState = { loading: boolean; error: string | null } | undefined;
+
+export function workColumnState(
+  itemCount: number,
+  totalItems: number,
+  state: WorkColumnLoadState,
+): "content" | "loading" | "empty" | "error" {
+  if (itemCount > 0) return "content";
+  if (state?.error) return "error";
+  return state === undefined || state.loading || totalItems > 0 ? "loading" : "empty";
+}

package/templates/.agents/dashboard/modules/operations/src/react/work-item-filter.ts

@@ -0,0 +1,13 @@
+export function filterWorkItems<T extends { kind: string; row: { id: string; title: string } }>(
+  items: readonly T[],
+  query: string,
+): T[] {
+  const normalized = query.trim().toLocaleLowerCase();
+  return normalized
+    ? items.filter((item) =>
+        [item.row.id, item.row.title, item.kind].some((value) =>
+          value.toLocaleLowerCase().includes(normalized),
+        ),
+      )
+    : [...items];
+}

package/templates/.agents/dashboard/modules/traceability/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-traceability",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "exports": {

package/templates/.agents/dashboard/packages/branding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-branding",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "exports": {

package/templates/.agents/dashboard/packages/contracts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-contracts",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "exports": {

package/templates/.agents/dashboard/packages/data-export/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-data-export",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "private": true,
   "type": "module",
   "exports": {