@zaip-ai/cli 2.2.0 → 3.0.0

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

@@ -1,7 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   defaultOperationsPeriod,
-  isAllTimeDisplayRangeChange,
+  isSameOperationsRequestPeriod,
   requestPeriodForOperations,
 } from "./operations-period.js";
 
@@ -20,17 +20,32 @@ describe("dashboard default Operations period", () => {
     ).toEqual({ from: "2026-07-01", to: "2026-07-31" });
   });
 
-  it("classifies only an All Time to All Time range synchronization as display-only", () => {
+  it("keeps All Time unbounded while distinguishing a bounded selection", () => {
     const allTime = { preset: "all" as const, range: { start: "2026-08-01", end: "2026-09-01" } };
 
     expect(
-      isAllTimeDisplayRangeChange(allTime, {
+      isSameOperationsRequestPeriod(allTime, {
         preset: "all",
         range: { start: "2026-06-02", end: "2026-09-01" },
       }),
     ).toBe(true);
     expect(
-      isAllTimeDisplayRangeChange({ preset: "this-month", range: allTime.range }, allTime),
+      isSameOperationsRequestPeriod({ preset: "this-month", range: allTime.range }, allTime),
+    ).toBe(false);
+  });
+
+  it("does not invalidate a repeated or equivalent bounded period", () => {
+    const current = {
+      preset: "this-month" as const,
+      range: { start: "2026-09-01", end: "2026-09-10" },
+    };
+    expect(isSameOperationsRequestPeriod(current, structuredClone(current))).toBe(true);
+    expect(isSameOperationsRequestPeriod(current, { ...current, preset: "custom" })).toBe(true);
+    expect(
+      isSameOperationsRequestPeriod(current, {
+        ...current,
+        range: { ...current.range, end: "2026-09-11" },
+      }),
     ).toBe(false);
   });
 });

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

@@ -26,10 +26,12 @@ export function requestPeriodForOperations(period: OperationsPeriodState): {
     : { from: period.range.start, to: period.range.end };
 }
 
-/** Updating All Time's factual display bounds must not invalidate its unbounded request. */
-export function isAllTimeDisplayRangeChange(
+/** A presentation-only change must not start a gate without a replacement request. */
+export function isSameOperationsRequestPeriod(
   current: OperationsPeriodState,
   next: OperationsPeriodState,
 ): boolean {
-  return current.preset === "all" && next.preset === "all";
+  const before = requestPeriodForOperations(current);
+  const after = requestPeriodForOperations(next);
+  return before.from === after.from && before.to === after.to;
 }

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

@@ -1,7 +1,7 @@
-import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
+import { readAppCompositionSource } from "./__tests__/app-composition-support.js";
 
-const source = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+const source = readAppCompositionSource();
 
 describe("overview status page loading", () => {
   it("requests a dedicated stage and kind page instead of reusing the mixed board page", () => {

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

@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import {
+  PROJECT_INSTALLATION_AREA_REQUIREMENTS,
+  PROJECT_INSTALLATION_STACK_REQUIREMENTS,
+  summarizeProjectStatus,
+} from "../../../packages/local-runtime/src/project-installation-summary.js";
+import type { ProjectOverview } from "./dashboard-api.js";
+import {
+  projectInstallationStatus,
+  projectSettingsSummaryMetrics,
+} from "./project-installation-status.js";
+
+const stack: Parameters<typeof summarizeProjectStatus>[1] =
+  PROJECT_INSTALLATION_STACK_REQUIREMENTS.map((name) => ({
+    name,
+    version: "1.0.0",
+    configured_version: null,
+    source: "synthetic",
+    verification: "exact",
+    installation: "installed",
+    probe: "verified",
+  }));
+const areas: Parameters<typeof summarizeProjectStatus>[2] =
+  PROJECT_INSTALLATION_AREA_REQUIREMENTS.map((id) => ({
+    id,
+    label: id,
+    artifact: ".agents/" + id + ".md",
+    available: false,
+  }));
+
+describe("projectInstallationStatus consumes the actual runtime contract", () => {
+  it("keeps 10/10 dependencies at 100% when real runtime output has 0/6 documents", () => {
+    const runtime = summarizeProjectStatus("full", stack, areas, "healthy");
+    expect(projectInstallationStatus(runtime)).toMatchObject({
+      profile: "full",
+      health: { state: "healthy" },
+      dependencies: { completed: 10, total: 10, percentage: 100, state: "complete" },
+      documentation: { completed: 0, total: 6, percentage: 0, state: "incomplete" },
+      hasMissingDependencies: false,
+    });
+  });
+
+  it("uses the real lite and dev-lite applicability, not the legacy sixteen items", () => {
+    expect(projectInstallationStatus(summarizeProjectStatus("lite", stack, areas))).toMatchObject({
+      profile: "lite",
+      dependencies: { completed: 2, total: 2, percentage: 100 },
+    });
+    expect(
+      projectInstallationStatus(summarizeProjectStatus("dev-lite", stack, areas)),
+    ).toMatchObject({
+      profile: "dev-lite",
+      dependencies: { completed: 9, total: 9, percentage: 100 },
+    });
+  });
+
+  it("preserves custom unknown, unavailable probes and known missing dependencies separately", () => {
+    expect(projectInstallationStatus(summarizeProjectStatus("custom", stack, areas))).toMatchObject(
+      {
+        profile: "custom",
+        dependencies: { percentage: null, total: null, state: "unknown" },
+        hasMissingDependencies: false,
+      },
+    );
+    const partial = stack.map((item, index) =>
+      index === 0
+        ? { ...item, version: null, probe: "missing" as const }
+        : index === 1
+          ? { ...item, version: null, probe: "unknown" as const }
+          : item,
+    );
+    expect(projectInstallationStatus(summarizeProjectStatus("full", partial, areas))).toMatchObject(
+      {
+        dependencies: { percentage: null, state: "unknown" },
+        hasMissingDependencies: true,
+      },
+    );
+  });
+
+  it("does not infer dependency status from legacy payloads", () => {
+    const legacy: Pick<ProjectOverview, "installation"> = {
+      installation: { completed: 15, total: 16, percent: 93.75, state: "incomplete" },
+    };
+    expect(projectInstallationStatus(legacy)).toMatchObject({
+      health: { state: "unknown" },
+      dependencies: { completed: null, total: null, percentage: null, state: "unknown" },
+      documentation: { percentage: null, state: "unknown" },
+      hasMissingDependencies: false,
+    });
+  });
+
+  it("keeps explicit not-applicable distinct from unknown and zero", () => {
+    const runtime = summarizeProjectStatus("full", stack, areas);
+    expect(
+      projectInstallationStatus({
+        ...runtime,
+        documentation: {
+          available: 0,
+          applicable: 0,
+          missing: 0,
+          unknown: 0,
+          not_applicable: 6,
+          percent: null,
+          state: "not_applicable",
+        },
+      }),
+    ).toMatchObject({ documentation: { percentage: null, state: "not_applicable" } });
+  });
+
+  it("does not render nonfinite or unknown percentages as known values", () => {
+    const runtime = summarizeProjectStatus("full", stack, areas);
+    for (const percent of [Number.NaN, Infinity, -1, 101]) {
+      expect(
+        projectInstallationStatus({
+          ...runtime,
+          dependencies: { ...runtime.dependencies, percent },
+        }).dependencies.percentage,
+      ).toBeNull();
+    }
+    expect(
+      projectInstallationStatus({
+        ...runtime,
+        dependencies: { ...runtime.dependencies, state: "unknown", percent: 0 },
+      }).dependencies.percentage,
+    ).toBeNull();
+  });
+
+  it("keeps regular metrics distinct from both installation dimensions", () => {
+    const metrics: ProjectOverview["metrics"] = [
+      { id: "agents", label: "Agentes", value: 23 },
+      { id: "squads", label: "Squads", value: 6 },
+      { id: "skills", label: "Skills", value: 97 },
+      { id: "rules", label: "Rules", value: 18 },
+      { id: "hooks", label: "Hooks", value: 4 },
+    ];
+    expect(projectSettingsSummaryMetrics(metrics)).toHaveLength(5);
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/project-installation-status.ts

@@ -0,0 +1,66 @@
+import type { ProjectOverview } from "./dashboard-api.js";
+import type { ProjectInstallationDimension } from "./dashboard-project-overview.js";
+
+export type InstallationState =
+  | "complete"
+  | "incomplete"
+  | "unknown"
+  | "unavailable"
+  | "not_applicable";
+
+export type InstallationDimensionStatus = {
+  completed: number | null;
+  total: number | null;
+  percentage: number | null;
+  state: InstallationState;
+};
+
+export type ProjectInstallationStatus = {
+  health: NonNullable<ProjectOverview["health"]>;
+  dependencies: InstallationDimensionStatus;
+  documentation: InstallationDimensionStatus;
+  profile: ProjectOverview["installation_profile"] | null;
+  hasMissingDependencies: boolean;
+};
+
+/** Converts only the new itemized runtime contract; legacy aggregates remain unknown. */
+export function projectInstallationStatus(
+  overview: Pick<
+    ProjectOverview,
+    "installation" | "health" | "dependencies" | "documentation" | "installation_profile"
+  >,
+): ProjectInstallationStatus {
+  return {
+    health: overview.health ?? { state: "unknown", scope: "settings_runtime" },
+    dependencies: dimensionStatus(overview.dependencies, overview.dependencies?.installed),
+    documentation: dimensionStatus(overview.documentation, overview.documentation?.available),
+    profile: overview.installation_profile ?? null,
+    hasMissingDependencies: (nonnegative(overview.dependencies?.missing) ?? 0) > 0,
+  };
+}
+
+export function dimensionStatus(
+  dimension: ProjectInstallationDimension | undefined,
+  completed?: number | null,
+): InstallationDimensionStatus {
+  const state = dimension?.state ?? "unknown";
+  const percentage = nonnegative(dimension?.percent);
+  return {
+    completed: nonnegative(completed),
+    total: nonnegative(dimension?.applicable),
+    percentage:
+      (state === "complete" || state === "incomplete") && percentage !== null && percentage <= 100
+        ? percentage
+        : null,
+    state,
+  };
+}
+
+function nonnegative(value: number | null | undefined): number | null {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+}
+
+export function projectSettingsSummaryMetrics(metrics: ProjectOverview["metrics"]) {
+  // Ignore transitional API payloads so the dedicated installation card remains unique.
+  return metrics.filter((metric) => !["database", "installation"].includes(metric.id as string));
+}

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

@@ -0,0 +1,181 @@
+export type ProjectSettingsLocale = "pt-BR" | "en-US";
+
+export const projectSettingsCopy = {
+  "pt-BR": {
+    eyebrow: "Configurações",
+    title: "Configuração do projeto",
+    intro: "Edite o arquivo central do projeto com validação do schema antes da gravação.",
+    loading: "Carregando…",
+    loadError: "Não foi possível carregar as configurações do projeto.",
+    retry: "Tentar novamente",
+    back: "Voltar ao dashboard",
+    save: "Salvar configurações",
+    saving: "Validando e salvando…",
+    saved: "Configurações salvas e validadas.",
+    framework: "Framework ZAIP-AIOS",
+    frameworkHint: "Ativa ou desativa o framework para este projeto.",
+    identity: "Identidade do projeto",
+    stack: "Stack e linguagens",
+    execution: "Execução",
+    assurance: "Assurance",
+    executionToggleHint:
+      "Grava ou remove o bloco execution. Sem ele, o projeto usa execução manual.",
+    runtimeHint:
+      "Managed gerencia PRDs/SPECs e mantém avulsas diretas. Manual não inicia provider; autonomous permite execução gerenciada também para Task avulsa por comando explícito.",
+    providerHint: "Provider que inicia os agentes da execução autônoma: Codex ou Claude.",
+    autonomyProviderHint:
+      "Autonomy-v1 exige Codex para execução gerenciada. Claude continua disponível em conversas diretas ou no protocolo legado.",
+    executionModelHint:
+      "Modelo-base do runtime autônomo. A política automática de PRD/SPEC ainda pode selecionar um modelo permitido por agente.",
+    parallelismHint:
+      "Teto de agentes simultâneos. O valor efetivo é o menor limite entre projeto, DAG, provider e squad.",
+    leaseHint: "Tempo de lease configurado para o coordenador autônomo.",
+    assuranceToggleHint:
+      "Ativa ou remove os gates de evidência, revisão e qualidade do projeto. Recomenda-se manter ativo.",
+    assuranceVersionHint: "Versão do contrato de assurance. É fixa e somente leitura.",
+    assuranceDepthHint:
+      "Auto ajusta o rigor ao escopo; base exige o conjunto padrão; elevated amplia validações para mudanças mais abrangentes.",
+    finalCommitHint:
+      "Exige que as evidências comprovem o commit final integrado. Sinais de produção ou migração ainda podem exigir isso mesmo quando desativado.",
+    context: "Contexto",
+    overview: "Visão geral do projeto",
+    metricLabels: {
+      agents: "Agentes",
+      squads: "Squads",
+      skills: "Skills",
+      rules: "Rules",
+      hooks: "Hooks",
+    },
+    areaLabels: {
+      brandbook: "Brandbook",
+      design_system: "Design System",
+      software_architecture: "Arquitetura de Software",
+      growth_strategy: "Estratégia de Growth",
+      marketing_strategy: "Estratégia de Marketing",
+      sales_playbook: "Playbook de Sales",
+    },
+    available: "Criado",
+    artifactUnavailable: "Ainda não criado",
+    componentGuide:
+      "Preencha cada responsabilidade separadamente. A versão fica sem prefixos (^, ~, >=) e a referência identifica o pacote, imagem ou serviço.",
+    versionHint: "Versão exata: 22.16.0 ou 17.6. Deixe vazio para serviços sem versão fixada.",
+    referenceHint:
+      "Ex.: npm:hono, docker:node:22.16.0-bookworm-slim, service:supabase ou provider:cloudflare-pages.",
+    overrides: "Opções avançadas (JSON)",
+    overridesHint:
+      "Use apenas fatos técnicos transversais confirmados. Deixe vazio quando não houver exceções.",
+    versions: "Versões detectadas no workspace",
+    exact: "Verificada",
+    constraint: "Requisito",
+    versionUnavailable: "Não encontrada",
+    runtime: "Runtime do Dashboard",
+    installed: "Instalado no projeto",
+    missing: "Ausente no projeto",
+    bundled: "Empacotado no Dashboard",
+    current: "Atual",
+    configured: "Configurado",
+    health: "Saúde",
+    dependencies: "Dependências técnicas",
+    documentation: "Documentação",
+    unknown: "Desconhecido",
+    unavailable: "Indisponível",
+    notApplicable: "Não aplicável",
+    complete: "Completo",
+    incomplete: "Incompleto",
+    incompleteInstallation: "Há dependências técnicas locais ausentes neste computador.",
+    dismiss: "Fechar aviso",
+    contextGuide:
+      "O contexto começa pelas fontes canônicas e inclui somente arquivos relevantes para a tarefa. Saídas geradas são consultadas apenas em setup, release ou checagem de paridade.",
+    contextDomains:
+      "Branding, Marketing, Growth e Sales são usados sob demanda pelos respectivos especialistas, quando houver uma tarefa e artefatos desses domínios. Não os adicione aqui apenas por existirem como capacidades.",
+  },
+  "en-US": {
+    eyebrow: "Settings",
+    title: "Project settings",
+    intro: "Edit the central project file with schema validation before writing.",
+    loading: "Loading…",
+    loadError: "Project settings could not be loaded.",
+    retry: "Try again",
+    back: "Back to dashboard",
+    save: "Save settings",
+    saving: "Validating and saving…",
+    saved: "Settings saved and validated.",
+    framework: "ZAIP-AIOS framework",
+    frameworkHint: "Enable or disable the framework for this project.",
+    identity: "Project identity",
+    stack: "Stack and languages",
+    execution: "Execution",
+    assurance: "Assurance",
+    executionToggleHint:
+      "Writes or removes the execution block. Without it, the project uses manual execution.",
+    runtimeHint:
+      "Managed runs PRDs/SPECs while standalone Tasks stay direct. Manual never starts a provider; autonomous also permits explicitly commanded managed standalone execution.",
+    providerHint: "Provider that starts autonomous execution agents: Codex or Claude.",
+    autonomyProviderHint:
+      "Autonomy-v1 requires Codex for managed execution. Claude remains available for direct conversations or the legacy protocol.",
+    executionModelHint:
+      "Base model for the autonomous runtime. PRD/SPEC automatic policy may still select an allowed model per agent.",
+    parallelismHint:
+      "Maximum simultaneous agents. Effective parallelism is the smallest project, DAG, provider, and squad limit.",
+    leaseHint: "Lease duration configured for the autonomous coordinator.",
+    assuranceToggleHint:
+      "Enables or removes project evidence, review, and quality gates. Keeping it enabled is recommended.",
+    assuranceVersionHint: "Assurance contract version. It is fixed and read-only.",
+    assuranceDepthHint:
+      "Auto adapts rigor to scope; base uses the standard set; elevated expands validation for broader changes.",
+    finalCommitHint:
+      "Requires evidence for the final integrated commit. Production or migration signals may still require it when disabled.",
+    context: "Context",
+    overview: "Project overview",
+    metricLabels: {
+      agents: "Agents",
+      squads: "Squads",
+      skills: "Skills",
+      rules: "Rules",
+      hooks: "Hooks",
+    },
+    areaLabels: {
+      brandbook: "Brandbook",
+      design_system: "Design System",
+      software_architecture: "Software Architecture",
+      growth_strategy: "Growth Strategy",
+      marketing_strategy: "Marketing Strategy",
+      sales_playbook: "Sales Playbook",
+    },
+    available: "Created",
+    artifactUnavailable: "Not created yet",
+    componentGuide:
+      "Fill each responsibility separately. Versions have no prefixes (^, ~, >=), and the reference identifies the package, image, or service.",
+    versionHint:
+      "Exact version: 22.16.0 or 17.6. Leave blank for services without a pinned version.",
+    referenceHint:
+      "E.g. npm:hono, docker:node:22.16.0-bookworm-slim, service:supabase, or provider:cloudflare-pages.",
+    overrides: "Advanced options (JSON)",
+    overridesHint:
+      "Use only confirmed cross-cutting technical facts. Leave empty when there are no exceptions.",
+    versions: "Versions detected in the workspace",
+    exact: "Verified",
+    constraint: "Requirement",
+    versionUnavailable: "Not found",
+    runtime: "Dashboard runtime",
+    installed: "Installed in project",
+    missing: "Missing from project",
+    bundled: "Bundled in Dashboard",
+    current: "Current",
+    configured: "Configured",
+    health: "Health",
+    dependencies: "Technical dependencies",
+    documentation: "Documentation",
+    unknown: "Unknown",
+    unavailable: "Unavailable",
+    notApplicable: "Not applicable",
+    complete: "Complete",
+    incomplete: "Incomplete",
+    incompleteInstallation: "Some local technical dependencies are missing on this computer.",
+    dismiss: "Dismiss notification",
+    contextGuide:
+      "Context starts from canonical sources and includes only files relevant to the task. Generated outputs are consulted only for setup, release, or parity checks.",
+    contextDomains:
+      "Branding, Marketing, Growth, and Sales are used on demand by their respective specialists when there is a task and artifacts in those domains. Do not add them here merely because they exist as capabilities.",
+  },
+} as const;

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

@@ -91,6 +91,16 @@ export function buildProjectSettingsPayload(
   components: StackComponentsDraft,
   otherOverridesSource: string,
 ): ProjectConfigSettings {
+  if (
+    config.autonomy?.version === 1 &&
+    config.execution &&
+    config.execution.runtime !== "manual" &&
+    config.execution.autonomous.provider !== "codex"
+  ) {
+    throw new Error(
+      "Autonomy-v1 exige Codex na execução gerenciada / requires Codex for managed execution. Selecione Codex; conversas diretas continuam disponíveis.",
+    );
+  }
   const parsed = JSON.parse(otherOverridesSource) as unknown;
   if (!isRecord(parsed)) throw new Error("Demais overrides deve ser um objeto JSON.");
   const {
@@ -149,7 +159,7 @@ export function lineList(value: string): string[] {
 
 export function defaultAutonomousExecution(): Extract<
   NonNullable<ProjectConfigSettings["execution"]>,
-  { runtime: "autonomous" }
+  { runtime: "autonomous" | "managed" }
 > {
   return {
     runtime: "autonomous",

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

@@ -1,54 +1,4 @@
-.project-settings-page,
-.project-settings-state {
-  color-scheme: light;
-  min-height: 100vh;
-  padding: clamp(20px, 4vw, 48px);
-  background: #f5f7fb;
-  color: #0f172a;
-}
-
-.project-settings-page form,
-.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;
-}
+@import "./project-settings-state.css";
 
 .project-settings-header {
   display: flex;
@@ -159,8 +109,18 @@
   margin-bottom: 20px;
 }
 
+.project-installation-health {
+  grid-column: 1 / -1;
+  margin: 0;
+  color: #526176;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
 .project-settings-metric {
   display: grid;
+  min-width: 0;
+  overflow-wrap: anywhere;
   gap: 4px;
   min-height: 94px;
   align-content: center;
@@ -184,6 +144,39 @@
   line-height: 1.35;
 }
 
+.project-settings-metric.installation-metric.is-complete strong,
+.project-settings-metric.installation-metric.is-complete span {
+  color: #166534;
+}
+
+.project-settings-metric.installation-metric.is-incomplete {
+  border-color: rgba(220, 38, 38, 0.3);
+  background: linear-gradient(145deg, rgba(220, 38, 38, 0.08), #fff 72%);
+}
+
+.project-settings-metric.installation-metric.is-incomplete strong,
+.project-settings-metric.installation-metric.is-incomplete span {
+  color: #b91c1c;
+}
+
+.project-settings-metric.installation-metric.is-unknown,
+.project-settings-metric.installation-metric.is-unavailable,
+.project-settings-metric.installation-metric.is-not_applicable {
+  background: #f8fafc;
+}
+
+.installation-metric.is-unknown strong,
+.installation-metric.is-unavailable strong,
+.installation-metric.is-not_applicable strong {
+  font-size: 1.125rem;
+  line-height: 1.35;
+}
+
+.project-settings-metric small {
+  color: #64748b;
+  font-size: 0.72rem;
+}
+
 .project-settings-feature p {
   margin-top: 5px;
   color: #526176;
@@ -600,6 +593,59 @@
   color: #b91c1c;
 }
 
+.project-detected-versions {
+  margin-top: 18px;
+}
+
+.project-detected-versions .project-settings-fields {
+  padding: 20px 22px 22px;
+}
+
+.project-detected-versions .project-stack-versions {
+  margin: 0;
+}
+
+.project-installation-toast {
+  position: fixed;
+  z-index: 20;
+  right: clamp(16px, 4vw, 48px);
+  bottom: clamp(16px, 4vw, 48px);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: min(420px, calc(100vw - 32px));
+  padding: 14px 16px;
+  border: 1px solid rgba(220, 38, 38, 0.35);
+  border-radius: 16px;
+  background: #fef2f2;
+  color: #b91c1c;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.project-installation-toast button {
+  display: grid;
+  flex: none;
+  width: 32px;
+  min-height: 32px;
+  padding: 0;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  place-items: center;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.project-installation-toast button:focus-visible {
+  outline: 3px solid rgba(0, 176, 240, 0.42);
+  outline-offset: 3px;
+}
+
 .project-settings-footer {
   position: sticky;
   bottom: 0;
@@ -635,6 +681,11 @@
 }
 
 @media (max-width: 820px) {
+  /* A stacked sticky footer can cover settings and policy warnings on phones. */
+  .project-settings-footer {
+    position: static;
+  }
+
   .project-settings-header,
   .project-settings-feature,
   .project-settings-footer {