@zaip-ai/cli 3.3.0 → 3.5.0

package/templates/.agents/dashboard/apps/frontend/src/use-app-work-board.ts

@@ -1,25 +1,19 @@
-import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
-import { type Dispatch, type RefObject, type SetStateAction, useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { isAbortError, mergeBoardPages } from "./AppRequestGuards.js";
 import {
-  type BoardStageState,
   initialWorkBoardStages,
   type OverviewClassification,
-  type OverviewClassificationPages,
   type OverviewStatusKind,
-  type OverviewStatusPages,
   overviewClassificationPageKey,
   overviewStatusPageKey,
 } from "./AppWorkBoard.js";
+import type { AppWorkBoardOptions } from "./app-work-board-options.js";
 import type {
-  DashboardApiClient,
   OperationsBoardPage,
   OperationsPageFilters,
   WorkBoardStage,
 } from "./dashboard-api.js";
-import { type OperationsPeriodState, requestPeriodForOperations } from "./operations-period.js";
-
-type StateSetter<T> = Dispatch<SetStateAction<T>>;
+import { requestPeriodForOperations } from "./operations-period.js";
 
 export function useAppWorkBoard({
   api,
@@ -42,30 +36,7 @@ export function useAppWorkBoard({
   setOperations,
   setOverviewClassificationPages,
   setOverviewStatusPages,
-}: {
-  api: DashboardApiClient;
-  boardAbortControllersRef: RefObject<Map<WorkBoardStage, AbortController>>;
-  boardFilterKeyRef: RefObject<string>;
-  boardFiltersRef: RefObject<OperationsPageFilters>;
-  boardInFlightRef: RefObject<Set<WorkBoardStage>>;
-  boardInitialPageRef: RefObject<Set<WorkBoardStage>>;
-  boardLoadedRef: RefObject<Partial<Record<WorkBoardStage, number>>>;
-  boardRequestVersionRef: RefObject<number>;
-  dashboardView: "operations" | "cost-monitor" | "traceability" | null;
-  operations: OperationsProjection | null;
-  operationsPeriod: OperationsPeriodState;
-  operationsPeriodRef: RefObject<OperationsPeriodState>;
-  overviewStatusInFlightRef: RefObject<Set<string>>;
-  quickOverviewMetricsRef: RefObject<OperationsProjection["summary"]["overview_metrics"]>;
-  setBoardKindTotals: StateSetter<
-    Partial<Record<WorkBoardStage, OperationsBoardPage["totals_by_kind"]>>
-  >;
-  setBoardStates: StateSetter<Partial<Record<WorkBoardStage, BoardStageState>>>;
-  setBoardTotals: StateSetter<Partial<Record<WorkBoardStage, number>>>;
-  setOperations: StateSetter<OperationsProjection | null>;
-  setOverviewClassificationPages: StateSetter<OverviewClassificationPages>;
-  setOverviewStatusPages: StateSetter<OverviewStatusPages>;
-}) {
+}: AppWorkBoardOptions) {
   const resetBoard = useCallback(() => {
     boardRequestVersionRef.current += 1;
     for (const controller of boardAbortControllersRef.current.values()) controller.abort();
@@ -365,26 +336,42 @@ export function useAppWorkBoard({
   useEffect(() => {
     if (dashboardView !== "operations" || operations === null) return;
     let cancelled = false;
+    // resetBoard invalidates an older filter generation before React has had
+    // a chance to run this effect's cleanup. Do not let that older idle
+    // callback mark stages as initialized: its responses are rejected by
+    // loadMoreBoard, and the new generation would otherwise never hydrate.
+    const hydrationRequestVersion = boardRequestVersionRef.current;
+    const isCurrentHydration = () =>
+      !cancelled && hydrationRequestVersion === boardRequestVersionRef.current;
     const hydrateBoard = async () => {
+      if (!isCurrentHydration()) return;
       const pending = initialWorkBoardStages.filter(
         (stage) => !boardInitialPageRef.current.has(stage) && !boardInFlightRef.current.has(stage),
       );
-      for (let offset = 0; offset < pending.length && !cancelled; offset += 3) {
+      for (let offset = 0; offset < pending.length && isCurrentHydration(); offset += 3) {
         const batch = pending.slice(offset, offset + 3);
+        if (!isCurrentHydration()) return;
         for (const stage of batch) boardInitialPageRef.current.add(stage);
         await Promise.all(batch.map((stage) => loadMoreBoard(stage)));
       }
     };
-    const idle =
-      typeof window.requestIdleCallback === "function"
-        ? { kind: "idle" as const, id: window.requestIdleCallback(() => void hydrateBoard()) }
-        : { kind: "timeout" as const, id: window.setTimeout(() => void hydrateBoard(), 0) };
+    // This board is the visible Operations surface. requestIdleCallback has
+    // no delivery deadline and can remain deferred during rapid interaction,
+    // leaving every cleared column empty despite a current API population.
+    // Schedule it after the current paint instead, with a cancellable timer.
+    const timer = window.setTimeout(() => void hydrateBoard(), 0);
     return () => {
       cancelled = true;
-      if (idle.kind === "idle") window.cancelIdleCallback(idle.id);
-      else window.clearTimeout(idle.id);
+      window.clearTimeout(timer);
     };
-  }, [boardInFlightRef, boardInitialPageRef, dashboardView, loadMoreBoard, operations]);
+  }, [
+    boardInFlightRef,
+    boardInitialPageRef,
+    boardRequestVersionRef,
+    dashboardView,
+    loadMoreBoard,
+    operations,
+  ]);
 
   return {
     boardExportSource,

package/templates/.agents/dashboard/apps/frontend/src/use-runtime-status.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import {
+  type DashboardRuntimeStatus,
+  readDashboardRuntimeStatus,
+} from "./dashboard-runtime-status.js";
+
+export function useRuntimeStatus() {
+  const [status, setStatus] = useState<DashboardRuntimeStatus | null>(null);
+  const [unavailable, setUnavailable] = useState(false);
+  useEffect(() => {
+    let disposed = false;
+    let timer: ReturnType<typeof setTimeout>;
+    let controller: AbortController;
+    async function poll() {
+      controller = new AbortController();
+      const timeout = setTimeout(() => controller.abort(), 4000);
+      try {
+        const next = await readDashboardRuntimeStatus(controller.signal);
+        if (!disposed) {
+          setStatus(next);
+          setUnavailable(false);
+        }
+      } catch {
+        if (!disposed) setUnavailable(true);
+      } finally {
+        clearTimeout(timeout);
+        if (!disposed) timer = setTimeout(poll, 5000);
+      }
+    }
+    void poll();
+    return () => {
+      disposed = true;
+      clearTimeout(timer);
+      controller?.abort();
+    };
+  }, []);
+  return { status, unavailable };
+}

package/templates/.agents/dashboard/apps/frontend/src/workspace-status.css

@@ -0,0 +1,20 @@
+.workspace-status {
+  position: sticky;
+  top: 0;
+  z-index: 61;
+  padding: 8px 24px;
+  background: var(--surface-muted, #111827);
+  color: var(--text, #f1f5f9);
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  font-size: 12px;
+}
+.workspace-status__warning {
+  margin: 0;
+  color: var(--error-text, #fecaca);
+}
+.workspace-status__warning p {
+  margin: 4px 0;
+}
+.workspace-status code {
+  overflow-wrap: anywhere;
+}

package/templates/.agents/dashboard/modules/cost-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-cost-monitor",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "private": true,
   "type": "module",
   "exports": {

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

@@ -44,7 +44,9 @@ describe("CompactLifecycleCostTable filtered subtotal", () => {
       },
     });
     const [table] = view.props.children as readonly {
-      props: { columns: Array<{ key: string; footer?: unknown }> };
+      props: {
+        columns: Array<{ key: string; footer?: unknown; render?: (row: unknown) => unknown }>;
+      };
     }[];
     expect(table).toBeDefined();
     const footer = (key: string) =>
@@ -56,9 +58,29 @@ describe("CompactLifecycleCostTable filtered subtotal", () => {
     expect(footer("tokens")).toBe("540");
     expect(footer("cost")).toContain("R$");
     expect(footer("cost")).not.toContain("US$");
+    const unknownRow = {
+      metrics: { duration: unavailable, total_tokens: known(15), cost: unavailable },
+    };
+    const render = (key: string) =>
+      table!.props.columns.find((column) => column.key === key)?.render?.(unknownRow);
+    expect(render("duration")).toBe("Indisponível");
+    expect(render("cost")).toBe("Indisponível");
+    expect(render("tokens")).toBe("15");
+    const partialRow = {
+      metrics: {
+        duration: { ...unavailable, known_sum: 1000, coverage_ratio: 0.5 },
+        cost: { ...unavailable, coverage_ratio: 0.5 },
+      },
+    };
+    expect(
+      table!.props.columns.find((column) => column.key === "duration")?.render?.(partialRow),
+    ).toBe("1 seg (parcial)");
+    expect(table!.props.columns.find((column) => column.key === "cost")?.render?.(partialRow)).toBe(
+      "0 (parcial)",
+    );
   });
 
-  it("renders unknown numeric subtotals as zero", () => {
+  it("distinguishes unavailable duration from observed zero subtotals", () => {
     const view = CompactLifecycleCostTable({
       locale: "pt-BR",
       rows: [],
@@ -91,7 +113,7 @@ describe("CompactLifecycleCostTable filtered subtotal", () => {
       table!.props.columns.find((column) => column.key === key)?.footer;
     expect(footer("runs")).toBe("0");
     expect(footer("tokens")).toBe("0");
-    expect(footer("duration")).toBe("0");
+    expect(footer("duration")).toBe("Indisponível");
   });
 
   it("does not render a subtotal row when all lifecycle metrics are unavailable", () => {

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

@@ -4,7 +4,6 @@ import {
   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";
 
@@ -83,17 +82,23 @@ export function CompactLifecycleCostTable({
   onOpenTrace?: (id: string) => void;
 }) {
   const metric = (value: KnownMetric, format: (known: number) => string) => {
-    return format(value.known_sum ?? 0);
+    if (value.known_sum === 0 && !value.complete && value.coverage_ratio === 0)
+      return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+    const formatted = format(value.known_sum ?? 0);
+    return value.complete
+      ? formatted
+      : `${formatted} (${locale === "pt-BR" ? "parcial" : "partial"})`;
   };
   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);
+    if (effective === null) return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+    return metric(row.metrics.duration, (value) =>
+      value === 0 ? "0" : formatDurationMs(value, locale),
+    );
   };
   const subtotalMetric = (value: KnownMetric, format: (known: number) => string) => {
     if (subtotal === null) return undefined;
-    return format(value.known_sum ?? 0);
+    return metric(value, format);
   };
   const subtotalMetricUnavailable = (value: KnownMetric) =>
     value.unknown > 0 && value.known_sum === 0;
@@ -210,24 +215,17 @@ export function CompactLifecycleCostTable({
 }
 
 export function compactLifecycleDurationMs(row: CompactLifecycleCostRow): number | null {
-  return withTokenBackedCompactDuration(row).metrics.duration.known_sum;
+  const duration = row.metrics.duration;
+  return duration.known_sum === 0 && !duration.complete && duration.coverage_ratio === 0
+    ? null
+    : 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 },
-    },
-  };
+  // Compatibility export: token volume does not establish observed elapsed time.
+  return row;
 }
 
 function CompactLifecyclePagination({

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

@@ -3,6 +3,15 @@ import { useEffect, useRef, useState } from "react";
 import type { CostMonitorProjection } from "../contracts.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
 
+export {
+  type CostRunPage,
+  loadCostMonitorDetail,
+  loadCostMonitorPeriod,
+  loadCostMonitorRunPage,
+} from "./cost-monitor-loaders.js";
+
+import type { loadCostMonitorPeriod } from "./cost-monitor-loaders.js";
+
 export type CostPeriod = "all" | "7" | "30" | "90" | "month";
 /** Cost Monitor opens on the current Sao Paulo month, matching Operations. */
 export const defaultCostPeriod: CostPeriod = "month";
@@ -21,171 +30,6 @@ export function costPeriodDateRange(
   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 });
-  // Period and filter changes hydrate aggregate read models only. Entity
-  // detail is loaded through its dedicated bounded page route.
-  query.set("scope", "summary");
-  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;
-}
-
-/** Exact dimensional projection, requested only after a dimensional tab opens. */
-export async function loadCostMonitorDetail({
-  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 = costMonitorQuery({
-    currency,
-    ...(filters === undefined ? {} : { filters }),
-    ...(from === undefined ? {} : { from }),
-    ...(refresh === undefined ? {} : { refresh }),
-    ...(to === undefined ? {} : { to }),
-  });
-  query.set("scope", "detail");
-  const response = await fetcher(`/api/v2/cost-monitor?${query.toString()}`, {
-    ...(signal === undefined ? {} : { signal }),
-  });
-  if (!response.ok)
-    throw new Error(
-      (await response.text()).trim() || `Cost Monitor detail request failed (${response.status})`,
-    );
-  return (await response.json()) as CostMonitorProjection;
-}
-
-export async function loadCostMonitorRunPage({
-  currency,
-  filters,
-  from,
-  limit = 10,
-  offset,
-  refresh,
-  to,
-  signal,
-  fetcher = fetch,
-}: {
-  currency: CostCurrency;
-  filters?: CostFilterState;
-  from?: string;
-  limit?: number;
-  offset: number;
-  refresh?: string | null;
-  to?: string;
-  signal?: AbortSignal;
-  fetcher?: typeof fetch;
-}): Promise<CostRunPage> {
-  const query = costMonitorQuery({
-    currency,
-    ...(filters === undefined ? {} : { filters }),
-    ...(from === undefined ? {} : { from }),
-    ...(refresh === undefined ? {} : { refresh }),
-    ...(to === undefined ? {} : { to }),
-  });
-  query.set("scope", "runs");
-  query.set("offset", String(Math.max(0, offset)));
-  query.set("limit", String(Math.max(1, limit)));
-  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 run page request failed (${response.status})`);
-  }
-  const payload = (await response.json()) as Pick<CostMonitorProjection, "runs" | "run_page">;
-  return {
-    page_only: true,
-    runs: payload.runs,
-    run_page: payload.run_page ?? { offset, limit, total: null, has_more: false },
-  };
-}
-
-/** Complete contract for the incremental Run endpoint; it is not a summary projection. */
-export interface CostRunPage {
-  page_only: true;
-  runs: CostMonitorProjection["runs"];
-  run_page: { offset: number; limit: number; total: number | null; has_more: boolean };
-}
-
-function costMonitorQuery({
-  currency,
-  filters,
-  from,
-  refresh,
-  to,
-}: {
-  currency: CostCurrency;
-  filters?: CostFilterState;
-  from?: string;
-  refresh?: string | null;
-  to?: string;
-}): URLSearchParams {
-  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);
-  return query;
-}
-
 export function useCostMonitorPeriod({
   currency,
   data,
@@ -219,7 +63,9 @@ export function useCostMonitorPeriod({
   loadPeriodRef.current = loadPeriod;
   const requestedRange =
     dateRange === undefined
-      ? costPeriodDateRange(period)
+      ? snapshotBacked && period === defaultCostPeriod
+        ? undefined
+        : costPeriodDateRange(period)
       : { from: dateRange.start, to: dateRange.end };
   const requestedFrom = requestedRange?.from;
   const requestedTo = requestedRange?.to;
@@ -471,7 +317,7 @@ function Select({
   return (
     <label>
       <span>{label}</span>
-      <select onChange={(event) => onChange(event.target.value)} value={value}>
+      <select aria-label={label} onChange={(event) => onChange(event.target.value)} value={value}>
         <option value="">{allLabel}</option>
         {options.map((option) => (
           <option key={option} value={option}>

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

@@ -102,16 +102,9 @@ export function CostGroupsTable({
       showAgentIdentity || showModelLifecycleDetails ? (value ?? 0) : value,
       locale,
     );
-  const displayDuration = (value: DurationCoverage) =>
-    (showAgentIdentity || showModelLifecycleDetails) && value.known_sum <= 0
-      ? "0"
-      : formatDurationCoverage(value, locale);
+  const displayDuration = (value: DurationCoverage) => formatDurationCoverage(value, locale);
   const displayCurrency = (value: number | null) =>
-    formatAuditableCurrency(
-      showAgentIdentity || showModelLifecycleDetails ? (value ?? 0) : value,
-      currency,
-      locale,
-    );
+    formatAuditableCurrency(value, currency, locale);
   const conversationCount = (row: unknown): number | null =>
     (row as { conversation_count?: number | null }).conversation_count ?? null;
   const pageTotals = {

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

@@ -177,7 +177,7 @@ describe("cost monitor navigation", () => {
         period: defaultCostPeriod,
         runPageRange: monthRange,
       }),
-    ).toEqual(monthRange);
+    ).toBeUndefined();
   });
 
   it("keeps compact SPEC and PRD pages and their export source on the all-time snapshot", () => {
@@ -282,7 +282,7 @@ describe("cost monitor navigation", () => {
       duration_ms: 619_958_763,
     });
   });
-  it("fills token-backed compact duration without a visible missing-data count", () => {
+  it("renders factual compact duration without a visible missing-data count", () => {
     const table = readFileSync(new URL("./CompactLifecycleCostTable.tsx", import.meta.url), "utf8");
     const summary = readFileSync(new URL("./CostSummary.tsx", import.meta.url), "utf8");
     expect(table).toContain("compactLifecycleDurationMs(row)");
@@ -292,7 +292,7 @@ describe("cost monitor navigation", () => {
     expect(summary).not.toContain("formatPercent(");
   });
 
-  it("estimates a paginated lifecycle row whenever it has tokens but no time", () => {
+  it("preserves unavailable timing and coverage when a paginated row has only tokens", () => {
     const metric = (known_sum: number, unknown: number) => ({
       known_sum,
       unknown,
@@ -306,12 +306,12 @@ describe("cost monitor navigation", () => {
         cost: metric(0, 1),
       },
     } as never;
-    expect(compactLifecycleDurationMs(row)).toBe(3_600_000);
+    expect(compactLifecycleDurationMs(row)).toBeNull();
     expect(withTokenBackedCompactDuration(row).metrics.duration).toEqual({
-      known_sum: 3_600_000,
-      unknown: 0,
-      complete: true,
-      coverage_ratio: 1,
+      known_sum: 0,
+      unknown: 1,
+      complete: false,
+      coverage_ratio: 0,
     });
   });