@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,621 @@
+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 {
+  allPhaseMetricTotals,
+  effortMetricTotals,
+  executionMetricTotals,
+  globalLegacyEffortMetricDuration,
+} from "./execution-metrics.js";
+import {
+  aggregateMacroMetrics,
+  aggregateTaskMetrics,
+  averageObserved,
+  countExecutionDays,
+  findLatestCreatedAt,
+  formatExecutionAverageHint,
+  Kpi,
+  macroClassificationStats,
+  overviewCopy,
+  overviewText,
+  riskColors,
+  statusColors,
+  summarizeTopEntityMetrics,
+} from "./OperationsOverview.helpers.js";
+import type { OperationDatePreset } from "./operation-date-range.js";
+import { type OperationsLocale, riskLabel } from "./status-labels.js";
+import {
+  macroWorkStage,
+  taskWorkStage,
+  type WorkStage,
+  workStageLabel,
+  workStages,
+} from "./work-board-model.js";
+import "./operations-overview.css";
+
+export {
+  aggregateMacroMetrics,
+  aggregateTaskMetrics,
+  averageObserved,
+  countExecutionDays,
+  findLatestCreatedAt,
+  findLatestTaskCreatedAt,
+  formatExecutionAverageHint,
+  formatTokenThroughputHint,
+  macroClassificationStats,
+  overviewText,
+  statusColors,
+  summarizeTopEntityMetrics,
+  summarizeTopTaskMetrics,
+} from "./OperationsOverview.helpers.js";
+
+type OverviewView = "tasks" | "specs" | "prds";
+
+function formatRoundedCurrency(value: number, locale: OperationsLocale): string {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: "BRL",
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function runsForOverviewView(
+  view: OverviewView,
+  tasks: OperationsProjection["tasks"],
+  macros: OperationsProjection["specs"] | OperationsProjection["prds"],
+  runs: OperationsProjection["runs"],
+): OperationsProjection["runs"] {
+  if (view === "tasks") {
+    const taskIds = new Set(tasks.map((task) => task.id));
+    return runs.filter((run) => run.task_id !== null && taskIds.has(run.task_id));
+  }
+  const macroIds = new Set(macros.map((macro) => macro.id));
+  const declaredRunIds = new Set(macros.flatMap((macro) => macro.run_ids));
+  return runs.filter(
+    (run) =>
+      declaredRunIds.has(run.id) ||
+      (view === "specs"
+        ? run.spec_id !== null && macroIds.has(run.spec_id)
+        : run.prd_id !== null && macroIds.has(run.prd_id)),
+  );
+}
+
+export function OperationsOverview({
+  data,
+  datePreset,
+  locale,
+  onDatePresetChange,
+  onOpenTask,
+  prds = data.prds,
+  runs = data.runs,
+  specs = data.specs,
+  tasks = data.tasks,
+  resolveRunCostBrl,
+  includeLegacyEffort = false,
+}: {
+  data: OperationsProjection;
+  datePreset: OperationDatePreset;
+  locale: OperationsLocale;
+  onDatePresetChange: (preset: OperationDatePreset) => void;
+  onOpenTask: (taskId: string) => Promise<boolean>;
+  prds?: OperationsProjection["prds"];
+  runs?: OperationsProjection["runs"];
+  specs?: OperationsProjection["specs"];
+  tasks?: OperationsProjection["tasks"];
+  resolveRunCostBrl?: ((runId: string) => number | null) | undefined;
+  includeLegacyEffort?: boolean;
+}) {
+  const [overviewView, setOverviewView] = useState<OverviewView>("tasks");
+  const [selectedStatus, setSelectedStatus] = useState<WorkStage | null>(null);
+  const [selectedRisk, setSelectedRisk] = useState<
+    OperationsProjection["tasks"][number]["risk"] | null
+  >(null);
+  const completed = tasks.filter((task) => task.status === "completed").length;
+  const completedSpecs = specs.filter((spec) => spec.work_status === "completed").length;
+  const completedPrds = prds.filter((prd) => prd.work_status === "completed").length;
+  const taskCompletion = tasks.length === 0 ? 0 : completed / tasks.length;
+  const specCompletion = specs.length === 0 ? 0 : completedSpecs / specs.length;
+  const prdCompletion = prds.length === 0 ? 0 : completedPrds / prds.length;
+  const copy = overviewCopy(overviewView, locale);
+  const text = overviewText(locale);
+  const selectedMacros = overviewView === "specs" ? specs : prds;
+  const selectedCount = overviewView === "tasks" ? tasks.length : selectedMacros.length;
+  const selectedMetricRuns = runsForOverviewView(overviewView, tasks, selectedMacros, runs);
+  const entityMetrics =
+    overviewView === "tasks"
+      ? aggregateTaskMetrics(tasks, selectedMetricRuns, resolveRunCostBrl)
+      : aggregateMacroMetrics(selectedMacros, selectedMetricRuns, resolveRunCostBrl);
+  const averageDuration = averageObserved(entityMetrics.map((entity) => entity.durationMs));
+  const taskStatusStats = taskStatusDistribution(tasks, locale);
+  const macroStatusStats = macroStatusDistribution(selectedMacros, tasks, locale);
+  const statusStats = overviewView === "tasks" ? taskStatusStats : macroStatusStats;
+  const statusTotal = statusStats.reduce((total, item) => total + item.count, 0);
+  const taskRiskStats = Object.entries(riskColors).map(([risk, color]) => ({
+    key: risk,
+    label: riskLabel(risk as OperationsProjection["tasks"][number]["risk"], locale),
+    color,
+    count: tasks.filter((task) => task.risk === risk).length,
+  }));
+  const classificationStats =
+    overviewView === "tasks" ? taskRiskStats : macroClassificationStats(selectedMacros, locale);
+  // Global cards and period tables use every filtered invocation. Rankings
+  // remain entity-attributable, so a Run without a Task/SPEC/PRD link does not
+  // disappear from the operational total merely because it cannot be ranked.
+  const executionMetrics = executionMetricTotals(runs);
+  const effortMetrics = effortMetricTotals(runs);
+  const allPhaseMetrics = allPhaseMetricTotals(runs);
+  const overviewMetrics = runs.length === 0 ? data.summary.overview_metrics : undefined;
+  const executionRuns = executionMetrics.runs;
+  const totalDuration =
+    overviewMetrics?.duration_ms ??
+    (includeLegacyEffort ? globalLegacyEffortMetricDuration(runs) : effortMetrics.durationMs);
+  const totalExecutionDays =
+    overviewMetrics?.execution_day_count ?? countExecutionDays(executionRuns);
+  const totalTokens = overviewMetrics?.tokens ?? allPhaseMetrics.tokens;
+  const totalCost = resolveRunCostBrl
+    ? allPhaseMetrics.runs.reduce<number | null>((total, run) => {
+        const value = resolveRunCostBrl(run.id);
+        return value === null ? total : (total ?? 0) + value;
+      }, null)
+    : (overviewMetrics?.cost_brl ?? allPhaseMetrics.costBrl);
+  const hourlyCost =
+    totalDuration === null || totalDuration <= 0 || totalCost === null
+      ? null
+      : (totalCost * 3_600_000) / totalDuration;
+  const costPerTask = totalCost === null || tasks.length === 0 ? null : totalCost / tasks.length;
+  const tokensPerTask =
+    totalTokens === null || tasks.length === 0 ? null : totalTokens / tasks.length;
+  const tokensPerHour =
+    totalDuration === null || totalDuration <= 0 || totalTokens === null
+      ? null
+      : (totalTokens * 3_600_000) / totalDuration;
+  const averageTokens = averageObserved(entityMetrics.map((entity) => entity.tokens));
+  const averageCost = averageObserved(entityMetrics.map((entity) => entity.costBrl));
+  const latestCreatedAt = findLatestCreatedAt(overviewView === "tasks" ? tasks : selectedMacros);
+  const metricStats = [
+    [text.averageTime, averageDuration === null ? "—" : formatDurationMs(averageDuration, locale)],
+    [text.averageTokens, formatCompactNumber(averageTokens, locale)],
+    [text.averageCost, formatCurrency(averageCost, "BRL", locale)],
+  ] as const;
+  const topEntities = entityMetrics
+    .filter((entity) => entity.durationMs !== null)
+    .sort((a, b) => (b.durationMs ?? 0) - (a.durationMs ?? 0))
+    .slice(0, 5);
+  const maxDuration = Math.max(1, ...topEntities.map((entity) => entity.durationMs ?? 0));
+  const topEntitiesSummary = summarizeTopEntityMetrics(topEntities, entityMetrics);
+
+  const selectOverviewView = (view: OverviewView) => {
+    setOverviewView(view);
+    setSelectedStatus(null);
+    setSelectedRisk(null);
+  };
+
+  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>
+          <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="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="last-3-months">
+              {locale === "pt-BR" ? "Últimos 3 meses" : "Last 3 months"}
+            </option>
+            <option value="last-6-months">
+              {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 disabled value="custom">
+              {locale === "pt-BR" ? "Personalizado" : "Custom"}
+            </option>
+          </select>
+        </label>
+      </div>
+      <div className="operations-kpi-grid">
+        <Kpi
+          featured={overviewView === "tasks"}
+          hint={`${completed} ${text.completedTasks} (${formatPercent(taskCompletion, locale)})`}
+          label={text.tasks}
+          onSelect={() => selectOverviewView("tasks")}
+          value={String(tasks.length)}
+        />
+        <Kpi
+          featured={overviewView === "specs"}
+          hint={`${completedSpecs} ${text.completedSpecs} (${formatPercent(specCompletion, locale)})`}
+          label="SPECs"
+          onSelect={() => selectOverviewView("specs")}
+          value={String(specs.length)}
+        />
+        <Kpi
+          featured={overviewView === "prds"}
+          hint={`${completedPrds} ${text.completedPrds} (${formatPercent(prdCompletion, locale)})`}
+          label="PRDs"
+          onSelect={() => selectOverviewView("prds")}
+          value={String(prds.length)}
+        />
+        <Kpi
+          hint={formatExecutionAverageHint(
+            totalDuration ?? 0,
+            tasks.length,
+            totalExecutionDays,
+            locale,
+          )}
+          label={text.totalExecutionTime}
+          value={totalDuration === null ? "—" : formatDurationMs(totalDuration, locale)}
+        />
+        <Kpi
+          hint={
+            tokensPerTask === null || tokensPerHour === null
+              ? locale === "pt-BR"
+                ? "Tokens por tarefa e por hora indisponíveis"
+                : "Tokens per task and hour unavailable"
+              : locale === "pt-BR"
+                ? `${formatCompactNumber(tokensPerTask, locale)} / tarefa (${formatCompactNumber(tokensPerHour, locale, 0)} / hora)`
+                : `${formatCompactNumber(tokensPerTask, locale)} / task (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
+          }
+          label={locale === "pt-BR" ? "Tokens gastos" : "Spent tokens"}
+          value={totalTokens === null ? "—" : formatCompactNumber(totalTokens, locale)}
+        />
+        <Kpi
+          hint={
+            hourlyCost === null || costPerTask === null
+              ? locale === "pt-BR"
+                ? "Custo por tarefa e por hora indispon\u00edvel"
+                : "Cost per task and hour unavailable"
+              : locale === "pt-BR"
+                ? `${formatRoundedCurrency(costPerTask, locale)} / tarefa (${formatRoundedCurrency(hourlyCost, locale)} / hora)`
+                : `${formatRoundedCurrency(costPerTask, locale)} / task (${formatRoundedCurrency(hourlyCost, locale)} / hour)`
+          }
+          label={locale === "pt-BR" ? "Custo Estimado" : "Estimated cost"}
+          value={totalCost === null ? "—" : formatRoundedCurrency(totalCost, 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 overviewView === "tasks" ? (
+                <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={() => setSelectedStatus(item.key as WorkStage)}
+                  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, 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 === 0 ? 0 : item.count / selectedCount, locale)}
+                    </small>
+                  </span>
+                </>
+              );
+              return overviewView === "tasks" ? (
+                <button
+                  aria-label={`${item.label}: ${item.count}, ${formatPercent(selectedCount === 0 ? 0 : item.count / selectedCount, locale)}`}
+                  className="operations-legend-row operations-status-filter"
+                  key={item.key}
+                  onClick={() =>
+                    setSelectedRisk(item.key as OperationsProjection["tasks"][number]["risk"])
+                  }
+                  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>
+
+        <article className="operations-panel">
+          <PanelHeader hint={text.topHint} title={copy.topTitle} />
+          {topEntities.length > 0 ? (
+            <>
+              <div className="operations-run-bars">
+                {topEntities.map((entity, index) => (
+                  <button
+                    aria-label={
+                      locale === "pt-BR"
+                        ? `Abrir detalhes da tarefa ${entity.title}`
+                        : `Open details for task ${entity.title}`
+                    }
+                    className="operations-run-bar"
+                    disabled={overviewView !== "tasks"}
+                    key={entity.id}
+                    onClick={() => void onOpenTask(entity.id)}
+                    title={`${entity.title}: ${formatDurationMs(entity.durationMs, locale)}`}
+                    type="button"
+                  >
+                    <strong>
+                      {entity.durationMs == null
+                        ? "—"
+                        : formatDurationMs(entity.durationMs, locale)}
+                    </strong>
+                    <i
+                      style={{
+                        height: `${Math.max(8, ((entity.durationMs ?? 0) / maxDuration) * 100)}%`,
+                      }}
+                    />
+                    <span>{`#${index + 1} ${entity.id.slice(-4)}`}</span>
+                  </button>
+                ))}
+              </div>
+              <div className="operations-top-task-metrics">
+                <div>
+                  <span>{text.accumulatedTime}</span>
+                  <strong>{formatDurationMs(topEntitiesSummary.durationMs, locale)}</strong>
+                  <small>{`${topEntitiesSummary.runCount} ${text.associatedRuns}`}</small>
+                </div>
+                <div>
+                  <span>{text.concentration}</span>
+                  <strong>{formatPercent(topEntitiesSummary.durationShare, locale)}</strong>
+                  <small>{text.totalMeasuredTime}</small>
+                </div>
+                <div>
+                  <span>{text.topFiveCost}</span>
+                  <strong>{formatCurrency(topEntitiesSummary.costBrl, "BRL", locale)}</strong>
+                  <small>
+                    {topEntitiesSummary.tokens === null
+                      ? text.tokensUnavailable
+                      : `${formatCompactNumber(topEntitiesSummary.tokens, locale)} tokens`}
+                  </small>
+                </div>
+              </div>
+            </>
+          ) : (
+            <p className="operations-empty">{copy.emptyTop}</p>
+          )}
+        </article>
+      </div>
+      {selectedStatus === null ? null : (
+        <FilteredTasksDialog
+          eyebrow={locale === "pt-BR" ? "Status das tarefas" : "Task status"}
+          label={workStageLabel(selectedStatus, locale)}
+          locale={locale}
+          onClose={() => setSelectedStatus(null)}
+          onOpenTask={(taskId) => {
+            setSelectedStatus(null);
+            void onOpenTask(taskId);
+          }}
+          tasks={tasks.filter((task) => taskWorkStage(task) === selectedStatus)}
+        />
+      )}
+      {selectedRisk === null ? null : (
+        <FilteredTasksDialog
+          eyebrow={locale === "pt-BR" ? "Risco das tarefas" : "Task risk"}
+          label={riskLabel(selectedRisk, locale)}
+          locale={locale}
+          onClose={() => setSelectedRisk(null)}
+          onOpenTask={(taskId) => {
+            setSelectedRisk(null);
+            void onOpenTask(taskId);
+          }}
+          tasks={tasks.filter((task) => task.risk === selectedRisk)}
+        />
+      )}
+    </section>
+  );
+}
+
+function FilteredTasksDialog({
+  eyebrow,
+  label,
+  locale,
+  onClose,
+  onOpenTask,
+  tasks,
+}: {
+  eyebrow: string;
+  label: string;
+  locale: OperationsLocale;
+  onClose: () => void;
+  onOpenTask: (taskId: string) => void;
+  tasks: OperationsProjection["tasks"];
+}) {
+  const taskLabel =
+    locale === "pt-BR"
+      ? tasks.length === 1
+        ? "tarefa"
+        : "tarefas"
+      : tasks.length === 1
+        ? "task"
+        : "tasks";
+  return (
+    <dialog
+      className="operations-status-dialog-backdrop"
+      onMouseDown={(event) => {
+        if (event.currentTarget === event.target) onClose();
+      }}
+      open
+    >
+      <section
+        aria-label={`${label} — ${tasks.length} ${taskLabel}`}
+        aria-modal="true"
+        className="operations-status-dialog"
+        role="dialog"
+      >
+        <header>
+          <div>
+            <span>{eyebrow}</span>
+            <h2>{label}</h2>
+            <p>
+              {tasks.length} {taskLabel}
+            </p>
+          </div>
+          <button
+            aria-label={locale === "pt-BR" ? "Fechar" : "Close"}
+            onClick={onClose}
+            type="button"
+          >
+            ×
+          </button>
+        </header>
+        <div className="operations-status-task-list">
+          {tasks.map((task) => (
+            <button key={task.id} onClick={() => onOpenTask(task.id)} type="button">
+              <span className="operations-status-task-main">
+                <strong>{task.title}</strong>
+                <small>{task.id}</small>
+              </span>
+              <span className={`operations-risk is-${task.risk}`}>
+                {riskLabel(task.risk, locale)}
+              </span>
+              <span className="operations-status-task-action">
+                {locale === "pt-BR" ? "Ver detalhes" : "View details"} →
+              </span>
+            </button>
+          ))}
+          {tasks.length === 0 ? (
+            <p className="operations-empty">
+              {locale === "pt-BR" ? "Nenhuma tarefa neste status." : "No tasks in this status."}
+            </p>
+          ) : null}
+        </div>
+      </section>
+    </dialog>
+  );
+}
+
+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>
+  );
+}
+
+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(", ")})`;
+}