@zaip-ai/cli 1.0.7 → 1.0.8

package/templates/.agents/dashboard/apps/frontend/src/AppLoadingBoundary.tsx

@@ -0,0 +1,48 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import type { ReactNode } from "react";
+import { DashboardSkeleton } from "./AppLoadingPanels.js";
+import { PeriodTransitionOverlay } from "./AppRequestGuards.js";
+
+export function AppLoadingBoundary({
+  children,
+  error,
+  globalLoadingPending,
+  locale,
+  onRefresh,
+  operations,
+  snapshotNotice,
+  setupRoute,
+}: {
+  children: ReactNode;
+  error: string | null;
+  globalLoadingPending: boolean;
+  locale: "pt-BR" | "en-US";
+  onRefresh: () => void;
+  operations: OperationsProjection | null;
+  snapshotNotice: ReactNode;
+  setupRoute: ReactNode;
+}) {
+  if (setupRoute !== null) return setupRoute;
+  if (error && operations === null) {
+    return (
+      <main className="app-state">
+        <p>Dashboard local indisponível</p>
+        <h1>Não foi possível ler o workspace V2.</h1>
+        <pre>{error}</pre>
+        <button onClick={onRefresh} type="button">
+          Tentar novamente
+        </button>
+      </main>
+    );
+  }
+  if (operations === null) {
+    return (
+      <>
+        <DashboardSkeleton locale={locale} />
+        {snapshotNotice}
+        {globalLoadingPending ? <PeriodTransitionOverlay /> : null}
+      </>
+    );
+  }
+  return children;
+}

package/templates/.agents/dashboard/apps/frontend/src/AppLoadingPanels.tsx

@@ -10,8 +10,10 @@ export function DashboardSkeleton({ locale }: { locale: CostLocale }) {
   return (
     <main
       aria-busy="true"
+      aria-live="polite"
       aria-label={locale === "pt-BR" ? "Preparando dashboard" : "Preparing dashboard"}
       className="app-skeleton"
+      role="status"
     >
       <header className="app-skeleton-header">
         <div>

package/templates/.agents/dashboard/apps/frontend/src/AppOverlays.tsx

@@ -0,0 +1,247 @@
+import type { CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
+import type {
+  ChangeProjection,
+  MacroProjection,
+  OperationsProjection,
+  PrdDetailProjection,
+  SpecDetailProjection,
+} from "@zaip-ai/dashboard-operations/contracts";
+import {
+  EntityDetailsDialog,
+  MacroDocumentDialog,
+  MacroPlanningDialog,
+} from "@zaip-ai/dashboard-operations/react";
+import type { TaskTrace } from "@zaip-ai/dashboard-traceability/contracts";
+import { TaskTraceLoadingPanel, TaskTracePanel } from "@zaip-ai/dashboard-traceability/react";
+import { lazy, Suspense } from "react";
+import { DashboardLoadingNotice, type LoadingArea } from "./AppLoadingPanels.js";
+import type { ReconciliationResult } from "./dashboard-api.js";
+
+const DashboardHelpDialog = lazy(async () => ({
+  default: (await import("./DashboardHelpDialog.js")).DashboardHelpDialog,
+}));
+
+type DocumentDetail = {
+  kind: "prd" | "spec";
+  label: "PRD" | "SPEC";
+  preview: Pick<MacroProjection, "id" | "title" | "artifact_path">;
+  detail?: PrdDetailProjection | SpecDetailProjection;
+  error?: string;
+};
+
+export function AppOverlays({
+  costLocale,
+  documentDetail,
+  error,
+  failedArea,
+  helpOpen,
+  loadingArea,
+  operations,
+  reconciliationResult,
+  refreshDialog,
+  showTrace,
+  trace,
+  traceLink,
+  traceLoadingTaskId,
+  closeDocument,
+  onCloseHelp,
+  onCloseTrace,
+  onDismissError,
+  onDismissReconciliation,
+  onOpenDocument,
+  onOpenTrace,
+  onOpenTraceChange,
+  onOpenTraceMacro,
+  onRefreshCancel,
+  onRefreshFromDialog,
+  onRetry,
+  setTraceLink,
+}: {
+  costLocale: CostLocale;
+  documentDetail: DocumentDetail | null;
+  error: string | null;
+  failedArea: LoadingArea | null;
+  helpOpen: boolean;
+  loadingArea: LoadingArea | null;
+  operations: OperationsProjection;
+  reconciliationResult: ReconciliationResult | null;
+  refreshDialog: "choose" | "refreshing" | "reconciling" | null;
+  showTrace: boolean;
+  trace: TaskTrace | null;
+  traceLink:
+    | { kind: "change"; row: ChangeProjection }
+    | { kind: "macro"; label: "PRD" | "SPEC"; row: MacroProjection }
+    | null;
+  traceLoadingTaskId: string | null;
+  closeDocument: () => void;
+  onCloseHelp: () => void;
+  onCloseTrace: () => void;
+  onDismissError: () => void;
+  onDismissReconciliation: () => void;
+  onOpenDocument: (kind: "prd" | "spec", id: string) => void;
+  onOpenTrace: (taskId: string) => void;
+  onOpenTraceChange: (changeId: string) => void;
+  onOpenTraceMacro: (label: "PRD" | "SPEC", id: string) => void;
+  onRefreshCancel: () => void;
+  onRefreshFromDialog: (reconcileOpenWork: boolean) => void;
+  onRetry: () => void;
+  setTraceLink: (value: null) => void;
+}) {
+  return (
+    <>
+      {error ? (
+        <div aria-live="assertive" className="app-warning" role="alert">
+          <span>{error}</span>
+          {failedArea ? (
+            <button onClick={onRetry} type="button">
+              {costLocale === "pt-BR" ? "Tentar novamente" : "Try again"}
+            </button>
+          ) : null}
+          <button onClick={onDismissError} type="button">
+            ×
+          </button>
+        </div>
+      ) : null}
+      {showTrace ? null : traceLoadingTaskId ? (
+        <TaskTraceLoadingPanel locale={costLocale} taskId={traceLoadingTaskId} />
+      ) : trace ? (
+        <TaskTracePanel
+          locale={costLocale}
+          onClose={onCloseTrace}
+          onOpenChange={onOpenTraceChange}
+          onOpenPrd={(id) => onOpenTraceMacro("PRD", id)}
+          onOpenSpec={(id) => onOpenTraceMacro("SPEC", id)}
+          trace={trace}
+        />
+      ) : null}
+      {traceLink?.kind === "change" ? (
+        <EntityDetailsDialog
+          details={{ kind: "change", row: traceLink.row }}
+          locale={costLocale}
+          onClose={() => setTraceLink(null)}
+        />
+      ) : null}
+      {traceLink?.kind === "macro" ? (
+        <MacroPlanningDialog
+          label={traceLink.label}
+          locale={costLocale}
+          onClose={() => setTraceLink(null)}
+          onOpenDocument={onOpenDocument}
+          onOpenTrace={(taskId) => {
+            setTraceLink(null);
+            onOpenTrace(taskId);
+          }}
+          row={traceLink.row}
+          runs={operations.runs}
+          specs={operations.specs}
+          tasks={operations.tasks}
+        />
+      ) : null}
+      {documentDetail ? (
+        <MacroDocumentDialog
+          detail={documentDetail.detail}
+          error={documentDetail.error}
+          label={documentDetail.label}
+          locale={costLocale}
+          loading={!documentDetail.detail && !documentDetail.error}
+          onClose={closeDocument}
+          onRetry={() => onOpenDocument(documentDetail.kind, documentDetail.preview.id)}
+          preview={documentDetail.preview}
+        />
+      ) : null}
+      {helpOpen ? (
+        <Suspense fallback={null}>
+          <DashboardHelpDialog locale={costLocale} onClose={onCloseHelp} />
+        </Suspense>
+      ) : null}
+      {refreshDialog === "choose" ? (
+        <div className="app-refresh-dialog-backdrop">
+          <section
+            aria-label="Atualizar dashboard"
+            aria-modal="true"
+            className="app-refresh-dialog"
+            role="dialog"
+          >
+            <h2>{costLocale === "pt-BR" ? "Atualizar dashboard" : "Refresh dashboard"}</h2>
+            <p>
+              {costLocale === "pt-BR"
+                ? "Escolha uma atualização rápida ou reconcilie os itens que ainda estão em aberto."
+                : "Choose a quick refresh or reconcile work items that are still open."}
+            </p>
+            <div>
+              <button onClick={() => onRefreshFromDialog(false)} type="button">
+                {costLocale === "pt-BR" ? "Apenas atualizar dados" : "Refresh data only"}
+              </button>
+              <button onClick={() => onRefreshFromDialog(true)} type="button">
+                {costLocale === "pt-BR" ? "Reconciliar itens abertos" : "Reconcile open work"}
+              </button>
+            </div>
+            <button className="app-refresh-cancel" onClick={onRefreshCancel} type="button">
+              {costLocale === "pt-BR" ? "Cancelar" : "Cancel"}
+            </button>
+          </section>
+        </div>
+      ) : null}
+      {refreshDialog === "refreshing" || refreshDialog === "reconciling" ? (
+        <section aria-live="polite" className="app-refresh-status" role="status">
+          <i />
+          <div>
+            <strong>
+              {refreshDialog === "reconciling"
+                ? costLocale === "pt-BR"
+                  ? "Reconciliando itens em aberto…"
+                  : "Reconciling open work…"
+                : costLocale === "pt-BR"
+                  ? "Atualizando dados…"
+                  : "Refreshing data…"}
+            </strong>
+            <span>
+              {costLocale === "pt-BR"
+                ? "Você pode continuar usando o dashboard."
+                : "You can keep using the dashboard."}
+            </span>
+          </div>
+        </section>
+      ) : null}
+      {reconciliationResult !== null && refreshDialog === null ? (
+        <section aria-live="polite" className="app-reconciliation-result" role="status">
+          <strong>
+            {costLocale === "pt-BR"
+              ? "Resultado da reconciliação manual"
+              : "Manual reconciliation result"}
+          </strong>
+          <span>
+            {costLocale === "pt-BR"
+              ? `${reconciliationResult.reconciled_ids.length} item(ns) reconciliado(s).`
+              : `${reconciliationResult.reconciled_ids.length} item(s) reconciled.`}
+          </span>
+          {reconciliationResult.reconciled_ids.length > 0 ? (
+            <p>{reconciliationResult.reconciled_ids.join(", ")}</p>
+          ) : null}
+          {reconciliationResult.blocked.length > 0 ? (
+            <p>
+              {costLocale === "pt-BR" ? "Bloqueados: " : "Blocked: "}
+              {reconciliationResult.blocked
+                .map((item) => `${item.id}${item.reason === null ? "" : ` (${item.reason})`}`)
+                .join("; ")}
+            </p>
+          ) : null}
+          {reconciliationResult.not_reconciled.length > 0 ? (
+            <p>
+              {costLocale === "pt-BR" ? "Não reconciliados: " : "Not reconciled: "}
+              {reconciliationResult.not_reconciled
+                .map((item) => `${item.id}${item.reason === null ? "" : ` (${item.reason})`}`)
+                .join("; ")}
+            </p>
+          ) : null}
+          <button onClick={onDismissReconciliation} type="button">
+            {costLocale === "pt-BR" ? "Fechar" : "Dismiss"}
+          </button>
+        </section>
+      ) : null}
+      {loadingArea !== null && loadingArea !== "operations" && refreshDialog === null ? (
+        <DashboardLoadingNotice area={loadingArea} locale={costLocale} />
+      ) : null}
+    </>
+  );
+}

package/templates/.agents/dashboard/apps/frontend/src/AppRequestGuards.tsx

@@ -0,0 +1,95 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import { type ReactNode, useEffect, useRef } from "react";
+import type { OperationsBoardPage } from "./dashboard-api.js";
+
+export function needsAtomicCostSnapshot(dashboardView: unknown, costsLoaded: boolean): boolean {
+  void dashboardView;
+  void costsLoaded;
+  return false;
+}
+
+export function isCurrentDashboardRequest(requestVersion: number, currentVersion: number): boolean {
+  return requestVersion === currentVersion;
+}
+
+export function isCurrentOperationsPeriodRequest(
+  requestVersion: number,
+  currentVersion: number,
+  requestPeriod: { from: string | null; to: string | null },
+  currentPeriod: { from: string | null; to: string | null },
+): boolean {
+  return (
+    isCurrentDashboardRequest(requestVersion, currentVersion) &&
+    requestPeriod.from === currentPeriod.from &&
+    requestPeriod.to === currentPeriod.to
+  );
+}
+
+export function isAbortError(cause: unknown): boolean {
+  return cause instanceof DOMException && cause.name === "AbortError";
+}
+
+export function isCurrentPeriodTransition(requestVersion: number, currentVersion: number): boolean {
+  return requestVersion === currentVersion;
+}
+
+export function isCurrentOperationsPageRequest(
+  requestVersion: number,
+  currentVersion: number,
+  signal: AbortSignal,
+): boolean {
+  return isCurrentDashboardRequest(requestVersion, currentVersion) && !signal.aborted;
+}
+
+export function mergeBoardPages(
+  projection: OperationsProjection,
+  pages: readonly OperationsBoardPage[],
+): OperationsProjection {
+  const unique = <T extends { id: string }>(rows: readonly T[]) => [
+    ...new Map(rows.map((row) => [row.id, row] as const)).values(),
+  ];
+  return {
+    ...projection,
+    prds: unique([...projection.prds, ...pages.flatMap((page) => page.prds)]),
+    specs: unique([...projection.specs, ...pages.flatMap((page) => page.specs)]),
+    tasks: unique([...projection.tasks, ...pages.flatMap((page) => page.tasks)]),
+    changes: unique([...projection.changes, ...pages.flatMap((page) => page.changes)]),
+  };
+}
+
+export function PeriodTransitionOverlay() {
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    overlayRef.current?.focus();
+  }, []);
+  return (
+    <div
+      aria-busy="true"
+      aria-live="polite"
+      className="period-transition-overlay"
+      onKeyDownCapture={(event) => event.preventDefault()}
+      ref={overlayRef}
+      role="status"
+      tabIndex={-1}
+    >
+      <div className="period-transition-overlay__content">
+        <i aria-hidden="true" className="period-transition-overlay__spinner" />
+        <span className="period-transition-overlay__label">Carregando...</span>
+      </div>
+    </div>
+  );
+}
+
+export function PeriodTransitionShell({
+  pending,
+  children,
+}: {
+  pending: boolean;
+  children?: ReactNode;
+}) {
+  return (
+    <div aria-hidden={pending || undefined} inert={pending}>
+      {children}
+    </div>
+  );
+}

package/templates/.agents/dashboard/apps/frontend/src/AppSetupRoutes.tsx

@@ -0,0 +1,87 @@
+import type { CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
+import { lazy, type ReactNode, Suspense } from "react";
+import type { DashboardApiClient, FxRate, PricingCatalog } from "./dashboard-api.js";
+
+const PricingSettingsPage = lazy(async () => ({
+  default: (await import("./PricingSettingsDialog.js")).PricingSettingsPage,
+}));
+const ProjectSettingsPage = lazy(async () => ({
+  default: (await import("./ProjectSettingsPage.js")).ProjectSettingsPage,
+}));
+const CostCalculationGuidePage = lazy(async () => ({
+  default: (await import("./CostCalculationGuidePage.js")).CostCalculationGuidePage,
+}));
+
+export const pricingSetupPath = "/setup-pricing";
+export const projectSetupPath = "/setup-project";
+export const costCalculationGuidePath = "/cost-calculation-guide";
+
+interface AppSetupRouteInput {
+  api: DashboardApiClient;
+  costLocale: CostLocale;
+  fxRate: FxRate | null;
+  navigate: (pathname: string) => void;
+  pathname: string;
+  pricing: PricingCatalog | null;
+  refresh: () => Promise<void>;
+  setFxRate: (rate: FxRate) => void;
+  setPricing: (catalog: PricingCatalog) => void;
+}
+
+export function renderAppSetupRoute(input: AppSetupRouteInput): ReactNode | null {
+  const { api, costLocale, fxRate, navigate, pathname, pricing, refresh, setFxRate, setPricing } =
+    input;
+  if (pathname === pricingSetupPath) {
+    if (pricing === null) {
+      return (
+        <main className="app-state">
+          <p>{costLocale === "pt-BR" ? "Configuração do projeto" : "Project settings"}</p>
+          <h1>
+            {costLocale === "pt-BR" ? "Carregando catálogo de preços…" : "Loading pricing catalog…"}
+          </h1>
+          <button onClick={() => navigate("/")} type="button">
+            {costLocale === "pt-BR" ? "Voltar ao dashboard" : "Back to dashboard"}
+          </button>
+        </main>
+      );
+    }
+    return (
+      <Suspense fallback={null}>
+        <PricingSettingsPage
+          catalog={pricing}
+          fxRate={fxRate}
+          locale={costLocale}
+          onClose={() => navigate("/")}
+          onSave={async (catalog) => {
+            setPricing(await api.savePricing(catalog));
+            await refresh();
+          }}
+          onSaveFxRate={async (rate) => {
+            setFxRate(await api.saveFxRate(rate));
+            await refresh();
+          }}
+        />
+      </Suspense>
+    );
+  }
+  if (pathname === costCalculationGuidePath && pricing !== null) {
+    return (
+      <Suspense fallback={null}>
+        <CostCalculationGuidePage
+          catalog={pricing}
+          fxRate={fxRate}
+          locale={costLocale}
+          onClose={() => navigate("/")}
+        />
+      </Suspense>
+    );
+  }
+  if (pathname === projectSetupPath) {
+    return (
+      <Suspense fallback={null}>
+        <ProjectSettingsPage api={api} locale={costLocale} onClose={() => navigate("/")} />
+      </Suspense>
+    );
+  }
+  return null;
+}