@zaip-ai/cli 1.0.7 → 1.0.8

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

@@ -0,0 +1,68 @@
+import type { OperationsView } from "./operations-page-filters.js";
+import { viewLabels } from "./operations-view-labels.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+export function OperationsViewTabs({
+  locale,
+  onChange,
+  view,
+}: {
+  locale: OperationsLocale;
+  onChange: (view: OperationsView) => void;
+  view: OperationsView;
+}) {
+  const views = [
+    "work-kanban",
+    "work-list",
+  ] as const;
+  return (
+    <nav aria-label="Entidades do ciclo de trabalho">
+      {views.map((key) => (
+        <button
+          aria-pressed={view === key}
+          className={view === key ? "is-active" : undefined}
+          key={key}
+          onClick={() => onChange(key)}
+          type="button"
+        >
+          {viewLabels[locale][key]}
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+export function OperationsEntityPager({
+  entityPage,
+  locale,
+  onChange,
+}: {
+  entityPage: { offset: number; total: number | null; loading: boolean; error: string | null };
+  locale: OperationsLocale;
+  onChange?: ((offset: number) => void) | undefined;
+}) {
+  return (
+    <div aria-live="polite" className="operations-page-controls">
+      {entityPage.error ? <span>{entityPage.error}</span> : null}
+      {entityPage.loading ? <span>{locale === "pt-BR" ? "Carregando…" : "Loading…"}</span> : null}
+      <button
+        disabled={entityPage.loading || entityPage.offset === 0}
+        onClick={() => onChange?.(Math.max(0, entityPage.offset - 100))}
+        type="button"
+      >
+        {locale === "pt-BR" ? "Anterior" : "Previous"}
+      </button>
+      <button
+        disabled={
+          entityPage.loading ||
+          entityPage.total === null ||
+          entityPage.offset + 100 >= entityPage.total
+        }
+        onClick={() => onChange?.(entityPage.offset + 100)}
+        type="button"
+      >
+        {locale === "pt-BR" ? "Próxima" : "Next"}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,169 @@
+import type { ComponentProps, ReactNode, RefObject } from "react";
+import { OperationDateFilters } from "./OperationDateFilters.js";
+import { SearchClearIcon } from "./OperationsIcons.js";
+import { OperationsOverview } from "./OperationsOverview.js";
+import {
+  dateRangeForPreset,
+  type OperationDatePreset,
+  type OperationDateRange,
+} from "./operation-date-range.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+type OverviewProps = ComponentProps<typeof OperationsOverview>;
+
+export function OperationsPageOverview({
+  capabilityNavigation,
+  currency,
+  data,
+  datePreset,
+  dateRange,
+  defaultDateRange,
+  factualCostTotal,
+  includeLegacyEffort,
+  locale,
+  onOpenTask,
+  onOpenDocument,
+  onLoadStatus,
+  statusPage,
+  onLoadStatusPage,
+  classificationPage,
+  onLoadClassificationPage,
+  prds,
+  query,
+  resolveRunCost,
+  runs,
+  searchInputRef,
+  setQuery,
+  showFilterLoading,
+  specs,
+  tasks,
+  updatePeriod,
+}: {
+  capabilityNavigation: ReactNode;
+  currency: "BRL" | "USD";
+  data: OverviewProps["data"];
+  datePreset: OperationDatePreset;
+  dateRange: OperationDateRange;
+  defaultDateRange: OperationDateRange;
+  factualCostTotal: OverviewProps["factualCostTotal"];
+  includeLegacyEffort: boolean;
+  locale: OperationsLocale;
+  onOpenTask: OverviewProps["onOpenTask"];
+  onOpenDocument: OverviewProps["onOpenDocument"];
+  onLoadStatus: OverviewProps["onLoadStatus"];
+  statusPage: OverviewProps["statusPage"];
+  onLoadStatusPage: OverviewProps["onLoadStatusPage"];
+  classificationPage: OverviewProps["classificationPage"];
+  onLoadClassificationPage: OverviewProps["onLoadClassificationPage"];
+  prds: NonNullable<OverviewProps["prds"]>;
+  query: string;
+  resolveRunCost: OverviewProps["resolveRunCost"];
+  runs: NonNullable<OverviewProps["runs"]>;
+  searchInputRef: RefObject<HTMLInputElement | null>;
+  setQuery: (value: string) => void;
+  showFilterLoading: () => void;
+  specs: NonNullable<OverviewProps["specs"]>;
+  tasks: NonNullable<OverviewProps["tasks"]>;
+  updatePeriod: (preset: OperationDatePreset, range: OperationDateRange) => void;
+}) {
+  return (
+    <>
+      <OperationsOverview
+        data={data}
+        currency={currency}
+        factualCostTotal={factualCostTotal}
+        datePreset={datePreset}
+        dateRange={dateRange}
+        locale={locale}
+        onDatePresetChange={(nextPreset) => {
+          showFilterLoading();
+          updatePeriod(
+            nextPreset,
+            nextPreset === "all"
+              ? defaultDateRange
+              : nextPreset === "custom"
+                ? dateRange
+                : dateRangeForPreset(nextPreset),
+          );
+        }}
+        onOpenTask={onOpenTask}
+        onOpenDocument={onOpenDocument}
+        onLoadStatus={onLoadStatus}
+        statusPage={statusPage}
+        onLoadStatusPage={onLoadStatusPage}
+        classificationPage={classificationPage}
+        onLoadClassificationPage={onLoadClassificationPage}
+        prds={prds}
+        runs={runs}
+        resolveRunCost={resolveRunCost}
+        includeLegacyEffort={includeLegacyEffort}
+        specs={specs}
+        tasks={tasks}
+      />
+      <section className="dashboard-global-controls">
+        {capabilityNavigation}
+        <div className="operations-toolbar-filters dashboard-global-filters">
+          <label className="operations-toolbar-field operations-search-field">
+            <span>{locale === "pt-BR" ? "Busca" : "Search"}</span>
+            <div className="operations-search-control">
+              <input
+                aria-label={locale === "pt-BR" ? "Busca" : "Search"}
+                onChange={(event) => {
+                  setQuery(event.target.value);
+                }}
+                placeholder={locale === "pt-BR" ? "Buscar por nome ou ID" : "Search by name or ID"}
+                ref={searchInputRef}
+                value={query}
+              />
+              {query ? (
+                <button
+                  aria-label={locale === "pt-BR" ? "Limpar busca" : "Clear search"}
+                  className="operations-search-clear"
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => {
+                    // Keep the text control as the active element while its
+                    // conditional clear button is removed in this render.
+                    searchInputRef.current?.focus();
+                    setQuery("");
+                  }}
+                  type="button"
+                >
+                  <SearchClearIcon />
+                </button>
+              ) : null}
+            </div>
+          </label>
+          <OperationDateFilters
+            dateRange={dateRange}
+            defaultDateRange={defaultDateRange}
+            locale={locale}
+            onDateRangeChange={(nextRange) => {
+              showFilterLoading();
+              updatePeriod("custom", nextRange);
+            }}
+            onPresetChange={(nextPreset, nextRange) => {
+              showFilterLoading();
+              updatePeriod(nextPreset, nextRange);
+            }}
+            preset={datePreset}
+          />
+        </div>
+      </section>
+    </>
+  );
+}
+
+export function OperationsPageLoading({ locale }: { locale: OperationsLocale }) {
+  return (
+    <section
+      aria-busy="true"
+      aria-live="polite"
+      className="operations-content-skeleton"
+      role="status"
+    >
+      <span>
+        {locale === "pt-BR" ? "Carregando o período selecionado…" : "Loading selected period…"}
+      </span>
+    </section>
+  );
+}

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

@@ -9,6 +9,7 @@ import {
 } from "@zaip-ai/dashboard-ui";
 import type { OperationsProjection } from "../contracts.js";
 import {
+  aggregateManifestPeriodSummary,
   aggregatePeriodSummary,
   averagePeriodSummaryRows,
   type PeriodGranularity,
@@ -18,19 +19,46 @@ import type { OperationsLocale } from "./status-labels.js";
 import "./period-summary.css";
 
 export function PeriodSummaryTable({
+  currency,
   data,
   granularity,
   locale,
-  resolveRunCostBrl,
+  resolveRunCost,
   includeLegacyEffort = false,
+  legacyRange,
+  manifestDailyPeriods,
+  factualCostPeriods,
 }: {
-  data: Pick<OperationsProjection, "prds" | "specs" | "tasks" | "runs">;
+  currency: "BRL" | "USD";
+  data: Pick<
+    OperationsProjection,
+    "prds" | "specs" | "tasks" | "runs" | "evidences" | "validations"
+  >;
   granularity: PeriodGranularity;
   locale: OperationsLocale;
-  resolveRunCostBrl?: ((runId: string) => number | null) | undefined;
+  resolveRunCost?: ((runId: string) => number | null) | undefined;
   includeLegacyEffort?: boolean;
+  legacyRange?: { from: string | null; to: string | null };
+  manifestDailyPeriods?: Readonly<
+    Record<string, import("./period-summary.js").ManifestDailyPeriod>
+  >;
+  factualCostPeriods?: Partial<
+    Record<PeriodGranularity, readonly { key: string; estimated_usd: number | null; estimated_brl: number | null }[]>
+  >;
 }) {
-  const rows = aggregatePeriodSummary(data, granularity, resolveRunCostBrl, includeLegacyEffort);
+  const calculatedRows =
+    // Persisted Operations periods carry BRL-only aggregates. USD must be
+    // rebuilt from the selected-currency per-Run resolver or remain null.
+    manifestDailyPeriods === undefined || currency === "USD"
+      ? aggregatePeriodSummary(
+          data,
+          granularity,
+          resolveRunCost,
+          includeLegacyEffort,
+          legacyRange,
+        )
+      : aggregateManifestPeriodSummary(manifestDailyPeriods, granularity);
+  const rows = applyFactualPeriodCosts(calculatedRows, currency, factualCostPeriods?.[granularity]);
   const summarizedTotal = summarizePeriodRows(rows);
   const total = {
     ...summarizedTotal,
@@ -81,7 +109,7 @@ export function PeriodSummaryTable({
               granularity,
               locale,
             ),
-            value: formatCurrency(average.costBrl, "BRL", locale),
+            value: formatCurrency(average.costBrl, currency, locale),
           },
         ]}
       />
@@ -138,12 +166,12 @@ export function PeriodSummaryTable({
             key: "cost",
             label: locale === "pt-BR" ? "Custos" : "Costs",
             align: "right",
-            render: (row) => formatCurrency(row.costBrl, "BRL"),
+            render: (row) => formatCurrency(row.costBrl, currency, locale),
             footer: (
               <output
-                aria-label={`${totalLabel} — ${locale === "pt-BR" ? "Custos" : "Costs"}: ${formatCurrency(total.costBrl, "BRL")}`}
+                aria-label={`${totalLabel} — ${locale === "pt-BR" ? "Custos" : "Costs"}: ${formatCurrency(total.costBrl, currency, locale)}`}
               >
-                {formatCurrency(total.costBrl, "BRL")}
+                {formatCurrency(total.costBrl, currency, locale)}
               </output>
             ),
             sortValue: (row) => row.costBrl,
@@ -165,6 +193,21 @@ export function PeriodSummaryTable({
   );
 }
 
+/** Replaces only the display currency with matching factual Cost Monitor periods. */
+export function applyFactualPeriodCosts<T extends { key: string; costBrl: number | null }>(
+  rows: readonly T[],
+  currency: "BRL" | "USD",
+  factualRows?: readonly { key: string; estimated_usd: number | null; estimated_brl: number | null }[],
+): T[] {
+  if (factualRows === undefined) return [...rows];
+  const costByKey = new Map(
+    factualRows.map((row) => [row.key, currency === "USD" ? row.estimated_usd : row.estimated_brl] as const),
+  );
+  return rows.map((row) =>
+    costByKey.has(row.key) ? { ...row, costBrl: costByKey.get(row.key) ?? null } : row,
+  );
+}
+
 /** Empty period totals display zero without inventing duration for any Run. */
 export function periodTotalDurationMs(
   durationMs: number | null,

package/templates/.agents/dashboard/modules/operations/src/react/PrdDocumentDialog.test.tsx

@@ -0,0 +1,32 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const component = source("PrdDocumentDialog.tsx");
+const styles = source("macro-planning-dialog.css");
+const app = source("../../../../apps/frontend/src/App.tsx");
+const traceDocuments = source("../../../../apps/frontend/src/use-app-trace-documents.ts");
+describe("MacroDocumentDialog loading states", () => {
+  it("keeps known identity visible before body hydration", () => {
+    expect(component).toContain("detail?.title ?? preview.title");
+    expect(component).toContain("detail?.id ?? preview.id");
+    expect(component).toContain("detail?.artifact_path ?? preview.artifact_path");
+  });
+  it("includes animated loading and retryable error", () => {
+    expect(component).toContain("operations-prd-document-spinner");
+    expect(component).toContain("operations-prd-document-skeleton");
+    expect(component).toContain("onRetry={onRetry}");
+    expect(styles).toContain("@keyframes operations-document-spin");
+    expect(styles).toContain("@media (prefers-reduced-motion: reduce)");
+    expect(styles).toContain("animation: none");
+  });
+  it("invalidates an in-flight request when the reader closes", () => {
+    expect(app).toContain("useAppTraceDocuments({");
+    expect(traceDocuments).toContain("const documentRequestId = useRef(0)");
+    expect(traceDocuments).toContain("if (documentRequestId.current !== requestId) return");
+    expect(traceDocuments).toContain("documentRequestId.current += 1;");
+    expect(traceDocuments).toContain("function closeDocument()");
+  });
+});
+function source(file: string): string {
+  return readFileSync(new URL(file, import.meta.url), "utf8");
+}

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

@@ -1,4 +1,4 @@
-import { FileText, X } from "lucide-react";
+import { FileText, LoaderCircle, RotateCw, X } from "lucide-react";
 import { Fragment } from "react";
 import { createPortal } from "react-dom";
 import type { PrdDetailProjection, SpecDetailProjection } from "../contracts.js";
@@ -6,14 +6,22 @@ import type { OperationsLocale } from "./status-labels.js";
 
 export function MacroDocumentDialog({
   detail,
+  error,
   label,
+  loading = false,
   locale,
   onClose,
+  onRetry,
+  preview,
 }: {
-  detail: PrdDetailProjection | SpecDetailProjection;
+  detail: PrdDetailProjection | SpecDetailProjection | undefined;
+  error: string | undefined;
   label: "PRD" | "SPEC";
+  loading?: boolean;
   locale: OperationsLocale;
   onClose: () => void;
+  onRetry: (() => void) | undefined;
+  preview: Pick<PrdDetailProjection, "id" | "title" | "artifact_path">;
 }) {
   const isPortuguese = locale === "pt-BR";
   return createPortal(
@@ -35,17 +43,19 @@ export function MacroDocumentDialog({
             <span>
               <FileText aria-hidden="true" size={16} /> {label}
             </span>
-            <h2>{detail.title}</h2>
-            <p>{detail.id}</p>
+            <h2>{detail?.title ?? preview.title}</h2>
+            <p>{detail?.id ?? preview.id}</p>
           </div>
           <button aria-label={isPortuguese ? "Fechar" : "Close"} onClick={onClose} type="button">
             <X aria-hidden="true" size={20} />
           </button>
         </header>
         <div className="operations-prd-document-scroll">
-          <MarkdownDocument content={detail.body} />
+          {detail ? <MarkdownDocument content={detail.body} /> : null}
+          {loading ? <DocumentLoading locale={locale} /> : null}
+          {error ? <DocumentLoadError error={error} locale={locale} onRetry={onRetry} /> : null}
         </div>
-        <footer>{detail.artifact_path}</footer>
+        <footer>{detail?.artifact_path ?? preview.artifact_path}</footer>
       </section>
     </div>,
     document.body,
@@ -56,6 +66,52 @@ export function PrdDocumentDialog(props: Omit<Parameters<typeof MacroDocumentDia
   return <MacroDocumentDialog {...props} label="PRD" />;
 }
 
+function DocumentLoading({ locale }: { locale: OperationsLocale }) {
+  const isPortuguese = locale === "pt-BR";
+  return (
+    <section aria-busy="true" aria-live="polite" className="operations-prd-document-loading">
+      <div className="operations-prd-document-loading-copy">
+        <LoaderCircle aria-hidden="true" className="operations-prd-document-spinner" size={20} />
+        <div>
+          <strong>{isPortuguese ? "Carregando documento" : "Loading document"}</strong>
+          <p>{isPortuguese ? "Preparando a leitura completa…" : "Preparing the full reader…"}</p>
+        </div>
+      </div>
+      <div aria-hidden="true" className="operations-prd-document-skeleton">
+        <i />
+        <i />
+        <i />
+        <i />
+      </div>
+    </section>
+  );
+}
+
+function DocumentLoadError({
+  error,
+  locale,
+  onRetry,
+}: {
+  error: string;
+  locale: OperationsLocale;
+  onRetry: (() => void) | undefined;
+}) {
+  const isPortuguese = locale === "pt-BR";
+  return (
+    <section aria-live="assertive" className="operations-prd-document-error" role="alert">
+      <strong>
+        {isPortuguese ? "Não foi possível carregar o documento." : "Unable to load document."}
+      </strong>
+      <p>{error}</p>
+      {onRetry ? (
+        <button onClick={onRetry} type="button">
+          <RotateCw aria-hidden="true" size={15} /> {isPortuguese ? "Tentar novamente" : "Retry"}
+        </button>
+      ) : null}
+    </section>
+  );
+}
+
 type MarkdownBlock =
   | { kind: "heading"; level: 1 | 2 | 3; content: string }
   | { kind: "paragraph"; content: string }

package/templates/.agents/dashboard/modules/operations/src/react/TaskBoard.test.ts

@@ -71,6 +71,30 @@ describe("taskTotals", () => {
     });
   });
 
+  it("keeps time unavailable while preserving independently known tokens and cost", () => {
+    const totals = taskTotals([
+      run({ duration_ms: null, status: "completed", tokens: 321, costBrl: 1.75 }),
+    ]);
+
+    expect(totals.get("TASK-1")).toEqual({ durationMs: null, tokens: 321, costBrl: 1.75 });
+  });
+
+  it("counts observed root duration but excludes child-only duration from Task time", () => {
+    const root = run({ duration_ms: 60_000, status: "completed", tokens: 1, costBrl: 1 });
+    const child = {
+      ...run({ duration_ms: 120_000, status: "completed", tokens: 2, costBrl: 2 }),
+      id: "RUN-CHILD",
+      parent_run_id: root.id,
+      run_kind: "subrun" as const,
+    };
+    expect(taskTotals([root, child]).get("TASK-1")).toEqual({
+      durationMs: 60_000,
+      tokens: 3,
+      costBrl: 3,
+    });
+    expect(taskTotals([child]).get("TASK-1")).toEqual({ durationMs: null, tokens: 2, costBrl: 2 });
+  });
+
   it("does not count an intake Run as Task execution time", () => {
     const totals = taskTotals([
       run({
@@ -104,11 +128,40 @@ describe("taskTotals", () => {
       costBrl: 1.25,
     });
   });
+
+  it("keeps canonical ready-Task metrics when the Run page contains another Task", () => {
+    const totals = taskTotals(
+      [
+        {
+          ...run({ duration_ms: 10, status: "completed", tokens: 1, costBrl: 0.01 }),
+          id: "RUN-OTHER-TASK",
+          task_id: "TASK-OTHER",
+        },
+      ],
+      [
+        {
+          id: "TASK-READY",
+          title: "Prepare dashboard metric correction",
+          telemetry: { duration_ms: 0, tokens: 0, cost_brl: 0 },
+        } as DashboardTaskProjection,
+        {
+          id: "TASK-UNKNOWN",
+          title: "Await observed telemetry",
+          telemetry: { duration_ms: null, tokens: null, cost_brl: null },
+        } as DashboardTaskProjection,
+      ],
+    );
+
+    expect(totals.get("TASK-READY")).toEqual({ durationMs: 0, tokens: 0, costBrl: 0 });
+    expect(totals.get("TASK-UNKNOWN")).toEqual({ durationMs: null, tokens: null, costBrl: null });
+    expect(totals.get("TASK-OTHER")).toEqual({ durationMs: 10, tokens: 1, costBrl: 0.01 });
+  });
 });
 
 function run({
   costBrl,
   duration_ms,
+  source_duration_ms = duration_ms,
   execution_id = "EXEC-1",
   phase = "execution",
   started_at = "2026-07-15T03:20:00.000Z",
@@ -117,6 +170,7 @@ function run({
 }: {
   costBrl: number | null;
   duration_ms: number | null;
+  source_duration_ms?: number | null;
   execution_id?: string | null;
   phase?: string;
   started_at?: string;
@@ -131,6 +185,7 @@ function run({
     status,
     started_at,
     duration_ms,
+    source_duration_ms,
     usage: {
       total: {
         tokens: { total: tokens },

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

@@ -291,27 +291,35 @@ export function taskTotals(
   runs: readonly RunProjection[],
   tasks: readonly DashboardTaskProjection[] = [],
 ): Map<string, Totals> {
-  if (runs.length === 0) {
-    return new Map(
-      tasks.flatMap((task) =>
-        task.telemetry === null || task.telemetry === undefined
-          ? []
-          : [
-              [
-                task.id,
-                {
-                  durationMs: task.telemetry.duration_ms,
-                  tokens: task.telemetry.tokens,
-                  costBrl: task.telemetry.cost_brl,
-                },
-              ] as const,
-            ],
-      ),
-    );
-  }
-  const totals = new Map<string, Totals>();
+  // The task projection is the complete canonical aggregate. The Run page is
+  // intentionally paginated, so it must not replace a known aggregate merely
+  // because the page also contains another Task's Run.
+  const canonicalTaskIds = new Set(
+    tasks
+      .filter((task) => task.telemetry !== null && task.telemetry !== undefined)
+      .map((task) => task.id),
+  );
+  const totals = new Map(
+    tasks.flatMap((task) =>
+      task.telemetry === null || task.telemetry === undefined
+        ? []
+        : [
+            [
+              task.id,
+              {
+                durationMs: task.telemetry.duration_ms,
+                tokens: task.telemetry.tokens,
+                costBrl: task.telemetry.cost_brl,
+              },
+            ] as const,
+          ],
+    ),
+  );
   for (const run of runs) {
     if (run.task_id === null) continue;
+    // Preserve null as unavailable in the canonical projection; neither an
+    // unrelated page nor partial Run data may manufacture a metric.
+    if (canonicalTaskIds.has(run.task_id)) continue;
     const current = totals.get(run.task_id) ?? { durationMs: null, tokens: null, costBrl: null };
     totals.set(run.task_id, {
       durationMs: sumObserved(