@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,800 @@
+import { DashboardHeader } from "@zaip-ai/dashboard-ui";
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { OperationsProjection } from "../contracts.js";
+import {
+  ChangeTable,
+  ConversationTable,
+  DecisionTable,
+  ExecutionTable,
+  RunTable,
+} from "./EntityTables.js";
+import { ExcelExportAction } from "./export/ExcelExportAction.js";
+import { OperationDateFilters } from "./OperationDateFilters.js";
+import {
+  ChevronDownIcon,
+  FilterIcon,
+  LocaleFlag,
+  RefreshIcon,
+  ResetIcon,
+  SearchClearIcon,
+} from "./OperationsIcons.js";
+import { OperationsOverview } from "./OperationsOverview.js";
+import {
+  dateRangeForPreset,
+  initialTaskDateRange,
+  isDateInOperationPreset,
+  isTaskCreatedInRange,
+  type OperationDatePreset,
+  type OperationDateRange,
+} from "./operation-date-range.js";
+import {
+  filterStatusLabel,
+  isOpenLifecycleStatus,
+  type OperationsView,
+  statusesForView,
+} from "./operations-page-filters.js";
+import { PeriodSummaryTable } from "./PeriodSummaryTable.js";
+import { aggregatePeriodSummary } from "./period-summary.js";
+import { scopeRunsToEntities } from "./run-scope.js";
+import { type OperationsLocale, riskLabel } from "./status-labels.js";
+import {
+  matchesTaskOrigin,
+  type TaskOrigin,
+  taskOriginLabel,
+  taskOriginOptions,
+} from "./task-origin.js";
+import { UnifiedWorkBoard } from "./UnifiedWorkBoard.js";
+import { UnifiedWorkList } from "./UnifiedWorkList.js";
+import {
+  macroWorkStage,
+  taskWorkStage,
+  type WorkStage,
+  workStageLabel,
+  workStages,
+} from "./work-board-model.js";
+import "./operations.css";
+import "./operations-table-badges.css";
+import "./operations-date-filters.css";
+import "./operations-filter-panel.css";
+import "./operations-responsive.css";
+
+const viewLabels: Record<"pt-BR" | "en-US", Record<OperationsView, string>> = {
+  "pt-BR": {
+    "work-kanban": "Trabalho (Kanban)",
+    "work-list": "Trabalho (Lista)",
+    changes: "Mudanças",
+    executions: "Execuções",
+    runs: "Invocações de agentes",
+    conversations: "Conversas",
+    decisions: "Decisões",
+    daily: "Diário",
+    monthly: "Mensal",
+    yearly: "Anual",
+  },
+  "en-US": {
+    "work-kanban": "Work (Kanban)",
+    "work-list": "Work (List)",
+    changes: "Changes",
+    executions: "Executions",
+    runs: "Agent invocations",
+    conversations: "Conversations",
+    decisions: "Decisions",
+    daily: "Daily",
+    monthly: "Monthly",
+    yearly: "Annual",
+  },
+};
+
+function matchesQuery(query: string, values: readonly (string | null | undefined)[]): boolean {
+  const normalized = query.trim().toLocaleLowerCase();
+  return (
+    normalized.length === 0 ||
+    values.some((value) => value?.toLocaleLowerCase().includes(normalized))
+  );
+}
+
+export interface DashboardGlobalFilters {
+  query: string;
+  datePreset: OperationDatePreset;
+  dateRange?: OperationDateRange;
+}
+
+export function OperationsPage({
+  alternateContent,
+  capabilityNavigation,
+  data,
+  dashboardTitle = "Dashboard Zaip AIOS",
+  loading,
+  locale,
+  onLocaleChange,
+  onOpenDocument,
+  onOpenTask,
+  onDetailDataRequest,
+  onPeriodChange,
+  onRefresh,
+  repositoryName,
+  settings,
+  resolveRunCostBrl,
+}: {
+  alternateContent?: ReactNode | ((filters: DashboardGlobalFilters) => ReactNode);
+  capabilityNavigation: ReactNode;
+  data: OperationsProjection;
+  dashboardTitle?: string;
+  loading: boolean;
+  locale: OperationsLocale;
+  onLocaleChange: (locale: OperationsLocale) => void;
+  onOpenDocument: (kind: "prd" | "spec", id: string) => void;
+  onOpenTask: (taskId: string) => Promise<boolean>;
+  onDetailDataRequest?: () => void;
+  onPeriodChange?: (preset: OperationDatePreset, range: OperationDateRange) => void;
+  onRefresh: () => void;
+  repositoryName?: string;
+  settings?: ReactNode;
+  resolveRunCostBrl?: ((runId: string) => number | null) | undefined;
+}) {
+  const [view, setView] = useState<OperationsView>("work-kanban");
+  const [query, setQuery] = useState("");
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [localeOpen, setLocaleOpen] = useState(false);
+  const [statusFilter, setStatusFilter] = useState("");
+  const [riskFilter, setRiskFilter] = useState("");
+  const [originFilter, setOriginFilter] = useState<TaskOrigin | "">("");
+  const [filterLoading, setFilterLoading] = useState(false);
+  const filterLoadingTimer = useRef<number | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const defaultDateRange = useMemo(() => initialTaskDateRange(data.tasks), [data.tasks]);
+  const initialDateRange = useMemo(() => dateRangeForPreset("this-month"), []);
+  const [dateRange, setDateRange] = useState(() => initialDateRange);
+  const [datePreset, setDatePreset] = useState<OperationDatePreset>("this-month");
+  useEffect(() => {
+    if (datePreset === "all") setDateRange(defaultDateRange);
+  }, [datePreset, defaultDateRange]);
+  const showFilterLoading = useCallback(() => {
+    setFilterLoading(true);
+    if (filterLoadingTimer.current !== null) window.clearTimeout(filterLoadingTimer.current);
+    filterLoadingTimer.current = window.setTimeout(() => setFilterLoading(false), 220);
+  }, []);
+  useEffect(
+    () => () => {
+      if (filterLoadingTimer.current !== null) window.clearTimeout(filterLoadingTimer.current);
+    },
+    [],
+  );
+  const renderedAlternateContent =
+    typeof alternateContent === "function"
+      ? alternateContent({ query, datePreset, ...(datePreset === "all" ? {} : { dateRange }) })
+      : alternateContent;
+  const includeLegacyEffort =
+    datePreset === "all" &&
+    query === "" &&
+    statusFilter === "" &&
+    riskFilter === "" &&
+    originFilter === "";
+  const resetFilters = () => {
+    showFilterLoading();
+    setQuery("");
+    setStatusFilter("");
+    setRiskFilter("");
+    setOriginFilter("");
+    setDateRange(initialDateRange);
+    setDatePreset("this-month");
+    onPeriodChange?.("this-month", initialDateRange);
+  };
+  const changeView = (nextView: OperationsView) => {
+    showFilterLoading();
+    if (nextView !== "work-kanban" && nextView !== "work-list") {
+      onDetailDataRequest?.();
+    }
+    setView(nextView);
+    setStatusFilter("");
+    setRiskFilter("");
+    setOriginFilter("");
+  };
+  const availableStatuses = statusesForView(data, view);
+  const supportsStatus = !["decisions", "daily", "monthly", "yearly"].includes(view);
+  const supportsRisk = view === "work-kanban" || view === "work-list" || view === "changes";
+  const supportsOrigin = view === "work-kanban" || view === "work-list";
+  // Only work views interpret a status option as a canonical work stage.
+  // Runs, Changes and Executions use their respective persisted statuses.
+  const hasEntityStageStatus =
+    (view === "work-kanban" || view === "work-list") &&
+    workStages.includes(statusFilter as WorkStage);
+  const matchesSelectedDate = (value: string | null | undefined) =>
+    isDateInOperationPreset(value, datePreset, dateRange);
+  const tasks = data.tasks.filter(
+    (task) =>
+      (!hasEntityStageStatus || taskWorkStage(task) === statusFilter) &&
+      (!riskFilter || task.risk === riskFilter) &&
+      matchesTaskOrigin(task, originFilter, data.changes) &&
+      (datePreset === "all" ||
+        isOpenLifecycleStatus(task.status) ||
+        isTaskCreatedInRange(task.finished_at ?? task.updated_at, dateRange, task.updated_at)) &&
+      matchesQuery(query, [
+        task.id,
+        task.title,
+        task.short_name,
+        task.objective,
+        task.change_id,
+        task.spec_id,
+      ]),
+  );
+  const prds = data.prds.filter(
+    (row) =>
+      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
+      !riskFilter &&
+      !originFilter &&
+      (datePreset === "all" ||
+        isOpenLifecycleStatus(row.lifecycle_status) ||
+        matchesSelectedDate(row.updated_at ?? row.created_at)) &&
+      matchesQuery(query, [row.id, row.title, row.parent_id]),
+  );
+  const specs = data.specs.filter(
+    (row) =>
+      (!hasEntityStageStatus || macroWorkStage(row, data.tasks) === statusFilter) &&
+      !riskFilter &&
+      !originFilter &&
+      (datePreset === "all" ||
+        isOpenLifecycleStatus(row.lifecycle_status) ||
+        matchesSelectedDate(row.updated_at ?? row.created_at)) &&
+      matchesQuery(query, [row.id, row.title, row.parent_id]),
+  );
+  const changes = data.changes.filter(
+    (row) =>
+      (!statusFilter || row.status === statusFilter) &&
+      (!riskFilter || row.risk === riskFilter) &&
+      matchesSelectedDate(row.created_at) &&
+      matchesQuery(query, [row.id, row.title, row.source.type, row.artifact_path]),
+  );
+  const executions = data.executions.filter(
+    (row) =>
+      (!statusFilter || row.status === statusFilter) &&
+      matchesSelectedDate(row.created_at) &&
+      matchesQuery(query, [
+        row.id,
+        row.status,
+        row.work_status,
+        row.origin.type,
+        row.origin.type === "interaction" ? row.origin.conversation_id : null,
+        row.artifact_path,
+      ]),
+  );
+  const candidateRuns = data.runs.filter(
+    (row) =>
+      (!statusFilter || hasEntityStageStatus || row.status === statusFilter) &&
+      matchesSelectedDate(row.started_at),
+  );
+  const runs = scopeRunsToEntities(
+    candidateRuns,
+    {
+      taskIds: new Set(tasks.map((task) => task.id)),
+      specIds: new Set(specs.map((spec) => spec.id)),
+      prdIds: new Set(prds.map((prd) => prd.id)),
+    },
+    {
+      entityFilterActive: Boolean(query || hasEntityStageStatus || riskFilter || originFilter),
+      directRunMatch: (row) =>
+        query.trim().length > 0 &&
+        matchesQuery(query, [
+          row.id,
+          row.task_id,
+          row.spec_id,
+          row.prd_id,
+          row.change_id,
+          row.execution_id,
+          row.conversation_id,
+          row.phase,
+          row.agent,
+          row.agent_name,
+          row.model,
+          row.effective_model,
+        ]),
+    },
+  );
+  const conversationExecutions = executions.filter(
+    (execution) => execution.kind === "interaction" && execution.origin.type === "interaction",
+  );
+  const conversationIds = new Set(
+    conversationExecutions.map((execution) =>
+      execution.origin.type === "interaction" ? execution.origin.conversation_id : "",
+    ),
+  );
+  const conversationRuns = runs.filter(
+    (row) =>
+      row.entrypoint === "conversation" &&
+      row.task_id === null &&
+      conversationIds.has(row.conversation_id),
+  );
+  const decisions = data.decisions.filter(
+    (row) =>
+      matchesSelectedDate(row.created_at) &&
+      matchesQuery(query, [row.id, row.title, row.scope_id, row.scope_type, row.artifact_path]),
+  );
+  const exportRows = useMemo(() => {
+    if (view === "daily" || view === "monthly" || view === "yearly") {
+      return aggregatePeriodSummary(
+        { prds, specs, tasks, runs },
+        view === "daily" ? "day" : view === "monthly" ? "month" : "year",
+        resolveRunCostBrl,
+        includeLegacyEffort,
+      );
+    }
+    if (view === "work-kanban" || view === "work-list") {
+      return [
+        ...prds.map(({ kind: _kind, ...row }) => ({ kind: "prd", ...row })),
+        ...specs.map(({ kind: _kind, ...row }) => ({ kind: "spec", ...row })),
+        ...tasks.map((row) => ({ kind: "task", ...row })),
+      ];
+    }
+    if (view === "changes") return changes;
+    if (view === "decisions") return decisions;
+    if (view === "executions") return executions;
+    if (view === "conversations") return conversationRuns;
+    return runs;
+  }, [
+    changes,
+    conversationRuns,
+    decisions,
+    executions,
+    prds,
+    resolveRunCostBrl,
+    runs,
+    specs,
+    tasks,
+    view,
+    includeLegacyEffort,
+  ]);
+  const isLoading = loading || filterLoading;
+  return (
+    <main className="operations-page">
+      <DashboardHeader
+        filters={
+          <div className="operations-global-filters" data-loading={isLoading || undefined}>
+            <div className="operations-filter-heading">
+              <div>
+                <strong>{locale === "pt-BR" ? "Filtrar dashboard" : "Filter dashboard"}</strong>
+                <small>
+                  {locale === "pt-BR"
+                    ? "Os resultados são atualizados automaticamente"
+                    : "Results update automatically"}
+                </small>
+              </div>
+              {isLoading ? (
+                <span className="operations-filter-status" role="status">
+                  <i /> {locale === "pt-BR" ? "Atualizando dados" : "Updating data"}
+                </span>
+              ) : null}
+            </div>
+            <label>
+              <span>{locale === "pt-BR" ? "Tipo" : "Type"}</span>
+              <select
+                onChange={(event) => changeView(event.target.value as OperationsView)}
+                value={view}
+              >
+                {(Object.keys(viewLabels[locale]) as OperationsView[]).map((key) => (
+                  <option key={key} value={key}>
+                    {viewLabels[locale][key]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            {supportsStatus ? (
+              <label>
+                <span>Status</span>
+                <select
+                  onChange={(event) => {
+                    showFilterLoading();
+                    setStatusFilter(event.target.value);
+                  }}
+                  value={statusFilter}
+                >
+                  <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
+                  {availableStatuses.map((status) => (
+                    <option key={status} value={status}>
+                      {filterStatusLabel(status, locale)}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            ) : null}
+            {supportsRisk ? (
+              <label>
+                <span>{locale === "pt-BR" ? "Risco" : "Risk"}</span>
+                <select
+                  onChange={(event) => {
+                    showFilterLoading();
+                    setRiskFilter(event.target.value);
+                  }}
+                  value={riskFilter}
+                >
+                  <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
+                  <option value="lite">{riskLabel("lite", locale)}</option>
+                  <option value="standard">{riskLabel("standard", locale)}</option>
+                  <option value="critical">{riskLabel("critical", locale)}</option>
+                </select>
+              </label>
+            ) : null}
+            {supportsOrigin ? (
+              <label>
+                <span>{locale === "pt-BR" ? "Origem da tarefa" : "Task origin"}</span>
+                <select
+                  onChange={(event) => {
+                    showFilterLoading();
+                    setOriginFilter(event.target.value as TaskOrigin | "");
+                  }}
+                  value={originFilter}
+                >
+                  <option value="">{locale === "pt-BR" ? "Todas" : "All"}</option>
+                  {taskOriginOptions.map((origin) => (
+                    <option key={origin} value={origin}>
+                      {taskOriginLabel(origin)}
+                    </option>
+                  ))}
+                </select>
+              </label>
+            ) : null}
+            <OperationDateFilters
+              ariaLabelSuffix={locale === "pt-BR" ? " nos filtros" : " in filters"}
+              dateRange={dateRange}
+              defaultDateRange={defaultDateRange}
+              locale={locale}
+              onDateRangeChange={(nextRange) => {
+                showFilterLoading();
+                setDateRange(nextRange);
+                setDatePreset("custom");
+                onPeriodChange?.("custom", nextRange);
+              }}
+              onPresetChange={(nextPreset, nextRange) => {
+                showFilterLoading();
+                setDatePreset(nextPreset);
+                setDateRange(nextRange);
+                onPeriodChange?.(nextPreset, nextRange);
+              }}
+              preset={datePreset}
+            />
+            <button className="operations-clear-filters" onClick={resetFilters} type="button">
+              <ResetIcon />
+              {locale === "pt-BR" ? "Limpar filtros" : "Clear filters"}
+            </button>
+          </div>
+        }
+        filtersActive={Boolean(
+          query ||
+            statusFilter ||
+            riskFilter ||
+            originFilter ||
+            dateRange.start !== defaultDateRange.start ||
+            dateRange.end !== defaultDateRange.end,
+        )}
+        lastUpdatedAt={data.summary.source_latest_at}
+        loading={isLoading}
+        locale={locale}
+        onLocaleChange={onLocaleChange}
+        onRefresh={onRefresh}
+        {...(repositoryName === undefined ? {} : { repositoryName })}
+        settings={settings}
+        title={dashboardTitle}
+      />
+      <h1 className="operations-sr-only">Operações</h1>
+      <header className="operations-hero">
+        <div>
+          <small className="operations-last-updated">
+            {data.summary.source_latest_at === null
+              ? locale === "pt-BR"
+                ? "Aguardando atualização"
+                : "Waiting for refresh"
+              : `${locale === "pt-BR" ? "Atualizado" : "Updated"} ${new Intl.DateTimeFormat(locale, { dateStyle: "short", timeStyle: "medium" }).format(new Date(data.summary.source_latest_at))}`}
+          </small>
+        </div>
+        <div className="operations-actions">
+          <button
+            aria-label={locale === "pt-BR" ? "Atualizar" : "Refresh"}
+            className="operations-nav-icon"
+            disabled={loading}
+            onClick={onRefresh}
+            type="button"
+          >
+            <RefreshIcon />
+          </button>
+          <div className="operations-nav-popup-anchor">
+            <button
+              className={`operations-nav-button${filtersOpen ? " is-active" : ""}`}
+              onClick={() => {
+                setFiltersOpen((open) => !open);
+                setLocaleOpen(false);
+              }}
+              type="button"
+            >
+              <FilterIcon /> {locale === "pt-BR" ? "Filtros" : "Filters"}
+            </button>
+            {filtersOpen ? (
+              <div className="operations-nav-popup operations-filter-popup">
+                <label>
+                  <span>{locale === "pt-BR" ? "Busca" : "Search"}</span>
+                  <input
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={
+                      locale === "pt-BR"
+                        ? `ID ou nome de ${viewLabels[locale][view]}`
+                        : `${viewLabels[locale][view]} ID or name`
+                    }
+                    value={query}
+                  />
+                </label>
+                {view === "work-kanban" || view === "work-list" ? (
+                  <>
+                    <label>
+                      <span>Status</span>
+                      <select
+                        onChange={(event) => setStatusFilter(event.target.value)}
+                        value={statusFilter}
+                      >
+                        <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
+                        {workStages.map((status) => (
+                          <option key={status} value={status}>
+                            {workStageLabel(status, locale)}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    <label>
+                      <span>{locale === "pt-BR" ? "Risco" : "Risk"}</span>
+                      <select
+                        onChange={(event) => setRiskFilter(event.target.value)}
+                        value={riskFilter}
+                      >
+                        <option value="">{locale === "pt-BR" ? "Todos" : "All"}</option>
+                        <option value="lite">{riskLabel("lite", locale)}</option>
+                        <option value="standard">{riskLabel("standard", locale)}</option>
+                        <option value="critical">{riskLabel("critical", locale)}</option>
+                      </select>
+                    </label>
+                    <label>
+                      <span>{locale === "pt-BR" ? "Origem da tarefa" : "Task origin"}</span>
+                      <select
+                        onChange={(event) => setOriginFilter(event.target.value as TaskOrigin | "")}
+                        value={originFilter}
+                      >
+                        <option value="">{locale === "pt-BR" ? "Todas" : "All"}</option>
+                        {taskOriginOptions.map((origin) => (
+                          <option key={origin} value={origin}>
+                            {taskOriginLabel(origin)}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  </>
+                ) : null}
+                <button onClick={resetFilters} type="button">
+                  {locale === "pt-BR" ? "Limpar filtros" : "Clear filters"}
+                </button>
+              </div>
+            ) : null}
+          </div>
+          <div className="operations-nav-popup-anchor">
+            <button
+              className={`operations-nav-button${localeOpen ? " is-active" : ""}`}
+              onClick={() => {
+                setLocaleOpen((open) => !open);
+                setFiltersOpen(false);
+              }}
+              type="button"
+            >
+              <LocaleFlag locale={locale} />
+              {locale === "pt-BR" ? "PT-BR" : "EN-US"}
+              <ChevronDownIcon />
+            </button>
+            {localeOpen ? (
+              <div className="operations-nav-popup operations-locale-popup">
+                <button
+                  onClick={() => {
+                    onLocaleChange("pt-BR");
+                    setLocaleOpen(false);
+                  }}
+                  type="button"
+                >
+                  <LocaleFlag locale="pt-BR" /> Português do Brasil
+                  {locale === "pt-BR" ? <span>✓</span> : null}
+                </button>
+                <button
+                  onClick={() => {
+                    onLocaleChange("en-US");
+                    setLocaleOpen(false);
+                  }}
+                  type="button"
+                >
+                  <LocaleFlag locale="en-US" /> English
+                  {locale === "en-US" ? <span>✓</span> : null}
+                </button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </header>
+
+      {isLoading ? (
+        <div aria-live="polite" className="operations-loading-status" role="status">
+          {locale === "pt-BR" ? "Carregando dados atualizados…" : "Loading updated data…"}
+        </div>
+      ) : null}
+      <div
+        aria-busy={isLoading}
+        className={isLoading ? "operations-filtered is-loading" : "operations-filtered"}
+      >
+        <OperationsOverview
+          data={data}
+          datePreset={datePreset}
+          locale={locale}
+          onDatePresetChange={(nextPreset) => {
+            showFilterLoading();
+            const nextRange =
+              nextPreset === "all"
+                ? defaultDateRange
+                : nextPreset === "custom"
+                  ? dateRange
+                  : dateRangeForPreset(nextPreset);
+            setDatePreset(nextPreset);
+            setDateRange(nextRange);
+            onPeriodChange?.(nextPreset, nextRange);
+          }}
+          onOpenTask={onOpenTask}
+          prds={prds}
+          runs={runs}
+          resolveRunCostBrl={resolveRunCostBrl}
+          includeLegacyEffort={includeLegacyEffort}
+          specs={specs}
+          tasks={tasks}
+        />
+
+        <section className="dashboard-global-controls">
+          {capabilityNavigation}
+          <div className="operations-toolbar-filters dashboard-global-filters">
+            <label className="operations-toolbar-field operations-search-field">
+              <span>{locale === "pt-BR" ? "Busca" : "Search"}</span>
+              <div className="operations-search-control">
+                <input
+                  aria-label={locale === "pt-BR" ? "Busca" : "Search"}
+                  onChange={(event) => {
+                    showFilterLoading();
+                    setQuery(event.target.value);
+                  }}
+                  placeholder={
+                    locale === "pt-BR" ? "Buscar por nome ou ID" : "Search by name or ID"
+                  }
+                  ref={searchInputRef}
+                  value={query}
+                />
+                {query ? (
+                  <button
+                    aria-label={locale === "pt-BR" ? "Limpar busca" : "Clear search"}
+                    className="operations-search-clear"
+                    onClick={() => {
+                      showFilterLoading();
+                      setQuery("");
+                      searchInputRef.current?.focus();
+                    }}
+                    type="button"
+                  >
+                    <SearchClearIcon />
+                  </button>
+                ) : null}
+              </div>
+            </label>
+            <OperationDateFilters
+              dateRange={dateRange}
+              defaultDateRange={defaultDateRange}
+              locale={locale}
+              onDateRangeChange={(nextRange) => {
+                showFilterLoading();
+                setDateRange(nextRange);
+                setDatePreset("custom");
+                onPeriodChange?.("custom", nextRange);
+              }}
+              onPresetChange={(nextPreset, nextRange) => {
+                showFilterLoading();
+                setDatePreset(nextPreset);
+                setDateRange(nextRange);
+                onPeriodChange?.(nextPreset, nextRange);
+              }}
+              preset={datePreset}
+            />
+          </div>
+        </section>
+
+        {renderedAlternateContent ?? (
+          <>
+            <section className="operations-toolbar">
+              <nav aria-label="Entidades do ciclo de trabalho">
+                {(
+                  [
+                    "work-kanban",
+                    "work-list",
+                    "executions",
+                    "runs",
+                    "decisions",
+                    "changes",
+                    "conversations",
+                    "daily",
+                    "monthly",
+                    "yearly",
+                  ] as const
+                ).map((key) => (
+                  <button
+                    className={view === key ? "is-active" : undefined}
+                    key={key}
+                    onClick={() => changeView(key)}
+                    type="button"
+                  >
+                    {viewLabels[locale][key]}
+                  </button>
+                ))}
+                <ExcelExportAction
+                  filters={{
+                    query,
+                    status: statusFilter,
+                    risk: riskFilter,
+                    origin: originFilter,
+                    dateRange,
+                    datePreset,
+                  }}
+                  rows={exportRows as unknown as readonly Record<string, unknown>[]}
+                  view={`operations-${view}`}
+                />
+              </nav>
+            </section>
+
+            <section className="operations-content">
+              {view === "work-kanban" ? (
+                <UnifiedWorkBoard
+                  allSpecs={data.specs}
+                  allTasks={data.tasks}
+                  changes={data.changes}
+                  locale={locale}
+                  onOpenDocument={onOpenDocument}
+                  onOpenTask={onOpenTask}
+                  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}
+                />
+              ) : null}
+              {view === "changes" ? <ChangeTable locale={locale} rows={changes} /> : null}
+              {view === "executions" ? <ExecutionTable locale={locale} rows={executions} /> : null}
+              {view === "runs" ? <RunTable locale={locale} rows={runs} /> : null}
+              {view === "conversations" ? (
+                <ConversationTable
+                  executions={conversationExecutions}
+                  locale={locale}
+                  rows={conversationRuns}
+                />
+              ) : null}
+              {view === "decisions" ? <DecisionTable locale={locale} rows={decisions} /> : null}
+              {view === "daily" || view === "monthly" || view === "yearly" ? (
+                <PeriodSummaryTable
+                  data={{ prds, runs, specs, tasks }}
+                  granularity={view === "daily" ? "day" : view === "monthly" ? "month" : "year"}
+                  locale={locale}
+                  resolveRunCostBrl={resolveRunCostBrl}
+                  includeLegacyEffort={includeLegacyEffort}
+                />
+              ) : null}
+            </section>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}