@zaip-ai/cli 2.2.0 → 3.0.0

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

@@ -1,12 +1,15 @@
+import { formatSummaryMetricValue } from "./overview-metric-format.js";
+
+export { formatSummaryMetricValue } from "./overview-metric-format.js";
+
 import {
   formatCompactNumber,
   formatCurrency,
-  formatDateTime,
   formatDurationMs,
   formatPercent,
 } from "@zaip-ai/dashboard-ui";
-import { type ReactNode, useState } from "react";
-import type { MacroProjection, OperationsProjection } from "../contracts.js";
+import { useState } from "react";
+import type { OperationsProjection } from "../contracts.js";
 import { allPhaseMetricTotals, executionMetricTotals } from "./execution-metrics.js";
 import { OperationsFilteredStatusDialog as FilteredStatusDialog } from "./OperationsFilteredStatusDialog.js";
 import type { EntityMetric } from "./OperationsOverview.helpers.js";
@@ -15,11 +18,13 @@ import {
   aggregateTaskMetrics,
   canonicalMacroMetric,
   countExecutionDays,
+  factualCostAverageLabel,
   findLatestCreatedAt,
   formatExecutionAverageHint,
   Kpi,
   macroClassificationStats,
   overviewCopy,
+  overviewCostForRates,
   overviewMetricAverages,
   overviewText,
   partialOverviewMetrics,
@@ -34,22 +39,19 @@ import {
   sumKnownOverviewMetric,
   summarizeTopEntityMetrics,
 } from "./OperationsOverview.helpers.js";
+import { OperationsOverviewCharts } from "./OperationsOverviewCharts.js";
 import { OperationsOverviewTopPanel } from "./OperationsOverviewTopPanel.js";
+import { OverviewCostKpi } from "./OverviewCostKpi.js";
 import type { OperationDatePreset, OperationDateRange } from "./operation-date-range.js";
 import type {
+  FactualCostFact,
   OverviewClassification,
   OverviewClassificationPage,
   OverviewStatusKind,
   OverviewStatusPage,
 } from "./operations-page-contract.js";
 import { type OperationsLocale, riskLabel } from "./status-labels.js";
-import {
-  macroWorkStage,
-  taskWorkStage,
-  type WorkStage,
-  workStageLabel,
-  workStages,
-} from "./work-board-model.js";
+import { type WorkStage, workStageLabel, workStages } from "./work-board-model.js";
 import "./operations-overview.css";
 
 export {
@@ -57,6 +59,9 @@ export {
   aggregateTaskMetrics,
   canonicalMacroMetric,
   countExecutionDays,
+  factualCostAverageLabel,
+  factualCostMetricHint,
+  factualCostMetricLabel,
   findLatestCreatedAt,
   findLatestTaskCreatedAt,
   formatExecutionAverageHint,
@@ -79,36 +84,6 @@ export {
 
 type OverviewView = "tasks" | "specs" | "prds";
 
-function formatRoundedCurrency(
-  value: number,
-  currency: "BRL" | "USD",
-  locale: OperationsLocale,
-): string {
-  return new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency,
-    maximumFractionDigits: 0,
-  }).format(value);
-}
-
-function formatEntityDuration(value: number | null, locale: OperationsLocale): string {
-  if (value !== null) return formatDurationMs(value, locale);
-  return locale === "pt-BR" ? "Indisponível" : "Unavailable";
-}
-
-/**
- * Keeps missing source facts as null while making a genuinely empty selected
- * population readable as the factual numeric zero in the overview.
- */
-export function formatSummaryMetricValue(
-  value: number | null,
-  populationCount: number | null,
-  formatKnownValue: (knownValue: number) => string,
-  locale: OperationsLocale,
-): string {
-  if (value !== null) return formatKnownValue(value);
-  return populationCount === 0 ? "0" : formatEntityDuration(null, locale);
-}
 export function OperationsOverview({
   currency,
   data,
@@ -128,6 +103,7 @@ export function OperationsOverview({
   specs = data.specs,
   tasks = data.tasks,
   factualCostTotal,
+  factualCostFact,
   resolveRunCost,
   includeLegacyEffort: _includeLegacyEffort = false,
 }: {
@@ -163,6 +139,8 @@ export function OperationsOverview({
   tasks?: OperationsProjection["tasks"];
   /** Factual Cost Monitor snapshot total for the selected locale/currency. */
   factualCostTotal?: number | null | undefined;
+  /** Measurement completeness for the matching Cost Monitor snapshot. */
+  factualCostFact?: FactualCostFact | undefined;
   resolveRunCost?: ((runId: string) => number | null) | undefined;
   includeLegacyEffort?: boolean;
 }) {
@@ -336,6 +314,7 @@ export function OperationsOverview({
   // from Cost Monitor's factual per-Run estimates; never relabel BRL as USD.
   const totalCostMetric = resolveOverviewCostTotal({
     currency,
+    factualSnapshotFact: overviewView === "tasks" ? factualCostFact : undefined,
     factualSnapshotTotal: factualCostTotal,
     macroCostTotal: canonicalMacroMetric(
       selectedMacroAggregate !== undefined,
@@ -346,14 +325,18 @@ export function OperationsOverview({
     resolvedRunTotal: selectedCurrencyCost,
     operationsBrlTotal: overviewMetrics?.cost_brl ?? allPhaseMetrics.costBrl,
   });
+  const rateCost = overviewCostForRates(
+    overviewView === "tasks" ? factualCostFact : undefined,
+    totalCostMetric,
+  );
   const hourlyCost =
-    totalDurationMetric === null || totalDurationMetric <= 0 || totalCostMetric === null
+    totalDurationMetric === null || totalDurationMetric <= 0 || rateCost === null
       ? null
-      : (totalCostMetric * 3_600_000) / totalDurationMetric;
+      : (rateCost * 3_600_000) / totalDurationMetric;
   const costPerTask =
-    totalCostMetric === null || metricPopulationCount === null || metricPopulationCount === 0
+    rateCost === null || metricPopulationCount === null || metricPopulationCount === 0
       ? null
-      : totalCostMetric / metricPopulationCount;
+      : rateCost / metricPopulationCount;
   const tokensPerTask =
     totalTokensMetric === null || metricPopulationCount === null || metricPopulationCount === 0
       ? null
@@ -364,7 +347,7 @@ export function OperationsOverview({
       : (totalTokensMetric * 3_600_000) / totalDurationMetric;
   const averageMetricTotals =
     overviewView === "tasks"
-      ? { durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric }
+      ? { durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: rateCost }
       : {
           durationMs: canonicalMacroMetric(
             selectedMacroAggregate !== undefined,
@@ -429,7 +412,11 @@ export function OperationsOverview({
       ),
     ],
     [
-      text.averageCost,
+      factualCostAverageLabel(
+        overviewView === "tasks" ? factualCostFact : undefined,
+        selectedCount,
+        locale,
+      ),
       formatSummaryMetricValue(
         averageCost,
         selectedCount,
@@ -522,36 +509,44 @@ export function OperationsOverview({
 
   return (
     <section aria-label={text.overview} className="operations-overview">
+      {" "}
       <div className="operations-overview-controls">
+        {" "}
         <label className="operations-overview-period">
-          <span>{locale === "pt-BR" ? "Período" : "Period"}</span>
+          {" "}
+          <span>{locale === "pt-BR" ? "Período" : "Period"}</span>{" "}
           <select
             aria-label={locale === "pt-BR" ? "Período" : "Period"}
             onChange={(event) => onDatePresetChange(event.target.value as OperationDatePreset)}
             value={datePreset}
           >
+            {" "}
             <option value="today">{locale === "pt-BR" ? "Hoje" : "Today"}</option>
-            <option value="yesterday">{locale === "pt-BR" ? "Ontem" : "Yesterday"}</option>
-            <option value="this-week">{locale === "pt-BR" ? "Esta Semana" : "This Week"}</option>
+            <option value="yesterday">{locale === "pt-BR" ? "Ontem" : "Yesterday"}</option>{" "}
+            <option value="this-week">{locale === "pt-BR" ? "Esta Semana" : "This Week"}</option>{" "}
             <option value="last-week">{locale === "pt-BR" ? "Semana Passada" : "Last Week"}</option>
-            <option value="this-month">{locale === "pt-BR" ? "Este Mês" : "This Month"}</option>
-            <option value="last-month">{locale === "pt-BR" ? "Mês Passado" : "Last Month"}</option>
+            <option value="this-month">{locale === "pt-BR" ? "Este Mês" : "This Month"}</option>{" "}
+            <option value="last-month">{locale === "pt-BR" ? "Mês Passado" : "Last Month"}</option>{" "}
             <option value="last-3-months">
+              {" "}
               {locale === "pt-BR" ? "Últimos 3 meses" : "Last 3 months"}
-            </option>
+            </option>{" "}
             <option value="last-6-months">
-              {locale === "pt-BR" ? "Últimos 6 meses" : "Last 6 months"}
-            </option>
+              {" "}
+              {locale === "pt-BR" ? "Últimos 6 meses" : "Last 6 months"}{" "}
+            </option>{" "}
             <option value="this-year">{locale === "pt-BR" ? "Este Ano" : "This Year"}</option>
-            <option value="last-year">{locale === "pt-BR" ? "Último ano" : "Last year"}</option>
-            <option value="all">{locale === "pt-BR" ? "Todo o Período" : "All Time"}</option>
+            <option value="last-year">{locale === "pt-BR" ? "Último ano" : "Last year"}</option>{" "}
+            <option value="all">{locale === "pt-BR" ? "Todo o Período" : "All Time"}</option>{" "}
             <option disabled value="custom">
-              {locale === "pt-BR" ? "Personalizado" : "Custom"}
-            </option>
+              {" "}
+              {locale === "pt-BR" ? "Personalizado" : "Custom"}{" "}
+            </option>{" "}
           </select>
-        </label>
-      </div>
+        </label>{" "}
+      </div>{" "}
       <div className="operations-kpi-grid">
+        {" "}
         <Kpi
           featured={overviewView === "tasks"}
           hint={
@@ -564,7 +559,7 @@ export function OperationsOverview({
           label={text.tasks}
           onSelect={() => selectOverviewView("tasks")}
           value={taskCount === null ? "—" : String(taskCount)}
-        />
+        />{" "}
         <Kpi
           featured={overviewView === "specs"}
           hint={
@@ -577,7 +572,7 @@ export function OperationsOverview({
           label="SPECs"
           onSelect={() => selectOverviewView("specs")}
           value={specCount === null ? "—" : String(specCount)}
-        />
+        />{" "}
         <Kpi
           featured={overviewView === "prds"}
           hint={
@@ -590,7 +585,7 @@ export function OperationsOverview({
           label="PRDs"
           onSelect={() => selectOverviewView("prds")}
           value={prdCount === null ? "—" : String(prdCount)}
-        />
+        />{" "}
         <Kpi
           hint={formatExecutionAverageHint(
             totalDurationMetric ?? 0,
@@ -611,7 +606,7 @@ export function OperationsOverview({
             (value) => formatDurationMs(value, locale),
             locale,
           )}
-        />
+        />{" "}
         <Kpi
           hint={
             tokensPerTask === null || tokensPerHour === null
@@ -641,176 +636,54 @@ export function OperationsOverview({
             (value) => formatCompactNumber(value, locale),
             locale,
           )}
-        />
-        <Kpi
-          hint={
-            hourlyCost === null || costPerTask === null
-              ? metricPopulationCount === 0
-                ? locale === "pt-BR"
-                  ? `${formatRoundedCurrency(0, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(0, currency, locale)} / hora)`
-                  : `${formatRoundedCurrency(0, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(0, currency, locale)} / hour)`
-                : locale === "pt-BR"
-                  ? "Custo por tarefa e por hora indispon\u00edvel"
-                  : "Cost per task and hour unavailable"
-              : locale === "pt-BR"
-                ? `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hora)`
-                : `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hour)`
-          }
+        />{" "}
+        <OverviewCostKpi
+          fact={overviewView === "tasks" ? factualCostFact : undefined}
+          unit={metricUnit}
+          locale={locale}
+          currency={currency}
+          count={metricPopulationCount}
+          perItem={costPerTask}
+          perHour={hourlyCost}
+          total={totalCostMetric}
           label={
             overviewView === "tasks"
-              ? locale === "pt-BR"
-                ? "Custo Estimado"
-                : "Estimated cost"
+              ? undefined
               : locale === "pt-BR"
                 ? `Custo de ${copy.shortPlural}`
                 : `${copy.shortPlural} cost`
           }
-          value={formatSummaryMetricValue(
-            totalCostMetric,
-            metricPopulationCount,
-            (value) => formatRoundedCurrency(value, currency, locale),
-            locale,
-          )}
-        />
+        />{" "}
       </div>
-
       <div className="operations-chart-grid">
-        <article className="operations-panel operations-panel-wide">
-          <PanelHeader hint={text.statusHint} title={copy.statusTitle} />
-          <div aria-hidden="true" className="operations-stacked-bar">
-            {statusStats.map((item) => (
-              <i
-                key={item.key}
-                style={{
-                  background: item.color,
-                  flexGrow: item.count,
-                  display: item.count === 0 ? "none" : undefined,
-                }}
-              />
-            ))}
-          </div>
-          <div className="operations-legend-grid">
-            {statusStats.map((item) => {
-              const content = (
-                <>
-                  <i style={{ background: item.color }} />
-                  <span>{item.label}</span>
-                  <span className="operations-legend-value">
-                    <strong>{item.count}</strong>
-                    <small>
-                      {formatPercent(statusTotal === 0 ? 0 : item.count / statusTotal, locale)}
-                    </small>
-                  </span>
-                </>
-              );
-              return item.key !== "unclassified" ? (
-                <button
-                  aria-label={`${item.label}: ${item.count}, ${formatPercent(statusTotal === 0 ? 0 : item.count / statusTotal, locale)}`}
-                  className="operations-legend-row operations-status-filter"
-                  key={item.key}
-                  onClick={() => {
-                    const stage = item.key as WorkStage;
-                    setSelectedStatus(stage);
-                    onLoadStatus?.(
-                      stage,
-                      overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
-                      0,
-                    );
-                  }}
-                  type="button"
-                >
-                  {content}
-                </button>
-              ) : (
-                <div className="operations-legend-row" key={item.key}>
-                  {content}
-                </div>
-              );
-            })}
-          </div>
-        </article>
-
-        <article className="operations-panel operations-panel-risk">
-          <PanelHeader hint={copy.classificationHint} title={copy.classificationTitle} />
-          <div className="operations-donut-wrap">
-            <div
-              aria-hidden="true"
-              className="operations-donut"
-              style={{
-                background: donutGradient(classificationStats, Math.max(selectedCount ?? 0, 1)),
-              }}
-            />
-            <div>
-              <strong>{selectedCount ?? "—"}</strong>
-              <span>{copy.shortPlural}</span>
-            </div>
-          </div>
-          <div className="operations-legend-grid">
-            {classificationStats.map((item) => {
-              const content = (
-                <>
-                  <i style={{ background: item.color }} />
-                  <span>{item.label}</span>
-                  <span className="operations-legend-value">
-                    <strong>{item.count}</strong>
-                    <small>
-                      {formatPercent(
-                        selectedCount === null || selectedCount === 0
-                          ? 0
-                          : item.count / selectedCount,
-                        locale,
-                      )}
-                    </small>
-                  </span>
-                </>
-              );
-              return item.key !== "unclassified" ? (
-                <button
-                  aria-label={`${item.label}: ${item.count}, ${formatPercent(selectedCount === null || selectedCount === 0 ? 0 : item.count / selectedCount, locale)}`}
-                  className="operations-legend-row operations-status-filter"
-                  key={item.key}
-                  onClick={() => {
-                    const classification = item.key as OverviewClassification;
-                    setSelectedClassification(classification);
-                    onLoadClassificationPage?.(
-                      overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
-                      classification,
-                      0,
-                    );
-                  }}
-                  type="button"
-                >
-                  {content}
-                </button>
-              ) : (
-                <div className="operations-legend-row" key={item.key}>
-                  {content}
-                </div>
-              );
-            })}
-          </div>
-        </article>
-
-        <article
-          className={`operations-panel operations-panel-type${locale === "en-US" ? " is-en-us" : ""}`}
-        >
-          <PanelHeader hint={copy.averageHint} title={copy.averageTitle} />
-          <div className="operations-type-summary">
-            {metricStats.map(([label, value]) => (
-              <div key={label}>
-                <span>{label}</span>
-                <strong>{value}</strong>
-              </div>
-            ))}
-          </div>
-          <footer className="operations-latest-task-created">
-            <span>{copy.latestLabel}</span>
-            <strong>
-              {latestCreatedAt === null ? "—" : formatDateTime(latestCreatedAt, locale)}
-            </strong>
-          </footer>
-        </article>
-
+        {" "}
+        <OperationsOverviewCharts
+          locale={locale}
+          copy={copy}
+          text={text}
+          statusStats={statusStats}
+          statusTotal={statusTotal}
+          classificationStats={classificationStats}
+          selectedCount={selectedCount}
+          metricStats={metricStats}
+          latestCreatedAt={latestCreatedAt}
+          onStatusSelect={(stage) => {
+            setSelectedStatus(stage);
+            onLoadStatus?.(
+              stage,
+              overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+              0,
+            );
+          }}
+          onClassificationSelect={(classification) => {
+            setSelectedClassification(classification);
+            onLoadClassificationPage?.(
+              overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
+              classification,
+              0,
+            );
+          }}
+        />
         <OperationsOverviewTopPanel
           copy={{ empty: copy.emptyTop, hint: topHint, title: copy.topTitle }}
           currency={currency}
@@ -822,8 +695,8 @@ export function OperationsOverview({
           topCost={topEntitiesCost}
           topEntities={topEntities}
           view={overviewView}
-        />
-      </div>
+        />{" "}
+      </div>{" "}
       {selectedStatus === null ? null : (
         <FilteredStatusDialog
           eyebrow={
@@ -865,7 +738,7 @@ export function OperationsOverview({
             overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
           )}
         />
-      )}
+      )}{" "}
       {selectedClassification === null ? null : (
         <FilteredStatusDialog
           eyebrow={locale === "pt-BR" ? copy.classificationTitle : "Classification"}
@@ -907,55 +780,11 @@ export function OperationsOverview({
             selectedClassification,
           )}
         />
-      )}
+      )}{" "}
     </section>
   );
 }
 
-function PanelHeader({ title, hint, action }: { title: string; hint: string; action?: ReactNode }) {
-  return (
-    <header className="operations-panel-header">
-      <div className="operations-panel-header-title">
-        <h2>{title}</h2>
-        {action}
-      </div>
-      <small>{hint}</small>
-    </header>
-  );
-}
+import { macroStatusDistribution, taskStatusDistribution } from "./OperationsOverviewPanels.js";
 
-export function taskStatusDistribution(
-  tasks: readonly Parameters<typeof taskWorkStage>[0][],
-  locale: OperationsLocale,
-) {
-  return workStages.map((stage) => ({
-    key: stage,
-    label: workStageLabel(stage, locale),
-    color: statusColors[stage],
-    count: tasks.filter((task) => taskWorkStage(task) === stage).length,
-  }));
-}
-
-export function macroStatusDistribution(
-  macros: readonly MacroProjection[],
-  tasks: OperationsProjection["tasks"],
-  locale: OperationsLocale,
-) {
-  return workStages.map((stage) => ({
-    key: stage,
-    label: workStageLabel(stage, locale),
-    color: statusColors[stage],
-    count: macros.filter((macro) => macroWorkStage(macro, tasks) === stage).length,
-  }));
-}
-
-function donutGradient(rows: readonly { color: string; count: number }[], total: number): string {
-  let start = 0;
-  const stops = rows.map((row) => {
-    const end = start + (row.count / total) * 100;
-    const stop = `${row.color} ${start}% ${end}%`;
-    start = end;
-    return stop;
-  });
-  return start === 0 ? "rgba(36, 52, 72, 0.86)" : `conic-gradient(${stops.join(", ")})`;
-}
+export { macroStatusDistribution, taskStatusDistribution } from "./OperationsOverviewPanels.js";