@zaip-ai/cli 1.3.0 → 1.3.1

package/templates/.agents/dashboard/modules/cost-monitor/src/react/use-cost-group-page.ts

@@ -48,6 +48,18 @@ export function isCurrentCostGroupPage(resolvedKey: string | null, requestKey: s
   return resolvedKey === requestKey;
 }
 
+/**
+ * A changed offset may keep its own tab's data visible, but switching tabs,
+ * ranges, or filters must never briefly render a different table schema.
+ */
+export function isSameCostGroupSurface(resolvedKey: string | null, requestKey: string): boolean {
+  if (resolvedKey === null) return false;
+  return (
+    resolvedKey.slice(0, resolvedKey.lastIndexOf("\u0000")) ===
+    requestKey.slice(0, requestKey.lastIndexOf("\u0000"))
+  );
+}
+
 export function costGroupPageLabel({
   locale,
   page,
@@ -80,15 +92,19 @@ export function reconcileCostGroupTotalsWithCards(
 }
 
 export function useCostGroupPage({
+  active = true,
   view,
   range,
   globalQuery,
+  limit = 50,
   filters,
   load,
 }: {
+  active?: boolean;
   view: "daily" | "monthly" | "annual" | "agents" | "models" | "providers";
   range?: { from: string; to: string };
   globalQuery: string;
+  limit?: number;
   filters: CostGroupFilters;
   load?: LoadCostGroupPage;
 }) {
@@ -96,31 +112,42 @@ export function useCostGroupPage({
   const [page, setPage] = useState<CostGroupPage | null>(null);
   const [resolvedKey, setResolvedKey] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
   const generation = useRef(0);
   const loader = useRef(load);
   loader.current = load;
   const query = effectiveCostGroupQuery(filters, globalQuery);
   const filterKey = `${Object.values(filters).join("\u0000")}\u0000${query}`;
-  const paginationKey = `${view}\u0000${range?.from ?? ""}\u0000${range?.to ?? ""}\u0000${filterKey}`;
+  const paginationKey = `${view}\u0000${limit}\u0000${range?.from ?? ""}\u0000${range?.to ?? ""}\u0000${filterKey}`;
   const requestKey = `${paginationKey}\u0000${offset}`;
-  const requestInputRef = useRef({ filters, query, range, view });
-  requestInputRef.current = { filters, query, range, view };
+  const requestInputRef = useRef({ filters, limit, query, range, view });
+  requestInputRef.current = { filters, limit, query, range, view };
   useEffect(() => {
     void paginationKey;
     setOffset(0);
   }, [paginationKey]);
   useEffect(() => {
-    if (!loader.current) return;
-    const controller = new AbortController();
+    void attempt;
+    // Increment before the inactive branch so an aborted group request cannot
+    // publish or clear state after the user switches to a non-group tab.
     const current = ++generation.current;
+    if (!active || !loader.current) {
+      setPage(null);
+      setResolvedKey(null);
+      setError(null);
+      setLoading(false);
+      return;
+    }
+    const controller = new AbortController();
     const requestInput = requestInputRef.current;
-    const limit = requestInput.view === "daily" ? 30 : 50;
     setLoading(true);
+    setError(null);
     void loader
       .current({
         view: requestInput.view,
         offset,
-        limit,
+        limit: requestInput.limit,
         ...(requestInput.query ? { query: requestInput.query } : {}),
         filters: requestInput.filters,
         ...(requestInput.range ?? {}),
@@ -132,15 +159,24 @@ export function useCostGroupPage({
           setResolvedKey(requestKey);
         }
       })
+      .catch((cause: unknown) => {
+        if (!controller.signal.aborted && current === generation.current)
+          setError(cause instanceof Error ? cause.message : String(cause));
+      })
       .finally(() => {
         if (!controller.signal.aborted && current === generation.current) setLoading(false);
       });
     return () => controller.abort();
-  }, [offset, requestKey]);
+  }, [active, attempt, offset, requestKey]);
   return {
+    error,
     page: isCurrentCostGroupPage(resolvedKey, requestKey) ? page : null,
+    // Keep the preceding page only while moving within its own tab. A tab,
+    // range, or filter change may have a different row schema.
+    stalePage: isSameCostGroupSurface(resolvedKey, requestKey) ? page : null,
     loading,
     offset,
+    retry: () => setAttempt((value) => value + 1),
     setOffset,
   };
 }

package/templates/.agents/dashboard/modules/cost-monitor/src/react/use-cost-run-page.ts

@@ -10,6 +10,7 @@ export function useCostRunPage({
   currency,
   filters,
   globalQuery,
+  limit = 10,
   range,
   refresh,
   load,
@@ -19,6 +20,7 @@ export function useCostRunPage({
   currency: CostCurrency;
   filters: CostFilterState;
   globalQuery: string;
+  limit?: number;
   range: { from: string; to: string } | undefined;
   refresh: string | null;
   load: typeof loadCostMonitorRunPage | undefined;
@@ -35,7 +37,7 @@ export function useCostRunPage({
   const rangeTo = range?.to;
   const effectiveFilters = { ...filters, query: filters.query || globalQuery };
   const paginationKey = `${Object.values(effectiveFilters).join("\u0000")}\u0000${rangeFrom ?? ""}\u0000${rangeTo ?? ""}`;
-  const requestKey = `${view}\u0000${eligible}\u0000${currency}\u0000${paginationKey}\u0000${refresh ?? ""}`;
+  const requestKey = `${view}\u0000${eligible}\u0000${currency}\u0000${limit}\u0000${paginationKey}\u0000${refresh ?? ""}`;
   const requestInputRef = useRef({
     view,
     eligible,
@@ -44,6 +46,7 @@ export function useCostRunPage({
     rangeFrom,
     rangeTo,
     refresh,
+    limit,
   });
   requestInputRef.current = {
     view,
@@ -53,6 +56,7 @@ export function useCostRunPage({
     rangeFrom,
     rangeTo,
     refresh,
+    limit,
   };
   useEffect(() => {
     void paginationKey;
@@ -79,6 +83,7 @@ export function useCostRunPage({
         ? {}
         : { from: requestInput.rangeFrom, to: requestInput.rangeTo }),
       offset,
+      limit: requestInput.limit,
       refresh: requestInput.refresh,
       signal: controller.signal,
     })

package/templates/.agents/dashboard/modules/operations/src/contracts.ts

@@ -153,7 +153,12 @@ export interface UsageProjection {
   rework: UsageMetricProjection;
 }
 
-export type MetricProvenance = "observed" | "reconciled" | "legacy_inferred" | "estimated";
+export type MetricProvenance =
+  | "observed"
+  | "reconciled"
+  | "legacy_inferred"
+  | "shared_creation_allocation"
+  | "estimated";
 
 export interface MetricCoverageProjection {
   population: number;
@@ -231,7 +236,13 @@ export interface MacroProjection {
     unknown_runs: number;
     coverage_ratio: number;
   };
-  duration_provenance?: "observed" | "reconciled" | "legacy_inferred" | "estimated" | "unavailable";
+  duration_provenance?:
+    | "observed"
+    | "reconciled"
+    | "legacy_inferred"
+    | "shared_creation_allocation"
+    | "estimated"
+    | "unavailable";
   lifecycle_duration_coverage?: NonNullable<MacroProjection["duration_coverage"]>;
   lifecycle_duration_provenance?: MacroProjection["duration_provenance"];
   estimation_basis?: string | null;
@@ -380,7 +391,13 @@ export interface RunProjection {
   finished_at: string | null;
   duration_ms: number | null;
   duration_started_at?: string | null;
-  duration_provenance?: "observed" | "reconciled" | "legacy_inferred" | "estimated" | "unavailable";
+  duration_provenance?:
+    | "observed"
+    | "reconciled"
+    | "legacy_inferred"
+    | "shared_creation_allocation"
+    | "estimated"
+    | "unavailable";
   estimation_basis?: string | null;
   source_started_at?: string | null;
   source_finished_at?: string | null;

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

@@ -0,0 +1,54 @@
+import { readFileSync } from "node:fs";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import {
+  type DeveloperAttributionRow,
+  DeveloperAttributionTable,
+} from "./DeveloperAttributionPanel.js";
+
+const row = (account_id: string): DeveloperAttributionRow => ({
+  account_id,
+  login_snapshot: `developer-${account_id}`,
+  status_counts: { executing: 1 },
+  type_counts: { task: 1 },
+  risk_counts: { standard: 1 },
+  task_count: 1,
+  completed_task_count: 0,
+  total_duration_ms: 1,
+  total_tokens: 1,
+  total_cost_brl: 1,
+});
+
+describe("DeveloperAttributionPanel", () => {
+  it("renders the canonical ui-table and its pagination for more than ten developers", () => {
+    const rows = Array.from({ length: 11 }, (_, index) => row(String(index + 1)));
+    const markup = renderToStaticMarkup(
+      createElement(DeveloperAttributionTable, { locale: "pt-BR", rows }),
+    );
+
+    expect(markup).toContain('class="ui-table"');
+    expect(markup).toContain('class="ui-table-pagination"');
+    expect(markup).toContain("Página 1 / 2");
+    expect(markup).toContain("Desenvolvedor");
+    expect(markup).toContain("Tarefas Concluídas");
+    expect(markup).toContain("Status");
+    expect(markup).toContain("Tipo");
+    expect(markup).toContain("Risco");
+    expect(markup).not.toContain("Origem");
+    expect(markup).not.toContain("Cobertura");
+  });
+
+  it("keeps one accessible shared table with factual columns and explicit states", () => {
+    const panel = readFileSync(new URL("./DeveloperAttributionPanel.tsx", import.meta.url), "utf8");
+
+    expect(panel).toContain("/api/v2/operations/developers");
+    expect(panel).toContain("<DataTable");
+    expect(panel).toContain("pageSize={10}");
+    expect(panel).toContain('role="status"');
+    expect(panel).toContain('role="alert"');
+    expect(panel).toContain("scrollLabel={copy.caption}");
+    expect(panel).toContain("status_counts");
+    expect(panel).toContain("completed_task_count");
+  });
+});

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

@@ -0,0 +1,247 @@
+import { DataTable, formatCompactNumber, formatCurrency } from "@zaip-ai/dashboard-ui";
+import { useEffect, useState } from "react";
+import { formatOperationDuration } from "./operation-duration.js";
+
+export type DeveloperAttributionRow = {
+  account_id: string;
+  login_snapshot: string | null;
+  status_counts: Record<string, number> | null;
+  type_counts: Record<string, number> | null;
+  risk_counts: Record<string, number> | null;
+  task_count: number;
+  completed_task_count: number;
+  total_duration_ms: number | null;
+  total_tokens: number | null;
+  total_cost_brl: number | null;
+};
+
+type DeveloperCopy = {
+  caption: string;
+  status: string;
+  type: string;
+  risk: string;
+  loading: string;
+  empty: string;
+  error: string;
+  developer: string;
+  cost: string;
+  tasks: string;
+  completedTasks: string;
+  duration: string;
+  tokens: string;
+};
+
+function developerCopy(locale: "pt-BR" | "en-US"): DeveloperCopy {
+  return locale === "pt-BR"
+    ? {
+        caption: "Custos e entregas por desenvolvedor",
+        loading: "Carregando desenvolvedores…",
+        empty: "Nenhum dado disponível.",
+        error: "Não foi possível carregar desenvolvedores.",
+        developer: "Desenvolvedor",
+        status: "Status",
+        type: "Tipo",
+        risk: "Risco",
+        tasks: "Tarefas",
+        completedTasks: "Tarefas Concluídas",
+        duration: "Tempo",
+        tokens: "Tokens",
+        cost: "Custo",
+      }
+    : {
+        caption: "Cost and delivery by developer",
+        loading: "Loading developers…",
+        empty: "No data available.",
+        error: "Could not load developers.",
+        developer: "Developer",
+        status: "Status",
+        type: "Type",
+        risk: "Risk",
+        tasks: "Tasks",
+        completedTasks: "Completed Tasks",
+        duration: "Time",
+        tokens: "Tokens",
+        cost: "Cost",
+      };
+}
+
+function distributionLabel(value: Record<string, number> | null, locale: "pt-BR" | "en-US") {
+  if (value === null || Object.keys(value).length === 0)
+    return locale === "pt-BR" ? "Indisponível" : "Unavailable";
+  const labels: Record<string, string> =
+    locale === "pt-BR"
+      ? {
+          task: "Tarefa",
+          "standalone-task": "Tarefa avulsa",
+          standard: "Padrão",
+          critical: "Crítico",
+          lite: "Leve",
+        }
+      : {
+          task: "Task",
+          "standalone-task": "Standalone task",
+          standard: "Standard",
+          critical: "Critical",
+          lite: "Lite",
+        };
+  return Object.entries(value)
+    .map(([key, count]) => `${labels[key] ?? key}: ${count}`)
+    .join(" · ");
+}
+
+/** Operations-only table. Distributions are canonical work-item facts, never defaults. */
+export function DeveloperAttributionTable({
+  locale,
+  rows,
+}: {
+  locale: "pt-BR" | "en-US";
+  rows: readonly DeveloperAttributionRow[];
+}) {
+  const copy = developerCopy(locale);
+  return (
+    <div className="developer-attribution-table">
+      <DataTable
+        columns={[
+          {
+            key: "developer",
+            label: copy.developer,
+            render: (row) => (
+              <>
+                <strong>{row.login_snapshot ?? row.account_id}</strong>
+                <br />
+                <small>#{row.account_id}</small>
+              </>
+            ),
+            sortValue: (row) => row.login_snapshot ?? row.account_id,
+          },
+          {
+            key: "status",
+            label: copy.status,
+            render: (row) => distributionLabel(row.status_counts, locale),
+            sortValue: (row) => distributionLabel(row.status_counts, locale),
+          },
+          {
+            key: "type",
+            label: copy.type,
+            render: (row) => distributionLabel(row.type_counts, locale),
+            sortValue: (row) => distributionLabel(row.type_counts, locale),
+          },
+          {
+            key: "risk",
+            label: copy.risk,
+            render: (row) => distributionLabel(row.risk_counts, locale),
+            sortValue: (row) => distributionLabel(row.risk_counts, locale),
+          },
+          {
+            key: "tasks",
+            label: copy.tasks,
+            align: "right",
+            render: (row) => row.task_count,
+            sortValue: (row) => row.task_count,
+          },
+          {
+            key: "completed-tasks",
+            label: copy.completedTasks,
+            align: "right",
+            render: (row) => row.completed_task_count,
+            sortValue: (row) => row.completed_task_count,
+          },
+          {
+            key: "duration",
+            label: copy.duration,
+            align: "right",
+            render: (row) => formatOperationDuration(row.total_duration_ms, locale),
+            sortValue: (row) => row.total_duration_ms,
+          },
+          {
+            key: "tokens",
+            label: copy.tokens,
+            align: "right",
+            render: (row) =>
+              row.total_tokens === null
+                ? locale === "pt-BR"
+                  ? "Indisponível"
+                  : "Unavailable"
+                : formatCompactNumber(row.total_tokens, locale),
+            sortValue: (row) => row.total_tokens,
+          },
+          {
+            key: "cost",
+            label: copy.cost,
+            align: "right",
+            render: (row) =>
+              row.total_cost_brl === null
+                ? locale === "pt-BR"
+                  ? "Indisponível"
+                  : "Unavailable"
+                : formatCurrency(row.total_cost_brl, "BRL", locale),
+            sortValue: (row) => row.total_cost_brl,
+          },
+        ]}
+        defaultSort={{ key: "cost", direction: "desc" }}
+        emptyMessage={copy.empty}
+        locale={locale}
+        pageSize={10}
+        rowKey={(row) => row.account_id}
+        rows={rows}
+        scrollLabel={copy.caption}
+        sortable
+      />
+    </div>
+  );
+}
+
+export function DeveloperAttributionPanel({
+  from,
+  to,
+  locale,
+}: {
+  from?: string | undefined;
+  to?: string | undefined;
+  locale: "pt-BR" | "en-US";
+}) {
+  const [state, setState] = useState<{
+    loading: boolean;
+    error: string | null;
+    rows: readonly DeveloperAttributionRow[];
+  }>({ loading: true, error: null, rows: [] });
+  useEffect(() => {
+    const controller = new AbortController();
+    const params = new URLSearchParams();
+    if (from) params.set("from", from);
+    if (to) params.set("to", to);
+    setState((previous) => ({ ...previous, loading: true, error: null }));
+    fetch(`/api/v2/operations/developers${params.size ? `?${params}` : ""}`, {
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json() as Promise<{ rows?: DeveloperAttributionRow[] }>;
+      })
+      .then((payload) => setState({ loading: false, error: null, rows: payload.rows ?? [] }))
+      .catch((error: unknown) => {
+        if ((error as { name?: string }).name !== "AbortError") {
+          setState({
+            loading: false,
+            error: error instanceof Error ? error.message : "unknown",
+            rows: [],
+          });
+        }
+      });
+    return () => controller.abort();
+  }, [from, to]);
+  const copy = developerCopy(locale);
+  if (state.loading)
+    return (
+      <p className="operations-empty" role="status">
+        {copy.loading}
+      </p>
+    );
+  if (state.error)
+    return (
+      <p className="operations-empty" role="alert">
+        {copy.error} {state.error}
+      </p>
+    );
+  return <DeveloperAttributionTable locale={locale} rows={state.rows} />;
+}

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

@@ -9,6 +9,7 @@ import {
 } from "./EntityTables.js";
 import { OperationsEntityPager } from "./OperationsPageNavigation.js";
 import type { OperationsView } from "./operations-page-filters.js";
+import { PagedWorkList, type PagedWorkListRow } from "./PagedWorkList.js";
 import { PeriodSummaryTable } from "./PeriodSummaryTable.js";
 import type { OperationsLocale } from "./status-labels.js";
 import { UnifiedWorkBoard } from "./UnifiedWorkBoard.js";
@@ -43,6 +44,7 @@ export interface OperationsMainContentProps {
   onEntityPageChange?: ((offset: number) => void) | undefined;
   onLoadMoreBoard?: ((stage: WorkStage) => void) | undefined;
   onWorkListTypeChange?: ((kind: WorkTypeFilter) => void) | undefined;
+  onWorkListPageChange?: ((offset: number) => void) | undefined;
   onOpenDocument: WorkBoardProps["onOpenDocument"];
   onOpenTask: WorkBoardProps["onOpenTask"];
   onPriorityChange: WorkBoardProps["onPriorityChange"];
@@ -52,6 +54,18 @@ export interface OperationsMainContentProps {
   specs: WorkBoardProps["specs"];
   summaryPopulation: ComponentProps<typeof PeriodSummaryTable>["data"];
   tasks: WorkBoardProps["tasks"];
+  workListPage?:
+    | {
+        offset: number;
+        limit: number;
+        total: number | null;
+        hasMore: boolean;
+        typeFilter: WorkTypeFilter;
+        rows: readonly PagedWorkListRow[];
+        loading: boolean;
+        error: string | null;
+      }
+    | undefined;
   view: OperationsView;
 }
 
@@ -73,6 +87,7 @@ export function OperationsMainContent({
   onEntityPageChange,
   onLoadMoreBoard,
   onWorkListTypeChange,
+  onWorkListPageChange,
   onOpenDocument,
   onOpenTask,
   onPriorityChange,
@@ -82,6 +97,7 @@ export function OperationsMainContent({
   specs,
   summaryPopulation,
   tasks,
+  workListPage,
   view,
 }: OperationsMainContentProps) {
   return (
@@ -108,19 +124,29 @@ export function OperationsMainContent({
         />
       ) : null}
       {view === "work-list" ? (
-        <UnifiedWorkList
-          allSpecs={data.specs}
-          allTasks={data.tasks}
-          changes={data.changes}
-          locale={locale}
-          onOpenDocument={onOpenDocument}
-          onOpenTask={onOpenTask}
-          prds={prds}
-          runs={data.runs}
-          specs={specs}
-          tasks={tasks}
-          onTypeChange={onWorkListTypeChange}
-        />
+        workListPage ? (
+          <PagedWorkList
+            loading={workListPage.loading}
+            locale={locale}
+            onPageChange={(offset) => onWorkListPageChange?.(offset)}
+            onTypeChange={(kind) => onWorkListTypeChange?.(kind)}
+            page={workListPage}
+          />
+        ) : (
+          <UnifiedWorkList
+            allSpecs={data.specs}
+            allTasks={data.tasks}
+            changes={data.changes}
+            locale={locale}
+            onOpenDocument={onOpenDocument}
+            onOpenTask={onOpenTask}
+            prds={prds}
+            runs={data.runs}
+            specs={specs}
+            tasks={tasks}
+            onTypeChange={onWorkListTypeChange}
+          />
+        )
       ) : null}
       {view === "changes" ? <ChangeTable locale={locale} rows={changes} /> : null}
       {view === "executions" ? (