@zaip-ai/cli 1.0.7 → 1.3.0

package/templates/.agents/dashboard/modules/operations/src/react/EntityTables.tsx

@@ -1,4 +1,9 @@
-import { DataTable, formatDateTime } from "@zaip-ai/dashboard-ui";
+import {
+  DataTable,
+  formatCompactNumber,
+  formatCurrency,
+  formatDateTime,
+} from "@zaip-ai/dashboard-ui";
 import { useState } from "react";
 import type {
   ChangeProjection,
@@ -8,7 +13,12 @@ import type {
 } from "../contracts.js";
 import { buildConversationRows } from "./conversation-rows.js";
 import { EntityDetailsDialog } from "./EntityDetailsDialog.js";
-import { formatOperationDuration, operationalDurationMs } from "./operation-duration.js";
+import {
+  displayedDuration,
+  formatDisplayedDuration,
+  formatOperationDuration,
+  operationalDurationMs,
+} from "./operation-duration.js";
 import type { OperationsLocale } from "./status-labels.js";
 import { sortByDateDesc } from "./table-order.js";
 
@@ -62,12 +72,17 @@ export function ChangeTable({
 export function ExecutionTable({
   rows,
   locale,
+  canonical = true,
 }: {
   rows: readonly ExecutionProjection[];
   locale: OperationsLocale;
+  canonical?: boolean;
 }) {
   const [selected, setSelected] = useState<ExecutionProjection | null>(null);
   const [kind, setKind] = useState<"all" | "interaction" | "delivery">("all");
+  if (!canonical || !hasCanonicalEntityRows(rows)) {
+    return <CanonicalEntityLoadingState locale={locale} kind="executions" />;
+  }
   const orderedRows = sortByDateDesc(
     rows.filter((row) => kind === "all" || row.kind === kind),
     (row) => row.created_at,
@@ -122,20 +137,36 @@ export function ExecutionTable({
             },
             {
               key: "duration",
-              label: locale === "pt-BR" ? "Tempo de execução" : "Execution time",
-              render: (row) => formatOperationDuration(row.duration_ms, locale),
+              label: locale === "pt-BR" ? "Tempo" : "Time",
+              render: (row) =>
+                formatDisplayedDuration(
+                  {
+                    durationMs: row.duration_ms,
+                    provenance:
+                      row.duration_ms === null && row.status === "running"
+                        ? "in_progress"
+                        : "factual",
+                  },
+                  locale,
+                ),
               align: "right",
             },
             {
-              key: "runs",
-              label: locale === "pt-BR" ? "Invocações do orquestrador" : "Orchestrator invocations",
-              render: (row) => displayedExecutionCount(row.orchestrator_run_count),
+              key: "tokens",
+              label: "Tokens",
+              render: (row) => formatCompactNumber(row.total_tokens ?? null, locale),
               align: "right",
             },
             {
-              key: "subruns",
-              label: locale === "pt-BR" ? "Invocações delegadas" : "Delegated invocations",
-              render: (row) => displayedExecutionCount(row.subagent_run_count),
+              key: "cost",
+              label: locale === "pt-BR" ? "Custo" : "Cost",
+              render: (row) => formatCurrency(row.cost_brl ?? null, "BRL", locale),
+              align: "right",
+            },
+            {
+              key: "runs",
+              label: locale === "pt-BR" ? "Invocações do orquestrador" : "Orchestrator invocations",
+              render: (row) => displayedExecutionCount(row.orchestrator_run_count),
               align: "right",
             },
             {
@@ -208,8 +239,13 @@ export function displayedExecutionCount(value: number | null | undefined): numbe
 
 export function displayedRunAgent(row: Pick<RunProjection, "agent" | "agent_name">): string {
   if (row.agent.toLowerCase() === "codex") return "codex";
-  const value = row.agent_name || row.agent;
-  return value;
+  return row.agent_name || row.agent || "—";
+}
+
+export function displayedRunReference(
+  row: Pick<RunProjection, "parent_run_id" | "task_id" | "conversation_id">,
+): string {
+  return (row.parent_run_id ?? row.task_id ?? row.conversation_id) || "—";
 }
 
 export function runPhaseLabel(phase: string, locale: OperationsLocale): string {
@@ -236,6 +272,34 @@ export function RunTable({
     rows.filter((row) => kind === "all" || row.run_kind === kind),
     (row) => row.started_at,
   );
+  const number = (value: number | null | undefined) =>
+    value === null || value === undefined
+      ? "—"
+      : new Intl.NumberFormat(locale, { maximumFractionDigits: 3 }).format(value);
+  const rate = (value: number | null | undefined) =>
+    value === null || value === undefined ? "—" : `${number(value)} / 1M`;
+  const multiplier = (value: number | null | undefined) =>
+    value === null || value === undefined ? "—" : `${number(value)}×`;
+  const usd = (value: number | null | undefined) =>
+    value === null || value === undefined ? "—" : formatCurrency(value, "USD", locale);
+  const provenance = (value: RunProjection["duration_provenance"]) =>
+    value === "observed"
+      ? locale === "pt-BR"
+        ? "Observada"
+        : "Observed"
+      : value === "reconciled"
+        ? locale === "pt-BR"
+          ? "Reconciliada"
+          : "Reconciled"
+        : value === "estimated"
+          ? locale === "pt-BR"
+            ? "Estimada por tokens"
+            : "Token-estimated"
+          : value === "legacy_inferred"
+            ? locale === "pt-BR"
+              ? "Inferida histórica"
+              : "Legacy inferred"
+            : "—";
   return (
     <>
       <div className="operations-toolbar operations-run-kind-toolbar">
@@ -275,7 +339,7 @@ export function RunTable({
             render: (row) => (
               <>
                 <strong>{row.id}</strong>
-                <small>{row.parent_run_id ?? row.task_id ?? row.conversation_id}</small>
+                <small>{displayedRunReference(row)}</small>
               </>
             ),
           },
@@ -294,7 +358,14 @@ export function RunTable({
           {
             key: "agent",
             label: locale === "pt-BR" ? "Agente" : "Agent",
-            render: (row) => <strong>{displayedRunAgent(row)}</strong>,
+            render: (row) => (
+              <>
+                <strong>{displayedRunAgent(row)}</strong>
+                <small>
+                  {[row.agent_persona, row.agent_job].filter(Boolean).join(" · ") || "—"}
+                </small>
+              </>
+            ),
           },
           { key: "status", label: "Status", render: (row) => <StatusBadge status={row.status} /> },
           {
@@ -309,8 +380,171 @@ export function RunTable({
           },
           {
             key: "duration",
-            label: "Duração",
-            render: (row) => formatOperationDuration(operationalDurationMs(row), locale),
+            label: locale === "pt-BR" ? "Tempo total" : "Total time",
+            render: (row) => formatDisplayedDuration(displayedDuration(row), locale),
+          },
+          {
+            key: "duration_provenance",
+            label: locale === "pt-BR" ? "Fonte do tempo" : "Time source",
+            render: (row) => {
+              const displayed = displayedDuration(row);
+              return displayed.provenance === "lifecycle_elapsed"
+                ? locale === "pt-BR"
+                  ? "Tempo decorrido"
+                  : "Lifecycle elapsed"
+                : displayed.provenance === "in_progress"
+                  ? locale === "pt-BR"
+                    ? "Em andamento"
+                    : "In progress"
+                  : provenance(row.duration_provenance);
+            },
+          },
+          {
+            key: "llm_calls",
+            label: locale === "pt-BR" ? "Chamadas LLM" : "LLM calls",
+            render: (row) => number(row.llm_call_count ?? row.call_count),
+            align: "right",
+          },
+          { key: "provider", label: "Provider", render: (row) => row.provider ?? "—" },
+          { key: "model", label: "Modelo", render: (row) => row.model || "—" },
+          {
+            key: "effort",
+            label: "Effort",
+            render: (row) => row.effective_reasoning_effort ?? row.reasoning_effort ?? "—",
+          },
+          {
+            key: "service_tier",
+            label: locale === "pt-BR" ? "Velocidade API" : "API speed",
+            render: (row) => row.service_tier ?? "default",
+          },
+          {
+            key: "input_tokens",
+            label: "Input",
+            render: (row) => formatCompactNumber(row.input_tokens ?? null, locale),
+            align: "right",
+          },
+          {
+            key: "cached_tokens",
+            label: "Cache",
+            render: (row) => formatCompactNumber(row.cached_input_tokens ?? null, locale),
+            align: "right",
+          },
+          {
+            key: "uncached_tokens",
+            label: locale === "pt-BR" ? "Input s/ cache" : "Uncached input",
+            render: (row) => formatCompactNumber(row.uncached_input_tokens ?? null, locale),
+            align: "right",
+          },
+          {
+            key: "output_tokens",
+            label: "Output",
+            render: (row) => formatCompactNumber(row.output_tokens ?? null, locale),
+            align: "right",
+          },
+          {
+            key: "reasoning_tokens",
+            label: "Reasoning",
+            render: (row) => formatCompactNumber(row.reasoning_tokens ?? null, locale),
+            align: "right",
+          },
+          {
+            key: "tokens",
+            label: locale === "pt-BR" ? "Tokens totais" : "Total tokens",
+            render: (row) => formatCompactNumber(row.usage.total.tokens.total, locale),
+            align: "right",
+          },
+          {
+            key: "input_rate",
+            label: locale === "pt-BR" ? "Tarifa input USD" : "Input rate USD",
+            render: (row) => rate(row.input_rate_usd_per_million),
+            align: "right",
+          },
+          {
+            key: "cached_rate",
+            label: locale === "pt-BR" ? "Tarifa cache USD" : "Cache rate USD",
+            render: (row) => rate(row.cached_input_rate_usd_per_million),
+            align: "right",
+          },
+          {
+            key: "output_rate",
+            label: locale === "pt-BR" ? "Tarifa output USD" : "Output rate USD",
+            render: (row) => rate(row.output_rate_usd_per_million),
+            align: "right",
+          },
+          {
+            key: "context_multiplier",
+            label: locale === "pt-BR" ? "Mult. contexto E/S" : "Context mult. I/O",
+            render: (row) =>
+              `${multiplier(row.context_input_multiplier)} / ${multiplier(row.context_output_multiplier)}`,
+          },
+          {
+            key: "speed_multiplier",
+            label: locale === "pt-BR" ? "Mult. velocidade" : "Speed mult.",
+            render: (row) => multiplier(row.speed_cost_multiplier),
+          },
+          {
+            key: "pricing_scenario",
+            label: locale === "pt-BR" ? "Cenário de preço" : "Pricing scenario",
+            render: (row) =>
+              row.pricing_scenario === "standard_long_context_fallback"
+                ? locale === "pt-BR"
+                  ? "Standard (contexto longo)"
+                  : "Standard (long context)"
+                : (row.pricing_scenario ?? "—"),
+          },
+          {
+            key: "input_cost",
+            label: locale === "pt-BR" ? "Custo input USD" : "Input cost USD",
+            render: (row) => usd(row.input_cost_usd),
+            align: "right",
+          },
+          {
+            key: "cache_cost",
+            label: locale === "pt-BR" ? "Custo cache USD" : "Cache cost USD",
+            render: (row) => usd(row.cached_input_cost_usd),
+            align: "right",
+          },
+          {
+            key: "output_cost",
+            label: locale === "pt-BR" ? "Custo output USD" : "Output cost USD",
+            render: (row) => usd(row.output_cost_usd),
+            align: "right",
+          },
+          {
+            key: "reasoning_cost",
+            label: locale === "pt-BR" ? "Custo reasoning USD" : "Reasoning cost USD",
+            render: (row) => usd(row.reasoning_cost_usd),
+            align: "right",
+          },
+          {
+            key: "calculated_cost",
+            label: locale === "pt-BR" ? "Custo calculado USD" : "Calculated cost USD",
+            render: (row) => usd(row.calculated_cost_usd),
+            align: "right",
+          },
+          {
+            key: "canonical_cost",
+            label: locale === "pt-BR" ? "Custo canônico USD" : "Canonical cost USD",
+            render: (row) => usd(row.cost_usd),
+            align: "right",
+          },
+          {
+            key: "cost_variance",
+            label: locale === "pt-BR" ? "Diferença USD" : "Difference USD",
+            render: (row) => usd(row.cost_variance_usd),
+            align: "right",
+          },
+          {
+            key: "fx_rate",
+            label: "USD/BRL",
+            render: (row) => number(row.fx_rate),
+            align: "right",
+          },
+          {
+            key: "cost",
+            label: locale === "pt-BR" ? "Custo total BRL" : "Total cost BRL",
+            render: (row) => formatCurrency(row.usage.total.cost.brl, "BRL", locale),
+            align: "right",
           },
         ]}
         locale={locale}
@@ -347,11 +581,16 @@ export function ConversationTable({
   rows,
   executions,
   locale,
+  canonical = true,
 }: {
   rows: readonly RunProjection[];
   executions: readonly ExecutionProjection[];
   locale: OperationsLocale;
+  canonical?: boolean;
 }) {
+  if (!canonical || !canBuildCanonicalConversationRows(executions, rows)) {
+    return <CanonicalEntityLoadingState locale={locale} kind="conversations" />;
+  }
   const conversations = buildConversationRows(executions, rows);
   return (
     <DataTable
@@ -381,8 +620,50 @@ export function ConversationTable({
         },
         {
           key: "duration",
-          label: locale === "pt-BR" ? "Duração" : "Duration",
-          render: (row) => formatOperationDuration(row.duration_ms, locale),
+          label: locale === "pt-BR" ? "Tempo" : "Time",
+          render: (row) =>
+            formatDisplayedDuration(
+              {
+                durationMs: row.duration_ms,
+                provenance:
+                  row.duration_ms === null && row.status === "running"
+                    ? "in_progress"
+                    : row.duration_provenance,
+              },
+              locale,
+            ),
+        },
+        {
+          key: "duration_provenance",
+          label: locale === "pt-BR" ? "Fonte do tempo" : "Time source",
+          render: (row) =>
+            row.duration_provenance === "factual"
+              ? locale === "pt-BR"
+                ? "Factual"
+                : "Factual"
+              : row.duration_provenance === "lifecycle_elapsed"
+                ? locale === "pt-BR"
+                  ? "Tempo decorrido"
+                  : "Lifecycle elapsed"
+                : "—",
+        },
+        {
+          key: "tokens",
+          label: "Tokens",
+          render: (row) => formatCompactNumber(row.total_tokens, locale),
+          align: "right",
+        },
+        {
+          key: "cost",
+          label: locale === "pt-BR" ? "Custo" : "Cost",
+          render: (row) => formatCurrency(row.cost_brl, "BRL", locale),
+          align: "right",
+        },
+        {
+          key: "reasoning_efforts",
+          label: locale === "pt-BR" ? "Esfor\u00e7os" : "Reasoning efforts",
+          render: (row) =>
+            row.reasoning_efforts.length > 0 ? row.reasoning_efforts.join(", ") : "\u2014",
         },
         {
           key: "models",
@@ -399,6 +680,52 @@ export function ConversationTable({
   );
 }
 
+type ExecutionWithLifecycleElapsed = ExecutionProjection & { lifecycle_elapsed_ms?: number | null };
+
+export function executionLifecycleElapsedMs(row: ExecutionProjection): number | null {
+  const value = (row as ExecutionWithLifecycleElapsed).lifecycle_elapsed_ms;
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+}
+
+export function hasCanonicalEntityRows(rows: readonly Pick<ExecutionProjection, "id">[]): boolean {
+  return rows.every((row) => row.id.trim().length > 0);
+}
+
+export function canBuildCanonicalConversationRows(
+  executions: readonly ExecutionProjection[],
+  rows: readonly RunProjection[],
+): boolean {
+  return (
+    hasCanonicalEntityRows(executions) &&
+    executions
+      .filter(
+        (
+          execution,
+        ): execution is ExecutionProjection & {
+          origin: { type: "interaction"; conversation_id: string };
+        } => execution.kind === "interaction" && execution.origin.type === "interaction",
+      )
+      .every((execution) => execution.origin.conversation_id.trim().length > 0) &&
+    rows.every((row) => row.id.trim().length > 0 && row.conversation_id.trim().length > 0)
+  );
+}
+
+function CanonicalEntityLoadingState({
+  kind,
+  locale,
+}: {
+  kind: "conversations" | "executions";
+  locale: OperationsLocale;
+}) {
+  return (
+    <p className="operations-empty" role="status">
+      {locale === "pt-BR"
+        ? `Aguardando linhas canônicas de ${kind === "conversations" ? "conversas" : "execuções"}.`
+        : `Waiting for canonical ${kind} rows.`}
+    </p>
+  );
+}
+
 export function DecisionTable({
   rows,
   locale,

package/templates/.agents/dashboard/modules/operations/src/react/MacroPlanningDialog.tsx

@@ -30,6 +30,7 @@ import { type OperationsLocale, statusLabel } from "./status-labels.js";
 import { taskTotals } from "./TaskBoard.js";
 import { macroWorkStage, workStageLabel } from "./work-board-model.js";
 import "./macro-planning-dialog.css";
+import "./macro-planning-dialog-content.css";
 import "./macro-planning-dialog-responsive.css";
 
 export function MacroPlanningDialog({

package/templates/.agents/dashboard/modules/operations/src/react/OperationDateFilters.test.ts

@@ -4,19 +4,23 @@ import { operationDateInputState } from "./OperationDateFilters.js";
 describe("OperationDateFilters period presentation", () => {
   const range = { start: "2026-07-10", end: "2026-08-01" };
 
-  it("renders the initial All Time state as blank and disabled", () => {
+  it("renders the covered All Time range as visible and disabled", () => {
     expect(operationDateInputState("all", range)).toEqual({
       disabled: true,
-      start: "",
-      end: "",
+      start: "2026-07-10",
+      end: "2026-08-01",
     });
   });
 
-  it("clears date inputs again when switching back to All Time", () => {
+  it("restores the covered range when switching back to All Time", () => {
     expect(
       operationDateInputState("this-month", { start: "2026-08-01", end: "2026-08-31" }),
     ).toEqual({ disabled: false, start: "2026-08-01", end: "2026-08-31" });
-    expect(operationDateInputState("all", range)).toEqual({ disabled: true, start: "", end: "" });
+    expect(operationDateInputState("all", range)).toEqual({
+      disabled: true,
+      start: "2026-07-10",
+      end: "2026-08-01",
+    });
   });
 
   it("keeps explicit month and custom date editing visible and enabled", () => {

package/templates/.agents/dashboard/modules/operations/src/react/OperationDateFilters.tsx

@@ -38,13 +38,13 @@ const presetLabels: Record<OperationsLocale, Record<OperationDatePreset, string>
 
 const presets = Object.keys(presetLabels["pt-BR"]) as OperationDatePreset[];
 
-/** All Time is unbounded: date controls must not suggest an implicit range. */
+/** All Time remains unbounded while showing the covered record range. */
 export function operationDateInputState(
   preset: OperationDatePreset,
   dateRange: OperationDateRange,
 ): { disabled: boolean; start: string; end: string } {
   return preset === "all"
-    ? { disabled: true, start: "", end: "" }
+    ? { disabled: true, start: dateRange.start, end: dateRange.end }
     : { disabled: false, start: dateRange.start, end: dateRange.end };
 }
 

package/templates/.agents/dashboard/modules/operations/src/react/OperationsMainContent.tsx

@@ -0,0 +1,168 @@
+import type { ComponentProps } from "react";
+import type { OperationsProjection } from "../contracts.js";
+import {
+  ChangeTable,
+  ConversationTable,
+  DecisionTable,
+  ExecutionTable,
+  RunTable,
+} from "./EntityTables.js";
+import { OperationsEntityPager } from "./OperationsPageNavigation.js";
+import type { OperationsView } from "./operations-page-filters.js";
+import { PeriodSummaryTable } from "./PeriodSummaryTable.js";
+import type { OperationsLocale } from "./status-labels.js";
+import { UnifiedWorkBoard } from "./UnifiedWorkBoard.js";
+import { UnifiedWorkList } from "./UnifiedWorkList.js";
+import type { WorkStage, WorkTypeFilter } from "./work-board-model.js";
+
+type WorkBoardProps = ComponentProps<typeof UnifiedWorkBoard>;
+
+export interface OperationsMainContentProps {
+  boardKindTotals?: WorkBoardProps["boardKindTotals"] | undefined;
+  boardStates?: WorkBoardProps["boardStates"] | undefined;
+  boardTotals?: WorkBoardProps["boardTotals"] | undefined;
+  changes: ComponentProps<typeof ChangeTable>["rows"];
+  conversationExecutions: ComponentProps<typeof ConversationTable>["executions"];
+  conversationRuns: ComponentProps<typeof ConversationTable>["rows"];
+  currency: "BRL" | "USD";
+  data: OperationsProjection;
+  entityPage?:
+    | {
+        offset: number;
+        total: number | null;
+        loading: boolean;
+        error: string | null;
+        aggregation?: "canonical_entity" | "page_partial" | undefined;
+      }
+    | undefined;
+  executions: ComponentProps<typeof ExecutionTable>["rows"];
+  factualCostPeriods?: ComponentProps<typeof PeriodSummaryTable>["factualCostPeriods"] | undefined;
+  includeLegacyEffort: boolean;
+  locale: OperationsLocale;
+  onBoardTypeChange?: ((kind: WorkTypeFilter) => void) | undefined;
+  onEntityPageChange?: ((offset: number) => void) | undefined;
+  onLoadMoreBoard?: ((stage: WorkStage) => void) | undefined;
+  onWorkListTypeChange?: ((kind: WorkTypeFilter) => void) | undefined;
+  onOpenDocument: WorkBoardProps["onOpenDocument"];
+  onOpenTask: WorkBoardProps["onOpenTask"];
+  onPriorityChange: WorkBoardProps["onPriorityChange"];
+  prds: WorkBoardProps["prds"];
+  resolveRunCost?: ComponentProps<typeof PeriodSummaryTable>["resolveRunCost"] | undefined;
+  runs: ComponentProps<typeof RunTable>["rows"];
+  specs: WorkBoardProps["specs"];
+  summaryPopulation: ComponentProps<typeof PeriodSummaryTable>["data"];
+  tasks: WorkBoardProps["tasks"];
+  view: OperationsView;
+}
+
+export function OperationsMainContent({
+  boardKindTotals,
+  boardStates,
+  boardTotals,
+  changes,
+  conversationExecutions,
+  conversationRuns,
+  currency,
+  data,
+  entityPage,
+  executions,
+  factualCostPeriods,
+  includeLegacyEffort,
+  locale,
+  onBoardTypeChange,
+  onEntityPageChange,
+  onLoadMoreBoard,
+  onWorkListTypeChange,
+  onOpenDocument,
+  onOpenTask,
+  onPriorityChange,
+  prds,
+  resolveRunCost,
+  runs,
+  specs,
+  summaryPopulation,
+  tasks,
+  view,
+}: OperationsMainContentProps) {
+  return (
+    <section className="operations-content">
+      {view === "work-kanban" ? (
+        <UnifiedWorkBoard
+          allPrds={data.prds}
+          allSpecs={data.specs}
+          allTasks={data.tasks}
+          boardTotals={boardTotals}
+          boardKindTotals={boardKindTotals}
+          boardStates={boardStates}
+          changes={data.changes}
+          locale={locale}
+          onOpenDocument={onOpenDocument}
+          onOpenTask={onOpenTask}
+          onPriorityChange={onPriorityChange}
+          onLoadMore={onLoadMoreBoard}
+          onTypeChange={onBoardTypeChange}
+          prds={prds}
+          runs={data.runs}
+          specs={specs}
+          tasks={tasks}
+        />
+      ) : null}
+      {view === "work-list" ? (
+        <UnifiedWorkList
+          allSpecs={data.specs}
+          allTasks={data.tasks}
+          changes={data.changes}
+          locale={locale}
+          onOpenDocument={onOpenDocument}
+          onOpenTask={onOpenTask}
+          prds={prds}
+          runs={data.runs}
+          specs={specs}
+          tasks={tasks}
+          onTypeChange={onWorkListTypeChange}
+        />
+      ) : null}
+      {view === "changes" ? <ChangeTable locale={locale} rows={changes} /> : null}
+      {view === "executions" ? (
+        <ExecutionTable
+          canonical={entityPage?.aggregation !== "page_partial"}
+          locale={locale}
+          rows={executions}
+        />
+      ) : null}
+      {view === "runs" ? <RunTable locale={locale} rows={runs} /> : null}
+      {view === "conversations" ? (
+        <ConversationTable
+          canonical={entityPage?.aggregation !== "page_partial"}
+          executions={conversationExecutions}
+          locale={locale}
+          rows={conversationRuns}
+        />
+      ) : null}
+      {entityPage &&
+      ["runs", "executions", "conversations", "changes", "decisions"].includes(view) ? (
+        <OperationsEntityPager
+          entityPage={entityPage}
+          locale={locale}
+          onChange={onEntityPageChange}
+        />
+      ) : null}
+      {view === "decisions" ? <DecisionTable locale={locale} rows={data.decisions} /> : null}
+      {view === "daily" || view === "monthly" || view === "yearly" ? (
+        <PeriodSummaryTable
+          data={summaryPopulation}
+          currency={currency}
+          granularity={view === "daily" ? "day" : view === "monthly" ? "month" : "year"}
+          locale={locale}
+          resolveRunCost={resolveRunCost}
+          includeLegacyEffort={includeLegacyEffort}
+          {...(factualCostPeriods === undefined ? {} : { factualCostPeriods })}
+          legacyRange={data.filters}
+          {...(data.summary.periods === undefined
+            ? {}
+            : { manifestDailyPeriods: data.summary.periods.daily })}
+        />
+      ) : null}
+    </section>
+  );
+}