@zaip-ai/cli 6.3.0 → 7.5.0

package/templates/.agents/design/design-system-maker/frontend/shared/palette-evidence.test.mjs

@@ -0,0 +1,210 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { matchesCatalog } from "../catalog/filters.js";
+import { paletteFixture } from "../fixtures/palette-evidence.js";
+import { extractionCard } from "./components.js";
+import { cardPalette } from "./model.js";
+import { captureCoverageLabel, paletteEvidence } from "./palette-evidence.js";
+import { paletteView } from "./palette-view.js";
+import { compactPalette, compactScore } from "./viewer-summary.js";
+import { previewModel } from "./visual-model.js";
+
+class Node {
+  childNodes = [];
+  attrs = {};
+  dataset = {};
+  style = {};
+  textContent = "";
+  classList = { toggle() {} };
+  constructor(tag) {
+    this.tag = tag;
+  }
+  append(...children) {
+    this.childNodes.push(...children);
+  }
+  replaceChildren(...children) {
+    this.childNodes = children;
+  }
+  setAttribute(name, value) {
+    this.attrs[name] = value;
+  }
+  addEventListener() {}
+  set innerHTML(_) {
+    throw new Error("Active HTML forbidden");
+  }
+}
+const nodes = (root) => [root, ...root.childNodes.flatMap(nodes)];
+function dom(t) {
+  const previous = Object.getOwnPropertyDescriptor(globalThis, "document");
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: { createElement: (tag) => new Node(tag) },
+  });
+  t.after(() =>
+    previous ? Object.defineProperty(globalThis, "document", previous) : delete globalThis.document,
+  );
+}
+const texts = (root) =>
+  nodes(root)
+    .map((node) => node.textContent)
+    .join("\n");
+
+test("Observed orange and low contrast yellow survive alongside CSS-only candidates without becoming roles", () => {
+  const value = paletteFixture();
+  const snapshot = JSON.stringify(value);
+  const evidence = paletteEvidence(value);
+  assert(evidence.observed.some((row) => row.value === "#ff6600"));
+  assert(evidence.observed.some((row) => row.value === "#ffcc00"));
+  assert.deepEqual(
+    evidence.declared.map((row) => row.value),
+    ["#8844cc", "#00aaff"],
+  );
+  assert.deepEqual(evidence.missingRoles, ["primary", "accent"]);
+  const preview = previewModel(value);
+  assert(preview.fallback.includes("primary"));
+  assert(preview.fallback.includes("accent"));
+  assert.equal(preview.colors.primary, "#171717");
+  assert.equal(preview.colors.accent, "#171717");
+  assert.equal(preview.colors.foreground, "#5c3924");
+  assert.equal(JSON.stringify(value), snapshot);
+});
+test("Card palette and color filters use evidence, including candidates after the visible card limit", () => {
+  const item = { ...paletteFixture(), name: "Fixture", id: "fixture", host: "example.test" };
+  assert(cardPalette(item).some((row) => row.value === "#ffcc00"));
+  for (const family of ["orange", "yellow", "purple", "blue"])
+    assert(matchesCatalog(item, "", "light", [family]), family);
+  item.visual_model.color_candidates = Array.from({ length: 20 }, (_, index) => ({
+    kind: "inferred",
+    source: "observed",
+    value: `#${(0x111111 + index).toString(16)}`,
+  }));
+  item.visual_model.color_candidates.push({ source: "declared", value: "#ff6600" });
+  assert.equal(cardPalette(item).length, 8);
+  assert(matchesCatalog(item, "", "", ["orange"]));
+  assert(!matchesCatalog({ id: "unknown" }, "", "", ["black"]));
+});
+test("Legacy browser records retain CSS colors, unknown coverage and explicit missing roles", () => {
+  const value = paletteFixture();
+  delete value.visual_model.color_candidates;
+  delete value.visual_model.coverage;
+  const evidence = paletteEvidence(value);
+  assert(evidence.declared.some((row) => row.value === "#ff6600"));
+  assert(!evidence.observed.some((row) => row.value === "#ff6600"));
+  assert.match(captureCoverageLabel(value), /não registrada/);
+  assert.match(
+    captureCoverageLabel({ visual_model: { coverage: { status: "legacy-unknown" } } }),
+    /não registrada/,
+  );
+  assert.deepEqual(paletteEvidence({}).missingRoles, ["primary", "accent"]);
+});
+test("Distinct selectors retain provenance after swatch deduplication; primary and accent stay independent", () => {
+  const value = paletteFixture();
+  value.visual_model.color_candidates.push({
+    value: "#ff6600",
+    source: "observed",
+    property: "color",
+    provenance: { selector: "footer" },
+    role_hint: "footer",
+    in_viewport: false,
+  });
+  const row = paletteEvidence(value).observed.find((row) => row.value === "#ff6600");
+  assert(row.contexts.some((context) => context.provenance?.selector === "footer"));
+  assert(row.contexts.some((context) => context.source === "declared"));
+  value.visual_model.tokens.colors.accent = { kind: "inferred", value: "#ffcc00" };
+  assert.deepEqual(paletteEvidence(value).missingRoles, ["primary"]);
+  assert.equal(previewModel(value).colors.primary, "#171717");
+  assert.equal(previewModel(value).colors.accent, "#ffcc00");
+  value.visual_model.tokens.colors.primary = { kind: "inferred", value: "#ff6600" };
+  assert.deepEqual(paletteEvidence(value).missingRoles, []);
+  assert.equal(previewModel(value).colors.primary, "#ff6600");
+  assert.equal(previewModel(value).colors.accent, "#ffcc00");
+});
+test("Only safe scalar colors enter evidence, with bounded candidates and no invented source", () => {
+  const value = paletteFixture();
+  value.visual_model.color_candidates = [
+    { value: "url(https://evil.test)", source: "observed" },
+    { value: "#ff0000; color:red", source: "declared" },
+    { value: "#00ff00", source: "unknown" },
+    { value: "#00000000", source: "observed" },
+    ...Array(40).fill({ value: "#123456", source: "observed" }),
+    { value: "#fedcba", source: "observed" },
+  ];
+  const evidence = paletteEvidence(value);
+  assert(!evidence.colors.some((row) => /url|;/.test(row.value)));
+  assert(!evidence.colors.some((row) => ["#00ff00", "#00000000", "#fedcba"].includes(row.value)));
+  assert.equal(evidence.observed.filter((row) => row.value === "#123456").length, 1);
+});
+test("Compact and diagnostic palettes show provenance, fallbacks, coverage and readiness as text", (t) => {
+  dom(t);
+  const value = paletteFixture();
+  const compact = compactPalette(value);
+  const text = texts(compact);
+  for (const expected of [
+    "Observadas na captura",
+    "Candidatas CSS",
+    "#ffcc00",
+    "#8844cc",
+    "Papéis sem suporte: Primária, Destaque",
+    "Fallback local do preview",
+    "Primária #171717",
+    "Captura incompleta",
+    "48 omitidos",
+  ])
+    assert(text.includes(expected), expected);
+  assert(!text.includes("paleta completa no diagnóstico"));
+  const diagnostic = texts(paletteView(value, { expanded: true }));
+  for (const expected of [
+    ".inactive-theme",
+    "fixture-observed",
+    "Fontes: loaded",
+    "layout estável: não",
+    "Amostra sintética",
+    "Contexto candidato: Texto em gradiente",
+    "Fora do viewport da captura",
+  ])
+    assert(diagnostic.includes(expected), expected);
+  const dots = nodes(compact).filter((node) => node.style.backgroundColor);
+  assert(dots.every((node) => /^#[a-f\d]{6}$/i.test(node.style.backgroundColor)));
+});
+test("Compact palette retains a low frequency yellow after twelve other candidates", (t) => {
+  dom(t);
+  const value = paletteFixture();
+  value.visual_model.color_candidates = [
+    ...Array.from({ length: 13 }, (_, index) => ({
+      source: "observed",
+      kind: "inferred",
+      value: `#${(0x112233 + index).toString(16)}`,
+    })),
+    { source: "observed", kind: "inferred", value: "#ffd278" },
+  ];
+  assert(texts(compactPalette(value)).includes("#ffd278"));
+});
+test("Card labels preserve candidate origin and score visibly limits the heuristic", (t) => {
+  dom(t);
+  const fixture = paletteFixture();
+  const item = { ...fixture, id: "fixture", name: "Fixture", revision: 1, status: "partial" };
+  // The card applies only bounded scalar model properties.
+  const previous = globalThis.document.createElement;
+  globalThis.document.createElement = (tag) => {
+    const node = previous(tag);
+    node.style.setProperty = (name, value) => {
+      node.style[name] = value;
+    };
+    node.style.removeProperty = (name) => {
+      delete node.style[name];
+    };
+    return node;
+  };
+  const card = extractionCard(item);
+  assert(nodes(card).some((node) => node.title === "#ffcc00 · Observada na captura"));
+  assert(nodes(card).some((node) => node.title === "#8844cc · Candidata CSS"));
+  assert(texts(card).includes("4 observadas · 2 candidatas CSS"));
+  const value = {
+    ...fixture,
+    summary: item,
+    revision: 1,
+    report: { status: "measured-evidence" },
+    design_score: { overall: 80, grade: "B", categories: [] },
+  };
+  assert.match(texts(compactScore(value)), /Contraste limitado.*fidelidade visual não medida/);
+});

package/templates/.agents/design/design-system-maker/frontend/shared/palette-view.js

@@ -0,0 +1,149 @@
+import { el, section } from "./components.js";
+import {
+  captureCoverageLabel,
+  colorContextLabels,
+  colorRoleLabels,
+  colorSourceLabels,
+  paletteEvidence,
+} from "./palette-evidence.js";
+import { provenanceDetails } from "./report-view.js";
+import { previewModel } from "./visual-model.js";
+
+export function paletteView(value, { expanded = false } = {}) {
+  const node = section("Cores e cobertura", "wide detail-palette");
+  const evidence = paletteEvidence(value);
+  const local =
+    (value?.source ?? value?.summary?.source)?.type &&
+    (value?.source ?? value?.summary?.source)?.type !== "url";
+  const limit = 32;
+  for (const [source, rows, title] of [
+    ["observed", evidence.observed, "Observadas na captura"],
+    [
+      "declared",
+      evidence.declared,
+      local
+        ? "Candidatas do documento/repositório · uso visual não confirmado"
+        : "Candidatas CSS · uso visual não confirmado",
+    ],
+  ]) {
+    node.append(el("h4", "", `${title} · ${rows.length}`));
+    const grid = el("div", "detail-color-grid");
+    grid.dataset.paletteSource = source;
+    for (const row of rows.slice(0, limit)) {
+      const chip = el("div", "detail-color");
+      const dot = el("span", "color-dot");
+      dot.style.backgroundColor = row.value;
+      dot.setAttribute("aria-hidden", "true");
+      const caption = el("div", "detail-color-caption");
+      caption.append(
+        el("span", "", row.labels.join(" / ") || colorSourceLabels[source]),
+        el("code", "", row.value),
+      );
+      chip.append(dot, caption);
+      if (expanded) {
+        for (const context of row.contexts) {
+          if (row.contexts.length > 1)
+            caption.append(el("span", "help", colorSourceLabels[context.source]));
+          if (context.role_hint)
+            caption.append(
+              el(
+                "span",
+                "help",
+                `Contexto candidato: ${colorContextLabels[context.role_hint] ?? context.role_hint}`,
+              ),
+            );
+          if (context.reason) caption.append(el("span", "help", context.reason));
+          if (context.in_viewport === false)
+            caption.append(el("span", "help", "Fora do viewport da captura"));
+          caption.append(provenanceDetails(context));
+        }
+      }
+      grid.append(chip);
+    }
+    if (!rows.length)
+      grid.append(
+        el(
+          "p",
+          "help",
+          source === "observed"
+            ? "Nenhuma cor com observação registrada."
+            : "Nenhuma candidata CSS adicional registrada.",
+        ),
+      );
+    node.append(grid);
+    if (rows.length > limit)
+      node.append(
+        el(
+          "p",
+          "help",
+          `${limit} de ${rows.length} exibidas neste grupo. Inventário retido no diagnóstico.`,
+        ),
+      );
+  }
+  node.append(
+    el(
+      "p",
+      "help",
+      "Candidatas CSS podem pertencer a outros temas ou estados; não são aplicadas automaticamente ao preview.",
+    ),
+  );
+  node.append(
+    el(
+      "p",
+      "help",
+      "Cores observadas podem incluir elementos fora do viewport da imagem; a amostra não cobre todos os estados.",
+    ),
+  );
+  if (evidence.missingRoles.length)
+    node.append(
+      el(
+        "p",
+        "help",
+        `Papéis sem suporte: ${evidence.missingRoles.map((name) => colorRoleLabels[name]).join(", ")}.`,
+      ),
+    );
+  const model = previewModel(value);
+  const fallbackColors = model.available
+    ? Object.keys(colorRoleLabels).filter((name) => model.fallback.includes(name))
+    : [];
+  node.append(
+    el(
+      "p",
+      "help",
+      fallbackColors.length
+        ? `Fallback local do preview: ${fallbackColors.map((name) => `${colorRoleLabels[name]} ${model.colors[name]}`).join(" · ")}. Valores de demonstração, sem observação na origem.`
+        : model.available
+          ? "Nenhum fallback local de cor aplicado."
+          : "Modelo visual indisponível; cores de demonstração não aplicadas.",
+    ),
+  );
+  node.append(el("p", "help", captureCoverageLabel(value)));
+  if (expanded && evidence.coverage) {
+    const details = el("details", "evidence-details");
+    details.append(el("summary", "", "Método, prontidão e limites da captura"));
+    const readiness = evidence.coverage.readiness;
+    const state = (value) => (value === true ? "sim" : value === false ? "não" : "não registrado");
+    details.append(
+      el(
+        "p",
+        "help",
+        `Método: ${evidence.coverage.method ?? "não registrado"}. Fontes: ${readiness?.fonts ?? "não registrado"}; imagens pendentes: ${readiness?.images_pending ?? "não registrado"}; imagens com falha: ${readiness?.images_failed ?? "não registrado"}; layout estável: ${state(readiness?.layout_stable)}.`,
+      ),
+    );
+    for (const note of (evidence.coverage.limitations ?? []).slice(0, 16))
+      details.append(el("p", "help", note));
+    if (
+      Number.isInteger(evidence.coverage.candidates_omitted) &&
+      evidence.coverage.candidates_omitted > 0
+    )
+      details.append(
+        el(
+          "p",
+          "help",
+          `${evidence.coverage.candidates_omitted} candidatos de cor omitidos pelo limite de coleta.`,
+        ),
+      );
+    node.append(details);
+  }
+  return node;
+}

package/templates/.agents/design/design-system-maker/frontend/shared/preview.test.mjs

@@ -0,0 +1,263 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { siteIcon } from "./components.js";
+import { diagnosticScore, diagnosticSections } from "./diagnostic-view.js";
+import { extractionState } from "./extraction-state.js";
+import { reportDiagnostic, reportSections } from "./report-view.js";
+import { specimenSections } from "./specimens.js";
+import {
+  applyVisualModel,
+  componentStyles,
+  previewModel,
+  safeColor,
+  safeFont,
+  safeLength,
+  safeShadow,
+  safeSpacing,
+} from "./visual-model.js";
+
+const token = (value) => ({
+  value,
+  kind: "inferred",
+  evidence: ["css-1"],
+  provenance: { url: "https://example.test/style.css", selector: ":root" },
+});
+function model(background = "#ffffff", primary = "#00b0f0") {
+  return {
+    schema_version: 1,
+    method: "declared-semantic-v1",
+    status: "inferred",
+    tokens: {
+      colors: { background: token(background), primary: token(primary), card: token(background) },
+      typography: {
+        body_family: token("Manrope, sans-serif"),
+        heading_family: token("Sora, sans-serif"),
+        size: token("16px"),
+        weight: token("400"),
+        line_height: token("1.5"),
+      },
+      spacing: [{ ...token("16px"), property: "gap" }],
+      radii: [{ ...token("8px"), property: "border-radius" }],
+      shadows: [{ ...token("0px 4px 12px #00000022"), property: "box-shadow" }],
+    },
+    components: [],
+    unknown: [],
+    limitations: [],
+  };
+}
+class Node {
+  childNodes = [];
+  attrs = {};
+  dataset = {};
+  textContent = "";
+  listeners = {};
+  classes = new Set();
+  classList = { toggle: (name, on) => (on ? this.classes.add(name) : this.classes.delete(name)) };
+  style = {
+    setProperty(name, value) {
+      this[name] = value;
+    },
+    removeProperty(name) {
+      delete this[name];
+    },
+  };
+  constructor(tag) {
+    this.tag = tag;
+  }
+  append(...children) {
+    this.childNodes.push(...children);
+  }
+  prepend(...children) {
+    this.childNodes.unshift(...children);
+  }
+  replaceChildren(...children) {
+    this.childNodes = children;
+  }
+  setAttribute(name, value) {
+    this.attrs[name] = value;
+  }
+  addEventListener(name, handler) {
+    this.listeners[name] = handler;
+  }
+  set innerHTML(_value) {
+    throw new Error("Active HTML forbidden");
+  }
+}
+function nodes(root) {
+  return [root, ...root.childNodes.flatMap(nodes)];
+}
+function dom(t) {
+  const previous = Object.getOwnPropertyDescriptor(globalThis, "document");
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: { createElement: (tag) => new Node(tag) },
+  });
+  t.after(() => {
+    if (previous) Object.defineProperty(globalThis, "document", previous);
+    else delete globalThis.document;
+  });
+}
+test("Only bounded normalized scalar styles are accepted", () => {
+  assert.equal(safeColor("url(https://external.test)"), null);
+  assert.equal(safeFont('Sora; background:url("x")'), null);
+  assert.equal(safeFont("Manrope, sans-serif"), '"Manrope", sans-serif');
+  assert.equal(safeLength("calc(100vh)"), null);
+  assert.equal(safeLength("10000px"), null);
+  assert.equal(safeSpacing("8px 12px"), "8px 12px");
+  assert.equal(safeSpacing("var(--evil)"), null);
+  assert.equal(safeShadow("0px 4px 12px #00000022"), "0px 4px 12px #00000022");
+  assert.equal(safeShadow("0 0 12px rgba(0,0,0,.2)"), null);
+  assert.equal(safeShadow("url(https://external.test/shadow)"), null);
+  const visual = model();
+  visual.tokens.typography.size = token("0");
+  assert.equal(previewModel({ visual_model: visual }).properties["--ds-font-size"], "16px");
+  assert.equal(visual.tokens.typography.size.value, "0");
+  assert.deepEqual(
+    componentStyles({ tokens: { padding: token("8px 12px"), background: token("url(x)") } }),
+    { padding: "8px 12px" },
+  );
+});
+test("Each item applies its own model and clearing selection removes every old theme property", () => {
+  const light = new Node("article"),
+    dark = new Node("article");
+  applyVisualModel(light, { visual_model: model("#ffffff", "#00b0f0") });
+  applyVisualModel(dark, { visual_model: model("#080808", "#ccff00") });
+  assert.equal(light.style["--ds-primary"], "#00b0f0");
+  assert.equal(dark.style["--ds-primary"], "#ccff00");
+  assert.equal(dark.dataset.dsTheme, "dark");
+  assert.equal(dark.style["--ds-card-foreground"], "#ffffff");
+  applyVisualModel(dark, null);
+  assert.equal(dark.classes.has("ds-applied"), false);
+  assert.equal(dark.dataset.dsTheme, undefined);
+  assert.equal(dark.style["--ds-background"], undefined);
+  assert.equal(dark.style["--ds-font"], undefined);
+});
+test("Native specimens react locally and do not render source markup or remote assets", (t) => {
+  dom(t);
+  const value = {
+    summary: { id: "fixture", name: "<script>source()</script>" },
+    visual_model: model(),
+    report: { typography: [{ ...token("24px"), property: "font-size" }] },
+  };
+  const all = specimenSections(value).flatMap(nodes);
+  const primary = all.find((node) => node.dataset.specimen === "button-primary");
+  primary.listeners.click();
+  assert.ok(
+    all.some((node) => node.textContent === "Primário acionado apenas nesta demonstração."),
+  );
+  assert.equal(all.filter((node) => node.dataset.specimen === "input").length, 1);
+  assert.equal(all.filter((node) => node.dataset.specimen === "select").length, 1);
+  assert.ok(
+    all.some(
+      (node) =>
+        node.dataset.specimen === "shadow" && node.style.boxShadow === "0px 4px 12px #00000022",
+    ),
+  );
+  assert.ok(all.some((node) => node.textContent === value.summary.name));
+  assert.equal(
+    all.some((node) => ["script", "iframe", "object"].includes(node.tag)),
+    false,
+  );
+});
+test("Failed403 and collecting are distinct from a preserved revision without report", (t) => {
+  dom(t);
+  const failed = {
+    summary: { id: "blocked", status: "failed", url: "https://example.test/" },
+    error: "HTTP status 403",
+    report: { status: "legacy-unavailable" },
+  };
+  assert.equal(extractionState(failed).state, "failed");
+  assert.equal(extractionState(failed).httpStatus, 403);
+  const all = [
+    ...reportSections(failed.report, failed.summary, failed).flatMap(nodes),
+    ...nodes(reportDiagnostic(failed.report, failed.summary, failed)),
+  ];
+  assert.ok(all.some((node) => node.textContent === "Coleta bloqueada · HTTP 403"));
+  assert.equal(
+    all.some((node) => /revisão antiga/i.test(node.textContent)),
+    false,
+  );
+  assert.ok(all.some((node) => node.textContent.includes("não torna a URL inválida")));
+  assert.equal(
+    extractionState({ summary: { status: "collecting" }, report: { status: "collecting" } }).state,
+    "collecting",
+  );
+  assert.equal(
+    extractionState({ summary: { status: "partial" }, report: { status: "legacy-unavailable" } })
+      .state,
+    "legacy",
+  );
+});
+test("Diagnostic shows Design Score separately from coverage and isolates native examples; favicon stays revision-local", (t) => {
+  dom(t);
+  const value = {
+    summary: {
+      id: "fixture",
+      name: "Fixture",
+      url: "https://example.test/",
+      revision: 4,
+      visual: { faviconStatus: "verified", faviconUrl: "https://untrusted.test/icon.svg" },
+    },
+    visual_model: model("#080808", "#ccff00"),
+    design_score: {
+      overall: 76,
+      grade: "C",
+      evaluated_categories: 6,
+      scope: "Heurística",
+      method: "design-score-v1",
+      formula: "Média",
+      limitations: [],
+      contrast_pairs: [],
+      categories: [
+        {
+          id: "typography",
+          label: "Typography",
+          score: 100,
+          grade: "A",
+          value: "3 famílias",
+          ideal: "2–4 famílias",
+          explanation: "Famílias declaradas",
+          evidence: ["css-1"],
+        },
+      ],
+    },
+    report: {
+      status: "measured-evidence",
+      score: 25,
+      method_version: "css-evidence-v1",
+      metrics: [
+        {
+          id: "category-coverage",
+          numerator: 1,
+          denominator: 4,
+          ratio: 0.25,
+          weight: 100,
+          explanation: "Observed fixture category",
+        },
+      ],
+      sampling: { total: 4, sampled: 1, truncated: 3 },
+      colors: [],
+      typography: [],
+      spacing: [],
+      radii: [],
+      components: [],
+      resources: [],
+      gaps: [],
+      element_count: 4,
+    },
+  };
+  const score = nodes(diagnosticScore(value));
+  assert.ok(score.some((node) => node.textContent === "C"));
+  assert.ok(score.some((node) => node.textContent === "76/100"));
+  assert.ok(score.some((node) => node.dataset.diagnosticMetric === "typography"));
+  assert.ok(score.some((node) => node.textContent === "Ideal: 2–4 famílias"));
+  const sections = diagnosticSections(value);
+  assert.ok(sections.flatMap(nodes).some((node) => node.textContent === "25/100"));
+  assert.ok(sections.every((node) => !node.classes.has("ds-applied")));
+  assert.ok(sections.flatMap(nodes).some((node) => node.style["--ds-primary"] === "#ccff00"));
+  const icon = siteIcon(value.summary);
+  assert.equal(icon.childNodes[0].src, "/api/extracts/fixture/favicon?revision=4");
+  icon.childNodes[0].listeners.error();
+  assert.equal(icon.dataset.siteIcon, "fallback");
+  assert.equal(icon.childNodes[0].textContent, "FI");
+});