@zaip-ai/cli 1.0.7 → 1.0.8

package/templates/.agents/dashboard/apps/frontend/src/operations-entity-page-projection.test.ts

@@ -0,0 +1,126 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import { describe, expect, it } from "vitest";
+import type { OperationsEntityPage } from "./dashboard-api.js";
+import { projectEntityPage } from "./operations-entity-page-projection.js";
+
+describe("projectEntityPage", () => {
+  it("preserves an explicit lifecycle elapsed field without replacing observed duration", () => {
+    const page = {
+      kind: "executions",
+      offset: 0,
+      limit: 100,
+      total: 1,
+      aggregation: "canonical_entity",
+      aggregate_complete: true,
+      rows: [
+        {
+          id: "EXEC-1",
+          started_at: "2026-08-01T10:00:00Z",
+          finished_at: "2026-08-01T12:00:00Z",
+          task_id: "TASK-1",
+          execution_id: "EXEC-1",
+          conversation_id: null,
+          parent_run_id: null,
+          run_kind: "run",
+          phase: "execution",
+          status: "completed",
+          duration_ms: 60_000,
+          lifecycle_elapsed_ms: 7_200_000,
+          total_tokens: 42,
+          cost: 0.5,
+          currency: "BRL",
+        },
+      ],
+    } satisfies OperationsEntityPage;
+
+    const projected = projectEntityPage(
+      { runs: [], executions: [] } as unknown as OperationsProjection,
+      "executions",
+      page,
+    );
+    expect((projected.runs[0] as { lifecycle_elapsed_ms?: number }).lifecycle_elapsed_ms).toBe(
+      7_200_000,
+    );
+    expect(
+      (projected.executions[0] as { lifecycle_elapsed_ms?: number }).lifecycle_elapsed_ms,
+    ).toBe(7_200_000);
+    expect(projected.runs[0]?.source_duration_ms).toBe(60_000);
+  });
+
+  it("preserves delegated invocation identity and auditable pricing columns", () => {
+    const page = {
+      kind: "runs",
+      offset: 0,
+      limit: 100,
+      total: 1,
+      rows: [
+        {
+          id: "AINV-CHILD",
+          started_at: "2026-08-12T12:00:00Z",
+          finished_at: null,
+          task_id: "TASK-1",
+          execution_id: "EXEC-1",
+          conversation_id: "CONV-1",
+          parent_run_id: "AINV-ROOT",
+          run_kind: "subrun",
+          run_purpose: "execution",
+          phase: "execution",
+          status: "completed",
+          agent: "zaip-agent-builder",
+          provider: "openai",
+          model: "gpt-5.6-terra",
+          reasoning_effort: "high",
+          service_tier: "default",
+          duration_ms: 120_000,
+          source_duration_ms: null,
+          duration_provenance: "estimated",
+          llm_call_count: 3,
+          input_tokens: 1_000,
+          cached_input_tokens: 600,
+          uncached_input_tokens: 400,
+          output_tokens: 200,
+          reasoning_tokens: 50,
+          total_tokens: 1_200,
+          input_rate_usd_per_million: 2.5,
+          cached_input_rate_usd_per_million: 0.25,
+          output_rate_usd_per_million: 15,
+          context_input_multiplier: 1,
+          context_output_multiplier: 1,
+          speed_cost_multiplier: 1,
+          input_cost_usd: 0.001,
+          cached_input_cost_usd: 0.00015,
+          output_cost_usd: 0.003,
+          reasoning_cost_usd: 0,
+          calculated_cost_usd: 0.00415,
+          cost_usd: 0.00415,
+          cost_variance_usd: 0,
+          fx_rate: 5.45,
+          cost: 0.0226175,
+          currency: "BRL",
+        },
+      ],
+    } satisfies OperationsEntityPage;
+
+    const projected = projectEntityPage(
+      { runs: [], executions: [] } as unknown as OperationsProjection,
+      "runs",
+      page,
+    );
+    const row = projected.runs[0]!;
+    expect(row.run_kind).toBe("subrun");
+    expect(row.run_role).toBe("subagent");
+    expect(row.parent_run_id).toBe("AINV-ROOT");
+    expect(row.duration_ms).toBe(120_000);
+    expect(row.duration_provenance).toBe("estimated");
+    expect(row.usage.total.tokens).toEqual({
+      input: 1_000,
+      cached_input: 600,
+      output: 200,
+      reasoning: 50,
+      total: 1_200,
+    });
+    expect(row.input_cost_usd! + row.cached_input_cost_usd! + row.output_cost_usd!).toBe(
+      row.calculated_cost_usd,
+    );
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/operations-entity-page-projection.ts

@@ -0,0 +1,181 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import type { OperationsEntityPage, OperationsEntityPageKind } from "./dashboard-api.js";
+
+const emptyUsage = {
+  events: 0,
+  tokens: { input: null, cached_input: null, output: null, reasoning: null, total: null },
+  cost: { usd: null, brl: null },
+  coverage: { events: 0, tokens: 0, usd: 0, brl: 0 },
+};
+
+export function projectEntityPage(
+  current: OperationsProjection,
+  kind: OperationsEntityPageKind,
+  page: OperationsEntityPage,
+): OperationsProjection {
+  const runPurpose = (value: string | null | undefined) =>
+    value === "intake" ||
+    value === "orchestration" ||
+    value === "execution" ||
+    value === "review" ||
+    value === "audit" ||
+    value === "finalization"
+      ? value
+      : "execution";
+  const runs = page.rows.map((row) => ({
+    id: row.id,
+    artifact_path: `.agents/records/runs/${row.id}`,
+    status:
+      row.status === "running" || row.status === "failed" || row.status === "cancelled"
+        ? row.status
+        : "completed",
+    phase: row.phase ?? "execution",
+    entrypoint: row.conversation_id !== null ? "conversation" : "task",
+    work_type: "new",
+    run_role: row.run_kind === "subrun" ? "subagent" : "orchestrator",
+    run_kind: row.run_kind ?? "run",
+    run_purpose: runPurpose(row.run_purpose),
+    requires_finalizer: false,
+    parent_run_id: row.parent_run_id,
+    client: row.client ?? "unknown",
+    agent: row.agent ?? "unknown",
+    agent_name: row.agent ?? "unknown",
+    agent_persona: row.agent_persona ?? null,
+    agent_job: row.agent_job ?? null,
+    provider: row.provider ?? null,
+    model: row.model ?? "unknown",
+    reasoning_effort: row.reasoning_effort ?? null,
+    effective_model: row.model ?? null,
+    effective_reasoning_effort: row.reasoning_effort ?? null,
+    effective_config_mixed: row.pricing_mixed ?? false,
+    service_tier: row.service_tier ?? null,
+    call_count: row.llm_call_count ?? null,
+    terminal_call_count: null,
+    failed_call_count: null,
+    cancelled_call_count: null,
+    conversation_id: row.conversation_id ?? row.id,
+    execution_id: row.execution_id,
+    task_id: row.task_id,
+    spec_id: null,
+    prd_id: null,
+    change_id: null,
+    started_at: row.started_at,
+    finished_at: row.finished_at,
+    duration_ms: row.duration_ms,
+    source_duration_ms:
+      row.source_duration_ms === undefined ? row.duration_ms : row.source_duration_ms,
+    duration_provenance:
+      row.duration_provenance === "observed" ||
+      row.duration_provenance === "reconciled" ||
+      row.duration_provenance === "legacy_inferred" ||
+      row.duration_provenance === "estimated"
+        ? row.duration_provenance
+        : "unavailable",
+    llm_call_count: row.llm_call_count ?? null,
+    input_tokens: row.input_tokens ?? null,
+    cached_input_tokens: row.cached_input_tokens ?? null,
+    uncached_input_tokens: row.uncached_input_tokens ?? null,
+    output_tokens: row.output_tokens ?? null,
+    reasoning_tokens: row.reasoning_tokens ?? null,
+    visible_output_tokens: row.visible_output_tokens ?? null,
+    input_rate_usd_per_million: row.input_rate_usd_per_million ?? null,
+    cached_input_rate_usd_per_million: row.cached_input_rate_usd_per_million ?? null,
+    output_rate_usd_per_million: row.output_rate_usd_per_million ?? null,
+    reasoning_rate_usd_per_million: row.reasoning_rate_usd_per_million ?? null,
+    context_input_multiplier: row.context_input_multiplier ?? null,
+    context_output_multiplier: row.context_output_multiplier ?? null,
+    speed_cost_multiplier: row.speed_cost_multiplier ?? null,
+    pricing_scenario: row.pricing_scenario ?? null,
+    standard_cost_usd: row.standard_cost_usd ?? null,
+    speed_uplift_usd: row.speed_uplift_usd ?? null,
+    input_cost_usd: row.input_cost_usd ?? null,
+    cached_input_cost_usd: row.cached_input_cost_usd ?? null,
+    output_cost_usd: row.output_cost_usd ?? null,
+    reasoning_cost_usd: row.reasoning_cost_usd ?? null,
+    calculated_cost_usd: row.calculated_cost_usd ?? null,
+    recorded_cost_usd: row.recorded_cost_usd ?? null,
+    cost_variance_usd: row.cost_variance_usd ?? null,
+    cost_usd: row.cost_usd ?? null,
+    cost_brl: row.currency === "BRL" ? row.cost : null,
+    fx_rate: row.fx_rate ?? null,
+    pricing_segment_count: row.pricing_segment_count ?? null,
+    pricing_mixed: row.pricing_mixed ?? false,
+    pricing_model: row.pricing_model ?? null,
+    pricing_source: row.pricing_source ?? null,
+    ...(row.lifecycle_elapsed_ms === undefined
+      ? {}
+      : { lifecycle_elapsed_ms: row.lifecycle_elapsed_ms }),
+    usage: {
+      conversation: emptyUsage,
+      planning: emptyUsage,
+      execution: {
+        ...emptyUsage,
+        events: row.llm_call_count ?? 0,
+        tokens: {
+          input: row.input_tokens ?? null,
+          cached_input: row.cached_input_tokens ?? null,
+          output: row.output_tokens ?? null,
+          reasoning: row.reasoning_tokens ?? null,
+          total: row.total_tokens,
+        },
+        cost: { usd: row.cost_usd ?? null, brl: row.currency === "BRL" ? row.cost : null },
+      },
+      total: {
+        ...emptyUsage,
+        events: row.llm_call_count ?? 0,
+        tokens: {
+          input: row.input_tokens ?? null,
+          cached_input: row.cached_input_tokens ?? null,
+          output: row.output_tokens ?? null,
+          reasoning: row.reasoning_tokens ?? null,
+          total: row.total_tokens,
+        },
+        cost: { usd: row.cost_usd ?? null, brl: row.currency === "BRL" ? row.cost : null },
+      },
+      new_work: emptyUsage,
+      rework: emptyUsage,
+    },
+  })) as OperationsProjection["runs"];
+  return {
+    ...current,
+    runs,
+    executions:
+      kind === "executions" || kind === "conversations"
+        ? (page.rows.map((row, index) => {
+            const run = runs[index]!;
+            const id = run.execution_id ?? run.conversation_id;
+            const status = row.status ?? "unavailable";
+            return {
+              id,
+              kind: kind === "conversations" ? "interaction" : "delivery",
+              created_at: run.started_at,
+              status,
+              work_status: status,
+              origin:
+                kind === "conversations"
+                  ? { type: "interaction", conversation_id: run.conversation_id }
+                  : { type: "task", task_id: run.task_id ?? "unavailable" },
+              dag: { nodes: [], topological_order: [] },
+              result: null,
+              artifact_path: `.agents/records/executions/${id}`,
+              agent_call_count: 0,
+              orchestrator_run_count: 0,
+              subagent_run_count: 0,
+              finalizer_run_count: 0,
+              finalized_task_count: 0,
+              llm_call_count: 0,
+              llm_call_count_complete: false,
+              task_count: 0,
+              spec_count: 0,
+              prd_count: 0,
+              duration_ms: run.source_duration_ms ?? null,
+              ...(row.lifecycle_elapsed_ms === undefined
+                ? {}
+                : { lifecycle_elapsed_ms: row.lifecycle_elapsed_ms }),
+              total_tokens: run.usage.total.tokens.total,
+              cost_brl: run.usage.total.cost.brl,
+            };
+          }) as OperationsProjection["executions"])
+        : current.executions,
+  };
+}

package/templates/.agents/dashboard/apps/frontend/src/operations-period-contract.test.ts

@@ -0,0 +1,138 @@
+import { describe, expect, it } from "vitest";
+import {
+  isCurrentOperationsPageRequest,
+  isCurrentOperationsPeriodRequest,
+  isCurrentPeriodTransition,
+  mergeBoardPages,
+} from "./App.js";
+import { requestPeriodForOperations } from "./operations-period.js";
+
+describe("Operations period request contract", () => {
+  const range = { start: "2026-08-07", end: "2026-08-08" };
+
+  it.each([
+    "today",
+    "yesterday",
+    "this-week",
+    "last-week",
+    "this-month",
+    "last-month",
+    "last-3-months",
+    "last-6-months",
+    "this-year",
+    "last-year",
+    "custom",
+  ] as const)("sends the displayed bounds for %s", (preset) => {
+    expect(requestPeriodForOperations({ preset, range })).toEqual({
+      from: "2026-08-07",
+      to: "2026-08-08",
+    });
+  });
+
+  it("keeps a Sao Paulo date-only range intact across UTC midnight", () => {
+    expect(
+      requestPeriodForOperations({
+        preset: "custom",
+        range: { start: "2026-08-07", end: "2026-08-08" },
+      }),
+    ).toEqual({ from: "2026-08-07", to: "2026-08-08" });
+    expect(requestPeriodForOperations({ preset: "all", range })).toEqual({ from: null, to: null });
+  });
+
+  it("keeps the latest Today/Yesterday selection when rapid requests resolve out of order", () => {
+    const today = { start: "2026-08-08", end: "2026-08-08" };
+    const yesterday = { start: "2026-08-07", end: "2026-08-07" };
+    const selected = { from: yesterday.start, to: yesterday.end };
+
+    expect(requestPeriodForOperations({ preset: "today", range: today })).toEqual({
+      from: today.start,
+      to: today.end,
+    });
+    expect(requestPeriodForOperations({ preset: "yesterday", range: yesterday })).toEqual(selected);
+    expect(
+      isCurrentOperationsPeriodRequest(1, 2, { from: today.start, to: today.end }, selected),
+    ).toBe(false);
+    expect(isCurrentOperationsPeriodRequest(2, 2, selected, selected)).toBe(true);
+    expect(isCurrentPeriodTransition(1, 2)).toBe(false);
+    expect(isCurrentPeriodTransition(2, 2)).toBe(true);
+  });
+
+  it("does not let an older reply hide the newer period overlay", () => {
+    let overlayVisible = true;
+    const settle = (responseVersion: number, activeVersion: number) => {
+      if (isCurrentPeriodTransition(responseVersion, activeVersion)) overlayVisible = false;
+    };
+
+    settle(1, 2);
+    expect(overlayVisible).toBe(true);
+    settle(2, 2);
+    expect(overlayVisible).toBe(false);
+  });
+
+  it("applies only C when A -> B -> C replies complete in reverse order", async () => {
+    const a = { from: "2026-06-01", to: "2026-06-30" };
+    const b = { from: "2026-07-01", to: "2026-07-31" };
+    const c = { from: "2026-08-01", to: "2026-08-31" };
+    const pending = [a, b, c].map(() => Promise.withResolvers<void>());
+    const applied: string[] = [];
+    const reply = async (version: number, period: typeof a, label: string, slot: number) => {
+      await pending[slot]!.promise;
+      if (isCurrentOperationsPeriodRequest(version, 3, period, c)) applied.push(label);
+    };
+    const requests = [reply(1, a, "A", 0), reply(2, b, "B", 1), reply(3, c, "C", 2)];
+
+    pending[2]!.resolve();
+    pending[1]!.resolve();
+    pending[0]!.resolve();
+    await Promise.all(requests);
+
+    expect(applied).toEqual(["C"]);
+  });
+
+  it("aborts and rejects an older entity filter/page reply", async () => {
+    const pending = [Promise.withResolvers<void>(), Promise.withResolvers<void>()];
+    const oldRequest = new AbortController();
+    const currentRequest = new AbortController();
+    const applied: string[] = [];
+    const reply = async (
+      version: number,
+      label: string,
+      controller: AbortController,
+      slot: number,
+    ) => {
+      await pending[slot]!.promise;
+      if (isCurrentOperationsPageRequest(version, 2, controller.signal)) applied.push(label);
+    };
+    const requests = [
+      reply(1, "old-filter-page", oldRequest, 0),
+      reply(2, "new-filter-page", currentRequest, 1),
+    ];
+
+    oldRequest.abort();
+    pending[1]!.resolve();
+    pending[0]!.resolve();
+    await Promise.all(requests);
+
+    expect(applied).toEqual(["new-filter-page"]);
+  });
+
+  it("does not replace quick overview charts when a board page arrives", () => {
+    const quick = {
+      prds: [],
+      specs: [],
+      tasks: [],
+      changes: [],
+      summary: { overview_metrics: { partial: false, total_tasks: 5 } },
+    } as any;
+    const board = {
+      prds: [],
+      specs: [],
+      tasks: [{ id: "TASK-1" }],
+      changes: [],
+      overview_metrics: { partial: false, total_tasks: 999 },
+    } as any;
+    expect(mergeBoardPages(quick, [board]).summary.overview_metrics).toEqual(
+      quick.summary.overview_metrics,
+    );
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/operations-period-render.test.ts

@@ -0,0 +1,105 @@
+import { readFileSync } from "node:fs";
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import { OperationsPage } from "@zaip-ai/dashboard-operations/react";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { PeriodTransitionOverlay, PeriodTransitionShell } from "./App.js";
+
+const data = {
+  prds: [],
+  specs: [],
+  tasks: [],
+  changes: [],
+  decisions: [],
+  executions: [],
+  runs: [],
+  filters: {},
+  summary: { source_latest_at: null, periods: { daily: {} } },
+} as unknown as OperationsProjection;
+
+function renderPeriod(preset: "today" | "yesterday", loading = false) {
+  return renderToStaticMarkup(
+    createElement(OperationsPage, {
+      capabilityNavigation: createElement("span"),
+      data,
+      datePreset: preset,
+      dateRange: {
+        start: preset === "today" ? "2026-08-08" : "2026-08-07",
+        end: preset === "today" ? "2026-08-08" : "2026-08-07",
+      },
+      loading,
+      currency: "BRL",
+      locale: "pt-BR",
+      onDateChange: vi.fn(),
+      onLocaleChange: vi.fn(),
+      onOpenDocument: vi.fn(),
+      onOpenTask: vi.fn(async () => false),
+      onPriorityChange: vi.fn(async () => undefined),
+      onRefresh: vi.fn(),
+    }),
+  );
+}
+
+describe("App-owned Operations period render", () => {
+  it("renders Today then Yesterday while loading omits duplicated period controls", () => {
+    const today = renderPeriod("today");
+    const yesterdayLoading = renderPeriod("yesterday", true);
+
+    expect(today).toContain('option value="today" selected=""');
+    expect(yesterdayLoading).not.toContain('aria-label="Período"');
+    expect(yesterdayLoading).not.toContain("operations-loading-period");
+    expect(yesterdayLoading).toContain("operations-content-skeleton");
+    expect(yesterdayLoading).not.toContain("DashboardSkeleton");
+  });
+
+  it("renders the synchronous full-viewport transition overlay accessibly", () => {
+    const overlay = renderToStaticMarkup(createElement(PeriodTransitionOverlay));
+
+    expect(overlay).toContain('class="period-transition-overlay"');
+    expect(overlay).toContain('role="status"');
+    expect(overlay).toContain('aria-live="polite"');
+    expect(overlay).toContain('aria-busy="true"');
+    expect(overlay).toContain('aria-hidden="true"');
+    expect(overlay).toContain("Carregando...");
+  });
+
+  it("makes the complete app shell inert only while the overlay is pending", () => {
+    const active = renderToStaticMarkup(
+      createElement(
+        PeriodTransitionShell,
+        { pending: true },
+        createElement("select", { "aria-label": "background period" }),
+      ),
+    );
+    const restored = renderToStaticMarkup(
+      createElement(
+        PeriodTransitionShell,
+        { pending: false },
+        createElement("select", { "aria-label": "background period" }),
+      ),
+    );
+
+    expect(active).toContain("inert");
+    expect(active).toContain('aria-hidden="true"');
+    expect(restored).not.toContain("inert");
+    expect(restored).not.toContain('aria-hidden="true"');
+  });
+
+  it("uses the design overlay, cyan spinner, and reduced-motion rule", () => {
+    const css = readFileSync(new URL("./period-transition-overlay.css", import.meta.url), "utf8");
+    expect(css).toContain("inset: 0;");
+    expect(css).toContain("#0a0e17");
+    expect(css).toContain("#00b0f0");
+    expect(css).toContain("prefers-reduced-motion: reduce");
+  });
+
+  it("uses the same global loading gate for snapshot, page, and board requests", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    expect(app).toContain("const globalLoadingPending =");
+    expect(app).toContain("loadingArea !== null");
+    expect(app).toContain("entityPage.loading");
+    expect(app).toContain("Object.values(boardStates).some((state) => state.loading)");
+    expect(app).toContain("<PeriodTransitionShell pending={globalLoadingPending}>");
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/operations-period.test.ts

@@ -2,9 +2,12 @@ import { describe, expect, it } from "vitest";
 import { defaultOperationsPeriod, requestPeriodForOperations } from "./operations-period.js";
 
 describe("dashboard default Operations period", () => {
-  it("keeps the complete history unbounded at an August rollover", () => {
-    expect(defaultOperationsPeriod.preset).toBe("all");
-    expect(requestPeriodForOperations(defaultOperationsPeriod)).toEqual({ from: null, to: null });
+  it("opens in This Month with its visible date bounds", () => {
+    expect(defaultOperationsPeriod.preset).toBe("this-month");
+    expect(requestPeriodForOperations(defaultOperationsPeriod)).toEqual({
+      from: defaultOperationsPeriod.range.start,
+      to: defaultOperationsPeriod.range.end,
+    });
   });
 
   it("keeps an explicit Sao Paulo This Month selection bounded", () => {

package/templates/.agents/dashboard/apps/frontend/src/operations-period.ts

@@ -1,17 +1,21 @@
-import type { OperationDatePreset, OperationDateRange } from "@zaip-ai/dashboard-operations/react";
+import {
+  dateRangeForPreset,
+  type OperationDatePreset,
+  type OperationDateRange,
+} from "@zaip-ai/dashboard-operations/react";
 
 export interface OperationsPeriodState {
   preset: OperationDatePreset;
   range: OperationDateRange;
 }
 
-/** The dashboard opens over the complete project history. */
+/** Operations opens on the current Sao Paulo month, like every dashboard tab. */
 export const defaultOperationsPeriod: OperationsPeriodState = {
-  preset: "all",
-  range: { start: "", end: "" },
+  preset: "this-month",
+  range: dateRangeForPreset("this-month"),
 };
 
-/** Only an explicit period selection may add API date bounds. */
+/** Every period other than All Time carries the bounds shown in Operations. */
 export function requestPeriodForOperations(period: OperationsPeriodState): {
   from: string | null;
   to: string | null;

package/templates/.agents/dashboard/apps/frontend/src/overview-status-page.test.ts

@@ -0,0 +1,24 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+
+describe("overview status page loading", () => {
+  it("requests a dedicated stage and kind page instead of reusing the mixed board page", () => {
+    expect(source).toContain("const loadOverviewStatusPage");
+    expect(source).toContain("api.operationsBoard(period, stage, offset, { kind })");
+    expect(source).toContain("kind === \"task\" ? page.tasks : kind === \"spec\" ? page.specs : page.prds");
+  });
+
+  it("keeps a dedicated collection paginated by the loaded typed rows", () => {
+    expect(source).toContain("overviewStatusPages");
+    expect(source).toContain("offset === 0 ? items");
+    expect(source).toContain("...(previous[key]?.items ?? []), ...items");
+  });
+
+  it("loads the classification dialog from its canonical kind and classification page", () => {
+    expect(source).toContain("const loadOverviewClassificationPage");
+    expect(source).toContain("api.operationsClassification(period, kind, classification, offset)");
+    expect(source).toContain("overviewClassificationPages");
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/period-transition-overlay.css

@@ -0,0 +1,44 @@
+.period-transition-overlay {
+  align-items: center;
+  background: #0a0e17;
+  color: #f1f5f9;
+  display: flex;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  inset: 0;
+  justify-content: center;
+  position: fixed;
+  z-index: 9999;
+}
+
+.period-transition-overlay__content {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+}
+
+.period-transition-overlay__spinner {
+  animation: period-transition-spin 800ms linear infinite;
+  border: 3px solid rgba(241, 245, 249, 0.28);
+  border-radius: 999px;
+  border-top-color: #00b0f0;
+  height: 32px;
+  width: 32px;
+}
+
+.period-transition-overlay__label {
+  font-size: clamp(1rem, 3vw, 1.25rem);
+  font-weight: 700;
+}
+
+@keyframes period-transition-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .period-transition-overlay__spinner {
+    animation: none;
+    border-top-color: #00b0f0;
+  }
+}