@zaip-ai/cli 1.3.7 → 1.4.1

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

@@ -23,6 +23,17 @@ import {
   projectSetupPath,
   renderAppSetupRoute,
 } from "./AppSetupRoutes.js";
+import {
+  type BoardStageState,
+  initialWorkBoardStages,
+  type OverviewClassification,
+  type OverviewClassificationPages,
+  type OverviewStatusKind,
+  type OverviewStatusPages,
+  overviewClassificationPageKey,
+  overviewStatusPageKey,
+  traceTaskSearchStages,
+} from "./AppWorkBoard.js";
 import { currencyKey, initialDashboardView, savedLocale } from "./app-preferences.js";
 import { readDashboardSessionToken } from "./app-session-token.js";
 import { renderDashboardAlternateContent } from "./DashboardAlternateContent.js";
@@ -39,6 +50,7 @@ import type {
   WorkBoardStage,
 } from "./dashboard-api.js";
 import { DashboardApiClient } from "./dashboard-api.js";
+import { reconciliationCommandOutcome } from "./dashboard-api-reconciliation.js";
 import {
   defaultOperationsPeriod,
   isAllTimeDisplayRangeChange,
@@ -58,53 +70,6 @@ import { useOperationsDetailExport } from "./use-operations-detail-export.js";
 import "./loading-feedback.css";
 import "./period-transition-overlay.css";
 
-type BoardStageState = { loading: boolean; error: string | null };
-type OverviewStatusKind = "task" | "spec" | "prd";
-type OverviewClassification = "lite" | "standard" | "critical" | "empty" | "structured" | "rework";
-type OverviewStatusPage = {
-  items:
-    | OperationsProjection["tasks"]
-    | OperationsProjection["specs"]
-    | OperationsProjection["prds"];
-  total: number;
-  loading: boolean;
-  error: string | null;
-};
-type OverviewStatusPages = Partial<
-  Record<`${WorkBoardStage}:${OverviewStatusKind}`, OverviewStatusPage>
->;
-const overviewStatusPageKey = (stage: WorkBoardStage, kind: OverviewStatusKind) =>
-  `${stage}:${kind}` as const;
-type OverviewClassificationPages = Partial<
-  Record<`${OverviewStatusKind}:${OverviewClassification}`, OverviewStatusPage>
->;
-const overviewClassificationPageKey = (
-  kind: OverviewStatusKind,
-  classification: OverviewClassification,
-) => `${kind}:${classification}` as const;
-const initialWorkBoardStages: readonly WorkBoardStage[] = [
-  "definition",
-  "planning",
-  "ready",
-  "executing",
-  "verifying",
-  "completed",
-  "blocked",
-  "cancelled",
-  "failed",
-];
-const traceTaskSearchStages: readonly WorkBoardStage[] = [
-  "completed",
-  "executing",
-  "ready",
-  "blocked",
-  "verifying",
-  "failed",
-  "cancelled",
-  "planning",
-  "definition",
-];
-
 export {
   isAbortError,
   isCurrentCostSummaryRequest,
@@ -119,6 +84,14 @@ export {
   shouldLoadCostSummary,
 } from "./AppRequestGuards.js";
 export function App() {
+  useEffect(() => {
+    const token = readDashboardSessionToken();
+    if (!token) return undefined;
+    // EventSource remains open for hidden tabs and reconnects after reload,
+    // giving the local runtime a browser-owned lifecycle without a fast poll.
+    const lease = new EventSource(`/api/v2/browser-lease?token=${encodeURIComponent(token)}`);
+    return () => lease.close();
+  }, []);
   const [snapshotUpdating, setSnapshotUpdating] = useState(false);
   const [snapshotNoticeDismissed, setSnapshotNoticeDismissed] = useState(false);
   const [snapshotNoticeDelayElapsed, setSnapshotNoticeDelayElapsed] = useState(false);
@@ -275,7 +248,12 @@ export function App() {
   // forcing a second full aggregate calculation.
   const initialAggregateFreshRef = useRef(false);
   const refresh = useCallback(
-    async (visible = true, reconcileOpenWork = false, refreshProjection = false) => {
+    async (
+      visible = true,
+      reconcileOpenWork = false,
+      refreshProjection = false,
+      reloadCostSummary = false,
+    ) => {
       operationsDetailCancelRef.current?.();
       operationsDetailCancelRef.current = null;
       operationsDetailAbortRef.current?.abort();
@@ -310,20 +288,36 @@ export function App() {
       setError(null);
       setFailedArea(null);
       try {
-        if (reconcileOpenWork || refreshProjection) {
-          let snapshot: Awaited<ReturnType<typeof api.refreshProjection>>;
-          let reconciliation:
-            | Awaited<ReturnType<typeof api.reconcileOpenWork>>["reconciliation"]
-            | null = null;
-          if (reconcileOpenWork) {
-            const reconciledSnapshot = await api.reconcileOpenWork(currency, period);
-            reconciliation = reconciledSnapshot.reconciliation;
-            snapshot = reconciledSnapshot;
-          } else {
-            snapshot = await api.refreshProjection(currency, period);
+        if (reconcileOpenWork) {
+          const reconciliationResponse = await api.reconcileOpenWork(currency, period);
+          const commandOutcome = reconciliationCommandOutcome(
+            reconciliationResponse,
+            isCurrentRequest(),
+          );
+          // The compact reconciliation outcome is useful on its own. Reveal
+          // it before the optional quick GET so a historical snapshot load
+          // cannot keep the operator in the progress dialog.
+          setReconciliationResult(commandOutcome.reconciliation);
+          if (commandOutcome.dismissProgressDialog) setRefreshDialog(null);
+          if (!commandOutcome.applySnapshotState) return false;
+          setSnapshotUpdating(reconciliationResponse.snapshot_state === "updating");
+          // Reconciliation returns promptly while a new SQLite generation may
+          // still be promoted. Only read a compact Operations projection when
+          // that promotion is already complete; the revision observer handles
+          // the deferred case without fetching Cost Monitor detail data.
+          if (commandOutcome.reloadQuickProjection) {
+            const projection = await api.operations(period, "quick", undefined, true);
+            if (!isCurrentRequest()) return false;
+            initialAggregateFreshRef.current = false;
+            setOperations(projection);
+            quickOverviewMetricsRef.current = projection.summary.overview_metrics;
+            operationsDetailLoadedRef.current = false;
+            setLastUpdatedAt(projection.summary.source_latest_at);
           }
-          if (!isCurrentRequest()) return;
-          if (reconciliation !== null) setReconciliationResult(reconciliation);
+        } else if (refreshProjection) {
+          let snapshot: Awaited<ReturnType<typeof api.refreshProjection>>;
+          snapshot = await api.refreshProjection(currency, period);
+          if (!isCurrentRequest()) return false;
           setOperations(snapshot.operations);
           quickOverviewMetricsRef.current = snapshot.operations.summary.overview_metrics;
           operationsDetailLoadedRef.current = true;
@@ -346,11 +340,11 @@ export function App() {
               // An English first paint must have the factual USD summary
               // before Operations formats currency. BRL retains the fast
               // Operations-only path until the user opens Cost Monitor.
-              currency === "USD"
+              currency === "USD" || reloadCostSummary
                 ? api.costMonitor(currency, period, "summary")
                 : Promise.resolve(null),
             ]);
-            if (!isCurrentRequest()) return;
+            if (!isCurrentRequest()) return false;
             initialAggregateFreshRef.current = false;
             setOperations(projection);
             quickOverviewMetricsRef.current = projection.summary.overview_metrics;
@@ -365,10 +359,12 @@ export function App() {
             setLastUpdatedAt(projection.summary.source_latest_at);
           }
         }
+        return true;
       } catch (cause) {
-        if (!isCurrentRequest()) return;
+        if (!isCurrentRequest()) return false;
         setError(cause instanceof Error ? cause.message : String(cause));
         setFailedArea(activeDashboardView === "cost-monitor" ? "costs" : "operations");
+        return false;
       } finally {
         if (
           isCurrentRequest() &&
@@ -737,8 +733,14 @@ export function App() {
       setReconciliationResult(null);
     }
     setRefreshDialog(reconcileOpenWork ? "reconciling" : "refreshing");
-    await refresh(false, reconcileOpenWork, !reconcileOpenWork);
-    setRefreshDialog(null);
+    try {
+      await refresh(false, reconcileOpenWork, !reconcileOpenWork);
+    } finally {
+      // A transport/runtime failure must not trap the user in the progress
+      // overlay. `refresh` normally reports the error on the affected panel;
+      // this also covers an unexpected rejection before it reaches that path.
+      setRefreshDialog(null);
+    }
   };
   useAppEffects({
     api,
@@ -754,10 +756,12 @@ export function App() {
     pricing,
     refresh,
     refreshVersion,
+    setSnapshotUpdating,
     setError,
     setFxRate,
     setPathname,
     setPricing,
+    snapshotUpdating,
   });
 
   const navigate = (nextPath: string) => {
@@ -972,7 +976,9 @@ export function App() {
     navigate,
     pathname,
     pricing,
-    refresh,
+    refresh: async () => {
+      await refresh();
+    },
     setFxRate,
     setPricing,
   });

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

@@ -2,6 +2,22 @@ import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contrac
 import type { ReactNode } from "react";
 import { DashboardSkeleton } from "./AppLoadingPanels.js";
 import { PeriodTransitionOverlay } from "./AppRequestGuards.js";
+import "./app-loading-boundary.css";
+
+const errorCopy = {
+  "pt-BR": {
+    action: "Tentar novamente",
+    guidance:
+      "Abra a pasta dashboard dentro de .agents e dê dois cliques novamente no arquivo executável.",
+    title: "Não foi possível carregar o dashboard",
+  },
+  "en-US": {
+    action: "Try again",
+    guidance:
+      "Open the dashboard folder inside .agents, then double-click the executable file again.",
+    title: "Unable to load the dashboard",
+  },
+} as const;
 
 export function AppLoadingBoundary({
   children,
@@ -24,14 +40,26 @@ export function AppLoadingBoundary({
 }) {
   if (setupRoute !== null) return setupRoute;
   if (error && operations === null) {
+    const copy = errorCopy[locale];
     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 className="app-loading-boundary" aria-labelledby="dashboard-load-error-title">
+        <section className="app-loading-boundary__card" role="alert">
+          <div aria-hidden="true" className="app-loading-boundary__status-icon">
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
+              <path d="M12 8v4m0 4h.01M10.29 3.86 2.82 16.5A2 2 0 0 0 4.54 19.5h14.92a2 2 0 0 0 1.72-3L13.71 3.86a2 2 0 0 0-3.42 0Z" />
+            </svg>
+          </div>
+          <div className="app-loading-boundary__content">
+            <p className="app-loading-boundary__eyebrow">
+              {locale === "pt-BR" ? "Dashboard indisponível" : "Dashboard unavailable"}
+            </p>
+            <h1 id="dashboard-load-error-title">{copy.title}</h1>
+            <p>{copy.guidance}</p>
+          </div>
+          <button onClick={onRefresh} type="button">
+            {copy.action}
+          </button>
+        </section>
       </main>
     );
   }

package/templates/.agents/dashboard/apps/frontend/src/AppWorkBoard.ts

@@ -0,0 +1,55 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import type { WorkBoardStage } from "./dashboard-api.js";
+
+export type BoardStageState = { loading: boolean; error: string | null };
+export type OverviewStatusKind = "task" | "spec" | "prd";
+export type OverviewClassification =
+  | "lite"
+  | "standard"
+  | "critical"
+  | "empty"
+  | "structured"
+  | "rework";
+export type OverviewStatusPage = {
+  items:
+    | OperationsProjection["tasks"]
+    | OperationsProjection["specs"]
+    | OperationsProjection["prds"];
+  total: number;
+  loading: boolean;
+  error: string | null;
+};
+export type OverviewStatusPages = Partial<
+  Record<`${WorkBoardStage}:${OverviewStatusKind}`, OverviewStatusPage>
+>;
+export const overviewStatusPageKey = (stage: WorkBoardStage, kind: OverviewStatusKind) =>
+  `${stage}:${kind}` as const;
+export type OverviewClassificationPages = Partial<
+  Record<`${OverviewStatusKind}:${OverviewClassification}`, OverviewStatusPage>
+>;
+export const overviewClassificationPageKey = (
+  kind: OverviewStatusKind,
+  classification: OverviewClassification,
+) => `${kind}:${classification}` as const;
+export const initialWorkBoardStages: readonly WorkBoardStage[] = [
+  "definition",
+  "planning",
+  "ready",
+  "executing",
+  "verifying",
+  "completed",
+  "blocked",
+  "cancelled",
+  "failed",
+];
+export const traceTaskSearchStages: readonly WorkBoardStage[] = [
+  "completed",
+  "executing",
+  "ready",
+  "blocked",
+  "verifying",
+  "failed",
+  "cancelled",
+  "planning",
+  "definition",
+];

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

@@ -15,6 +15,7 @@ import {
   withDetectedStackVersions,
 } from "./project-settings-model.js";
 import "./project-settings-page.css";
+import "./project-stack-versions.css";
 
 type Locale = "pt-BR" | "en-US";
 const copy = {
@@ -63,10 +64,16 @@ const copy = {
     overrides: "Opções avançadas (JSON)",
     overridesHint:
       "Use apenas fatos técnicos transversais confirmados. Deixe vazio quando não houver exceções.",
-    versions: "Versões verificadas no workspace",
+    versions: "Versões detectadas no workspace",
     exact: "Verificada",
     constraint: "Requisito",
     versionUnavailable: "Não encontrada",
+    runtime: "Runtime do Dashboard",
+    installed: "Instalado no projeto",
+    missing: "Ausente no projeto",
+    bundled: "Empacotado no Dashboard",
+    current: "Atual",
+    configured: "Configurado",
     contextGuide:
       "O contexto começa pelas fontes canônicas e inclui somente arquivos relevantes para a tarefa. Saídas geradas são consultadas apenas em setup, release ou checagem de paridade.",
     contextDomains:
@@ -118,10 +125,16 @@ const copy = {
     overrides: "Advanced options (JSON)",
     overridesHint:
       "Use only confirmed cross-cutting technical facts. Leave empty when there are no exceptions.",
-    versions: "Versions verified in the workspace",
+    versions: "Versions detected in the workspace",
     exact: "Verified",
     constraint: "Requirement",
     versionUnavailable: "Not found",
+    runtime: "Dashboard runtime",
+    installed: "Installed in project",
+    missing: "Missing from project",
+    bundled: "Bundled in Dashboard",
+    current: "Current",
+    configured: "Configured",
     contextGuide:
       "Context starts from canonical sources and includes only files relevant to the task. Generated outputs are consulted only for setup, release, or parity checks.",
     contextDomains:

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

@@ -17,6 +17,7 @@ const componentLabels: Record<StackComponentId, { pt: string; en: string }> = {
   cache_messaging: { pt: "Cache e mensageria", en: "Cache and messaging" },
   async_queue: { pt: "Filas e processamento assíncrono", en: "Queues and async processing" },
   backend_infrastructure: { pt: "Infraestrutura backend", en: "Backend infrastructure" },
+  backend_hosting: { pt: "Hospedagem do backend", en: "Backend hosting" },
   web_framework: { pt: "Framework do Web App", en: "Web App framework" },
   web_language: { pt: "Linguagem do Web App", en: "Web App language" },
   web_build: { pt: "Build do Web App", en: "Web App build" },
@@ -26,6 +27,14 @@ const componentLabels: Record<StackComponentId, { pt: string; en: string }> = {
   site_islands: { pt: "Componentes interativos", en: "Interactive components" },
   site_build: { pt: "Build do site", en: "Site build" },
   site_hosting: { pt: "Hospedagem do site", en: "Site hosting" },
+  prometheus: { pt: "Coleta de métricas", en: "Metrics collection" },
+  grafana: { pt: "Dashboards", en: "Dashboards" },
+  uptime_kuma: { pt: "Monitoramento de disponibilidade", en: "Availability monitoring" },
+  cadvisor: { pt: "Métricas de containers", en: "Container metrics" },
+  node_exporter: { pt: "Métricas de host", en: "Host metrics" },
+  redis_exporter: { pt: "Métricas do Redis", en: "Redis metrics" },
+  k6: { pt: "Teste de carga", en: "Load testing" },
+  autocannon: { pt: "Teste HTTP de carga", en: "HTTP load testing" },
 };
 
 export function StackComponentEditor({
@@ -48,6 +57,8 @@ export function StackComponentEditor({
       scope: "site",
       title: locale === "pt-BR" ? "Site e landing pages" : "Site and landing pages",
     },
+    { scope: "observability", title: locale === "pt-BR" ? "Observabilidade" : "Observability" },
+    { scope: "testing", title: locale === "pt-BR" ? "Testes sob demanda" : "On-demand testing" },
   ] as const;
   const update = (
     id: StackComponentId,
@@ -122,6 +133,12 @@ export function StackVersions({
     versionUnavailable: string;
     exact: string;
     constraint: string;
+    runtime: string;
+    installed: string;
+    missing: string;
+    bundled: string;
+    current: string;
+    configured: string;
   };
 }) {
   if (components.length === 0) return null;
@@ -133,14 +150,24 @@ export function StackVersions({
           <article key={component.name}>
             <div className="project-stack-version-identity">
               <strong>{component.name}</strong>
-              <code>{component.version ?? text.versionUnavailable}</code>
+              <code>
+                {text.current}: {component.version ?? text.versionUnavailable}
+              </code>
+              {component.configured_version !== null &&
+              component.configured_version !== component.version ? (
+                <code>
+                  {text.configured}: {component.configured_version}
+                </code>
+              ) : null}
             </div>
             <span className={`is-${component.verification}`}>
-              {component.verification === "exact"
-                ? text.exact
-                : component.verification === "constraint"
-                  ? text.constraint
-                  : text.versionUnavailable}
+              {component.installation === "runtime"
+                ? text.runtime
+                : component.installation === "installed"
+                  ? text.installed
+                  : component.installation === "bundled"
+                    ? text.bundled
+                    : text.missing}
             </span>
             {component.source ? <small>{component.source}</small> : null}
           </article>

package/templates/.agents/dashboard/apps/frontend/src/app-loading-boundary.css

@@ -0,0 +1,98 @@
+.app-loading-boundary {
+  display: grid;
+  min-height: 100vh;
+  padding: 24px;
+  place-items: center;
+}
+
+.app-loading-boundary__card {
+  display: grid;
+  width: min(100%, 520px);
+  gap: 24px;
+  padding: clamp(24px, 5vw, 40px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  background: linear-gradient(145deg, rgba(17, 24, 39, 0.94), rgba(10, 14, 23, 0.98));
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+  text-align: center;
+}
+
+.app-loading-boundary__status-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  margin-inline: auto;
+  border: 1px solid rgba(220, 38, 38, 0.42);
+  border-radius: 999px;
+  background: rgba(220, 38, 38, 0.14);
+  color: #fecaca;
+  place-items: center;
+}
+
+.app-loading-boundary__status-icon svg {
+  width: 24px;
+  height: 24px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+}
+
+.app-loading-boundary__content {
+  display: grid;
+  gap: 10px;
+}
+
+.app-loading-boundary__eyebrow {
+  margin: 0;
+  color: #fecaca;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  line-height: 1.3;
+  text-transform: uppercase;
+}
+
+.app-loading-boundary h1 {
+  margin: 0;
+  color: #f1f5f9;
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  font-weight: 650;
+  letter-spacing: -0.035em;
+  line-height: 1.15;
+}
+
+.app-loading-boundary__content > p:last-child {
+  max-width: 44ch;
+  margin: 0 auto;
+  color: #cbd5e1;
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.app-loading-boundary button {
+  min-height: 44px;
+  justify-self: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 12px 22px;
+  background: linear-gradient(135deg, #00b0f0 0%, #72f4fb 100%);
+  color: #042330;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.app-loading-boundary button:hover {
+  filter: brightness(1.06);
+}
+
+@media (max-width: 420px) {
+  .app-loading-boundary {
+    padding: 16px;
+  }
+
+  .app-loading-boundary__card {
+    gap: 20px;
+  }
+}

package/templates/.agents/dashboard/apps/frontend/src/cost-period-refresh.test.ts

@@ -137,7 +137,7 @@ describe("Cost period refresh", () => {
       'api.operations(period, "quick", undefined, initialAggregateFreshRef.current)',
     );
     expect(compactRefresh).toContain(
-      'currency === "USD" ? api.costMonitor(currency, period, "summary") : Promise.resolve(null)',
+      'currency === "USD" || reloadCostSummary ? api.costMonitor(currency, period, "summary") : Promise.resolve(null)',
     );
     expect(refresh).toContain("setDisplayedCosts(null);");
     expect(refresh).toContain("const activeDashboardView = dashboardViewRef.current");
@@ -168,10 +168,10 @@ describe("Cost period refresh", () => {
     expect(loaders).toMatch(/api\.sqliteViewPage\(\s*"cost_monitor_agent_invocations"/);
     expect(loaders).toContain("const loadCostGroupPage = useCallback<LoadCostGroupPage>");
     expect(loaders).toContain("task_count: nullableSqlNumber(row.task_count)");
-    expect(loaders).toContain("prd_count: Number(row.prd_count ?? 0)");
-    expect(loaders).toContain("spec_count: Number(row.spec_count ?? 0)");
-    expect(loaders).toContain("evidence_count: Number(row.evidence_count ?? 0)");
-    expect(loaders).toContain("test_count: Number(row.validation_count ?? 0)");
+    expect(loaders).toContain("prd_count: nullableSqlNumber(row.prd_count)");
+    expect(loaders).toContain("spec_count: nullableSqlNumber(row.spec_count)");
+    expect(loaders).toContain("evidence_count: nullableSqlNumber(row.evidence_count)");
+    expect(loaders).toContain("test_count: nullableSqlNumber(row.validation_count)");
     for (const dimension of [
       "provider",
       "model",

package/templates/.agents/dashboard/apps/frontend/src/dashboard-api-reconciliation.ts

@@ -0,0 +1,33 @@
+import type { ReconciliationResult } from "./dashboard-api.js";
+
+export interface ReconcileOpenWorkResponse {
+  reconciliation: ReconciliationResult;
+  snapshot_state: "current" | "updating";
+  projection_refresh_completed: boolean;
+}
+
+export function shouldReloadQuickProjectionAfterReconciliation(
+  response: ReconcileOpenWorkResponse,
+): boolean {
+  return response.projection_refresh_completed;
+}
+
+export function reconciliationCommandOutcome(
+  response: ReconcileOpenWorkResponse,
+  isCurrentRequest: boolean,
+): {
+  reconciliation: ReconciliationResult;
+  dismissProgressDialog: true;
+  applySnapshotState: boolean;
+  reloadQuickProjection: boolean;
+} {
+  return {
+    // The command result belongs to the operator's POST, rather than to the
+    // projection request version. It must survive a passive GET race.
+    reconciliation: response.reconciliation,
+    dismissProgressDialog: true,
+    applySnapshotState: isCurrentRequest,
+    reloadQuickProjection:
+      isCurrentRequest && shouldReloadQuickProjectionAfterReconciliation(response),
+  };
+}