@zaip-ai/cli 1.0.6 → 1.0.7

package/templates/.agents/dashboard/apps/frontend/src/project-settings-page.css

@@ -0,0 +1,335 @@
+.project-settings-page,
+.project-settings-state {
+  min-height: 100vh;
+  padding: clamp(20px, 4vw, 48px);
+  background: #f5f7fb;
+  color: #0f172a;
+}
+
+.project-settings-page form,
+.project-settings-state > * {
+  width: min(1440px, 100%);
+  margin-inline: auto;
+}
+
+.project-settings-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.project-settings-header p,
+.project-settings-state p {
+  margin: 0 0 8px;
+  color: #006b91;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.project-settings-header h1,
+.project-settings-state h1 {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  line-height: 1.15;
+  letter-spacing: -0.035em;
+}
+
+.project-settings-header > div > span {
+  display: block;
+  max-width: 760px;
+  margin-top: 10px;
+  color: #526176;
+  line-height: 1.65;
+}
+
+.project-settings-back,
+.project-settings-footer button,
+.project-settings-state button {
+  min-height: 44px;
+  border: 1px solid rgba(0, 176, 240, 0.45);
+  border-radius: 999px;
+  padding: 10px 20px;
+  background: transparent;
+  color: #006b91;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+}
+
+.project-settings-footer button {
+  border-color: transparent;
+  background: linear-gradient(135deg, #00b0f0 0%, #72f4fb 100%);
+  color: #042330;
+}
+
+.project-settings-back:focus-visible,
+.project-settings-footer button:focus-visible,
+.project-settings-state button:focus-visible,
+.project-settings-field input:focus-visible,
+.project-settings-field select:focus-visible,
+.project-settings-field textarea:focus-visible,
+.project-settings-toggle input:focus-visible + span {
+  outline: 3px solid rgba(0, 176, 240, 0.42);
+  outline-offset: 3px;
+}
+
+.project-settings-message,
+.project-settings-feature {
+  margin-bottom: 20px;
+  border-radius: 16px;
+  padding: 16px 18px;
+}
+
+.project-settings-message.is-error {
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.project-settings-message.is-success {
+  border: 1px solid rgba(22, 163, 74, 0.3);
+  background: #f0fdf4;
+  color: #166534;
+}
+
+.project-settings-feature {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  border: 1px solid rgba(0, 176, 240, 0.34);
+  background: rgba(0, 176, 240, 0.08);
+}
+
+.project-settings-feature h2,
+.project-settings-feature p {
+  margin: 0;
+}
+
+.project-settings-feature h2 {
+  font-size: 1rem;
+}
+
+.project-settings-feature p {
+  margin-top: 5px;
+  color: #526176;
+}
+
+.project-settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: 18px;
+}
+
+.project-settings-card {
+  overflow: hidden;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
+}
+
+.project-settings-card.is-wide {
+  grid-column: 1 / -1;
+}
+
+.project-settings-card > h2 {
+  margin: 0;
+  border-bottom: 1px solid #dbe4ef;
+  padding: 18px 22px;
+  background: linear-gradient(145deg, rgba(0, 176, 240, 0.08), transparent 72%);
+  font-size: 1rem;
+}
+
+.project-settings-fields {
+  display: grid;
+  gap: 16px;
+  padding: 20px 22px 22px;
+}
+
+.project-settings-fields .project-settings-fields {
+  padding: 0;
+}
+
+.project-settings-fields.two-columns {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.project-settings-field {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.project-settings-field > span {
+  color: #475569;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.project-settings-field input,
+.project-settings-field select,
+.project-settings-field textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid #cbd5e1;
+  border-radius: 16px;
+  padding: 12px 14px;
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+}
+
+.project-settings-field input[readonly] {
+  background: #f8fafc;
+  color: #64748b;
+}
+
+.project-settings-field textarea {
+  resize: vertical;
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.project-settings-field small {
+  color: #64748b;
+  line-height: 1.45;
+}
+
+.project-settings-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  width: fit-content;
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.project-settings-toggle input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.project-settings-toggle > span {
+  position: relative;
+  width: 46px;
+  height: 26px;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  background: #e2e8f0;
+  transition:
+    border-color 0.16s ease,
+    background 0.16s ease;
+}
+
+.project-settings-toggle > span::after {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.24);
+  content: "";
+  transition: transform 0.16s ease;
+}
+
+.project-settings-toggle input:checked + span {
+  border-color: #018abb;
+  background: #00b0f0;
+}
+
+.project-settings-toggle input:checked + span::after {
+  transform: translateX(20px);
+}
+
+.project-settings-toggle strong {
+  color: #334155;
+  font-size: 0.88rem;
+}
+
+.project-settings-fixed {
+  display: grid;
+  gap: 7px;
+  grid-column: 1 / -1;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  padding: 14px 16px;
+  background: #f8fafc;
+}
+
+.project-settings-fixed span {
+  color: #64748b;
+  font-size: 0.82rem;
+  line-height: 1.5;
+}
+
+.project-settings-footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-top: 24px;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  padding: 16px 20px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(12px);
+}
+
+.project-settings-footer span {
+  color: #64748b;
+  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.8rem;
+}
+
+.project-settings-footer button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+@media (max-width: 820px) {
+  .project-settings-header,
+  .project-settings-feature,
+  .project-settings-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .project-settings-grid,
+  .project-settings-fields.two-columns {
+    grid-template-columns: 1fr;
+  }
+
+  .project-settings-card.is-wide {
+    grid-column: auto;
+  }
+
+  .project-settings-back,
+  .project-settings-footer button {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-settings-toggle > span,
+  .project-settings-toggle > span::after {
+    transition: none;
+  }
+}

package/templates/.agents/dashboard/apps/frontend/src/project-settings.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import type { ProjectConfigSettings } from "./dashboard-api.js";
+import { buildProjectSettingsPayload, projectSettingsDraft } from "./project-settings-model.js";
+
+const config: ProjectConfigSettings = {
+  schema_version: 1,
+  zaip: { enabled: true },
+  project: { id: "zaip", name: "ZAIP", timezone: "America/Sao_Paulo" },
+  stack: {
+    profile: "typescript-hono-kysely",
+    overrides: {
+      database: "postgres",
+      languages: {
+        frontend: ["TypeScript"],
+        backend: ["TypeScript"],
+        site: ["Astro"],
+      },
+    },
+  },
+  clients: { codex: true, claude: true },
+  tracking: {
+    enabled: true,
+    currency: "BRL",
+    storage_mode: "tracked_sanitized",
+  },
+};
+
+describe("project settings form mapping", () => {
+  it("separates language fields and preserves arbitrary stack overrides", () => {
+    const draft = projectSettingsDraft(config);
+    const payload = buildProjectSettingsPayload(
+      config,
+      { ...draft.languages, site: "Astro, TypeScript, Astro" },
+      draft.otherOverrides,
+    );
+
+    expect(draft.languages).toEqual({
+      frontend: "TypeScript",
+      backend: "TypeScript",
+      site: "Astro",
+    });
+    expect(payload.stack.overrides).toEqual({
+      database: "postgres",
+      languages: {
+        frontend: ["TypeScript"],
+        backend: ["TypeScript"],
+        site: ["Astro", "TypeScript"],
+      },
+    });
+  });
+
+  it("rejects non-object JSON for additional overrides", () => {
+    expect(() =>
+      buildProjectSettingsPayload(config, { frontend: "", backend: "", site: "" }, "[]"),
+    ).toThrow("objeto JSON");
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/snapshot-coherence.test.ts

@@ -0,0 +1,79 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { loadAtomicCostSnapshot, loadCostViewSnapshot } from "./snapshot-coherence.js";
+
+describe("atomic Cost snapshot loading", () => {
+  it("keeps Operations, Cost, and cards on one source generation while the source moves", async () => {
+    let sourceGeneration = 1;
+    const snapshot = await loadAtomicCostSnapshot(async () => {
+      const generation = sourceGeneration;
+      sourceGeneration += 1;
+      return {
+        operations: { generation, cardDurationMs: generation * 100 },
+        costs: { generation, periodDurationMs: generation * 100 },
+      };
+    });
+
+    expect(snapshot.operations).toEqual({ generation: 1, cardDurationMs: 100 });
+    expect(snapshot.costs).toEqual({ generation: 1, periodDurationMs: 100 });
+    expect(sourceGeneration).toBe(2);
+  });
+
+  it("routes Cost refreshes through the atomic snapshot instead of sequential endpoints", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    expect(app).toContain("loadAtomicCostSnapshot(() => api.snapshot(currency, period))");
+    expect(app).not.toContain("const nextCosts = await api.costMonitor(currency, period);");
+  });
+
+  it("allows only the atomic snapshot to write Cost-view Operations in either completion order", async () => {
+    for (const detailCompletesFirst of [true, false]) {
+      const snapshot = deferred<{ operations: number; costs: number }>();
+      const independentDetails = deferred<number>();
+      const writes: string[] = [];
+      const pending = loadCostViewSnapshot(
+        () => snapshot.promise,
+        (value) => writes.push(`operations:${value.operations}`, `costs:${value.costs}`),
+      );
+
+      if (detailCompletesFirst) independentDetails.resolve(2);
+      await Promise.resolve();
+      expect(writes).toEqual([]);
+
+      snapshot.resolve({ operations: 1, costs: 1 });
+      await pending;
+      if (!detailCompletesFirst) independentDetails.resolve(2);
+      await Promise.resolve();
+
+      expect(writes).toEqual(["operations:1", "costs:1"]);
+    }
+  });
+
+  it("does not start an independent details load when selecting Cost", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    const costSelection = app.slice(
+      app.indexOf('if (nextView === "cost-monitor")'),
+      app.indexOf('if (nextView === "traceability")'),
+    );
+    expect(costSelection).toContain("void loadCosts();");
+    expect(costSelection).not.toContain("loadOperationsDetails");
+  });
+
+  it("shares a silent prefetch with the click and drops it on key change or failure", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    expect(app).toContain("const costPrefetch = useRef");
+    expect(app).toContain(
+      "prefetched?.key === costSnapshotKey ? prefetched.promise : api.snapshot(currency, period)",
+    );
+    expect(app).toContain("void promise.catch(() =>");
+    expect(app).toContain("costPrefetch.current = null;");
+    expect(app).toContain('setLoadingArea("costs")');
+  });
+});
+
+function deferred<Value>() {
+  let resolve!: (value: Value) => void;
+  const promise = new Promise<Value>((nextResolve) => {
+    resolve = nextResolve;
+  });
+  return { promise, resolve };
+}

package/templates/.agents/dashboard/apps/frontend/src/snapshot-coherence.ts

@@ -0,0 +1,17 @@
+/**
+ * Cost is always paired with the Operations population returned by the same
+ * server snapshot. Never reconstruct this pair with sequential endpoints.
+ */
+export async function loadAtomicCostSnapshot<
+  Snapshot extends { operations: unknown; costs: unknown },
+>(readSnapshot: () => Promise<Snapshot>): Promise<Snapshot> {
+  return readSnapshot();
+}
+
+/** Cost-view selection has one writer: the atomic snapshot. */
+export async function loadCostViewSnapshot<Snapshot>(
+  readSnapshot: () => Promise<Snapshot>,
+  applySnapshot: (snapshot: Snapshot) => void,
+): Promise<void> {
+  applySnapshot(await readSnapshot());
+}