@zaip-ai/cli 1.3.0 → 1.3.1

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

@@ -16,6 +16,7 @@ import type { EntityMetric } from "./OperationsOverview.helpers.js";
 import {
   aggregateMacroMetrics,
   aggregateTaskMetrics,
+  canonicalMacroMetric,
   countExecutionDays,
   findLatestCreatedAt,
   formatExecutionAverageHint,
@@ -24,11 +25,19 @@ import {
   overviewCopy,
   overviewMetricAverages,
   overviewText,
+  partialOverviewMetrics,
+  resolveOverviewCostTotal,
   riskColors,
+  runsForOverviewView,
+  scopedOverviewMetric,
+  selectedMacroMetricTotals,
+  selectedOverviewCount,
   selectTopEntities,
   statusColors,
+  sumKnownOverviewMetric,
   summarizeTopEntityMetrics,
 } from "./OperationsOverview.helpers.js";
+import { OperationsOverviewTopPanel } from "./OperationsOverviewTopPanel.js";
 import type { OperationDatePreset, OperationDateRange } from "./operation-date-range.js";
 import type {
   OverviewClassification,
@@ -49,6 +58,7 @@ import "./operations-overview.css";
 export {
   aggregateMacroMetrics,
   aggregateTaskMetrics,
+  canonicalMacroMetric,
   countExecutionDays,
   findLatestCreatedAt,
   findLatestTaskCreatedAt,
@@ -57,10 +67,17 @@ export {
   macroClassificationStats,
   overviewMetricAverages,
   overviewText,
+  partialOverviewMetrics,
+  resolveOverviewCostTotal,
+  runsForOverviewView,
+  scopedOverviewMetric,
+  selectedMacroMetricTotals,
+  selectedOverviewCount,
   selectTopEntities,
   statusColors,
   summarizeTopEntityMetrics,
   summarizeTopTaskMetrics,
+  taskMetricAverages,
 } from "./OperationsOverview.helpers.js";
 
 type OverviewView = "tasks" | "specs" | "prds";
@@ -81,82 +98,6 @@ function formatEntityDuration(value: number | null, locale: OperationsLocale): s
   if (value !== null) return formatDurationMs(value, locale);
   return locale === "pt-BR" ? "Indisponível" : "Unavailable";
 }
-
-export function taskMetricAverages(
-  totals: { durationMs: number | null; tokens: number | null; costBrl: number | null },
-  taskCount: number | null,
-) {
-  return overviewMetricAverages(totals, taskCount);
-}
-
-export function selectedOverviewCount(
-  view: OverviewView,
-  overviewMetrics: OperationsProjection["summary"]["overview_metrics"] | undefined,
-  fallback: number,
-): number | null {
-  if (view === "specs") return overviewMetrics?.selected_counts?.specs ?? fallback;
-  if (view === "prds") return overviewMetrics?.selected_counts?.prds ?? fallback;
-  return overviewMetrics?.task_count ?? fallback;
-}
-
-/**
- * Selects a currency-specific total without ever treating Operations' BRL
- * aggregate as USD. Compact Cost Monitor summaries are authoritative even
- * when their intentionally bounded Run collection is empty.
- */
-export function resolveOverviewCostTotal({
-  currency,
-  factualSnapshotTotal,
-  macroCostTotal,
-  overviewView,
-  resolvedRunTotal,
-  operationsBrlTotal,
-}: {
-  currency: "BRL" | "USD";
-  factualSnapshotTotal: number | null | undefined;
-  /** Macro aggregates are scoped to the selected SPEC/PRD, unlike the Task snapshot. */
-  macroCostTotal?: number | null | undefined;
-  overviewView?: OverviewView;
-  resolvedRunTotal: number | null;
-  operationsBrlTotal: number | null;
-}): number | null {
-  if (overviewView !== undefined && overviewView !== "tasks") return macroCostTotal ?? null;
-  if (factualSnapshotTotal !== null && factualSnapshotTotal !== undefined)
-    return factualSnapshotTotal;
-  if (resolvedRunTotal !== null) return resolvedRunTotal;
-  return currency === "BRL" ? operationsBrlTotal : null;
-}
-
-/**
- * KPI cards are sourced exclusively from the server-selected global aggregate.
- * Entity, board, and Cost Monitor pages are bounded/detail views, so their
- * collections must never replace the period-filtered big-number population.
- */
-export function partialOverviewMetrics(data: OperationsProjection) {
-  return data.summary.overview_metrics;
-}
-
-export 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({
   currency,
   data,
@@ -170,13 +111,14 @@ export function OperationsOverview({
   onLoadStatusPage,
   classificationPage,
   onLoadClassificationPage,
+  onLoadMacroMetrics,
   prds = data.prds,
   runs = data.runs,
   specs = data.specs,
   tasks = data.tasks,
   factualCostTotal,
   resolveRunCost,
-  includeLegacyEffort = false,
+  includeLegacyEffort: _includeLegacyEffort = false,
 }: {
   currency: "BRL" | "USD";
   data: OperationsProjection;
@@ -203,6 +145,7 @@ export function OperationsOverview({
   onLoadClassificationPage?:
     | ((kind: OverviewStatusKind, classification: OverviewClassification, offset: number) => void)
     | undefined;
+  onLoadMacroMetrics?: (() => void) | undefined;
   prds?: OperationsProjection["prds"];
   runs?: OperationsProjection["runs"];
   specs?: OperationsProjection["specs"];
@@ -320,10 +263,47 @@ export function OperationsOverview({
   const specCompletion = specCount === null || specCount === 0 ? 0 : completedSpecCount / specCount;
   const prdCompletion = prdCount === null || prdCount === 0 ? 0 : completedPrdCount / prdCount;
   const executionRuns = executionMetrics.runs;
-  const totalDurationMetric = overviewMetrics?.duration_ms ?? executionMetrics.durationMs;
+  const selectedMacroFallbackTotals = selectedMacroMetricTotals(entityMetrics);
+  const metricUnit =
+    overviewView === "tasks" ? (locale === "pt-BR" ? "tarefa" : "task") : copy.shortPlural;
+  const selectedMacroTotals =
+    overviewView === "tasks"
+      ? null
+      : {
+          durationMs: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroAggregate?.total_duration_ms,
+            selectedMacroFallbackTotals.durationMs,
+          ),
+          tokens: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroAggregate?.total_tokens,
+            selectedMacroFallbackTotals.tokens,
+          ),
+          costBrl: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroAggregate?.total_cost_brl,
+            selectedMacroFallbackTotals.costBrl,
+          ),
+        };
+  // The selectable SPEC/PRD cards define the metric population for every KPI.
+  // A global Task aggregate beside a selected macro produces contradictory
+  // values such as "duration unavailable" and "83 h" on the same screen.
+  const totalDurationMetric = scopedOverviewMetric(
+    overviewView,
+    selectedMacroTotals?.durationMs,
+    overviewMetrics?.duration_ms ?? executionMetrics.durationMs,
+  );
   const totalExecutionDays =
-    overviewMetrics?.execution_day_count ?? countExecutionDays(executionRuns);
-  const totalTokensMetric = overviewMetrics?.tokens ?? allPhaseMetrics.tokens;
+    overviewView === "tasks"
+      ? (overviewMetrics?.execution_day_count ?? countExecutionDays(executionRuns))
+      : 0;
+  const totalTokensMetric = scopedOverviewMetric(
+    overviewView,
+    selectedMacroTotals?.tokens,
+    overviewMetrics?.tokens ?? allPhaseMetrics.tokens,
+  );
+  const metricPopulationCount = overviewView === "tasks" ? taskCount : selectedCount;
   const selectedCurrencyCost =
     resolveRunCost === undefined
       ? null
@@ -337,12 +317,20 @@ export function OperationsOverview({
       : currency === "USD"
         ? selectedMacroAggregate?.total_cost_usd
         : selectedMacroAggregate?.total_cost_brl;
+  const selectedMacroFallbackCost =
+    overviewView === "tasks" || currency === "USD"
+      ? null
+      : sumKnownOverviewMetric(entityMetrics.map((entity) => entity.costBrl));
   // Operations aggregates are BRL-only. USD is valid only when it is resolved
   // from Cost Monitor's factual per-Run estimates; never relabel BRL as USD.
   const totalCostMetric = resolveOverviewCostTotal({
     currency,
     factualSnapshotTotal: factualCostTotal,
-    macroCostTotal: selectedMacroCost,
+    macroCostTotal: canonicalMacroMetric(
+      selectedMacroAggregate !== undefined,
+      selectedMacroCost,
+      selectedMacroFallbackCost,
+    ),
     overviewView,
     resolvedRunTotal: selectedCurrencyCost,
     operationsBrlTotal: overviewMetrics?.cost_brl ?? allPhaseMetrics.costBrl,
@@ -352,29 +340,57 @@ export function OperationsOverview({
       ? null
       : (totalCostMetric * 3_600_000) / totalDurationMetric;
   const costPerTask =
-    totalCostMetric === null || taskCount === null || taskCount === 0
+    totalCostMetric === null || metricPopulationCount === null || metricPopulationCount === 0
       ? null
-      : totalCostMetric / taskCount;
+      : totalCostMetric / metricPopulationCount;
   const tokensPerTask =
-    totalTokensMetric === null || taskCount === null || taskCount === 0
+    totalTokensMetric === null || metricPopulationCount === null || metricPopulationCount === 0
       ? null
-      : totalTokensMetric / taskCount;
+      : totalTokensMetric / metricPopulationCount;
   const tokensPerHour =
     totalDurationMetric === null || totalDurationMetric <= 0 || totalTokensMetric === null
       ? null
       : (totalTokensMetric * 3_600_000) / totalDurationMetric;
-  const aggregateAverages = overviewMetricAverages(
-    { durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric },
-    selectedCount,
+  const averageMetricTotals =
+    overviewView === "tasks"
+      ? { durationMs: totalDurationMetric, tokens: totalTokensMetric, costBrl: totalCostMetric }
+      : {
+          durationMs: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroAggregate?.total_duration_ms,
+            selectedMacroFallbackTotals.durationMs,
+          ),
+          tokens: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroAggregate?.total_tokens,
+            selectedMacroFallbackTotals.tokens,
+          ),
+          costBrl: canonicalMacroMetric(
+            selectedMacroAggregate !== undefined,
+            selectedMacroCost,
+            currency === "BRL" ? selectedMacroFallbackCost : selectedMacroFallbackTotals.costBrl,
+          ),
+        };
+  const aggregateAverages = overviewMetricAverages(averageMetricTotals, selectedCount);
+  const averageDuration = canonicalMacroMetric(
+    selectedMacroAggregate !== undefined,
+    selectedMacroAggregate?.average_duration_ms,
+    aggregateAverages.durationMs,
+  );
+  const averageTokens = canonicalMacroMetric(
+    selectedMacroAggregate !== undefined,
+    selectedMacroAggregate?.average_tokens,
+    aggregateAverages.tokens,
   );
-  const averageDuration =
-    selectedMacroAggregate?.average_duration_ms ?? aggregateAverages.durationMs;
-  const averageTokens = selectedMacroAggregate?.average_tokens ?? aggregateAverages.tokens;
   const averageCost =
     overviewView !== "tasks"
-      ? ((currency === "USD"
-          ? selectedMacroAggregate?.average_cost_usd
-          : selectedMacroAggregate?.average_cost_brl) ?? null)
+      ? canonicalMacroMetric(
+          selectedMacroAggregate !== undefined,
+          currency === "USD"
+            ? selectedMacroAggregate?.average_cost_usd
+            : selectedMacroAggregate?.average_cost_brl,
+          aggregateAverages.costBrl,
+        )
       : aggregateAverages.costBrl;
   const latestCreatedAt =
     overviewView === "tasks"
@@ -422,10 +438,15 @@ export function OperationsOverview({
   const topEntities =
     overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0
       ? aggregateTopTasks
-      : overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0
+      : overviewView !== "tasks" && aggregateTopMacros.length > 0
         ? aggregateTopMacros
         : selectTopEntities(entityMetrics);
-  const maxDuration = Math.max(1, ...topEntities.map((entity) => entity.durationMs ?? 0));
+  const maxDuration = Math.max(
+    1,
+    ...topEntities
+      .filter((entity) => entity.durationMs !== null)
+      .map((entity) => entity.durationMs ?? 0),
+  );
   const topEntitiesSummary =
     overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0
       ? {
@@ -436,7 +457,7 @@ export function OperationsOverview({
               : topEntities.reduce((sum, entity) => sum + (entity.durationMs ?? 0), 0) /
                 totalDurationMetric,
         }
-      : overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0
+      : overviewView !== "tasks" && aggregateTopMacros.length > 0
         ? {
             ...summarizeTopEntityMetrics(topEntities, topEntities),
             durationShare:
@@ -453,7 +474,7 @@ export function OperationsOverview({
   // factual per-Run Cost Monitor resolver.
   const usesAggregateTopEntities =
     (overviewView === "tasks" && runs.length === 0 && aggregateTopTasks.length > 0) ||
-    (overviewView !== "tasks" && runs.length === 0 && aggregateTopMacros.length > 0);
+    (overviewView !== "tasks" && aggregateTopMacros.length > 0);
   const topEntitiesCost =
     currency === "USD" &&
     !usesAggregateTopEntities &&
@@ -471,6 +492,7 @@ export function OperationsOverview({
     setOverviewView(view);
     setSelectedStatus(null);
     setSelectedClassification(null);
+    if (view !== "tasks") onLoadMacroMetrics?.();
   };
 
   return (
@@ -547,11 +569,17 @@ export function OperationsOverview({
         <Kpi
           hint={formatExecutionAverageHint(
             totalDurationMetric ?? 0,
-            taskCount ?? 0,
+            metricPopulationCount ?? 0,
             totalExecutionDays,
             locale,
           )}
-          label={text.totalExecutionTime}
+          label={
+            overviewView === "tasks"
+              ? text.totalExecutionTime
+              : locale === "pt-BR"
+                ? `${text.totalExecutionTime} de ${copy.shortPlural}`
+                : `${copy.shortPlural} ${text.totalExecutionTime.toLowerCase()}`
+          }
           value={formatEntityDuration(totalDurationMetric, locale)}
         />
         <Kpi
@@ -561,10 +589,18 @@ export function OperationsOverview({
                 ? "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)`
+                ? `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hora)`
+                : `${formatCompactNumber(tokensPerTask, locale)} / ${metricUnit} (${formatCompactNumber(tokensPerHour, locale, 0)} / hour)`
+          }
+          label={
+            overviewView === "tasks"
+              ? locale === "pt-BR"
+                ? "Tokens gastos"
+                : "Spent tokens"
+              : locale === "pt-BR"
+                ? `Tokens gastos por ${copy.shortPlural}`
+                : `${copy.shortPlural} tokens spent`
           }
-          label={locale === "pt-BR" ? "Tokens gastos" : "Spent tokens"}
           value={
             totalTokensMetric === null
               ? formatEntityDuration(null, locale)
@@ -578,10 +614,18 @@ export function OperationsOverview({
                 ? "Custo por tarefa e por hora indispon\u00edvel"
                 : "Cost per task and hour unavailable"
               : locale === "pt-BR"
-                ? `${formatRoundedCurrency(costPerTask, currency, locale)} / tarefa (${formatRoundedCurrency(hourlyCost, currency, locale)} / hora)`
-                : `${formatRoundedCurrency(costPerTask, currency, locale)} / task (${formatRoundedCurrency(hourlyCost, currency, locale)} / hour)`
+                ? `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hora)`
+                : `${formatRoundedCurrency(costPerTask, currency, locale)} / ${metricUnit} (${formatRoundedCurrency(hourlyCost, currency, locale)} / hour)`
+          }
+          label={
+            overviewView === "tasks"
+              ? locale === "pt-BR"
+                ? "Custo Estimado"
+                : "Estimated cost"
+              : locale === "pt-BR"
+                ? `Custo de ${copy.shortPlural}`
+                : `${copy.shortPlural} cost`
           }
-          label={locale === "pt-BR" ? "Custo Estimado" : "Estimated cost"}
           value={
             totalCostMetric === null
               ? formatEntityDuration(null, locale)
@@ -727,65 +771,18 @@ export function OperationsOverview({
           </footer>
         </article>
 
-        <article className="operations-panel">
-          <PanelHeader hint={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}: ${formatEntityDuration(entity.durationMs, locale)}`}
-                    type="button"
-                  >
-                    <strong>{formatEntityDuration(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>{formatEntityDuration(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>
-                    {topEntitiesCost === null
-                      ? formatEntityDuration(null, locale)
-                      : formatCurrency(topEntitiesCost, currency, locale)}
-                  </strong>
-                  <small>
-                    {topEntitiesSummary.tokens === null
-                      ? text.tokensUnavailable
-                      : `${formatCompactNumber(topEntitiesSummary.tokens, locale)} tokens`}
-                  </small>
-                </div>
-              </div>
-            </>
-          ) : (
-            <p className="operations-empty">{copy.emptyTop}</p>
-          )}
-        </article>
+        <OperationsOverviewTopPanel
+          copy={{ empty: copy.emptyTop, hint: topHint, title: copy.topTitle }}
+          currency={currency}
+          locale={locale}
+          maxDuration={maxDuration}
+          onOpenTask={onOpenTask}
+          summary={topEntitiesSummary}
+          text={text}
+          topCost={topEntitiesCost}
+          topEntities={topEntities}
+          view={overviewView}
+        />
       </div>
       {selectedStatus === null ? null : (
         <FilteredStatusDialog

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

@@ -0,0 +1,127 @@
+import {
+  formatCompactNumber,
+  formatCurrency,
+  formatDurationMs,
+  formatPercent,
+} from "@zaip-ai/dashboard-ui";
+import type { EntityMetric } from "./OperationsOverview.helpers.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+type OverviewView = "tasks" | "specs" | "prds";
+
+const duration = (value: number | null, locale: OperationsLocale) =>
+  value === null
+    ? locale === "pt-BR"
+      ? "Indisponível"
+      : "Unavailable"
+    : formatDurationMs(value, locale);
+
+export function OperationsOverviewTopPanel({
+  copy,
+  currency,
+  locale,
+  maxDuration,
+  onOpenTask,
+  summary,
+  text,
+  topCost,
+  topEntities,
+  view,
+}: {
+  copy: { empty: string; hint: string; title: string };
+  currency: "BRL" | "USD";
+  locale: OperationsLocale;
+  maxDuration: number;
+  onOpenTask: (taskId: string) => Promise<boolean>;
+  summary: {
+    durationMs: number | null;
+    durationShare: number;
+    runCount: number;
+    tokens: number | null;
+  };
+  text: {
+    accumulatedTime: string;
+    associatedRuns: string;
+    concentration: string;
+    totalMeasuredTime: string;
+    topFiveCost: string;
+    tokensUnavailable: string;
+  };
+  topCost: number | null;
+  topEntities: readonly EntityMetric[];
+  view: OverviewView;
+}) {
+  const entityKind = view === "specs" ? "SPEC" : "PRD";
+  return (
+    <article className="operations-panel">
+      <header className="operations-panel-header">
+        <div className="operations-panel-header-title">
+          <h2>{copy.title}</h2>
+        </div>
+        <small>{copy.hint}</small>
+      </header>
+      {topEntities.length === 0 ? (
+        <p className="operations-empty">{copy.empty}</p>
+      ) : (
+        <>
+          <div className="operations-run-bars">
+            {topEntities.map((entity, index) => {
+              const measuredDuration = duration(entity.durationMs, locale);
+              const label =
+                view === "tasks"
+                  ? `${locale === "pt-BR" ? "Abrir detalhes da tarefa" : "Open task details for"} ${entity.title}: ${measuredDuration}`
+                  : `${entityKind} ${entity.title}: ${measuredDuration}`;
+              return (
+                <button
+                  aria-label={label}
+                  className={`operations-run-bar${entity.durationMs === null ? " is-duration-unavailable" : ""}`}
+                  disabled={view !== "tasks"}
+                  key={entity.id}
+                  onClick={() => void onOpenTask(entity.id)}
+                  title={`${entity.title}: ${measuredDuration}`}
+                  type="button"
+                >
+                  <strong>{measuredDuration}</strong>
+                  <i
+                    style={{
+                      height:
+                        entity.durationMs === null
+                          ? "0%"
+                          : `${Math.max(8, (entity.durationMs / maxDuration) * 100)}%`,
+                    }}
+                  />
+                  <span>{`#${index + 1} ${entity.id.slice(-4)}`}</span>
+                </button>
+              );
+            })}
+          </div>
+          <div className="operations-top-task-metrics">
+            <div>
+              <span>{text.accumulatedTime}</span>
+              <strong>{duration(summary.durationMs, locale)}</strong>
+              <small>{`${summary.runCount} ${text.associatedRuns}`}</small>
+            </div>
+            <div>
+              <span>{text.concentration}</span>
+              <strong>{formatPercent(summary.durationShare, locale)}</strong>
+              <small>{text.totalMeasuredTime}</small>
+            </div>
+            <div>
+              <span>{text.topFiveCost}</span>
+              <strong>
+                {topCost === null
+                  ? duration(null, locale)
+                  : formatCurrency(topCost, currency, locale)}
+              </strong>
+              <small>
+                {summary.tokens === null
+                  ? text.tokensUnavailable
+                  : `${formatCompactNumber(summary.tokens, locale)} tokens`}
+              </small>
+            </div>
+          </div>
+        </>
+      )}
+    </article>
+  );
+}