@zaip-ai/cli 6.2.0 → 7.5.0

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

@@ -0,0 +1,200 @@
+import { cardPalette, entryPath, known, statusLabel, swatches, viewerPath } from "./model.js";
+import { colorSourceLabels, paletteEvidence } from "./palette-evidence.js";
+import { applyVisualModel } from "./visual-model.js";
+export function el(tag, className = "", text = null) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = String(text);
+  return node;
+}
+export function action(text, href, primary = false) {
+  const link = el("a", `action${primary ? " primary" : ""}`, text);
+  link.href = href;
+  return link;
+}
+export function button(text, handler, className = "") {
+  const node = el("button", className, text);
+  node.type = "button";
+  node.addEventListener("click", handler);
+  return node;
+}
+export function badge(status) {
+  return el(
+    "span",
+    `badge state-${Object.hasOwn({ collecting: 1, partial: 1, ready: 1, failed: 1, queued: 1, running: 1, completed: 1 }, status) ? status : "unknown"}`,
+    statusLabel(status),
+  );
+}
+export function empty(title, message) {
+  const node = el("section", "empty-state");
+  node.append(el("h2", "", title), el("p", "muted", message));
+  return node;
+}
+export function colorCandidates(summary, expanded = false) {
+  const list = el("div", expanded ? "color-grid" : "swatches");
+  for (const item of swatches(summary)) {
+    const chip = el(expanded ? "div" : "span", expanded ? "color-candidate" : "swatch");
+    const dot = expanded ? el("span", "color-dot") : chip;
+    dot.style.backgroundColor = item.value;
+    chip.title = `${item.value} · ${colorSourceLabels[item.source] ?? colorSourceLabels.declared}`;
+    if (expanded)
+      chip.append(
+        dot,
+        el("code", "", item.value),
+        el("span", "meta", colorSourceLabels[item.source] ?? colorSourceLabels.declared),
+      );
+    else chip.setAttribute("aria-label", chip.title);
+    list.append(chip);
+  }
+  if (!list.childNodes.length) list.append(el("p", "muted", "Cores desconhecidas"));
+  return list;
+}
+export function siteIcon(summary, className = "") {
+  const node = el("span", `site-icon ${className}`);
+  const initials = String(summary.name ?? summary.host ?? "DS")
+    .trim()
+    .slice(0, 2)
+    .toUpperCase();
+  const fallback = () => {
+    node.dataset.siteIcon = "fallback";
+    node.replaceChildren(el("span", "site-initials", initials || "DS"));
+  };
+  fallback();
+  if (summary.visual?.faviconStatus === "verified" && summary.visual.faviconUrl) {
+    const img = el("img");
+    img.src = entryPath(summary.id, "favicon", summary.revision);
+    img.alt = "";
+    img.loading = "lazy";
+    img.addEventListener("error", fallback);
+    node.dataset.siteIcon = "verified";
+    node.replaceChildren(img);
+  }
+  return node;
+}
+export function designScore(summary, className = "") {
+  const score = summary.design_score;
+  const rating = el("span", `card-design-score ${className}`.trim());
+  rating.title =
+    "Heurística com contraste limitado aos pares disponíveis; fidelidade visual não medida.";
+  rating.setAttribute(
+    "aria-label",
+    Number.isFinite(score?.overall)
+      ? `Design Score heurístico: ${score.grade} ${score.overall} de 100; contraste limitado, fidelidade visual não medida`
+      : "Design Score indisponível",
+  );
+  rating.append(
+    el("span", "meta", "Design Score · heurística"),
+    el("strong", "", Number.isFinite(score?.overall) ? `${score.grade} ${score.overall}` : "—"),
+  );
+  return rating;
+}
+export function extractionCard(summary) {
+  const card = el("article", "catalog-card");
+  const model = applyVisualModel(card, summary);
+  const header = el("div", "card-header");
+  const title = el("h2", "", known(summary.name));
+  title.title = known(summary.name);
+  header.append(siteIcon(summary), title);
+  const meta = el("div", "card-topline");
+  meta.append(designCode(summary), designScore(summary));
+  const tags = el("div", "tags");
+  tags.append(badge(summary.status));
+  if (model.available) {
+    const theme = el("span", "badge theme-badge", model.dark ? "dark" : "light");
+    theme.title = "Tema aplicado ao card a partir dos tokens disponíveis";
+    tags.append(theme);
+  }
+  const actions = el("div", "card-actions");
+  const palette = cardPalette(summary);
+  const evidence = paletteEvidence(summary);
+  actions.append(
+    action("Detalhes", viewerPath(summary.id), true),
+    action(
+      "Preview",
+      `/viewer/preview.html?id=${encodeURIComponent(summary.id)}&revision=${summary.revision}`,
+    ),
+  );
+  card.append(
+    meta,
+    header,
+    el("p", "meta card-domain", summary.host),
+    tags,
+    colorCandidates({ ...summary, visual: { ...summary.visual, inferred_swatches: palette } }),
+    el(
+      "p",
+      "help",
+      `${evidence.observed.length} observadas · ${evidence.declared.length} candidatas CSS${evidence.colors.length > palette.length ? ` · ${palette.length} exibidas` : ""}`,
+    ),
+    actions,
+  );
+  return card;
+}
+export function designCode(summary) {
+  const node = el("span", "design-code", summary.design_code ? `#${summary.design_code}` : "");
+  node.title = `Código do design system: ${summary.design_code ?? "indisponível"}`;
+  node.setAttribute("aria-label", node.title);
+  return node;
+}
+export function outputItem(summary, selected, onSelect) {
+  const node = action("", viewerPath(summary.id));
+  node.className = "output-item";
+  applyVisualModel(node, summary);
+  if (selected) node.setAttribute("aria-current", "page");
+  const icon = siteIcon(summary, "output-icon");
+  const copy = el("span", "output-copy");
+  copy.append(
+    el("strong", "", summary.name),
+    el(
+      "span",
+      "meta",
+      `${summary.design_code ? `#${summary.design_code} · ` : ""}${summary.host} · r${summary.revision}`,
+    ),
+    badge(summary.status),
+  );
+  node.append(designScore(summary, "output-design-score"), icon, copy);
+  node.addEventListener("click", (event) => {
+    if (
+      event.button === 0 &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.shiftKey &&
+      !event.altKey
+    ) {
+      event.preventDefault();
+      onSelect(summary.id);
+    }
+  });
+  return node;
+}
+export function section(title, className = "") {
+  const node = el("section", `panel ${className}`);
+  node.append(el("h3", "", title));
+  return node;
+}
+export function dataSection(title, value, className = "") {
+  const node = section(title, className);
+  const pre = el(
+    "pre",
+    "code",
+    value == null
+      ? "Desconhecido / indisponível nesta revisão"
+      : typeof value === "string"
+        ? value
+        : JSON.stringify(value, null, 2),
+  );
+  const region = el("section", "code-region");
+  region.tabIndex = 0;
+  region.setAttribute("aria-label", title);
+  region.append(pre);
+  node.append(region);
+  return node;
+}
+export function artifactActions(summary) {
+  const node = el("div", "page-actions");
+  if (summary.designMdUrl)
+    node.append(
+      action("DESIGN.md em texto", entryPath(summary.id, "design", summary.revision)),
+      action("Proposta JSON", entryPath(summary.id, "proposal", summary.revision)),
+    );
+  return node;
+}

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

@@ -0,0 +1,218 @@
+import { dataSection, el, section } from "./components.js";
+import { absentReport } from "./failure-view.js";
+import { paletteView } from "./palette-view.js";
+import { reportSections, table } from "./report-view.js";
+import { specimenSections } from "./specimens.js";
+import { applyVisualModel } from "./visual-model.js";
+
+export function diagnosticScore(value) {
+  const report = value.report;
+  if (report?.status !== "measured-evidence") return absentReport(value);
+  const node = el("section", "quality-score");
+  node.dataset.reportSection = "design-score";
+  const score = value.design_score;
+  const overall = el("div", "score-grade-block");
+  overall.append(
+    el("strong", `score-grade grade-${score?.grade ?? "unknown"}`, score?.grade ?? "—"),
+    el("span", "score-overall", `${score?.overall ?? "—"}/100`),
+    el("span", "score-overall", "Design Score"),
+  );
+  const tiles = el("div", "score-categories");
+  for (const metric of score?.categories ?? []) {
+    const tile = el("article", "cat-row");
+    tile.dataset.diagnosticMetric = metric.id;
+    tile.append(
+      el("span", "cat-name", metric.label),
+      el("strong", `cat-grade grade-${metric.grade ?? "unknown"}`, metric.grade ?? "N/A"),
+      el("span", "cat-num", metric.score == null ? "Não avaliado" : `${metric.score}/100`),
+      el("p", "cat-value", metric.value),
+      el("em", "cat-ideal", `Ideal: ${metric.ideal}`),
+    );
+    tiles.append(tile);
+  }
+  const note = el(
+    "p",
+    "diagnostic-score-note",
+    `${score?.evaluated_categories ?? 0}/7 categorias avaliadas. Heurística com contraste limitado aos pares disponíveis; fidelidade visual não medida. ${score?.scope ?? "Design Score indisponível nesta revisão."}`,
+  );
+  node.append(overall, tiles, note);
+  return node;
+}
+function scoreDetails(score) {
+  const node = section("Design Score · metodologia e evidências", "wide");
+  if (!score) {
+    node.append(el("p", "", "Não disponível nesta revisão."));
+    return node;
+  }
+  node.append(el("p", "", `${score.method} · ${score.formula}`));
+  for (const limitation of score.limitations) node.append(el("p", "muted", limitation));
+  for (const category of score.categories) {
+    const details = el("details", "technical-section");
+    details.append(
+      el("summary", "", `${category.label} · ${category.grade ?? "N/A"} ${category.score ?? ""}`),
+      el("p", "", category.explanation),
+      el("p", "", `${category.value} · Ideal: ${category.ideal}`),
+    );
+    if (category.evidence.length)
+      details.append(el("p", "meta", `Evidências: ${category.evidence.join(", ")}`));
+    if (category.id === "lint_compliance" && score.lint) {
+      const lint = score.lint;
+      details.append(el("p", "meta", `${lint.method} · ${lint.checked_tokens} tokens verificados`));
+      details.append(
+        table(
+          "Regras de lint",
+          ["Regra", "Verificação"],
+          lint.rules.map((rule) => [rule.id, rule.description]),
+        ),
+      );
+      if (lint.findings.length)
+        details.append(
+          table(
+            "Achados do lint",
+            ["Nível", "Regra", "Token", "Descrição"],
+            lint.findings.map((item) => [item.severity, item.rule, item.path, item.message]),
+          ),
+        );
+      else details.append(el("p", "", "Nenhum erro ou aviso encontrado nas regras executadas."));
+      if (lint.omitted_findings)
+        details.append(
+          el(
+            "p",
+            "muted",
+            `${lint.omitted_findings} achados adicionais incluídos na contagem e na nota.`,
+          ),
+        );
+    }
+    node.append(details);
+  }
+  return node;
+}
+function contrastDetails(score) {
+  const node = section("Contrast matrix · pares semânticos", "wide");
+  if (!score?.contrast_pairs?.length)
+    node.append(
+      el(
+        "p",
+        "",
+        score?.categories?.find((row) => row.id === "accessibility")?.explanation ??
+          "Sem pares com suporte nesta revisão.",
+      ),
+    );
+  node.append(
+    el(
+      "p",
+      "muted",
+      "Texto normal: AA ≥4,5:1; AAA ≥7:1. Somente pares disponíveis com cores opacas. Não substitui auditoria de acessibilidade.",
+    ),
+  );
+  node.append(
+    table(
+      "Contraste do sistema selecionado",
+      ["Par", "Texto", "Fundo", "Razão", "Resultado"],
+      (score?.contrast_pairs ?? []).map((pair) => [
+        pair.label,
+        pair.foreground,
+        pair.background,
+        `${pair.ratio.toFixed(2)}:1`,
+        pair.grade,
+      ]),
+    ),
+  );
+  return node;
+}
+function generatedQuality(score) {
+  const node = section("Qualidade dos tokens gerados", "wide");
+  node.dataset.reportSection = "generated-token-quality";
+  const quality = score?.generated_token_quality;
+  if (!quality) {
+    node.append(el("p", "", "Não avaliada nesta revisão."));
+    return node;
+  }
+  node.append(
+    el(
+      "strong",
+      "generated-token-grade",
+      quality.score == null ? "Não avaliado" : `${quality.score}/100`,
+    ),
+    el("p", "", quality.scope),
+    table(
+      "Verificações do DESIGN.md",
+      ["Critério", "Com suporte / total", "Nota", "Peso"],
+      quality.metrics.map((row) => [
+        row.label,
+        `${row.passed}/${row.total}`,
+        row.score == null ? "Não avaliado" : `${row.score}/100`,
+        `${row.weight}%`,
+      ]),
+    ),
+  );
+  const details = el("details", "technical-section");
+  details.append(
+    el("summary", "", "Metodologia e lacunas"),
+    el("p", "", `${quality.method} · ${quality.formula}`),
+  );
+  if (quality.missing.length)
+    details.append(el("p", "", `Papéis e escalas sem suporte: ${quality.missing.join(", ")}.`));
+  else details.append(el("p", "", "Os 10 papéis e escalas verificados têm suporte na amostra."));
+  node.append(details);
+  return node;
+}
+export function diagnosticSections(value) {
+  const report = value.report;
+  if (report?.status !== "measured-evidence") return [absentReport(value)];
+  const sections = reportSections(report, value.summary, value);
+  const [coverage, colors, typeData, spacingData, radiusData, components, resources, gaps] =
+    sections;
+  const specimens = specimenSections(value, { separateScales: true });
+  for (const node of specimens) {
+    for (const child of node.childNodes) {
+      if (["ds-specimen-grid", "ds-scale-grid"].includes(child.className))
+        applyVisualModel(child, value);
+    }
+  }
+  if (specimens[0]?.dataset.specimenSection === "components")
+    specimens[0].childNodes[0].textContent = "Component preview (live tokens)";
+  colors.childNodes[0].textContent = `Inventário CSS · ${report.colors.length} cores`;
+  const unavailable = section("Seções sem evidência", "wide");
+  const details = el("details", "technical-section");
+  details.append(el("summary", "", "Stack, archetype, motion e font-face"));
+  for (const [title, message] of [
+    ["Stack fingerprint", "Stack da origem não avaliada nesta coleta."],
+    ["Visual archetype", "Arquétipo visual não avaliado."],
+    ["Drift report", "Comparação de drift não executada."],
+    ["Logo", "Logotipo não extraído; favicon é identificado separadamente."],
+    [
+      "Component variants matrix",
+      "Seletores declarados são candidatos; variantes computadas não avaliadas.",
+    ],
+    ["Motion tokens", "Motion e animações da origem não avaliados."],
+    [
+      "@font-face declarations",
+      "Arquivos de fonte não carregados no preview; famílias declaradas usam fallback local.",
+    ],
+  ])
+    details.append(el("h4", "", title), el("p", "muted", message));
+  unavailable.append(details);
+  const technical = el("details", "wide technical-section");
+  technical.append(
+    el("summary", "", "Technical details · fonte, fórmula e declarações"),
+    coverage,
+    colors,
+    typeData,
+    spacingData,
+    radiusData,
+    components,
+    resources,
+    gaps,
+  );
+  return [
+    generatedQuality(value.design_score),
+    scoreDetails(value.design_score),
+    contrastDetails(value.design_score),
+    paletteView(value, { expanded: true }),
+    ...specimens,
+    unavailable,
+    ...(value.designMd != null ? [dataSection("DESIGN.md (raw)", value.designMd, "wide")] : []),
+    technical,
+  ];
+}

package/templates/.agents/design/design-system-maker/frontend/shared/extraction-state.js

@@ -0,0 +1,38 @@
+export function extractionState(value) {
+  const summary = value?.summary ?? value ?? {};
+  const report = value?.report;
+  const failure = value?.failure ?? summary.failure ?? report?.failure;
+  const error = value?.error ?? failure?.message;
+  if (summary.status === "failed" || report?.status === "failed" || failure) {
+    const legacyStatus = /HTTP(?: status)?\s*(\d{3})/i.exec(String(error ?? ""));
+    const httpStatus = failure?.http_status ?? (legacyStatus ? Number(legacyStatus[1]) : null);
+    return {
+      state: "failed",
+      title:
+        httpStatus === 403
+          ? "Coleta bloqueada · HTTP 403"
+          : "Não foi possível coletar a referência",
+      message:
+        httpStatus === 403
+          ? "A origem recusou o coletor. Isso não torna a URL inválida. HTML e CSS não foram obtidos nesta tentativa; nenhum sistema visual foi produzido."
+          : (failure?.message ?? error ?? "A tentativa terminou sem dados de extração."),
+      failure,
+      httpStatus,
+    };
+  }
+  if (summary.status === "collecting" || report?.status === "collecting")
+    return {
+      state: "collecting",
+      title: "Extração em andamento",
+      message:
+        "Aguarde a conclusão para abrir os espécimes e o diagnóstico. Nenhum resultado parcial foi tratado como final.",
+    };
+  if (report?.status === "measured-evidence")
+    return { state: "measured", title: "Relatório gerado" };
+  return {
+    state: "legacy",
+    title: "Relatório ausente nesta revisão",
+    message:
+      "Esta revisão preservada não contém o relatório medido. Reprocessar cria uma nova revisão sem alterar o histórico.",
+  };
+}

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

@@ -0,0 +1,54 @@
+import { action, el, section } from "./components.js";
+import { extractionState } from "./extraction-state.js";
+export function absentReport(value) {
+  const state = extractionState(value);
+  const summary = value.summary ?? value;
+  const node = section(state.title, "wide extraction-absence");
+  node.dataset.extractionState = state.state;
+  node.append(el("p", "", state.message));
+  if (state.failure) {
+    const facts = el("dl", "evidence-list");
+    for (const [label, content] of [
+      ["HTTP", state.failure.http_status],
+      ["Etapa", state.failure.stage],
+      ["Observado em", state.failure.observed_at],
+      ["Mensagem", state.failure.message],
+    ])
+      if (content != null) facts.append(el("dt", "", label), el("dd", "", content));
+    const details = el("details", "evidence-details");
+    details.append(el("summary", "", "Detalhes da tentativa"), facts);
+    node.append(details);
+  }
+  if (state.state === "failed") {
+    const actions = el("div", "page-actions");
+    try {
+      const target = new URL(summary.request_url ?? state.failure?.source_url ?? summary.url);
+      if (["http:", "https:"].includes(target.protocol) && !target.username && !target.password) {
+        const link = action("Abrir endereço no navegador", target.href);
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        actions.append(link);
+      }
+    } catch {
+      /* No source link is offered without a safe target. */
+    }
+    if (summary.id && (!summary.source || summary.source.type === "url"))
+      actions.append(action("Editar alvo", `/generate.html?id=${encodeURIComponent(summary.id)}`));
+    if (summary.id && state.httpStatus === 403)
+      actions.append(
+        action(
+          "Extrair no navegador local",
+          `/generate.html?id=${encodeURIComponent(summary.id)}&mode=browser`,
+        ),
+      );
+    node.append(
+      actions,
+      el(
+        "p",
+        "help",
+        "Uma nova tentativa exige sua ação. O histórico da falha permanece preservado.",
+      ),
+    );
+  }
+  return node;
+}

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

@@ -0,0 +1,138 @@
+// Split regression cases are registered by the original suite entrypoint.
+import assert from "node:assert/strict";
+import test from "node:test";
+import { cancelJob, connect, generate, reprocess } from "./api.js";
+import { jobText, renderJobProgress } from "./job-view.js";
+
+const _sample = {
+  id: "sample",
+  slug: "sample",
+  name: '<img src=x onerror="alert(1)">',
+  host: "example.test",
+  url: "https://example.test/",
+  status: "partial",
+  revision: 2,
+  theme: null,
+  archetype: null,
+  visual: {
+    inferred_swatches: [
+      { value: "#22d3ee", kind: "inferred" },
+      { value: "url(https://evil.test)", kind: "inferred" },
+    ],
+  },
+  uncertainty: ["Rendered fidelity unknown"],
+  capabilities: null,
+  provenance: null,
+};
+const reply = (body, status = 200) => ({ ok: status < 400, status, json: async () => body });
+class TextNode {
+  childNodes = [];
+  attrs = {};
+  style = {
+    setProperty(name, value) {
+      this[name] = value;
+    },
+    removeProperty(name) {
+      delete this[name];
+    },
+  };
+  classList = { toggle() {}, remove() {} };
+  dataset = {};
+  textContent = "";
+  constructor(tag) {
+    this.tag = tag;
+  }
+  querySelector(tag) {
+    const node = this.childNodes.find((child) => child.tag === tag);
+    if (node)
+      node.remove = () => {
+        this.childNodes = this.childNodes.filter((child) => child !== node);
+      };
+    return node ?? null;
+  }
+  append(...children) {
+    this.childNodes.push(...children);
+  }
+  prepend(...children) {
+    this.childNodes.unshift(...children);
+  }
+  replaceChildren(...children) {
+    this.childNodes = children;
+  }
+  setAttribute(key, value) {
+    this.attrs[key] = value;
+  }
+  addEventListener() {}
+  set innerHTML(_value) {
+    throw new Error("Unsafe active HTML sink used");
+  }
+}
+function nodes(root) {
+  return [root, ...root.childNodes.flatMap(nodes)];
+}
+
+export default function registerScenarios() {
+  test("Browser opt-in preserves URL/nonce/revision and renders observed human wait and cancellation", async (t) => {
+    const calls = [];
+    const browser = {
+      available: true,
+      reason: null,
+      method: "local-isolated-cdp",
+      human_wait_ms: 120000,
+    };
+    t.mock.method(globalThis, "fetch", async (path, options) => {
+      calls.push({ path, options });
+      return reply(
+        path === "/api/session" ? { nonce: "browser-fixture", capabilities: { browser } } : {},
+      );
+    });
+    assert.deepEqual((await connect()).browser, browser);
+    const url = "https://example.test/page?view=design";
+    await generate({ url, mode: "browser", provider: "ignored" });
+    await reprocess("sample", 23, url, "browser");
+    await cancelJob("own-browser-job", 24);
+    assert.deepEqual(JSON.parse(calls[1].options.body), { url, mode: "browser" });
+    assert.deepEqual(JSON.parse(calls[2].options.body), {
+      expected_revision: 23,
+      url,
+      mode: "browser",
+    });
+    assert.equal(calls[3].path, "/api/jobs/own-browser-job/cancel");
+    assert.deepEqual(JSON.parse(calls[3].options.body), { expected_revision: 24 });
+    for (const call of calls.slice(1))
+      assert.equal(call.options.headers["X-Maker-Nonce"], "browser-fixture");
+    assert.throws(() => generate({ url, mode: "stealth" }), /Modo/);
+    assert.throws(() => cancelJob("own-browser-job", null), /Revisão/);
+    assert.equal(calls.length, 4);
+    const previous = Object.getOwnPropertyDescriptor(globalThis, "document");
+    Object.defineProperty(globalThis, "document", {
+      configurable: true,
+      value: { createElement: (tag) => new TextNode(tag) },
+    });
+    t.after(() =>
+      previous
+        ? Object.defineProperty(globalThis, "document", previous)
+        : delete globalThis.document,
+    );
+    const value = {
+      status: "running",
+      phase: "browser-wait",
+      browser: {
+        state: "waiting-human",
+        deadline_at: "fixture-deadline",
+        action: "Complete o desafio na janela própria, se exibido",
+      },
+      progress: {},
+      events: [],
+    };
+    assert.equal(jobText(value), "Aguardando sua ação no navegador");
+    const target = new TextNode("div");
+    renderJobProgress(value, target, new TextNode("pre"));
+    assert.ok(nodes(target).some((node) => node.textContent === value.browser.action));
+    assert.ok(nodes(target).some((node) => node.textContent.includes("fixture-deadline")));
+    assert.equal(
+      jobText({ status: "failed", failure: { kind: "cancelled" } }),
+      "Extração cancelada",
+    );
+  });
+}