@zaip-ai/cli 1.3.1 → 1.3.4

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

@@ -11,7 +11,10 @@ import type { CostMonitorProjection } from "../contracts.js";
 import { normalizeCostProvider } from "../provider.js";
 import { aggregateTaskCostRows } from "../task-cost-groups.js";
 import { withTokenBackedCompactDuration } from "./CompactLifecycleCostTable.js";
-import { CostDeveloperAttributionPanel } from "./CostDeveloperAttributionPanel.js";
+import {
+  CostDeveloperAttributionPanel,
+  loadCostDeveloperAttribution,
+} from "./CostDeveloperAttributionPanel.js";
 import {
   type CostFilterState,
   CostFilters,
@@ -25,8 +28,8 @@ import {
   useCostMonitorPeriod,
 } from "./CostFilters.js";
 import { CostMonitorContent } from "./CostMonitorContent.js";
-import { ChevronDownIcon, ListFilterIcon, LocaleFlag, SettingsIcon } from "./CostMonitorIcons.js";
 import { CostMonitorLoadErrors } from "./CostMonitorLoadErrors.js";
+import { CostMonitorNavigation, type CostNavigationPopup } from "./CostMonitorNavigation.js";
 import { CostSummary } from "./CostSummary.js";
 import {
   groupRows,
@@ -64,8 +67,6 @@ import "./cost-monitor-responsive.css";
 import "./cost-run-origin.css";
 import "./cost-monitor-embedded.css";
 
-const zaipLogoUrl = new URL("../../../../../config/src/logo_novo_azul.png", import.meta.url).href;
-
 export {
   findRunDetails,
   isCurrentCostRunPageGeneration,
@@ -88,6 +89,20 @@ export function isCostViewExportEligible(view: CostView): boolean {
   return view !== "overview";
 }
 
+/** Developers has no local provider/model filter contract. In the embedded
+ * all-time surface, do not let those residual UI filters narrow it to month. */
+export function resolveDeveloperAttributionRange({
+  embedded,
+  globalDateRange,
+  runPageRange,
+}: {
+  embedded: boolean;
+  globalDateRange?: { start: string; end: string };
+  runPageRange?: { from: string; to: string };
+}): { from: string; to: string } | undefined {
+  return embedded && globalDateRange === undefined ? undefined : runPageRange;
+}
+
 /**
  * The Cost period request filters Runs, while Operations is the global snapshot
  * used for shared entity detail. Keep the Executions tab on that same active
@@ -183,9 +198,7 @@ export function CostMonitorPage({
     onCurrencyChange?.(next);
   };
   const [period, setPeriod] = useState<CostPeriod>(defaultCostPeriod);
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [localeOpen, setLocaleOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [navigationPopup, setNavigationPopup] = useState<CostNavigationPopup>(null);
   const [selectedRun, setSelectedRun] = useState<RunProjection | null>(null);
   const [detailData, setDetailData] = useState<CostMonitorProjection | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
@@ -216,6 +229,13 @@ export function CostMonitorPage({
     period,
     runPageRange,
   });
+  // Developers has no local provider/model filter contract. The embedded
+  // surface therefore remains all-time unless the host supplies a date range.
+  const developerAttributionRange = resolveDeveloperAttributionRange({
+    embedded,
+    ...(globalFilters?.dateRange === undefined ? {} : { globalDateRange: globalFilters.dateRange }),
+    ...(runPageRange === undefined ? {} : { runPageRange }),
+  });
   const compactPageRange = resolveCompactCostPageRange({
     embedded,
     globalDateRange: globalFilters?.dateRange,
@@ -545,6 +565,7 @@ export function CostMonitorPage({
   const usingCompactPage = compactKind !== null && loadReadModelPage !== undefined;
   const exportRows = useMemo(() => {
     if (usingCompactPage) return compactPage?.rows ?? staleCompactPage?.rows ?? [];
+    if (view === "developers") return [];
     if (view === "executions") return visibleExecutions;
     if (view === "conversations") return groups.conversations;
     if (view === "tasks") return groups.tasks;
@@ -651,6 +672,25 @@ export function CostMonitorPage({
           },
         }
       : undefined;
+  // The developer table is paginated only by the DataTable in the browser.
+  // Its API response is the full attributed population, so export from the
+  // same endpoint and exact active period instead of the visible ten rows.
+  const developerExportSource =
+    view === "developers"
+      ? {
+          prepare: async () => {
+            const developerRows = await loadCostDeveloperAttribution({
+              ...(developerAttributionRange === undefined ? {} : developerAttributionRange),
+            });
+            return {
+              totalRows: developerRows.length,
+              pages: async function* () {
+                yield developerRows as readonly Record<string, unknown>[];
+              },
+            };
+          },
+        }
+      : undefined;
   // Period views are paginated SQLite projections too.  Exporting their
   // already-rendered group rows truncates the workbook to the visible page
   // (and can lose the projection's factual duration).  Capture the same
@@ -749,151 +789,23 @@ export function CostMonitorPage({
         retryGroup={groupPageState.retry}
       />
       {embedded ? null : (
-        <>
-          <nav aria-label="Navegação do Cost Monitor" className="cost-monitor-nav">
-            <div className="cost-monitor-brand">
-              <strong className="cost-monitor-title">{text.title}</strong>
-              <small className="cost-last-updated">{updatedLabel}</small>
-            </div>
-            <img alt="ZAIP" className="cost-monitor-logo" src={zaipLogoUrl} />
-            <div className="cost-nav-actions">
-              <button
-                aria-label={text.refresh}
-                className="cost-nav-icon cost-refresh-action"
-                disabled={loading}
-                onClick={onRefresh}
-                type="button"
-              >
-                ↻
-              </button>
-              <div className="cost-nav-popup-anchor cost-filter-action">
-                <button
-                  className={filtersOpen ? "cost-nav-button is-active" : "cost-nav-button"}
-                  onClick={() => {
-                    setFiltersOpen((open) => !open);
-                    setLocaleOpen(false);
-                    setSettingsOpen(false);
-                  }}
-                  type="button"
-                >
-                  <ListFilterIcon /> {text.filters}
-                </button>
-                {filtersOpen ? (
-                  <div className="cost-nav-popup cost-nav-filter-popup">
-                    <CostFilters
-                      available={data.filters_available}
-                      hideQuery={embedded}
-                      locale={locale}
-                      onChange={setFilters}
-                      value={filters}
-                    />
-                  </div>
-                ) : null}
-              </div>
-              <div className="cost-nav-popup-anchor cost-locale-action">
-                <button
-                  className={localeOpen ? "cost-nav-button is-active" : "cost-nav-button"}
-                  onClick={() => {
-                    setLocaleOpen((open) => !open);
-                    setFiltersOpen(false);
-                    setSettingsOpen(false);
-                  }}
-                  type="button"
-                >
-                  <LocaleFlag locale={locale} />
-                  {locale === "pt-BR" ? "PT-BR" : "EN-US"}
-                  <ChevronDownIcon />
-                </button>
-                {localeOpen ? (
-                  <div className="cost-nav-popup cost-nav-locale-popup">
-                    <button onClick={() => changeLocale("pt-BR")} type="button">
-                      <LocaleFlag locale="pt-BR" /> Português do Brasil{" "}
-                      {locale === "pt-BR" ? "✓" : ""}
-                    </button>
-                    <button onClick={() => changeLocale("en-US")} type="button">
-                      <LocaleFlag locale="en-US" /> English {locale === "en-US" ? "✓" : ""}
-                    </button>
-                  </div>
-                ) : null}
-              </div>
-              <div className="cost-nav-popup-anchor cost-settings-action">
-                <button
-                  aria-label={text.settings}
-                  className={settingsOpen ? "cost-nav-icon is-active" : "cost-nav-icon"}
-                  onClick={() => {
-                    setSettingsOpen((open) => !open);
-                    setFiltersOpen(false);
-                    setLocaleOpen(false);
-                  }}
-                  type="button"
-                >
-                  <SettingsIcon />
-                </button>
-                {settingsOpen ? (
-                  <div className="cost-nav-popup cost-nav-settings-popup">
-                    <div className="cost-mobile-settings">
-                      <small className="cost-mobile-updated">{updatedLabel}</small>
-                      <button disabled={loading} onClick={onRefresh} type="button">
-                        ↻{" "}
-                        {loading
-                          ? locale === "pt-BR"
-                            ? "Atualizando…"
-                            : "Refreshing…"
-                          : text.refresh}
-                      </button>
-                      <label>
-                        <span>{locale === "pt-BR" ? "Idioma" : "Language"}</span>
-                        <select
-                          onChange={(event) => changeLocale(event.target.value as CostLocale)}
-                          value={locale}
-                        >
-                          <option value="pt-BR">Português do Brasil</option>
-                          <option value="en-US">English</option>
-                        </select>
-                      </label>
-                      <div className="cost-mobile-filters">
-                        <strong>{text.filters}</strong>
-                        <CostFilters
-                          available={data.filters_available}
-                          hideQuery={embedded}
-                          locale={locale}
-                          onChange={setFilters}
-                          value={filters}
-                        />
-                      </div>
-                    </div>
-                    <label>
-                      <span>{text.currency}</span>
-                      <select
-                        onChange={(event) => setCurrency(event.target.value as CostCurrency)}
-                        value={currency}
-                      >
-                        <option value="BRL">BRL · R$</option>
-                        <option value="USD">USD · $</option>
-                      </select>
-                    </label>
-                  </div>
-                ) : null}
-              </div>
-            </div>
-          </nav>
-          <header className="cost-hero">
-            <p className="cost-hero-description">{text.subtitle}</p>
-            <label className="cost-period">
-              <span>{text.period}</span>
-              <select
-                onChange={(event) => setPeriod(event.target.value as CostPeriod)}
-                value={period}
-              >
-                <option value="all">{text.allTime}</option>
-                <option value="7">{text.last7}</option>
-                <option value="30">{text.last30}</option>
-                <option value="90">{text.last90}</option>
-                <option value="month">{text.thisMonth}</option>
-              </select>
-            </label>
-          </header>
-        </>
+        <CostMonitorNavigation
+          currency={currency}
+          filters={filters}
+          filtersAvailable={data.filters_available}
+          loading={loading}
+          locale={locale}
+          onCurrencyChange={setCurrency}
+          onFiltersChange={setFilters}
+          onLocaleChange={changeLocale}
+          onPopupChange={setNavigationPopup}
+          onPeriodChange={setPeriod}
+          onRefresh={onRefresh}
+          period={period}
+          popup={navigationPopup}
+          text={text}
+          updatedLabel={updatedLabel}
+        />
       )}
       {embedded ? null : (
         <>
@@ -922,7 +834,10 @@ export function CostMonitorPage({
             <ExcelExportAction
               filters={{ ...filters, ...globalFilters, period }}
               pageSource={
-                compactExportSource ?? agentInvocationExportSource ?? costGroupExportSource
+                compactExportSource ??
+                agentInvocationExportSource ??
+                developerExportSource ??
+                costGroupExportSource
               }
               rows={exportRows as unknown as readonly Record<string, unknown>[]}
               view={`cost-${view}`}
@@ -944,9 +859,9 @@ export function CostMonitorPage({
           view === "developers" ? (
             <CostDeveloperAttributionPanel
               locale={locale}
-              {...(runPageRange === undefined
+              {...(developerAttributionRange === undefined
                 ? {}
-                : { from: runPageRange.from, to: runPageRange.to })}
+                : { from: developerAttributionRange.from, to: developerAttributionRange.to })}
             />
           ) : null
         }

package/templates/.agents/dashboard/modules/operations/src/react/export/ExcelExportAction.test.ts

@@ -3,11 +3,13 @@ import {
   AGENT_INVOCATION_EXPORT_COLUMNS,
   COMPACT_LIFECYCLE_EXPORT_COLUMNS,
   COST_GROUP_EXPORT_COLUMNS,
+  DEVELOPER_EXPORT_COLUMNS,
   EXECUTION_EXPORT_COLUMNS,
   EXPORT_SUCCESS_TOAST_MS,
   exportAgentInvocationRows,
   exportCompactLifecycleRows,
   exportCostGroupRows,
+  exportDeveloperRows,
   exportExecutionRows,
   exportHeadersForView,
   exportPageSourceRows,
@@ -198,6 +200,63 @@ it("uses the compact work schema for Kanban and Work List", () => {
   ]);
 });
 
+it("exports developer attribution with its factual schema and unavailable metrics intact", () => {
+  expect(DEVELOPER_EXPORT_COLUMNS).toEqual([
+    "account_id",
+    "login_snapshot",
+    "prd_count",
+    "spec_count",
+    "task_count",
+    "run_count",
+    "test_count",
+    "evidence_count",
+    "total_duration_hours",
+    "total_tokens",
+    "total_cost_brl",
+    "duration_covered_runs",
+    "token_covered_runs",
+    "brl_covered_runs",
+  ]);
+  expect(
+    exportDeveloperRows([
+      {
+        account_id: "42",
+        login_snapshot: "dev-42",
+        prd_count: 1,
+        spec_count: 2,
+        task_count: 3,
+        run_count: 4,
+        test_count: null,
+        evidence_count: null,
+        total_duration_ms: null,
+        total_tokens: null,
+        total_cost_brl: 1.5,
+        duration_covered_runs: 0,
+        token_covered_runs: 0,
+        brl_covered_runs: 4,
+      },
+    ]),
+  ).toEqual([
+    {
+      account_id: "42",
+      login_snapshot: "dev-42",
+      prd_count: 1,
+      spec_count: 2,
+      task_count: 3,
+      run_count: 4,
+      test_count: null,
+      evidence_count: null,
+      total_duration_hours: null,
+      total_tokens: null,
+      total_cost_brl: 1.5,
+      duration_covered_runs: 0,
+      token_covered_runs: 0,
+      brl_covered_runs: 4,
+    },
+  ]);
+  expect(exportHeadersForView("cost-developers", [])).toEqual(DEVELOPER_EXPORT_COLUMNS);
+});
+
 it("normalizes Tasks and macros into the same populated work columns", () => {
   expect(
     exportWorkRows([

package/templates/.agents/dashboard/modules/operations/src/react/export/ExcelExportAction.tsx

@@ -118,6 +118,26 @@ export const COST_GROUP_EXPORT_COLUMNS = [
   "duration_hours",
 ] as const;
 
+// Cost Monitor developer attribution is a factual aggregate with coverage
+// counters. Keep the workbook schema aligned with that table and retain null
+// facts instead of allowing them to be inferred as zero by a spreadsheet.
+export const DEVELOPER_EXPORT_COLUMNS = [
+  "account_id",
+  "login_snapshot",
+  "prd_count",
+  "spec_count",
+  "task_count",
+  "run_count",
+  "test_count",
+  "evidence_count",
+  "total_duration_hours",
+  "total_tokens",
+  "total_cost_brl",
+  "duration_covered_runs",
+  "token_covered_runs",
+  "brl_covered_runs",
+] as const;
+
 export const CONVERSATION_EXPORT_COLUMNS = [
   "conversation_id",
   "status",
@@ -334,6 +354,31 @@ export function exportCostGroupRows(
   });
 }
 
+/** Normalize Cost Monitor developer facts into the fixed XLSX schema. */
+export function exportDeveloperRows(
+  rows: readonly Record<string, unknown>[],
+): Record<string, unknown>[] {
+  return rows.map((row) => {
+    const durationMs = numberValue(row.total_duration_ms);
+    return {
+      account_id: row.account_id ?? null,
+      login_snapshot: row.login_snapshot ?? null,
+      prd_count: numberValue(row.prd_count),
+      spec_count: numberValue(row.spec_count),
+      task_count: numberValue(row.task_count),
+      run_count: numberValue(row.run_count),
+      test_count: numberValue(row.test_count),
+      evidence_count: numberValue(row.evidence_count),
+      total_duration_hours: durationMs === null ? null : durationMs / 3_600_000,
+      total_tokens: numberValue(row.total_tokens),
+      total_cost_brl: numberValue(row.total_cost_brl),
+      duration_covered_runs: numberValue(row.duration_covered_runs),
+      token_covered_runs: numberValue(row.token_covered_runs),
+      brl_covered_runs: numberValue(row.brl_covered_runs),
+    };
+  });
+}
+
 export function exportConversationRows(
   rows: readonly Record<string, unknown>[],
 ): Record<string, unknown>[] {
@@ -480,6 +525,7 @@ export function exportHeadersForView(
   const isCompactLifecycleView =
     /-(?:tasks|specs|prds|conversations)$/.test(view) && !isOperationsConversationView;
   const isCostGroupView = /-(?:agents|models|providers)$/.test(view);
+  const isDeveloperView = view === "cost-developers";
   const isChangeView = view === "operations-changes";
   const isDecisionView = view === "operations-decisions";
   if (isPeriodView) headers.push(...PERIOD_EXPORT_COLUMNS);
@@ -489,6 +535,7 @@ export function exportHeadersForView(
   if (isAgentInvocationView) headers.push(...AGENT_INVOCATION_EXPORT_COLUMNS);
   if (isCompactLifecycleView) headers.push(...COMPACT_LIFECYCLE_EXPORT_COLUMNS);
   if (isCostGroupView) headers.push(...COST_GROUP_EXPORT_COLUMNS);
+  if (isDeveloperView) headers.push(...DEVELOPER_EXPORT_COLUMNS);
   if (isOperationsConversationView) headers.push(...CONVERSATION_EXPORT_COLUMNS);
   if (isChangeView) headers.push(...CHANGE_EXPORT_COLUMNS);
   if (isDecisionView) headers.push(...DECISION_EXPORT_COLUMNS);
@@ -502,6 +549,7 @@ export function exportHeadersForView(
     isAgentInvocationView ||
     isCompactLifecycleView ||
     isCostGroupView ||
+    isDeveloperView ||
     isOperationsConversationView ||
     isChangeView ||
     isDecisionView;
@@ -545,6 +593,7 @@ export function ExcelExportAction({ filters, pageSource, rows, view }: ExcelExpo
   const isCompactLifecycleView =
     /-(?:tasks|specs|prds|conversations)$/.test(view) && !isOperationsConversationView;
   const isCostGroupView = /-(?:agents|models|providers)$/.test(view);
+  const isDeveloperView = view === "cost-developers";
   const isChangeView = view === "operations-changes";
   const isDecisionView = view === "operations-decisions";
   const createSnapshot = async () => {
@@ -584,7 +633,9 @@ export function ExcelExportAction({ filters, pageSource, rows, view }: ExcelExpo
                             ? exportCompactLifecycleRows
                             : isCostGroupView
                               ? exportCostGroupRows
-                              : exportRowsWithDurationHours,
+                              : isDeveloperView
+                                ? exportDeveloperRows
+                                : exportRowsWithDurationHours,
           );
           return;
         }
@@ -610,7 +661,9 @@ export function ExcelExportAction({ filters, pageSource, rows, view }: ExcelExpo
                             ? exportCompactLifecycleRows
                             : isCostGroupView
                               ? exportCostGroupRows
-                              : exportRowsWithDurationHours
+                              : isDeveloperView
+                                ? exportDeveloperRows
+                                : exportRowsWithDurationHours
           )(rows.slice(offset, offset + 500));
       },
     });