@zaip-ai/cli 1.0.7 → 1.3.0

package/templates/.agents/dashboard/modules/operations/src/react/export/ExcelExportAction.tsx

@@ -8,15 +8,377 @@ export type ExcelExportInput = {
   view: string;
   filters: Readonly<Record<string, unknown>>;
   rows: readonly Record<string, unknown>[];
+  pageSource?:
+    | PreparedExportPageSource
+    | {
+        prepare: () => Promise<PreparedExportPageSource>;
+      }
+    | undefined;
+};
+export type PreparedExportPageSource = {
+  totalRows: number;
+  pages: () => AsyncGenerator<readonly Record<string, unknown>[]>;
 };
 export const EXPORT_SUCCESS_TOAST_MS = 4_000;
 
+export const PERIOD_EXPORT_COLUMNS = [
+  "key",
+  "prds",
+  "specs",
+  "tasks",
+  "runs",
+  "tests",
+  "evidences",
+  "tokens",
+  "cost",
+  "duration_hours",
+] as const;
+
+// Work views contain PRDs, SPECs, and Tasks. Export the common, user-facing
+// fields instead of the union of their internal lifecycle projections. The
+// latter produces columns that are empty for an entire view (or nearly every
+// row), which makes the workbook much harder to use.
+export const WORK_EXPORT_COLUMNS = [
+  "type",
+  "id",
+  "title",
+  "status",
+  "risk",
+  "occurred_at",
+  "duration_hours",
+  "tokens",
+  "cost_brl",
+] as const;
+
+// Execution rows are entities, not period summaries.  Keep their schema
+// aligned with the Execution table so the workbook never inherits the empty
+// PRD/SPEC/period columns shown by a different tab.
+export const EXECUTION_EXPORT_COLUMNS = [
+  "id",
+  "kind",
+  "status",
+  "origin",
+  "task_id",
+  "conversation_id",
+  "created_at",
+  "finished_at",
+  "duration_hours",
+  "tokens",
+  "cost_brl",
+  "invocations",
+] as const;
+
+export const AGENT_INVOCATION_EXPORT_COLUMNS = [
+  "run_id",
+  "execution_id",
+  "conversation_id",
+  "task_id",
+  "origin",
+  "run_role",
+  "run_purpose",
+  "phase",
+  "status",
+  "agent",
+  "provider",
+  "model",
+  "reasoning_effort",
+  "started_at",
+  "finished_at",
+  "duration_hours",
+  "input_tokens",
+  "cached_input_tokens",
+  "output_tokens",
+  "reasoning_tokens",
+  "total_tokens",
+  "estimated_usd",
+  "estimated_brl",
+] as const;
+
+export const COMPACT_LIFECYCLE_EXPORT_COLUMNS = [
+  "id",
+  "title",
+  "status",
+  "occurred_at",
+  "invocations",
+  "duration_hours",
+  "tokens",
+  "cost_brl",
+] as const;
+
+export const COST_GROUP_EXPORT_COLUMNS = [
+  "key",
+  "label",
+  "invocations",
+  "tasks",
+  "tokens",
+  "cost_usd",
+  "cost_brl",
+  "duration_hours",
+] as const;
+
+export const CONVERSATION_EXPORT_COLUMNS = [
+  "conversation_id",
+  "status",
+  "risk",
+  "started_at",
+  "finished_at",
+  "model",
+  "reasoning_effort",
+  "invocations",
+  "duration_hours",
+  "tokens",
+  "cost_brl",
+] as const;
+
+export const CHANGE_EXPORT_COLUMNS = [
+  "id",
+  "title",
+  "status",
+  "risk",
+  "source_type",
+  "source_id",
+  "requirement_ids_json",
+  "acceptance_ids_json",
+  "task_ids_json",
+  "occurred_at",
+] as const;
+
+export const DECISION_EXPORT_COLUMNS = [
+  "id",
+  "title",
+  "origin",
+  "scope_type",
+  "scope_id",
+  "occurred_at",
+] as const;
+
+/** @deprecated Use WORK_EXPORT_COLUMNS for Kanban and Work List exports. */
+export const KANBAN_EXPORT_COLUMNS = WORK_EXPORT_COLUMNS;
+
+export async function* exportPageSourceRows(
+  pageSource: PreparedExportPageSource,
+  mapRows: (
+    rows: readonly Record<string, unknown>[],
+  ) => Record<string, unknown>[] = exportRowsWithDurationHours,
+): AsyncGenerator<Record<string, unknown>[]> {
+  const seen = new Set<string>();
+  for await (const page of pageSource.pages()) {
+    const unique = page.filter((row) => {
+      const id =
+        typeof row.id === "string"
+          ? row.id
+          : typeof row.run_id === "string"
+            ? row.run_id
+            : typeof row.agent_invocation_id === "string"
+              ? row.agent_invocation_id
+              : typeof row.key === "string"
+                ? row.key
+                : JSON.stringify(row);
+      if (seen.has(id)) return false;
+      seen.add(id);
+      return true;
+    });
+    if (unique.length > 0) yield mapRows(unique);
+  }
+}
+
+export function exportWorkRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const telemetry = asRecord(row.telemetry);
+    const usage = asRecord(row.usage);
+    const totalUsage = asRecord(usage?.total);
+    const tokenUsage = asRecord(totalUsage?.tokens);
+    const costUsage = asRecord(totalUsage?.cost);
+    const metrics = asRecord(row.metrics);
+    const metricDuration = asRecord(metrics?.duration);
+    const metricTokens = asRecord(metrics?.total_tokens);
+    const metricCost = asRecord(metrics?.cost);
+    const durationMs =
+      numberValue(row.duration_ms) ??
+      numberValue(telemetry?.duration_ms) ??
+      numberValue(row.total_duration) ??
+      numberValue(metricDuration?.known_sum);
+    return {
+      type: row.kind ?? row.entity_kind,
+      id: row.id,
+      title: row.title,
+      // work_status is the Kanban column for macros; Task status is already
+      // the canonical work stage for a Task.
+      status: row.work_status ?? row.status ?? row.lifecycle_status,
+      risk: row.risk ?? null,
+      occurred_at: row.occurred_at ?? row.created_at ?? row.updated_at ?? null,
+      duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+      tokens:
+        numberValue(row.total_tokens) ??
+        numberValue(telemetry?.tokens) ??
+        numberValue(tokenUsage?.total) ??
+        numberValue(metricTokens?.known_sum),
+      cost_brl:
+        numberValue(row.cost_brl) ??
+        numberValue(row.total_cost_brl) ??
+        numberValue(telemetry?.cost_brl) ??
+        numberValue(costUsage?.brl) ??
+        numberValue(metricCost?.known_sum),
+    };
+  });
+}
+
+/** Normalize both the Operations projection and the paginated SQLite view. */
+export function exportExecutionRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const origin = asRecord(row.origin);
+    const originType =
+      typeof origin?.type === "string"
+        ? origin.type
+        : typeof row.origin_type === "string"
+          ? row.origin_type
+          : null;
+    const durationMs = executionDurationMs(row);
+    return {
+      id: row.id ?? row.execution_id ?? null,
+      kind: row.kind ?? row.execution_kind ?? null,
+      status: row.status ?? null,
+      origin: originType,
+      task_id: row.task_id ?? (originType === "task" ? (origin?.task_id ?? null) : null),
+      conversation_id:
+        row.conversation_id ??
+        (originType === "interaction" ? (origin?.conversation_id ?? null) : null),
+      created_at: row.created_at ?? row.started_at ?? null,
+      finished_at: row.finished_at ?? null,
+      duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+      tokens: numberValue(row.total_tokens),
+      cost_brl: numberValue(row.cost_brl) ?? numberValue(row.total_cost_brl),
+      invocations:
+        numberValue(row.orchestrator_run_count) ?? numberValue(row.invocation_count) ?? null,
+    };
+  });
+}
+
+export function exportAgentInvocationRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const durationMs = executionDurationMs(row);
+    return {
+      run_id: row.run_id ?? row.agent_invocation_id ?? row.id ?? null,
+      execution_id: row.execution_id ?? null,
+      conversation_id: row.conversation_id ?? null,
+      task_id: row.task_id ?? null,
+      origin: row.origin ?? row.invocation_kind ?? null,
+      run_role: row.run_role ?? row.zaip_agent_role ?? null,
+      run_purpose: row.run_purpose ?? row.purpose ?? null,
+      phase: row.phase ?? null,
+      status: row.status ?? null,
+      agent: row.agent ?? row.zaip_agent ?? null,
+      provider: row.provider ?? null,
+      model: row.model ?? null,
+      reasoning_effort: row.reasoning_effort ?? null,
+      started_at: row.started_at ?? row.source_started_at ?? row.occurred_at ?? null,
+      finished_at: row.finished_at ?? row.source_finished_at ?? null,
+      duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+      input_tokens: numberValue(row.input_tokens),
+      cached_input_tokens: numberValue(row.cached_input_tokens),
+      output_tokens: numberValue(row.output_tokens),
+      reasoning_tokens: numberValue(row.reasoning_tokens),
+      total_tokens: numberValue(row.total_tokens),
+      estimated_usd: numberValue(row.estimated_usd) ?? numberValue(row.cost_usd),
+      estimated_brl: numberValue(row.estimated_brl) ?? numberValue(row.cost_brl),
+    };
+  });
+}
+
+export function exportCompactLifecycleRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const metrics = asRecord(row.metrics);
+    const duration = asRecord(metrics?.duration);
+    const tokens = asRecord(metrics?.total_tokens);
+    const cost = asRecord(metrics?.cost);
+    const durationMs = numberValue(duration?.known_sum) ?? numberValue(row.total_duration);
+    return {
+      id: row.id ?? null,
+      title: row.title ?? null,
+      status: row.status ?? null,
+      occurred_at: row.occurred_at ?? null,
+      invocations: numberValue(row.run_count) ?? numberValue(row.invocation_count),
+      duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+      tokens: numberValue(tokens?.known_sum) ?? numberValue(row.total_tokens),
+      cost_brl: numberValue(cost?.known_sum) ?? numberValue(row.total_cost_brl),
+    };
+  });
+}
+
+export function exportCostGroupRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const durationMs = numberValue(row.duration_ms) ?? numberValue(row.total_duration);
+    return {
+      key: row.key ?? null,
+      label: row.label ?? null,
+      invocations: numberValue(row.run_count) ?? numberValue(row.invocation_count),
+      tasks: numberValue(row.task_count),
+      tokens: numberValue(row.total_tokens),
+      cost_usd: numberValue(row.estimated_usd) ?? numberValue(row.total_cost_usd),
+      cost_brl: numberValue(row.estimated_brl) ?? numberValue(row.total_cost_brl),
+      duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+    };
+  });
+}
+
+export function exportConversationRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => ({
+    conversation_id: row.conversation_id ?? row.id ?? null,
+    status: row.status ?? null,
+    risk: row.risk ?? null,
+    started_at: row.started_at ?? null,
+    finished_at: row.finished_at ?? null,
+    model: row.model ?? null,
+    reasoning_effort: row.reasoning_effort ?? null,
+    invocations: numberValue(row.invocation_count),
+    duration_hours:
+      (numberValue(row.total_duration) ?? numberValue(row.duration_ms)) === null
+        ? null
+        : Number(numberValue(row.total_duration) ?? numberValue(row.duration_ms)) / 3_600_000,
+    tokens: numberValue(row.total_tokens),
+    cost_brl: numberValue(row.total_cost_brl) ?? numberValue(row.cost_brl),
+  }));
+}
+
+function exportSelectedRows(
+  rows: readonly Record<string, unknown>[],
+  keys: readonly string[],
+): Record<string, unknown>[] {
+  return rows.map((row) => Object.fromEntries(keys.map((key) => [key, row[key] ?? null])));
+}
+
+function executionDurationMs(row: Record<string, unknown>): number | null {
+  return numberValue(row.duration_ms) ?? numberValue(row.source_duration_ms);
+}
+
+function asRecord(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
+
+function numberValue(value: unknown): number | null {
+  return typeof value === "number" ? value : null;
+}
+
 export function exportRowsWithDurationHours(
   rows: readonly Record<string, unknown>[],
 ): Record<string, unknown>[] {
   return rows.map((row) =>
     Object.fromEntries(
-      Object.entries(row).map(([key, value]) => {
+      orderedExportEntries(row).map(([key, value]) => {
         const durationKey = durationHoursKey(key);
         if (durationKey === null)
           return [key, value !== null && typeof value === "object" ? JSON.stringify(value) : value];
@@ -26,6 +388,73 @@ export function exportRowsWithDurationHours(
   );
 }
 
+function orderedExportEntries(row: Record<string, unknown>): [string, unknown][] {
+  const normalized = normalizePeriodRow(row);
+  const keys = Object.keys(normalized);
+  const isPeriodRow = PERIOD_EXPORT_COLUMNS.some((key) => keys.includes(key));
+  if (!isPeriodRow) return Object.entries(row);
+  const ordered = PERIOD_EXPORT_COLUMNS.filter((key) => keys.includes(key)).map(
+    (key) => [key, normalized[key]] as [string, unknown],
+  );
+  return ordered;
+}
+
+function normalizePeriodRow(row: Record<string, unknown>): Record<string, unknown> {
+  const hasPeriodSourceAliases =
+    ("key" in row || "period_key" in row) &&
+    ("prd_count" in row ||
+      "spec_count" in row ||
+      "run_count" in row ||
+      "total_run_count" in row ||
+      "costBrl" in row ||
+      "total_cost_brl" in row ||
+      "durationMs" in row ||
+      "operations_total_duration" in row ||
+      "tasksCreated" in row);
+  if (!hasPeriodSourceAliases) {
+    if (
+      Object.keys(row).some((key) => key !== "key" && PERIOD_EXPORT_COLUMNS.includes(key as never))
+    )
+      return row;
+    return row;
+  }
+  return {
+    key: row.key ?? row.period_key,
+    prds: row.prds ?? row.prd_count,
+    specs: row.specs ?? row.spec_count,
+    tasks: row.tasks ?? row.tasksCreated ?? row.task_count,
+    runs: row.runs ?? row.run_count ?? row.total_run_count ?? row.invocation_count,
+    tests: row.tests ?? row.test_count ?? row.validation_count,
+    evidences: row.evidences ?? row.evidence_count,
+    duration_hours:
+      typeof (
+        row.durationMs ??
+        row.duration_ms ??
+        row.operations_total_duration ??
+        row.total_duration
+      ) === "number"
+        ? Number(
+            row.durationMs ??
+              row.duration_ms ??
+              row.operations_total_duration ??
+              row.total_duration,
+          ) / 3_600_000
+        : (row.durationMs ??
+          row.duration_ms ??
+          row.operations_total_duration ??
+          row.total_duration ??
+          null),
+    tokens: row.tokens ?? row.total_tokens,
+    cost:
+      row.cost ??
+      ("costBrl" in row
+        ? row.costBrl
+        : "total_cost_brl" in row
+          ? row.total_cost_brl
+          : row.estimated_brl),
+  };
+}
+
 function durationHoursKey(key: string): string | null {
   if (key === "durationMs") return "durationHours";
   if (key.endsWith("DurationMs")) return `${key.slice(0, -2)}Hours`;
@@ -33,11 +462,67 @@ function durationHoursKey(key: string): string | null {
   return key.endsWith("_duration_ms") ? `${key.slice(0, -2)}hours` : null;
 }
 
-export function ExcelExportAction({ filters, rows, view }: ExcelExportInput) {
+export function exportHeadersForView(
+  view: string,
+  rows: readonly Record<string, unknown>[],
+): string[] {
+  const headers: string[] = [];
+  const headerSet = new Set<string>();
+  const isPeriodView = /-(daily|monthly|annual|yearly)$/.test(view);
+  const isWorkView = /-work-(kanban|list)$/.test(view);
+  const isExecutionView = /-executions$/.test(view);
+  const isCostExecutionView = view === "cost-executions";
+  const isAgentInvocationView = /-(?:agentCalls|agent-calls|runs)$/.test(view);
+  const isOperationsConversationView = view === "operations-conversations";
+  const isCompactLifecycleView =
+    /-(?:tasks|specs|prds|conversations)$/.test(view) && !isOperationsConversationView;
+  const isCostGroupView = /-(?:agents|models|providers)$/.test(view);
+  const isChangeView = view === "operations-changes";
+  const isDecisionView = view === "operations-decisions";
+  if (isPeriodView) headers.push(...PERIOD_EXPORT_COLUMNS);
+  if (isWorkView) headers.push(...WORK_EXPORT_COLUMNS);
+  if (isExecutionView && !isCostExecutionView) headers.push(...EXECUTION_EXPORT_COLUMNS);
+  if (isCostExecutionView) headers.push(...COMPACT_LIFECYCLE_EXPORT_COLUMNS);
+  if (isAgentInvocationView) headers.push(...AGENT_INVOCATION_EXPORT_COLUMNS);
+  if (isCompactLifecycleView) headers.push(...COMPACT_LIFECYCLE_EXPORT_COLUMNS);
+  if (isCostGroupView) headers.push(...COST_GROUP_EXPORT_COLUMNS);
+  if (isOperationsConversationView) headers.push(...CONVERSATION_EXPORT_COLUMNS);
+  if (isChangeView) headers.push(...CHANGE_EXPORT_COLUMNS);
+  if (isDecisionView) headers.push(...DECISION_EXPORT_COLUMNS);
+  for (const key of headers) headerSet.add(key);
+  // `cost-executions` has a compact mapped schema. Raw lifecycle fields must
+  // not leak into the workbook after those fixed headers.
+  const hasExplicitSchema =
+    isWorkView ||
+    isCostExecutionView ||
+    isExecutionView ||
+    isAgentInvocationView ||
+    isCompactLifecycleView ||
+    isCostGroupView ||
+    isOperationsConversationView ||
+    isChangeView ||
+    isDecisionView;
+  if (!hasExplicitSchema) {
+    for (const row of rows)
+      for (const [key] of orderedExportEntries(row)) {
+        const header = durationHoursKey(key) ?? key;
+        if (!headerSet.has(header)) {
+          headerSet.add(header);
+          headers.push(header);
+        }
+      }
+  }
+  if (headers.length === 0) headers.push("result");
+  return headers;
+}
+
+export function ExcelExportAction({ filters, pageSource, rows, view }: ExcelExportInput) {
   const controller = useRef<ExportController | null>(null);
   if (controller.current === null) controller.current = new ExportController();
   const [state, setState] = useState<ExportState>(controller.current.state);
   const [showSuccess, setShowSuccess] = useState(false);
+  const [preparing, setPreparing] = useState(false);
+  const [preflightError, setPreflightError] = useState<string | null>(null);
   useEffect(() => controller.current?.subscribe(setState), []);
   useEffect(() => {
     if (state.status !== "completed") {
@@ -48,46 +533,115 @@ export function ExcelExportAction({ filters, rows, view }: ExcelExportInput) {
     const timer = setTimeout(() => setShowSuccess(false), EXPORT_SUCCESS_TOAST_MS);
     return () => clearTimeout(timer);
   }, [state.status]);
-  const headers: string[] = [];
-  const headerSet = new Set<string>();
-  for (const row of rows)
-    for (const key of Object.keys(row)) {
-      const header = durationHoursKey(key) ?? key;
-      if (!headerSet.has(header)) {
-        headerSet.add(header);
-        headers.push(header);
-      }
-    }
-  if (headers.length === 0) headers.push("result");
-  const start = () => {
-    const snapshot = createExportSnapshot({
+  const headers = exportHeadersForView(view, rows);
+  const isWorkView = /-work-(kanban|list)$/.test(view);
+  const isExecutionView = /-executions$/.test(view);
+  const isCostExecutionView = view === "cost-executions";
+  const isAgentInvocationView = /-(?:agentCalls|agent-calls|runs)$/.test(view);
+  const isOperationsConversationView = view === "operations-conversations";
+  const isCompactLifecycleView =
+    /-(?:tasks|specs|prds|conversations)$/.test(view) && !isOperationsConversationView;
+  const isCostGroupView = /-(?:agents|models|providers)$/.test(view);
+  const isChangeView = view === "operations-changes";
+  const isDecisionView = view === "operations-decisions";
+  const createSnapshot = async () => {
+    const preparedPageSource =
+      pageSource === undefined
+        ? undefined
+        : "prepare" in pageSource
+          ? await pageSource.prepare()
+          : pageSource;
+    return createExportSnapshot({
       id: globalThis.crypto?.randomUUID?.() ?? `export-${Date.now()}`,
       createdAt: new Date().toISOString(),
       view,
       filters,
-      totalRows: rows.length,
+      totalRows: preparedPageSource?.totalRows ?? rows.length,
       pages: async function* () {
+        if (preparedPageSource !== undefined) {
+          yield* exportPageSourceRows(
+            preparedPageSource,
+            isWorkView
+              ? exportWorkRows
+              : isOperationsConversationView
+                ? exportConversationRows
+                : isChangeView
+                  ? (sourceRows: readonly Record<string, unknown>[]) =>
+                      exportSelectedRows(sourceRows, CHANGE_EXPORT_COLUMNS)
+                  : isDecisionView
+                    ? (sourceRows: readonly Record<string, unknown>[]) =>
+                        exportSelectedRows(sourceRows, DECISION_EXPORT_COLUMNS)
+                    : isCostExecutionView
+                      ? exportCompactLifecycleRows
+                      : isExecutionView
+                        ? exportExecutionRows
+                        : isAgentInvocationView
+                          ? exportAgentInvocationRows
+                          : isCompactLifecycleView
+                            ? exportCompactLifecycleRows
+                            : isCostGroupView
+                              ? exportCostGroupRows
+                              : exportRowsWithDurationHours,
+          );
+          return;
+        }
         for (let offset = 0; offset < rows.length; offset += 500)
-          yield exportRowsWithDurationHours(rows.slice(offset, offset + 500));
+          yield (
+            isWorkView
+              ? exportWorkRows
+              : isOperationsConversationView
+                ? exportConversationRows
+                : isChangeView
+                  ? (sourceRows: readonly Record<string, unknown>[]) =>
+                      exportSelectedRows(sourceRows, CHANGE_EXPORT_COLUMNS)
+                  : isDecisionView
+                    ? (sourceRows: readonly Record<string, unknown>[]) =>
+                        exportSelectedRows(sourceRows, DECISION_EXPORT_COLUMNS)
+                    : isCostExecutionView
+                      ? exportCompactLifecycleRows
+                      : isExecutionView
+                        ? exportExecutionRows
+                        : isAgentInvocationView
+                          ? exportAgentInvocationRows
+                          : isCompactLifecycleView
+                            ? exportCompactLifecycleRows
+                            : isCostGroupView
+                              ? exportCostGroupRows
+                              : exportRowsWithDurationHours
+          )(rows.slice(offset, offset + 500));
       },
     });
-    void controller.current?.start({ snapshot, headers, view }).catch(() => undefined);
+  };
+  const start = () => {
+    setPreflightError(null);
+    setPreparing(true);
+    void createSnapshot()
+      .then((snapshot) => controller.current?.start({ snapshot, headers, view }))
+      .catch((error: unknown) => {
+        setPreflightError(error instanceof Error ? error.message : String(error));
+      })
+      .finally(() => setPreparing(false));
   };
   return (
     <>
       <button
         aria-label="Exportar Excel"
         className="excel-export-action"
-        disabled={state.status === "running"}
+        disabled={preparing || state.status === "running"}
         onClick={start}
         type="button"
       >
         <Download aria-hidden="true" size={16} />
         Exportar Excel
       </button>
-      {state.status === "running" ? <ExportProgressToast progress={state.progress} /> : null}
+      {preparing || state.status === "running" ? (
+        <ExportProgressToast progress={state.progress} />
+      ) : null}
       {showSuccess ? <ExportSuccessToast /> : null}
       {state.status === "failed" ? <p role="alert">Falha ao exportar: {state.error}</p> : null}
+      {preflightError !== null ? (
+        <p role="alert">Falha ao preparar exporta&ccedil;&atilde;o: {preflightError}</p>
+      ) : null}
     </>
   );
 }