@zaip-ai/cli 6.3.0 → 7.6.0

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostGroupsTable.tsx

@@ -2,8 +2,9 @@ import { DataTable } from "@zaip-ai/dashboard-ui";
 import type { CostGroupRow } from "../contracts.js";
 import { MoreVerticalIcon } from "./CostTableIcons.js";
 import { costPeriodHeading } from "./CostTables.js";
-import { costGroupConversationCount, costGroupPageTotals } from "./cost-group-page-totals.js";
+import { costGroupConversationCount } from "./cost-group-page-totals.js";
 import { createCostGroupPeriodValues } from "./cost-group-period-values.js";
+import { costGroupTableTotals } from "./cost-group-table-totals.js";
 import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
 import { localizedDescription } from "./cost-table-metrics.js";
 import {
@@ -105,24 +106,7 @@ export function CostGroupsTable({
   const periodValues = createCostGroupPeriodValues(currency, locale, period);
   const periodDescription =
     periodValues.description === undefined ? {} : { description: periodValues.description };
-  const pageTotals = costGroupPageTotals(rows);
-  const totals =
-    suppliedTotals === undefined
-      ? pageTotals
-      : {
-          runs: suppliedTotals.run_count,
-          tasks: suppliedTotals.task_count,
-          prds: suppliedTotals.prd_count,
-          specs: suppliedTotals.spec_count,
-          evidences: suppliedTotals.evidence_count,
-          tests: suppliedTotals.test_count,
-          conversations: costGroupConversationCount(suppliedTotals) ?? pageTotals.conversations,
-          durationKnownMs: suppliedTotals.duration.known_sum,
-          durationPartial: !suppliedTotals.duration.complete,
-          tokens: suppliedTotals.total_tokens,
-          usd: suppliedTotals.estimated_usd,
-          brl: suppliedTotals.estimated_brl,
-        };
+  const totals = costGroupTableTotals(rows, suppliedTotals, period);
   const totalDurationDisplay = periodValues.duration(
     suppliedTotals?.duration ?? {
       known_sum: totals.durationKnownMs,
@@ -274,18 +258,24 @@ export function CostGroupsTable({
                   "Tasks count only when creation_run_id has one observed financial model. Later participation is not creation; missing or multi-model linkage displays 0.",
                 ),
               },
-              ...(showModelLifecycleDetails
+              ...(showModelLifecycleDetails || period !== undefined
                 ? [
                     {
                       key: "conversations",
-                      label: "Conversations",
-                      render: (row: CostGroupRow) => displayCount(costGroupConversationCount(row)),
+                      label:
+                        locale === "pt-BR"
+                          ? "Conversas com atividade"
+                          : "Conversations with activity",
+                      render: (row: CostGroupRow) =>
+                        formatFactualCount(costGroupConversationCount(row), locale),
                       sortValue: (row: CostGroupRow) => costGroupConversationCount(row) ?? 0,
                       align: "right" as const,
-                      footer: displayCount(totals.conversations),
+                      footer: formatFactualCount(totals.conversations, locale),
                       description: localizedDescription(
                         locale,
-                        "Conversas canônicas, incluindo turns unassisted legados. Cada ID conta uma vez por modelo; um modelo múltiplo pode repetir. Run com Task e conversa de origem não cria Task adicional.",
+                        period !== undefined
+                          ? "Conversas distintas com atividade no período, em todas as fases. Uma conversa ativa em vários dias conta uma vez no total do período. Ausência de dados é exibida como traço."
+                          : "Conversas canônicas, incluindo turns unassisted legados. Cada ID conta uma vez por modelo; um modelo múltiplo pode repetir. Run com Task e conversa de origem não cria Task adicional.",
                         "Canonical conversations, including legacy unassisted turns. Each ID counts once per model; a multi-model conversation may repeat. A Run with a Task and source conversation does not create an additional Task.",
                       ),
                     },

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostMonitorPage.test.ts

@@ -24,7 +24,6 @@ import {
   isServerCostRunPagingEligible,
   matchesGlobalFilters,
   matchesPeriodEntity,
-  resolveCompactCostPageRange,
   resolveCostGroupPageRange,
   resolveDeveloperAttributionRange,
   selectDimensionalCostRows,
@@ -87,7 +86,7 @@ describe("cost monitor navigation", () => {
       },
       write: false,
     });
-    const browser = await chromium.launch({ headless: true });
+    const browser = await chromium.launch({ headless: true, chromiumSandbox: true });
     try {
       const page = await browser.newPage();
       const pageErrors: string[] = [];
@@ -180,31 +179,6 @@ describe("cost monitor navigation", () => {
     ).toBeUndefined();
   });
 
-  it("keeps compact SPEC and PRD pages and their export source on the all-time snapshot", () => {
-    const monthRange = costPeriodDateRange(defaultCostPeriod, new Date("2026-08-17T12:00:00.000Z"));
-    expect(
-      resolveCompactCostPageRange({
-        embedded: true,
-        globalDateRange: undefined,
-        hasLocalCostFilters: false,
-        period: defaultCostPeriod,
-        runPageRange: monthRange,
-      }),
-    ).toBeUndefined();
-    expect(
-      resolveCompactCostPageRange({
-        embedded: false,
-        globalDateRange: undefined,
-        hasLocalCostFilters: false,
-        period: defaultCostPeriod,
-        runPageRange: monthRange,
-      }),
-    ).toEqual(monthRange);
-    const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
-    expect(page).toContain("range: compactPageRange");
-    expect(page).toContain("...(compactPageRange === undefined ? {} : compactPageRange)");
-  });
-
   it("releases the host loading gate when a global filter replaces the Cost Monitor surface", () => {
     const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
 

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostMonitorPage.tsx

@@ -6,7 +6,6 @@ import { includeConfiguredAgentGroups } from "../agent-groups.js";
 import type { CostMonitorProjection } from "../contracts.js";
 import { normalizeCostProvider } from "../provider.js";
 import { aggregateTaskCostRows } from "../task-cost-groups.js";
-import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
 import {
   type CostFilterState,
   CostFilters,
@@ -23,6 +22,7 @@ import { CostMonitorContent } from "./CostMonitorContent.js";
 import { CostMonitorLoadErrors } from "./CostMonitorLoadErrors.js";
 import { CostMonitorNavigation, type CostNavigationPopup } from "./CostMonitorNavigation.js";
 import { CostSummary } from "./CostSummary.js";
+import { buildCompactCostExportSource } from "./compact-cost-export-source.js";
 import type { CostMonitorPageProps } from "./cost-monitor-page-props.js";
 import {
   groupRows,
@@ -43,6 +43,7 @@ import { type CostCurrency, type CostLocale, costCopy } from "./cost-monitor-cop
 import { buildCostMonitorExportSources } from "./cost-monitor-export-sources.js";
 import { changeCostLocale, openCostRunDetails } from "./cost-monitor-page-actions.js";
 import { selectDimensionalCostRows } from "./cost-monitor-page-helpers.js";
+import { costGroupViewName, useCostDataRevision } from "./cost-monitor-page-state.js";
 import { summarizeCostRows } from "./cost-monitor-summary.js";
 import { COST_VIEW_ORDER, type CostView, DEFAULT_COST_VIEW } from "./cost-monitor-views.js";
 import { resolveCompactCostPageRange, resolveCostGroupPageRange } from "./cost-page-range.js";
@@ -51,6 +52,7 @@ import { compactReadModelKind, useCompactCostPage } from "./use-compact-cost-pag
 import { useCostGroupPage } from "./use-cost-group-page.js";
 import { useCostRunPage } from "./use-cost-run-page.js";
 import "./cost-monitor.css";
+import "./cost-charts.css";
 import "./cost-monitor-responsive.css";
 import "./cost-run-origin.css";
 import "./cost-monitor-embedded.css";
@@ -119,14 +121,7 @@ export function CostMonitorPage({
   const [detailLoading, setDetailLoading] = useState(false);
   const [detailError, setDetailError] = useState<string | null>(null);
   const [detailAttempt, setDetailAttempt] = useState(0);
-  // The summary object is replaced only when the host receives a newer
-  // snapshot. Keep this revision separate from tabs and filters so the active
-  // remote table is reloaded without remounting the Cost Monitor surface.
-  const dataRevisionRef = useRef({ data, revision: 0 });
-  if (dataRevisionRef.current.data !== data) {
-    dataRevisionRef.current = { data, revision: dataRevisionRef.current.revision + 1 };
-  }
-  const dataRevision = dataRevisionRef.current.revision;
+  const dataRevision = useCostDataRevision(data);
   const loadDetailRef = useRef(loadDetail);
   loadDetailRef.current = loadDetail;
   const text = costCopy[locale];
@@ -170,17 +165,6 @@ export function CostMonitorPage({
     period,
     runPageRange,
   });
-  const costGroupViewName = (
-    candidate: CostView,
-  ): "daily" | "monthly" | "annual" | "agents" | "models" | "providers" | null =>
-    candidate === "daily" ||
-    candidate === "monthly" ||
-    candidate === "annual" ||
-    candidate === "agents" ||
-    candidate === "models" ||
-    candidate === "providers"
-      ? candidate
-      : null;
   const groupView = costGroupViewName(view);
   // Visual tables are intentionally bounded. Export sources below retain
   // their independent 50/100-row transport batches and always traverse all
@@ -507,49 +491,14 @@ export function CostMonitorPage({
     visiblePrds,
     visibleSpecs,
   ]);
-  const compactExportSource =
-    usingCompactPage && compactKind !== null && loadReadModelPage !== undefined
-      ? {
-          prepare: async () => {
-            const firstPage = await loadReadModelPage({
-              kind: compactKind,
-              offset: 0,
-              limit: 50,
-              filters,
-              ...(compactPageRange === undefined ? {} : compactPageRange),
-              ...(globalFilters?.query ? { query: globalFilters.query } : {}),
-            });
-            return {
-              totalRows: firstPage.total,
-              pages: async function* () {
-                let page = firstPage;
-                const seen = new Set<string>();
-                while (true) {
-                  const unique = page.rows
-                    .filter((row) => {
-                      if (seen.has(row.id)) return false;
-                      seen.add(row.id);
-                      return true;
-                    })
-                    .map(withTokenBackedCompactDuration);
-                  if (unique.length > 0)
-                    yield unique as unknown as readonly Record<string, unknown>[];
-                  const nextOffset = page.offset + page.rows.length;
-                  if (nextOffset >= page.total || !page.has_more) return;
-                  page = await loadReadModelPage({
-                    kind: compactKind,
-                    offset: nextOffset,
-                    limit: page.limit,
-                    filters,
-                    ...(compactPageRange === undefined ? {} : compactPageRange),
-                    ...(globalFilters?.query ? { query: globalFilters.query } : {}),
-                  });
-                }
-              },
-            };
-          },
-        }
-      : undefined;
+  const compactExportSource = buildCompactCostExportSource({
+    usingCompactPage,
+    compactKind,
+    loadReadModelPage,
+    filters,
+    compactPageRange,
+    globalFilters,
+  });
   const agentInvocationExportSource =
     view === "agentCalls" && serverPagingEligible && loadRunPage !== undefined
       ? {

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostTables.availability.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { CostGroupsTable, formatReasoningEffort, formatServiceTier } from "./CostTables.js";
+
+describe("runtime availability", () => {
+  it("uses requested effort only as a clearly labelled visual fallback", () => {
+    expect(formatReasoningEffort("high", "medium", "pt-BR")).toBe("Alto");
+    expect(formatReasoningEffort(null, "high", "pt-BR")).toBe("Alto (solicitado; efetivo -)");
+    expect(formatReasoningEffort(null, null, "en-US")).toBe("-");
+  });
+  it("uses the default speed label when the service tier is unavailable", () => {
+    expect(formatServiceTier(null, "pt-BR")).toBe("Padrão");
+    expect(formatServiceTier("unknown", "pt-BR")).toBe("Padrão");
+    expect(formatServiceTier(null, "en-US")).toBe("Standard");
+    expect(formatServiceTier("priority", "pt-BR")).toBe("Rápido");
+  });
+});
+it("shows conversations with activity and uses distinct server totals rather than adding daily counts", () => {
+  const row = {
+    key: "2026-10-20",
+    label: "2026-10-20",
+    latest_started_at: "",
+    conversation_count: 2,
+    run_count: 3,
+    task_count: 1,
+    prd_count: 0,
+    spec_count: 0,
+    evidence_count: 0,
+    test_count: 0,
+    event_count: 0,
+    total_tokens: 100,
+    estimated_brl: 10,
+    estimated_usd: 2,
+    duration_ms: 1000,
+    duration: { known_sum: 1000, unknown: 0, complete: true, coverage_ratio: 1 },
+    coverage: { events: 0, tokens: 0, usd: 0, brl: 0 },
+  };
+  const view = CostGroupsTable({
+    rows: [row, { ...row, key: "2026-10-19" }],
+    locale: "pt-BR",
+    currency: "BRL",
+    period: "daily",
+    totals: { ...row, conversation_count: 2 },
+  });
+  const column = view.props.columns.find((value: { key: string }) => value.key === "conversations");
+  expect(column.label).toBe("Conversas com atividade");
+  expect(column.render(row)).toBe("2");
+  expect(column.footer).toBe("2");
+  expect(column.render({ ...row, conversation_count: null })).toBe("—");
+  expect(column.render({ ...row, conversation_count: 0 })).toBe("0");
+  const withoutTotals = CostGroupsTable({
+    rows: [row, row],
+    locale: "pt-BR",
+    currency: "BRL",
+    period: "daily",
+  });
+  expect(
+    withoutTotals.props.columns.find((value: { key: string }) => value.key === "conversations")
+      .footer,
+  ).toBe("—");
+});

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostTables.test.ts

@@ -17,8 +17,6 @@ import {
   formatDateTime,
   formatDurationCoverage,
   formatRate,
-  formatReasoningEffort,
-  formatServiceTier,
   formatTokenBackedDuration,
   formatUsd,
   isCompactRunColumnVisible,
@@ -156,19 +154,6 @@ describe("duration coverage", () => {
     ).toBe("0");
   });
 });
-describe("runtime availability", () => {
-  it("uses requested effort only as a clearly labelled visual fallback", () => {
-    expect(formatReasoningEffort("high", "medium", "pt-BR")).toBe("Alto");
-    expect(formatReasoningEffort(null, "high", "pt-BR")).toBe("Alto (solicitado; efetivo -)");
-    expect(formatReasoningEffort(null, null, "en-US")).toBe("-");
-  });
-  it("uses the default speed label when the service tier is unavailable", () => {
-    expect(formatServiceTier(null, "pt-BR")).toBe("Padrão");
-    expect(formatServiceTier("unknown", "pt-BR")).toBe("Padrão");
-    expect(formatServiceTier(null, "en-US")).toBe("Standard");
-    expect(formatServiceTier("priority", "pt-BR")).toBe("Rápido");
-  });
-});
 describe("grouped cost availability", () => {
   const unavailableGroup = {
     key: "unknown",
@@ -317,6 +302,7 @@ describe("grouped cost availability", () => {
       ["prds", "PRDs"],
       ["specs", "SPECs"],
       ["tasks", "Tarefas criadas"],
+      ["conversations", "Conversas com atividade"],
       ["runs", "Runs"],
       ["tests", "Testes"],
       ["evidences", "Evidências"],

package/templates/.agents/dashboard/modules/cost-monitor/src/react/compact-cost-export-source.ts

@@ -0,0 +1,85 @@
+import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
+import type { CostFilterState } from "./CostFilters.js";
+import type { CostMonitorPageProps } from "./cost-monitor-page-props.js";
+import type { CostPageDateRange } from "./cost-page-range.js";
+import type { LoadCompactCostPage } from "./use-compact-cost-page.js";
+export function buildCompactCostExportSource({
+  usingCompactPage,
+  compactKind,
+  loadReadModelPage,
+  filters,
+  compactPageRange,
+  globalFilters,
+}: {
+  usingCompactPage: boolean;
+  compactKind: Parameters<LoadCompactCostPage>[0]["kind"] | null;
+  loadReadModelPage: LoadCompactCostPage | undefined;
+  filters: CostFilterState;
+  compactPageRange: CostPageDateRange | undefined;
+  globalFilters: CostMonitorPageProps["globalFilters"];
+}) {
+  const compactExportSource =
+    usingCompactPage && compactKind !== null && loadReadModelPage !== undefined
+      ? {
+          prepare: async () => {
+            const firstPage = await loadReadModelPage({
+              kind: compactKind,
+              offset: 0,
+              limit: 50,
+              filters,
+              ...(compactPageRange === undefined ? {} : compactPageRange),
+              ...(globalFilters?.query ? { query: globalFilters.query } : {}),
+            });
+            return {
+              totalRows: firstPage.total,
+              metadata: {
+                source: firstPage.data_source,
+                snapshot_id: firstPage.snapshot_id,
+                source_latest_at: firstPage.source_latest_at,
+                filters,
+                period: compactPageRange ?? "all",
+                cost_semantics:
+                  compactKind === "conversations"
+                    ? "All phases linked to each conversation, not only the Conversation phase"
+                    : "Known costs attributed to each canonical entity",
+                subtotal: firstPage.subtotal,
+              },
+              pages: async function* () {
+                let page = firstPage;
+                const seen = new Set<string>();
+                while (true) {
+                  const unique = page.rows
+                    .filter((row) => {
+                      if (seen.has(row.id)) return false;
+                      seen.add(row.id);
+                      return true;
+                    })
+                    .map(withTokenBackedCompactDuration);
+                  if (unique.length > 0)
+                    yield unique as unknown as readonly Record<string, unknown>[];
+                  const nextOffset = page.offset + page.rows.length;
+                  if (nextOffset >= page.total || !page.has_more) return;
+                  page = await loadReadModelPage({
+                    kind: compactKind,
+                    offset: nextOffset,
+                    limit: page.limit,
+                    filters,
+                    ...(compactPageRange === undefined ? {} : compactPageRange),
+                    ...(globalFilters?.query ? { query: globalFilters.query } : {}),
+                  });
+                  if (
+                    firstPage.snapshot_id !== null &&
+                    page.snapshot_id !== firstPage.snapshot_id
+                  ) {
+                    throw new Error(
+                      "Os dados mudaram durante a exportação. Atualize a página e exporte novamente.",
+                    );
+                  }
+                }
+              },
+            };
+          },
+        }
+      : undefined;
+  return compactExportSource;
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/compact-cost-page-range.test.ts

@@ -0,0 +1,34 @@
+import { readFileSync } from "node:fs";
+import { expect, it } from "vitest";
+import { costPeriodDateRange, defaultCostPeriod } from "./CostFilters.js";
+import { resolveCompactCostPageRange } from "./CostMonitorPage.js";
+
+it("keeps compact SPEC and PRD pages and their export source on the all-time snapshot", () => {
+  const monthRange = costPeriodDateRange(defaultCostPeriod, new Date("2026-08-17T12:00:00.000Z"));
+  expect(
+    resolveCompactCostPageRange({
+      embedded: true,
+      globalDateRange: undefined,
+      hasLocalCostFilters: false,
+      period: defaultCostPeriod,
+      runPageRange: monthRange,
+    }),
+  ).toBeUndefined();
+  expect(
+    resolveCompactCostPageRange({
+      embedded: false,
+      globalDateRange: undefined,
+      hasLocalCostFilters: false,
+      period: defaultCostPeriod,
+      runPageRange: monthRange,
+    }),
+  ).toEqual(monthRange);
+  const page = readFileSync(new URL("./CostMonitorPage.tsx", import.meta.url), "utf8");
+  expect(page).toContain("range: compactPageRange");
+  expect(page).toContain("buildCompactCostExportSource(");
+  const exportSource = readFileSync(
+    new URL("./compact-cost-export-source.ts", import.meta.url),
+    "utf8",
+  );
+  expect(exportSource).toContain("...(compactPageRange === undefined ? {} : compactPageRange)");
+});

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-chart-presentation.ts

@@ -0,0 +1,74 @@
+import { formatCompactNumber, formatCurrency, formatDurationMs } from "@zaip-ai/dashboard-ui";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+
+export function formatPhaseShare(value: number | null, total: number, locale: CostLocale) {
+  return new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(
+    total > 0 ? (value ?? 0) / total : 0,
+  );
+}
+
+export function formatNullableDuration(value: number | null, locale: CostLocale) {
+  return value === null || value === 0 ? "0" : formatDurationMs(value, locale);
+}
+
+export function formatNullableNumber(value: number | null, locale: CostLocale) {
+  return formatCompactNumber(value ?? 0, locale);
+}
+
+export function formatNullableCurrency(
+  value: number | null,
+  currency: CostCurrency,
+  locale: CostLocale,
+) {
+  return formatCurrency(value ?? 0, currency, locale);
+}
+
+export function costChartsCopy(locale: CostLocale) {
+  return locale === "pt-BR"
+    ? {
+        analyticsView: "Visão analítica",
+        trend: "TENDÊNCIA",
+        dailyCost: "Custo diário",
+        sevenDays: "7 dias",
+        dailyCostChart: "Custo diário dos últimos 7 dias",
+        distribution: "DISTRIBUIÇÃO",
+        costByModel: "Custo por modelo",
+        composition: "COMPOSIÇÃO",
+        tokenMix: "Mix de tokens",
+        phases: "FASES",
+        totalsByPhase: "Totais por fase",
+        inputWithoutCache: "Input sem cache",
+        cachedInput: "Cache",
+        visibleOutput: "Output visível",
+        reasoning: "Raciocínio",
+        total: "Total (input + output)",
+      }
+    : {
+        analyticsView: "Analytics overview",
+        trend: "TREND",
+        dailyCost: "Daily cost",
+        sevenDays: "7 days",
+        dailyCostChart: "Daily cost for the last 7 days",
+        distribution: "DISTRIBUTION",
+        costByModel: "Cost by model",
+        composition: "COMPOSITION",
+        tokenMix: "Token mix",
+        phases: "PHASES",
+        totalsByPhase: "Totals by phase",
+        inputWithoutCache: "Uncached input",
+        cachedInput: "Cached input",
+        visibleOutput: "Visible output",
+        reasoning: "Reasoning",
+        total: "Total (input + output)",
+      };
+}
+
+export function phaseLabel(phase: "conversation" | "planning" | "execution", locale: CostLocale) {
+  if (locale === "en-US")
+    return phase === "conversation"
+      ? "Conversation"
+      : phase === "planning"
+        ? "Planning"
+        : "Execution";
+  return phase === "conversation" ? "Conversa" : phase === "planning" ? "Planejamento" : "Execução";
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-charts.css

@@ -0,0 +1,117 @@
+.cost-bar-list {
+  display: grid;
+  gap: 15px;
+  margin-top: 24px;
+}
+.cost-bar-list > div {
+  display: grid;
+  grid-template-columns: minmax(80px, 130px) 1fr auto;
+  align-items: center;
+  gap: 12px;
+}
+.cost-bar-list span,
+.token-mix span,
+.phase-strip span {
+  color: #a8b6c8;
+  font-size: 0.78rem;
+}
+.cost-bar-list i {
+  height: 7px;
+  overflow: hidden;
+  border-radius: 9px;
+  background: rgba(148, 163, 184, 0.1);
+}
+.cost-bar-list b {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+}
+.cost-bar-list strong,
+.token-mix strong,
+.phase-strip strong {
+  color: #e8f0fb;
+  font-size: 0.8rem;
+}
+.token-mix {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 25px;
+}
+.token-mix > div,
+.phase-strip > div {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px;
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: 13px;
+  background: rgba(15, 23, 38, 0.68);
+}
+.token-mix i,
+.phase-strip i {
+  width: 9px;
+  height: 9px;
+  margin-top: 2px;
+  border-radius: 50%;
+}
+.token-mix strong,
+.phase-strip strong {
+  grid-column: 2;
+  font-size: 1.14rem;
+}
+.phase-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 30px;
+}
+.phase-strip > div {
+  display: block;
+}
+.phase-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.phase-name i {
+  flex: 0 0 9px;
+  margin: 0;
+}
+.phase-name span {
+  color: #c5d2e3;
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+.phase-metrics {
+  display: grid;
+  gap: 7px;
+  margin: 12px 0 0;
+}
+.phase-metrics > div {
+  display: grid;
+  gap: 3px;
+  padding-top: 7px;
+  border-top: 1px solid rgba(148, 163, 184, 0.1);
+}
+.phase-metrics dt {
+  color: #7890ab;
+  font-size: 0.58rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.phase-metrics dd {
+  margin: 0;
+  overflow: hidden;
+  color: #e8f0fb;
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cost-empty {
+  padding: 55px 0;
+  color: var(--muted);
+  text-align: center;
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/cost-group-table-totals.ts

@@ -0,0 +1,29 @@
+import type { CostGroupRow } from "../contracts.js";
+import { costGroupConversationCount, costGroupPageTotals } from "./cost-group-page-totals.js";
+import type { CostGroupTotals } from "./use-cost-group-page.js";
+
+export function costGroupTableTotals(
+  rows: readonly CostGroupRow[],
+  suppliedTotals: CostGroupTotals | undefined,
+  period: "daily" | "monthly" | "annual" | undefined,
+) {
+  const pageTotals = costGroupPageTotals(rows);
+  const totals =
+    suppliedTotals === undefined
+      ? { ...pageTotals, conversations: period === undefined ? pageTotals.conversations : null }
+      : {
+          runs: suppliedTotals.run_count,
+          tasks: suppliedTotals.task_count,
+          prds: suppliedTotals.prd_count,
+          specs: suppliedTotals.spec_count,
+          evidences: suppliedTotals.evidence_count,
+          tests: suppliedTotals.test_count,
+          conversations: costGroupConversationCount(suppliedTotals),
+          durationKnownMs: suppliedTotals.duration.known_sum,
+          durationPartial: !suppliedTotals.duration.complete,
+          tokens: suppliedTotals.total_tokens,
+          usd: suppliedTotals.estimated_usd,
+          brl: suppliedTotals.estimated_brl,
+        };
+  return totals;
+}