@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,766 @@
+import type { CostMonitorProjection } from "@zaip-ai/dashboard-cost-monitor/contracts";
+import type { CostCurrency, CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
+import { CostMonitorPage } from "@zaip-ai/dashboard-cost-monitor/react";
+import type {
+  ChangeProjection,
+  MacroProjection,
+  OperationsProjection,
+  PrdDetailProjection,
+  SpecDetailProjection,
+} from "@zaip-ai/dashboard-operations/contracts";
+import {
+  EntityDetailsDialog,
+  MacroDocumentDialog,
+  MacroPlanningDialog,
+  OperationsPage,
+} 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, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DashboardLoadingNotice,
+  DashboardSkeleton,
+  LoadFailedPanel,
+  type LoadingArea,
+  LoadingPanel,
+} from "./AppLoadingPanels.js";
+import { DashboardCapabilityNav, type DashboardView } from "./DashboardCapabilityNav.js";
+import type { FxRate, PricingCatalog, ReconciliationResult } from "./dashboard-api.js";
+import { DashboardApiClient } from "./dashboard-api.js";
+import { defaultOperationsPeriod, requestPeriodForOperations } from "./operations-period.js";
+import { loadAtomicCostSnapshot, loadCostViewSnapshot } from "./snapshot-coherence.js";
+import { TraceabilityWorkspace } from "./TraceabilityWorkspace.js";
+import "./loading-feedback.css";
+
+const legacyCostMonitorPath = "/zaip-cost-monitor";
+const DashboardHelpDialog = lazy(async () => {
+  const module = await import("./DashboardHelpDialog.js");
+  return { default: module.DashboardHelpDialog };
+});
+const AgentCatalogSettingsPage = lazy(async () => ({
+  default: (await import("./AgentCatalogSettingsPage.js")).AgentCatalogSettingsPage,
+}));
+const PricingSettingsPage = lazy(async () => ({
+  default: (await import("./PricingSettingsDialog.js")).PricingSettingsPage,
+}));
+const ProjectSettingsPage = lazy(async () => ({
+  default: (await import("./ProjectSettingsPage.js")).ProjectSettingsPage,
+}));
+const pricingSetupPath = "/setup-pricing";
+const agentCatalogSetupPath = "/setup-agents";
+const projectSetupPath = "/setup-project";
+const sessionTokenKey = "zaip-dashboard-session-token";
+const localeKey = "zaip-dashboard-locale";
+const currencyKey = "zaip-dashboard-currency";
+
+function savedLocale(): CostLocale {
+  return window.localStorage.getItem(localeKey) === "en-US" ? "en-US" : "pt-BR";
+}
+
+function initialDashboardView(pathname: string): DashboardView | null {
+  return pathname.replace(/\/+$/, "") === legacyCostMonitorPath ? "cost-monitor" : null;
+}
+
+export function App() {
+  const token = useMemo(() => {
+    const url = new URL(window.location.href);
+    const suppliedToken = url.searchParams.get("token");
+    const sessionToken =
+      suppliedToken ??
+      window.localStorage.getItem(sessionTokenKey) ??
+      window.sessionStorage.getItem(sessionTokenKey) ??
+      "";
+    if (sessionToken) {
+      window.localStorage.setItem(sessionTokenKey, sessionToken);
+      window.sessionStorage.setItem(sessionTokenKey, sessionToken);
+    }
+    if (url.searchParams.has("token")) {
+      url.searchParams.delete("token");
+      window.history.replaceState(null, "", `${url.pathname}${url.search}${url.hash}`);
+    }
+    return sessionToken;
+  }, []);
+  const api = useMemo(() => new DashboardApiClient(token), [token]);
+  const [dashboardView, setDashboardView] = useState<DashboardView | null>(() =>
+    initialDashboardView(window.location.pathname),
+  );
+  const [operations, setOperations] = useState<OperationsProjection | null>(null);
+  const [costs, setCosts] = useState<CostMonitorProjection | null>(null);
+  const [displayedCosts, setDisplayedCosts] = useState<CostMonitorProjection | null>(null);
+  const [trace, setTrace] = useState<TaskTrace | null>(null);
+  const [documentDetail, setDocumentDetail] = useState<
+    | { label: "PRD"; detail: PrdDetailProjection }
+    | { label: "SPEC"; detail: SpecDetailProjection }
+    | null
+  >(null);
+  const [traceLink, setTraceLink] = useState<
+    | { kind: "change"; row: ChangeProjection }
+    | { kind: "macro"; label: "PRD" | "SPEC"; row: MacroProjection }
+    | null
+  >(null);
+  const [traceLoadingTaskId, setTraceLoadingTaskId] = useState<string | null>(null);
+  const [selectedTraceTaskId, setSelectedTraceTaskId] = useState("");
+  const [costLocale, setCostLocale] = useState<CostLocale>(savedLocale);
+  const [currency, setCurrency] = useState<CostCurrency>(() =>
+    window.localStorage.getItem(currencyKey) === "USD" ? "USD" : "BRL",
+  );
+  const [operationsPeriod, setOperationsPeriod] = useState(() => defaultOperationsPeriod);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [pricing, setPricing] = useState<PricingCatalog | null>(null);
+  const [fxRate, setFxRate] = useState<FxRate | null>(null);
+  const [pathname, setPathname] = useState(window.location.pathname);
+  const [operationsLoading, setOperationsLoading] = useState(true);
+  const [loadingArea, setLoadingArea] = useState<LoadingArea | null>("operations");
+  const [failedArea, setFailedArea] = useState<LoadingArea | null>(null);
+  const [refreshDialog, setRefreshDialog] = useState<
+    "choose" | "refreshing" | "reconciling" | null
+  >(null);
+  const [error, setError] = useState<string | null>(null);
+  const [reconciliationResult, setReconciliationResult] = useState<ReconciliationResult | null>(
+    null,
+  );
+  const [lastUpdatedAt, setLastUpdatedAt] = useState<string | null>(null);
+  const [dashboardIdentity, setDashboardIdentity] = useState({
+    title: "Dashboard Zaip AIOS",
+    repositoryName: "",
+  });
+  const refreshVersion = useRef(0);
+  const detailLoadInFlight = useRef(false);
+  const costLoadInFlight = useRef(false);
+  const costLoadingCount = useRef(0);
+  const costsLoadedRef = useRef(false);
+  const operationsDetailLoadedRef = useRef(false);
+  const costPrefetch = useRef<{ key: string; promise: ReturnType<typeof api.snapshot> } | null>(
+    null,
+  );
+  const costPeriod = requestPeriodForOperations(operationsPeriod);
+  const costSnapshotKey = `${currency}:${costPeriod.from ?? ""}:${costPeriod.to ?? ""}`;
+
+  const refresh = useCallback(
+    async (visible = true, reconcileOpenWork = false) => {
+      const requestVersion = ++refreshVersion.current;
+      const isCurrentRequest = () => requestVersion === refreshVersion.current;
+      if (visible) {
+        setOperationsLoading(true);
+        setLoadingArea("operations");
+      }
+      setError(null);
+      setFailedArea(null);
+      try {
+        const period = requestPeriodForOperations(operationsPeriod);
+        if (reconcileOpenWork) {
+          const snapshot = await api.reconcileOpenWork(currency, period);
+          if (!isCurrentRequest()) return;
+          setReconciliationResult(snapshot.reconciliation);
+          setOperations(snapshot.operations);
+          operationsDetailLoadedRef.current = true;
+          setCosts(snapshot.costs);
+          costsLoadedRef.current = true;
+          setDisplayedCosts(null);
+          if (snapshot.dashboard) {
+            setDashboardIdentity({
+              title: snapshot.dashboard.title,
+              repositoryName: snapshot.dashboard.repository_name,
+            });
+          }
+          setLastUpdatedAt(snapshot.projection.source_latest_at);
+        } else {
+          // The overview endpoint carries server-side aggregates for KPI
+          // parity while omitting expensive Run detail until a capability is selected.
+          const requestingDetails = operationsDetailLoadedRef.current;
+          if (costsLoadedRef.current) {
+            const snapshot = await loadAtomicCostSnapshot(() => api.snapshot(currency, period));
+            if (!isCurrentRequest()) return;
+            setOperations(snapshot.operations);
+            operationsDetailLoadedRef.current = true;
+            setCosts(snapshot.costs);
+            costsLoadedRef.current = true;
+            setDisplayedCosts(null);
+            setLastUpdatedAt(snapshot.projection.source_latest_at);
+          } else {
+            const projection = requestingDetails
+              ? await api.operations(period)
+              : await api.operations(period, true);
+            if (!isCurrentRequest()) return;
+            setOperations(projection);
+            operationsDetailLoadedRef.current = requestingDetails;
+            setLastUpdatedAt(projection.summary.source_latest_at);
+          }
+        }
+      } catch (cause) {
+        if (!isCurrentRequest()) return;
+        setError(cause instanceof Error ? cause.message : String(cause));
+        setFailedArea("operations");
+      } finally {
+        if (visible && isCurrentRequest()) {
+          setOperationsLoading(false);
+          setLoadingArea((current) => (current === "operations" ? null : current));
+        }
+      }
+    },
+    [api, currency, operationsPeriod],
+  );
+
+  const loadOperationsDetails = useCallback(async (): Promise<OperationsProjection | null> => {
+    if (operationsDetailLoadedRef.current) return operations;
+    if (detailLoadInFlight.current) return null;
+    detailLoadInFlight.current = true;
+    costLoadingCount.current += 1;
+    setLoadingArea("costs");
+    setFailedArea(null);
+    try {
+      const period = requestPeriodForOperations(operationsPeriod);
+      const projection = await api.operations(period);
+      setOperations(projection);
+      operationsDetailLoadedRef.current = true;
+      return projection;
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      setFailedArea("operations");
+      return null;
+    } finally {
+      detailLoadInFlight.current = false;
+      costLoadingCount.current = Math.max(0, costLoadingCount.current - 1);
+      if (costLoadingCount.current === 0) {
+        setLoadingArea((current) => (current === "costs" ? null : current));
+      }
+    }
+  }, [api, operations, operationsPeriod]);
+
+  const loadCosts = useCallback(async () => {
+    if (costsLoadedRef.current) return;
+    if (costLoadInFlight.current) return;
+    costLoadInFlight.current = true;
+    costLoadingCount.current += 1;
+    setLoadingArea("costs");
+    setFailedArea(null);
+    try {
+      const period = requestPeriodForOperations(operationsPeriod);
+      const prefetched = costPrefetch.current;
+      await loadCostViewSnapshot(
+        () =>
+          prefetched?.key === costSnapshotKey ? prefetched.promise : api.snapshot(currency, period),
+        (snapshot) => {
+          setOperations(snapshot.operations);
+          operationsDetailLoadedRef.current = true;
+          setCosts(snapshot.costs);
+          setDisplayedCosts(null);
+          setLastUpdatedAt(snapshot.projection.source_latest_at);
+        },
+      );
+      costsLoadedRef.current = true;
+      costPrefetch.current = null;
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      setFailedArea("costs");
+    } finally {
+      costLoadInFlight.current = false;
+      costLoadingCount.current = Math.max(0, costLoadingCount.current - 1);
+      if (costLoadingCount.current === 0) {
+        setLoadingArea((current) => (current === "costs" ? null : current));
+      }
+    }
+  }, [api, costSnapshotKey, currency, operationsPeriod]);
+
+  useEffect(() => {
+    if (
+      operations === null ||
+      costsLoadedRef.current ||
+      costPrefetch.current?.key === costSnapshotKey
+    )
+      return;
+    const promise = api.snapshot(currency, requestPeriodForOperations(operationsPeriod));
+    costPrefetch.current = { key: costSnapshotKey, promise };
+    void promise.catch(() => {
+      if (costPrefetch.current?.promise === promise) costPrefetch.current = null;
+    });
+  }, [api, costSnapshotKey, currency, operations, operationsPeriod]);
+
+  const refreshFromDialog = async (reconcileOpenWork: boolean) => {
+    if (reconcileOpenWork) setReconciliationResult(null);
+    setRefreshDialog(reconcileOpenWork ? "reconciling" : "refreshing");
+    await refresh(false, reconcileOpenWork);
+    setRefreshDialog(null);
+  };
+
+  useEffect(() => {
+    void refresh();
+    const timer = window.setInterval(() => void refresh(false), 30_000);
+    return () => window.clearInterval(timer);
+  }, [refresh]);
+
+  useEffect(() => {
+    window.localStorage.setItem(localeKey, costLocale);
+  }, [costLocale]);
+
+  useEffect(() => {
+    window.localStorage.setItem(currencyKey, currency);
+  }, [currency]);
+
+  useEffect(() => {
+    if (
+      !["/", pricingSetupPath, agentCatalogSetupPath, projectSetupPath].includes(
+        window.location.pathname,
+      )
+    ) {
+      window.history.replaceState(null, "", `/${window.location.search}${window.location.hash}`);
+      setPathname("/");
+    }
+  }, []);
+
+  useEffect(() => {
+    const syncPathname = () => setPathname(window.location.pathname);
+    window.addEventListener("popstate", syncPathname);
+    return () => window.removeEventListener("popstate", syncPathname);
+  }, []);
+
+  useEffect(() => {
+    if (pathname !== pricingSetupPath || pricing !== null) return;
+    void Promise.all([api.pricing(), api.fxRate()])
+      .then(([catalog, rate]) => {
+        setPricing(catalog);
+        setFxRate(rate);
+      })
+      .catch((cause) => setError(String(cause)));
+  }, [api, pathname, pricing]);
+
+  const navigate = (nextPath: string) => {
+    window.history.pushState(null, "", nextPath);
+    setPathname(nextPath);
+    window.scrollTo({ left: 0, top: 0 });
+  };
+
+  async function openTrace(taskId: string) {
+    setError(null);
+    setFailedArea(null);
+    setTrace(null);
+    setTraceLoadingTaskId(taskId);
+    setLoadingArea("traceability");
+    await new Promise<void>((resolveFrame) => window.requestAnimationFrame(() => resolveFrame()));
+    try {
+      const loadedTrace = await api.taskTrace(taskId);
+      const cardTask = operations?.tasks.find((task) => task.id === taskId);
+      setTrace({
+        ...loadedTrace,
+        task_title: cardTask?.title || loadedTrace.task_title || taskId,
+        task_risk: cardTask?.risk || loadedTrace.task_risk || null,
+        task_created_at: cardTask?.created_at || loadedTrace.task_created_at || null,
+        task_progress: cardTask?.progress ?? loadedTrace.task_progress ?? 0,
+      });
+      return true;
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+      setFailedArea("traceability");
+      return false;
+    } finally {
+      setTraceLoadingTaskId((current) => (current === taskId ? null : current));
+      setLoadingArea((current) => (current === "traceability" ? null : current));
+    }
+  }
+
+  function openTraceChange(changeId: string) {
+    const row = operations?.changes.find((change) => change.id === changeId);
+    if (row === undefined) return;
+    setTrace(null);
+    setTraceLink({ kind: "change", row });
+  }
+
+  function openTraceMacro(label: "PRD" | "SPEC", id: string) {
+    const rows = label === "PRD" ? operations?.prds : operations?.specs;
+    const row = rows?.find((macro) => macro.id === id);
+    if (row === undefined) return;
+    setTrace(null);
+    setTraceLink({ kind: "macro", label, row });
+  }
+
+  async function openDocument(kind: "prd" | "spec", id: string) {
+    setError(null);
+    try {
+      if (kind === "prd") {
+        setDocumentDetail({ label: "PRD", detail: await api.prd(id) });
+      } else {
+        setDocumentDetail({ label: "SPEC", detail: await api.spec(id) });
+      }
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    }
+  }
+
+  const selectDashboardView = async (nextView: DashboardView) => {
+    setDashboardView(nextView);
+    window.scrollTo({ left: 0, top: 0 });
+    const detailedOperations =
+      nextView === "operations" || nextView === "traceability"
+        ? await loadOperationsDetails()
+        : operations;
+    if (nextView === "cost-monitor") {
+      void loadCosts();
+    }
+    if (nextView === "traceability") {
+      const latest = (detailedOperations ?? operations)?.tasks
+        .filter((task) => task.status === "completed")
+        .toSorted(
+          (a, b) =>
+            Date.parse(b.finished_at ?? b.updated_at) - Date.parse(a.finished_at ?? a.updated_at),
+        )[0];
+      if (latest) {
+        setSelectedTraceTaskId(latest.id);
+        void openTrace(latest.id);
+      }
+      return;
+    }
+    setTrace(null);
+    setTraceLoadingTaskId(null);
+  };
+
+  const capabilityNavigation = (
+    <DashboardCapabilityNav
+      activeView={dashboardView}
+      locale={costLocale}
+      onChange={(view) => void selectDashboardView(view)}
+    />
+  );
+  const currentCostByRun = useMemo(
+    () =>
+      new Map(
+        (displayedCosts ?? costs)?.runs.map((run) => [run.run_id, run.estimated_brl] as const) ??
+          [],
+      ),
+    [costs, displayedCosts],
+  );
+  const retryLastLoad = () => {
+    setError(null);
+    if (failedArea === "costs") void loadCosts();
+    else if (failedArea === "traceability" && selectedTraceTaskId)
+      void openTrace(selectedTraceTaskId);
+    else void refresh();
+  };
+
+  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 === agentCatalogSetupPath) {
+    return (
+      <Suspense fallback={null}>
+        <AgentCatalogSettingsPage api={api} locale={costLocale} onClose={() => navigate("/")} />
+      </Suspense>
+    );
+  }
+  if (pathname === projectSetupPath) {
+    return (
+      <Suspense fallback={null}>
+        <ProjectSettingsPage api={api} locale={costLocale} onClose={() => navigate("/")} />
+      </Suspense>
+    );
+  }
+  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={() => void refresh()} type="button">
+          Tentar novamente
+        </button>
+      </main>
+    );
+  }
+  if (operations === null) {
+    return <DashboardSkeleton locale={costLocale} />;
+  }
+  return (
+    <>
+      {error ? (
+        <div className="app-warning" role="status">
+          <span>{error}</span>
+          {failedArea ? (
+            <button onClick={retryLastLoad} type="button">
+              {costLocale === "pt-BR" ? "Tentar novamente" : "Try again"}
+            </button>
+          ) : null}
+          <button onClick={() => setError(null)} type="button">
+            ×
+          </button>
+        </div>
+      ) : null}
+      <OperationsPage
+        alternateContent={
+          dashboardView === "cost-monitor" ? (
+            costs === null ? (
+              () =>
+                failedArea === "costs" ? (
+                  <LoadFailedPanel locale={costLocale} onRetry={retryLastLoad} />
+                ) : (
+                  <LoadingPanel area="costs" locale={costLocale} />
+                )
+            ) : (
+              (globalFilters) => (
+                <CostMonitorPage
+                  currency={currency}
+                  data={costs}
+                  embedded
+                  globalFilters={globalFilters}
+                  lastUpdatedAt={lastUpdatedAt}
+                  locale={costLocale}
+                  loading={loadingArea === "costs"}
+                  onLocaleChange={setCostLocale}
+                  onCurrencyChange={setCurrency}
+                  onActiveDataChange={setDisplayedCosts}
+                  onOpenTrace={(taskId) => void openTrace(taskId)}
+                  onRefresh={() => setRefreshDialog("choose")}
+                  operations={operations}
+                />
+              )
+            )
+          ) : dashboardView === "traceability" ? (
+            () => (
+              <TraceabilityWorkspace
+                loadingTaskId={traceLoadingTaskId}
+                locale={costLocale}
+                onSelectTask={(taskId) => {
+                  setSelectedTraceTaskId(taskId);
+                  void openTrace(taskId);
+                }}
+                onOpenChange={openTraceChange}
+                onOpenPrd={(prdId) => openTraceMacro("PRD", prdId)}
+                onOpenSpec={(specId) => openTraceMacro("SPEC", specId)}
+                selectedTaskId={selectedTraceTaskId}
+                tasks={operations.tasks}
+                trace={trace}
+              />
+            )
+          ) : dashboardView === null ? (
+            <span aria-hidden="true" hidden />
+          ) : undefined
+        }
+        capabilityNavigation={capabilityNavigation}
+        data={operations}
+        dashboardTitle={dashboardIdentity.title}
+        repositoryName={dashboardIdentity.repositoryName}
+        loading={operationsLoading}
+        locale={costLocale}
+        resolveRunCostBrl={
+          costs === null ? undefined : (runId) => currentCostByRun.get(runId) ?? null
+        }
+        onLocaleChange={setCostLocale}
+        onDetailDataRequest={() => void loadOperationsDetails()}
+        onOpenDocument={(kind, id) => void openDocument(kind, id)}
+        onOpenTask={openTrace}
+        onPeriodChange={(preset, range) => setOperationsPeriod({ preset, range })}
+        onRefresh={() => setRefreshDialog("choose")}
+        settings={
+          <div className="dashboard-global-settings">
+            <label>
+              <span>{costLocale === "pt-BR" ? "Moeda" : "Currency"}</span>
+              <select
+                aria-label={costLocale === "pt-BR" ? "Moeda" : "Currency"}
+                onChange={(event) => setCurrency(event.target.value as CostCurrency)}
+                value={currency}
+              >
+                <option value="BRL">BRL · Real brasileiro</option>
+                <option value="USD">USD · US Dollar</option>
+              </select>
+            </label>
+            <button className="dashboard-help-open" onClick={() => setHelpOpen(true)} type="button">
+              {costLocale === "pt-BR" ? "Abrir ajuda e guides" : "Open help and guides"}
+            </button>
+            <button
+              className="dashboard-help-open"
+              onClick={() => navigate(pricingSetupPath)}
+              type="button"
+            >
+              {costLocale === "pt-BR" ? "Configurar preços e câmbio" : "Configure pricing and FX"}
+            </button>
+            <button
+              className="dashboard-help-open"
+              onClick={() => navigate(agentCatalogSetupPath)}
+              type="button"
+            >
+              {costLocale === "pt-BR" ? "Configurar agentes" : "Configure agents"}
+            </button>
+            <button
+              className="dashboard-help-open"
+              onClick={() => navigate(projectSetupPath)}
+              type="button"
+            >
+              {costLocale === "pt-BR" ? "Configurar projeto" : "Configure project"}
+            </button>
+          </div>
+        }
+      />
+      {dashboardView === "traceability" ? null : traceLoadingTaskId ? (
+        <TaskTraceLoadingPanel locale={costLocale} taskId={traceLoadingTaskId} />
+      ) : trace ? (
+        <TaskTracePanel
+          locale={costLocale}
+          onClose={() => setTrace(null)}
+          onOpenChange={openTraceChange}
+          onOpenPrd={(prdId) => openTraceMacro("PRD", prdId)}
+          onOpenSpec={(specId) => openTraceMacro("SPEC", specId)}
+          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={(kind, id) => void openDocument(kind, id)}
+          onOpenTrace={(taskId) => {
+            setTraceLink(null);
+            void openTrace(taskId);
+          }}
+          row={traceLink.row}
+          runs={operations.runs}
+          specs={operations.specs}
+          tasks={operations.tasks}
+        />
+      ) : null}
+      {documentDetail ? (
+        <MacroDocumentDialog
+          detail={documentDetail.detail}
+          label={documentDetail.label}
+          locale={costLocale}
+          onClose={() => setDocumentDetail(null)}
+        />
+      ) : null}
+      {helpOpen ? (
+        <Suspense fallback={null}>
+          <DashboardHelpDialog locale={costLocale} onClose={() => setHelpOpen(false)} />
+        </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={() => void refreshFromDialog(false)} type="button">
+                {costLocale === "pt-BR" ? "Apenas atualizar dados" : "Refresh data only"}
+              </button>
+              <button onClick={() => void refreshFromDialog(true)} type="button">
+                {costLocale === "pt-BR" ? "Reconciliar itens abertos" : "Reconcile open work"}
+              </button>
+            </div>
+            <button
+              className="app-refresh-cancel"
+              onClick={() => setRefreshDialog(null)}
+              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={() => setReconciliationResult(null)} type="button">
+            {costLocale === "pt-BR" ? "Fechar" : "Dismiss"}
+          </button>
+        </section>
+      ) : null}
+      {loadingArea !== null &&
+      loadingArea !== "operations" &&
+      refreshDialog === null &&
+      !(dashboardView === "cost-monitor" && costs === null) ? (
+        <DashboardLoadingNotice area={loadingArea} locale={costLocale} />
+      ) : null}
+    </>
+  );
+}