@zaip-ai/cli 1.0.7 → 1.3.0

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

@@ -1,5 +1,6 @@
 .project-settings-page,
 .project-settings-state {
+  color-scheme: light;
   min-height: 100vh;
   padding: clamp(20px, 4vw, 48px);
   background: #f5f7fb;
@@ -7,11 +8,48 @@
 }
 
 .project-settings-page form,
-.project-settings-state > * {
+.project-settings-state-card {
   width: min(1440px, 100%);
   margin-inline: auto;
 }
 
+.project-settings-state {
+  display: grid;
+  place-items: center;
+}
+
+.project-settings-state-card {
+  display: grid;
+  gap: 12px;
+  justify-items: center;
+  max-width: 420px;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  padding: clamp(32px, 6vw, 48px);
+  background: #fff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+  text-align: center;
+}
+
+.project-settings-loader {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(0, 176, 240, 0.18);
+  border-top-color: #00b0f0;
+  border-radius: 50%;
+  animation: project-settings-spin 0.8s linear infinite;
+}
+
+.project-settings-state-card h1 {
+  max-width: 18ch;
+  font-size: clamp(1.75rem, 5vw, 2.25rem);
+}
+
+.project-settings-state-card button {
+  width: auto;
+  margin-top: 12px;
+}
+
 .project-settings-header {
   display: flex;
   align-items: flex-start;
@@ -22,7 +60,7 @@
 
 .project-settings-header p,
 .project-settings-state p {
-  margin: 0 0 8px;
+  margin: 0;
   color: #006b91;
   font-size: 0.75rem;
   font-weight: 700;
@@ -114,6 +152,38 @@
   font-size: 1rem;
 }
 
+.project-settings-summary {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.project-settings-metric {
+  display: grid;
+  gap: 4px;
+  min-height: 94px;
+  align-content: center;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  padding: 14px 16px;
+  background: linear-gradient(145deg, rgba(0, 176, 240, 0.08), #fff 72%);
+}
+
+.project-settings-metric strong {
+  color: #0f172a;
+  font-size: 1.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+.project-settings-metric span {
+  color: #526176;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
 .project-settings-feature p {
   margin-top: 5px;
   color: #526176;
@@ -124,6 +194,7 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: start;
   gap: 18px;
+  margin-top: 32px;
 }
 
 .project-settings-card {
@@ -138,6 +209,14 @@
   grid-column: 1 / -1;
 }
 
+.project-identity-card .project-settings-fields {
+  grid-template-columns: minmax(110px, 0.55fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(
+      260px,
+      1.2fr
+    );
+  align-items: end;
+}
+
 .project-settings-card > h2 {
   margin: 0;
   border-bottom: 1px solid #dbe4ef;
@@ -160,6 +239,271 @@
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.project-stack-guide {
+  margin: 0 22px;
+  border-left: 3px solid #00b0f0;
+  padding: 2px 0 2px 12px;
+  color: #526176;
+  line-height: 1.5;
+}
+
+.project-stack-editor {
+  display: grid;
+  gap: 22px;
+  padding: 20px 22px 22px;
+}
+
+.project-stack-editor > section {
+  display: grid;
+  gap: 10px;
+}
+
+.project-stack-editor h3 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.project-stack-table {
+  overflow: hidden;
+  border: 1px solid #dbe4ef;
+  border-radius: 14px;
+  background: #fff;
+}
+
+.project-stack-table-head,
+.project-stack-row {
+  display: grid;
+  grid-template-columns: minmax(170px, 0.9fr) minmax(170px, 1fr) minmax(120px, 0.55fr) minmax(
+      250px,
+      1.35fr
+    );
+  gap: 10px;
+  align-items: center;
+  padding: 10px 12px;
+}
+
+.project-stack-table-head {
+  background: #f1f5f9;
+  color: #526176;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.project-stack-row + .project-stack-row {
+  border-top: 1px solid #e8eef5;
+}
+
+.project-stack-row strong {
+  color: #334155;
+  font-size: 0.78rem;
+}
+
+.project-stack-row input {
+  min-width: 0;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 9px 10px;
+  background-color: #f8fafc;
+  color: #0f172a;
+  caret-color: #018abb;
+  font: inherit;
+  font-size: 0.82rem;
+  -webkit-text-fill-color: #0f172a;
+}
+
+.project-stack-row input::placeholder {
+  color: #94a3b8;
+  opacity: 1;
+  -webkit-text-fill-color: #94a3b8;
+}
+
+.project-stack-row input:hover {
+  border-color: #a9bfd3;
+  background-color: #fff;
+}
+
+.project-stack-row input:focus-visible {
+  border-color: #00b0f0;
+  background-color: #fff;
+  outline: 3px solid rgba(0, 176, 240, 0.2);
+  outline-offset: 1px;
+}
+
+.project-stack-row input:-webkit-autofill,
+.project-stack-row input:-webkit-autofill:hover,
+.project-stack-row input:-webkit-autofill:focus {
+  box-shadow: 0 0 0 1000px #f8fafc inset;
+  -webkit-text-fill-color: #0f172a;
+}
+
+.project-stack-format-help {
+  display: grid;
+  gap: 5px;
+  border-radius: 12px;
+  padding: 12px 14px;
+  background: #eff8ff;
+  color: #3f5268;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.project-stack-format-help p {
+  margin: 0;
+}
+
+.project-settings-advanced {
+  margin: 0 22px 22px;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  padding: 0 16px;
+}
+
+.project-stack-architecture {
+  margin: 0 22px 22px;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  padding: 16px;
+  background: #f8fafc;
+}
+
+.project-stack-architecture h3 {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+}
+
+.project-stack-architecture > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-stack-architecture article {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.project-stack-architecture article strong {
+  color: #334155;
+  font-size: 0.78rem;
+}
+
+.project-stack-architecture article span {
+  color: #526176;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.project-stack-versions {
+  margin: 0 22px 22px;
+}
+
+.project-stack-versions h3 {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+}
+
+.project-stack-versions > div {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.project-stack-versions article {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "identity badge"
+    "source source";
+  gap: 7px 12px;
+  align-items: start;
+  min-width: 0;
+  border: 1px solid #dbe4ef;
+  border-radius: 12px;
+  padding: 9px 12px;
+  background: #f8fafc;
+}
+
+.project-stack-version-identity {
+  display: flex;
+  grid-area: identity;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.project-stack-version-identity strong {
+  min-width: 0;
+  color: #334155;
+  font-size: 0.8rem;
+}
+
+.project-stack-version-identity code {
+  flex: none;
+  min-width: 0;
+  color: #0f172a;
+  font-size: 0.8rem;
+  overflow-wrap: anywhere;
+}
+
+.project-stack-versions article small {
+  grid-area: source;
+  min-width: 0;
+  color: #64748b;
+  font-size: 0.68rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.project-stack-versions article span {
+  grid-area: badge;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 3px 6px;
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+.project-stack-versions .is-exact {
+  background: #f0fdf4;
+  color: #166534;
+}
+.project-stack-versions .is-constraint {
+  background: #fff7ed;
+  color: #9a3412;
+}
+.project-stack-versions .is-unavailable {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.project-settings-advanced summary {
+  min-height: 48px;
+  padding-top: 15px;
+  color: #334155;
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.project-settings-advanced .project-settings-field {
+  padding-bottom: 16px;
+}
+
+.project-settings-guidance {
+  display: grid;
+  gap: 10px;
+  margin: 20px 22px 0;
+  border-left: 3px solid #00b0f0;
+  padding: 4px 0 4px 14px;
+  color: #526176;
+  line-height: 1.55;
+}
+
+.project-settings-guidance p {
+  margin: 0;
+}
+
 .project-settings-field {
   display: grid;
   gap: 8px;
@@ -203,6 +547,19 @@
   line-height: 1.45;
 }
 
+.project-settings-toggle-field {
+  display: grid;
+  gap: 2px;
+  width: fit-content;
+  max-width: 680px;
+}
+
+.project-settings-toggle-field > small {
+  padding-left: 57px;
+  color: #64748b;
+  line-height: 1.45;
+}
+
 .project-settings-toggle {
   display: inline-flex;
   align-items: center;
@@ -276,6 +633,55 @@
   line-height: 1.5;
 }
 
+.project-overview {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.project-overview-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid #dbe4ef;
+  border-radius: 16px;
+  padding: 14px 16px;
+  background: #f8fafc;
+}
+
+.project-overview-item > div {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.project-overview-item code {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-overview-item > span {
+  flex: none;
+  border-radius: 999px;
+  padding: 4px 8px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.project-overview-item > span.is-available {
+  background: #f0fdf4;
+  color: #166534;
+}
+
+.project-overview-item > span.is-unavailable {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
 .project-settings-footer {
   position: sticky;
   bottom: 0;
@@ -304,6 +710,12 @@
   opacity: 0.65;
 }
 
+@media (max-width: 1100px) {
+  .project-identity-card .project-settings-fields {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 820px) {
   .project-settings-header,
   .project-settings-feature,
@@ -313,8 +725,65 @@
   }
 
   .project-settings-grid,
-  .project-settings-fields.two-columns {
+  .project-settings-fields.two-columns,
+  .project-identity-card .project-settings-fields,
+  .project-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .project-settings-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .project-stack-architecture > div {
+    grid-template-columns: 1fr;
+  }
+
+  .project-stack-versions article {
+    grid-template-areas:
+      "identity badge"
+      "source source";
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 6px 10px;
+    align-items: start;
+    padding: 10px 12px;
+  }
+
+  .project-stack-versions > div {
+    grid-template-columns: 1fr;
+  }
+
+  .project-stack-versions article span {
+    align-self: start;
+  }
+
+  .project-stack-versions article small {
+    text-align: left;
+  }
+
+  .project-stack-table {
+    display: grid;
+    gap: 12px;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+  }
+
+  .project-stack-table-head {
+    display: none;
+  }
+
+  .project-stack-row {
     grid-template-columns: 1fr;
+    gap: 8px;
+    border: 1px solid #dbe4ef;
+    border-radius: 12px;
+    padding: 12px;
+    background: #fff;
+  }
+
+  .project-stack-row + .project-stack-row {
+    border-top: 1px solid #dbe4ef;
   }
 
   .project-settings-card.is-wide {
@@ -332,4 +801,14 @@
   .project-settings-toggle > span::after {
     transition: none;
   }
+
+  .project-settings-loader {
+    animation: none;
+  }
+}
+
+@keyframes project-settings-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

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

@@ -1,15 +1,22 @@
 import { describe, expect, it } from "vitest";
 import type { ProjectConfigSettings } from "./dashboard-api.js";
-import { buildProjectSettingsPayload, projectSettingsDraft } from "./project-settings-model.js";
+import {
+  buildProjectSettingsPayload,
+  projectSettingsDraft,
+  shortFrameworkVersion,
+} 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",
+    id: "zaip-aios-stack",
     overrides: {
       database: "postgres",
+      architecture: {
+        backend_data_and_managed_services: ["Supabase"],
+      },
       languages: {
         frontend: ["TypeScript"],
         backend: ["TypeScript"],
@@ -26,32 +33,92 @@ const config: ProjectConfigSettings = {
 };
 
 describe("project settings form mapping", () => {
-  it("separates language fields and preserves arbitrary stack overrides", () => {
+  it("renders a canonical framework SemVer as a short major.minor label", () => {
+    expect(shortFrameworkVersion("1.3.0")).toBe("v1.3");
+    expect(shortFrameworkVersion("v1.3.0")).toBe("v1.3");
+    expect(shortFrameworkVersion("1.0")).toBeNull();
+  });
+
+  it("maps itemized components, derives language summaries, and preserves arbitrary 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",
+    const components = {
+      ...draft.components,
+      site_framework: { name: "Astro", version: "5.1.2", reference: "npm:astro" },
+    };
+    const payload = buildProjectSettingsPayload(config, components, draft.otherOverrides);
+
+    expect(draft.components.backend_runtime).toEqual({
+      name: "Node.js",
+      version: "",
+      reference: "",
     });
     expect(payload.stack.overrides).toEqual({
       database: "postgres",
+      architecture: {
+        backend_data_and_managed_services: ["Supabase"],
+      },
+      components,
       languages: {
-        frontend: ["TypeScript"],
-        backend: ["TypeScript"],
-        site: ["Astro", "TypeScript"],
+        frontend: ["React", "TypeScript", "Vite", "Cloudflare Pages"],
+        backend: [
+          "TypeScript",
+          "Node.js",
+          "Hono",
+          "Kysely",
+          "PostgreSQL via Supabase",
+          "Supabase Auth + Storage",
+          "Redis",
+          "BullMQ",
+          "Hostinger VPS",
+        ],
+        site: ["Astro", "TypeScript", "React Islands", "Vite", "Cloudflare Pages"],
       },
     });
+    expect(payload.stack.id).toBe("zaip-aios-stack");
   });
 
   it("rejects non-object JSON for additional overrides", () => {
     expect(() =>
-      buildProjectSettingsPayload(config, { frontend: "", backend: "", site: "" }, "[]"),
+      buildProjectSettingsPayload(config, projectSettingsDraft(config).components, "[]"),
     ).toThrow("objeto JSON");
   });
+
+  it("rejects floating or latest versions", () => {
+    const components = projectSettingsDraft(config).components;
+    expect(() =>
+      buildProjectSettingsPayload(
+        config,
+        {
+          ...components,
+          backend_runtime: { ...components.backend_runtime, version: ">=22" },
+        },
+        "{}",
+      ),
+    ).toThrow("deve ser exata");
+  });
+
+  it("keeps execution and assurance settings in the save payload", () => {
+    const configured: ProjectConfigSettings = {
+      ...config,
+      execution: {
+        runtime: "autonomous",
+        autonomous: {
+          provider: "claude",
+          model: "test-model",
+          max_parallelism: 4,
+          lease_ms: 120_000,
+        },
+      },
+      assurance: {
+        version: 1,
+        standard_depth: "elevated",
+        require_final_commit: false,
+      },
+    };
+    const draft = projectSettingsDraft(configured);
+    const payload = buildProjectSettingsPayload(configured, draft.components, draft.otherOverrides);
+
+    expect(payload.execution).toEqual(configured.execution);
+    expect(payload.assurance).toEqual(configured.assurance);
+  });
 });