@zaip-ai/cli 2.2.0 → 2.6.0

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

@@ -1,12 +1,15 @@
+import { formatRoundedCurrency, 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";
@@ -34,6 +37,7 @@ import {
   sumKnownOverviewMetric,
   summarizeTopEntityMetrics,
 } from "./OperationsOverview.helpers.js";
+import { OperationsOverviewCharts } from "./OperationsOverviewCharts.js";
 import { OperationsOverviewTopPanel } from "./OperationsOverviewTopPanel.js";
 import type { OperationDatePreset, OperationDateRange } from "./operation-date-range.js";
 import type {
@@ -43,13 +47,7 @@ import type {
   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 {
@@ -79,36 +77,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,
@@ -522,36 +490,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 +540,7 @@ export function OperationsOverview({
           label={text.tasks}
           onSelect={() => selectOverviewView("tasks")}
           value={taskCount === null ? "—" : String(taskCount)}
-        />
+        />{" "}
         <Kpi
           featured={overviewView === "specs"}
           hint={
@@ -577,7 +553,7 @@ export function OperationsOverview({
           label="SPECs"
           onSelect={() => selectOverviewView("specs")}
           value={specCount === null ? "—" : String(specCount)}
-        />
+        />{" "}
         <Kpi
           featured={overviewView === "prds"}
           hint={
@@ -590,7 +566,7 @@ export function OperationsOverview({
           label="PRDs"
           onSelect={() => selectOverviewView("prds")}
           value={prdCount === null ? "—" : String(prdCount)}
-        />
+        />{" "}
         <Kpi
           hint={formatExecutionAverageHint(
             totalDurationMetric ?? 0,
@@ -611,7 +587,7 @@ export function OperationsOverview({
             (value) => formatDurationMs(value, locale),
             locale,
           )}
-        />
+        />{" "}
         <Kpi
           hint={
             tokensPerTask === null || tokensPerHour === null
@@ -641,7 +617,7 @@ export function OperationsOverview({
             (value) => formatCompactNumber(value, locale),
             locale,
           )}
-        />
+        />{" "}
         <Kpi
           hint={
             hourlyCost === null || costPerTask === null
@@ -671,146 +647,37 @@ export function OperationsOverview({
             (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 +689,8 @@ export function OperationsOverview({
           topCost={topEntitiesCost}
           topEntities={topEntities}
           view={overviewView}
-        />
-      </div>
+        />{" "}
+      </div>{" "}
       {selectedStatus === null ? null : (
         <FilteredStatusDialog
           eyebrow={
@@ -865,7 +732,7 @@ export function OperationsOverview({
             overviewView === "tasks" ? "task" : overviewView === "specs" ? "spec" : "prd",
           )}
         />
-      )}
+      )}{" "}
       {selectedClassification === null ? null : (
         <FilteredStatusDialog
           eyebrow={locale === "pt-BR" ? copy.classificationTitle : "Classification"}
@@ -907,55 +774,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>
-  );
-}
-
-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,
-  }));
-}
+import { macroStatusDistribution, taskStatusDistribution } from "./OperationsOverviewPanels.js";
 
-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";

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

@@ -0,0 +1,171 @@
+import { formatDateTime, formatPercent } from "@zaip-ai/dashboard-ui";
+import type { overviewCopy, overviewText } from "./OperationsOverview.helpers.js";
+import { donutGradient, PanelHeader } from "./OperationsOverviewPanels.js";
+import type { OverviewClassification } from "./operations-page-contract.js";
+import type { OperationsLocale } from "./status-labels.js";
+import type { WorkStage } from "./work-board-model.js";
+export function OperationsOverviewCharts({
+  locale,
+  copy,
+  text,
+  statusStats,
+  statusTotal,
+  classificationStats,
+  selectedCount,
+  metricStats,
+  latestCreatedAt,
+  onStatusSelect,
+  onClassificationSelect,
+}: {
+  locale: OperationsLocale;
+  copy: ReturnType<typeof overviewCopy>;
+  text: ReturnType<typeof overviewText>;
+  statusStats: Array<{ key: string; label: string; color: string; count: number }>;
+  statusTotal: number;
+  classificationStats: Array<{ key: string; label: string; color: string; count: number }>;
+  selectedCount: number | null;
+  metricStats: readonly (readonly string[])[];
+  latestCreatedAt: string | null;
+  onStatusSelect: (stage: WorkStage) => void;
+  onClassificationSelect: (classification: OverviewClassification) => void;
+}) {
+  return (
+    <>
+      <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={() => onStatusSelect(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 ?? 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={() => onClassificationSelect(item.key as OverviewClassification)}
+                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>
+    </>
+  );
+}

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

@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import type { MacroProjection, OperationsProjection } from "../contracts.js";
+import { statusColors } from "./OperationsOverview.helpers.js";
+import type { OperationsLocale } from "./status-labels.js";
+import { macroWorkStage, taskWorkStage, workStageLabel, workStages } from "./work-board-model.js";
+
+export 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,
+  }));
+}
+
+export 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(", ")})`;
+}