@zaip-ai/cli 6.3.0 → 7.5.0

package/templates/.agents/design/apps/catalog/src/specimens/maker-native.js

@@ -0,0 +1,332 @@
+// Real Maker presentation with injected synthetic services; no API request or product CSS.
+import {
+  matchesCatalog,
+  mountColorFilter,
+} from "../../../../design-system-maker/frontend/catalog/filters.js";
+import {
+  button,
+  el,
+  empty,
+  extractionCard,
+  outputItem,
+} from "../../../../design-system-maker/frontend/shared/components.js";
+import { reprocessInPlace } from "../../../../design-system-maker/frontend/shared/reprocess-dialog.js";
+import { renderDetail } from "../../../../design-system-maker/frontend/shared/viewer-detail.js";
+import { makerDetail, makerSummaries } from "./maker-fixtures.js";
+
+// Real helpers build their normal links. The catalog keeps them inert/local and exposes
+// their intended path as data so fixture interactions cannot navigate to a Maker API.
+function containLinks(root, activate) {
+  for (const link of root.querySelectorAll("a")) {
+    if (link.dataset.makerPath) continue;
+    const path = link.getAttribute("href");
+    link.dataset.makerPath = path;
+    link.setAttribute("href", "#/components");
+    link.addEventListener("click", (event) => {
+      event.preventDefault();
+      if (activate) activate(path);
+    });
+  }
+}
+
+function mountFilters(root, cards, summaries, select) {
+  const toolbar = el("section", "maker-filter-toolbar");
+  toolbar.setAttribute("aria-label", "Filtros reais do Maker, coleção sintética");
+  const search = el("input");
+  search.type = "search";
+  search.id = "makerExampleSearch";
+  search.value = "";
+  const searchLabel = el("label", "", "Buscar designs");
+  searchLabel.htmlFor = search.id;
+  const theme = el("select");
+  theme.id = "makerExampleTheme";
+  const themeLabel = el("label", "", "Tema");
+  themeLabel.htmlFor = theme.id;
+  for (const [value, label] of [
+    ["", "Todos os temas"],
+    ["light", "Light"],
+    ["dark", "Dark"],
+  ]) {
+    const option = el("option", "", label);
+    option.value = value;
+    theme.append(option);
+  }
+  theme.value = "";
+  const colors = el("details", "catalog-color-filter");
+  colors.append(el("summary", "", "Todas as cores"));
+  const options = el("div", "catalog-color-options");
+  const fieldset = el("fieldset");
+  fieldset.append(el("legend", "", "Cores da paleta do card"));
+  options.append(
+    fieldset,
+    button("Limpar cores", () => {}),
+  );
+  colors.append(options);
+  const count = el("p", "help");
+  count.setAttribute("role", "status");
+  const clear = button("Limpar filtros", () => {
+    search.value = "";
+    theme.value = "";
+    palette.clear();
+  });
+  const render = () => {
+    const filtered = summaries.filter((item) =>
+      matchesCatalog(item, search.value, theme.value, palette.selected()),
+    );
+    cards.replaceChildren(
+      ...filtered.map((item) => {
+        const card = extractionCard(item);
+        containLinks(card, () => select(item.id));
+        return card;
+      }),
+    );
+    if (!filtered.length)
+      cards.append(
+        empty(
+          "Nenhum output encontrado",
+          "Altere a busca ou limpe os filtros. Tema desconhecido não equivale a light/dark.",
+        ),
+      );
+    count.textContent = `${filtered.length} de ${summaries.length} designs sintéticos`;
+    clear.disabled = !search.value && !theme.value && !palette.selected().length;
+  };
+  const palette = mountColorFilter(colors, render);
+  search.addEventListener("input", render);
+  theme.addEventListener("change", render);
+  toolbar.append(searchLabel, search, themeLabel, theme, colors, clear, count);
+  root.append(toolbar);
+  render();
+  return {
+    render,
+    dispose() {
+      palette.dispose();
+      search.removeEventListener("input", render);
+      theme.removeEventListener("change", render);
+    },
+  };
+}
+
+// The actual dialog owns progress/retry/cleanup. These services return fixed examples,
+// while its real poll callback is advanced manually rather than by wall-clock timers.
+function mountReprocess(root, current, completed) {
+  const controller = new AbortController();
+  const controls = el("section", "maker-reprocess-fixture");
+  controls.append(el("h3", "", "Reprocessamento real · serviços sintéticos"));
+  const mode = el("select");
+  mode.id = "makerExampleSavedMode";
+  const modeLabel = el("label", "", "Modo salvo do exemplo");
+  modeLabel.htmlFor = mode.id;
+  for (const value of ["http", "browser"]) {
+    const option = el("option", "", value === "http" ? "HTTP" : "Navegador local");
+    option.value = value;
+    mode.append(option);
+  }
+  mode.value = "http";
+  const scenario = el("select");
+  scenario.id = "makerExampleReprocessState";
+  const label = el("label", "", "Resultado sintético do acompanhamento");
+  label.htmlFor = scenario.id;
+  for (const [value, name] of [
+    ["completed", "Sucesso"],
+    ["failed", "Falha"],
+    ["retry", "Polling interrompido: retomar"],
+    ["missing-url", "URL salva indisponível"],
+  ]) {
+    const option = el("option", "", name);
+    option.value = value;
+    scenario.append(option);
+  }
+  scenario.value = "completed";
+  const savedUrl = "https://example.test/synthetic?variant=preserved";
+  const context = el(
+    "p",
+    "help",
+    `URL salva sintética: ${savedUrl}. Reprocessar preserva URL/modo; o catálogo não envia POST.`,
+  );
+  const status = el("p", "help");
+  status.setAttribute("role", "status");
+  let pendingPoll, outcome, savedMode, item, result, phase, interrupted;
+  const start = (control) => {
+    if (controller.signal.aborted) return;
+    return reprocessInPlace(
+      current().id,
+      control,
+      status,
+      async (value) => {
+        if (!controller.signal.aborted) completed(value);
+      },
+      {
+        parent: root,
+        signal: controller.signal,
+        connect: async () => {
+          item = { ...current() };
+          outcome = scenario.value;
+          savedMode = mode.value;
+          result = item.revision + 1;
+          phase = "running";
+          interrupted = false;
+        },
+        detail: async () => ({
+          revision: item.revision,
+          summary: {
+            ...item,
+            replay_available: outcome !== "missing-url",
+            request_url: outcome === "missing-url" ? null : savedUrl,
+          },
+        }),
+        reprocess: async () => {
+          status.textContent = `Exemplo sintético: URL/modo salvos (${savedMode}); nenhum POST enviado.`;
+          return { jobId: "synthetic-reprocess" };
+        },
+        job: async () => {
+          const dialog = root.querySelector("dialog");
+          if (dialog && !dialog.querySelector("[data-maker-advance]")) {
+            const advance = button("Avançar cenário sintético", async () => {
+              phase = outcome;
+              const poll = pendingPoll;
+              pendingPoll = null;
+              await poll?.();
+              containLinks(dialog);
+            });
+            advance.dataset.makerAdvance = "true";
+            dialog.append(
+              el("p", "help", `Fixture: URL ${savedUrl} · modo salvo ${savedMode}.`),
+              advance,
+            );
+          }
+          if (phase === "retry" && !interrupted) {
+            interrupted = true;
+            throw new Error("Polling sintético indisponível");
+          }
+          const state = phase === "retry" ? "completed" : phase;
+          return {
+            status: state,
+            phase: state === "running" ? "parse-css" : state,
+            entry_id: item.id,
+            result_revision: result,
+            error: state === "failed" ? "Falha sintética; revisão anterior preservada." : null,
+          };
+        },
+        schedule(callback) {
+          pendingPoll = callback;
+          return 1;
+        },
+        cancelDelay() {
+          pendingPoll = null;
+        },
+      },
+    ).then(() => {
+      const dialog = root.querySelector("dialog");
+      if (dialog) containLinks(dialog);
+    });
+  };
+  const opener = button("Reprocessar exemplo", (event) => start(event.currentTarget));
+  const reopen = button("Mostrar progresso do exemplo", (event) => start(event.currentTarget));
+  controls.append(modeLabel, mode, label, scenario, context, opener, reopen, status);
+  root.append(controls);
+  return { start, dispose: () => controller.abort() };
+}
+
+export function mountMakerSpecimen(root) {
+  // Missing measurements stay absent; do not display the old fixture scores as evidence.
+  const summaries = makerSummaries.map((summary) => ({ ...summary, design_score: null }));
+  let active = summaries[0];
+  let revision = 2;
+  let mounted = true;
+  const cards = el("div", "maker-card-grid");
+  root.replaceChildren();
+  const filters = mountFilters(root, cards, summaries, (id) => select(id));
+  const viewer = el("div", "maker-viewer");
+  const sidebar = el("nav", "maker-sidebar");
+  sidebar.setAttribute("aria-label", "Outputs sintéticos do Maker");
+  const output = el("div", "maker-output");
+  output.tabIndex = -1;
+  output.setAttribute("role", "region");
+  output.setAttribute("aria-label", "Detalhe do output sintético");
+  const hero = el("div", "maker-hero");
+  const panel = el("div", "maker-panels");
+  const message = el("p", "help", "Exemplos sintéticos. Links não acessam arquivos nem a API.");
+  message.setAttribute("role", "status");
+  output.append(hero, panel, message);
+  viewer.append(sidebar, output);
+
+  function render(focus = false) {
+    if (!mounted) return;
+    sidebar.replaceChildren(
+      ...summaries.map((summary) =>
+        outputItem(summary, summary.id === active.id, (id) => select(id)),
+      ),
+    );
+    containLinks(sidebar);
+    const detail = makerDetail(active, revision);
+    detail.revision_count = active.revision;
+    if (active.revision > 2)
+      detail.revisions.unshift({
+        revision: active.revision,
+        status: "ready",
+        updated_at: "Fixture sintética atualizada",
+      });
+    renderDetail(detail, {
+      hero,
+      panel,
+      current() {
+        revision = active.revision;
+        render(true);
+      },
+      viewRevision(value) {
+        revision = value;
+        render(true);
+      },
+      historyMore() {},
+      onReprocess(event) {
+        reprocess.start(event.currentTarget);
+      },
+    });
+    containLinks(hero, (path) => {
+      message.textContent = `Ação ilustrativa: ${path}. Nenhuma requisição enviada.`;
+    });
+    if (focus) output.focus();
+  }
+  function select(id) {
+    active = summaries.find((summary) => summary.id === id) ?? active;
+    revision = active.revision;
+    render(true);
+  }
+  const feedback = el("div", "maker-feedback");
+  const blank = empty("Nenhum output", "Coleção sintética vazia. Gere uma proposta para começar.");
+  const loading = empty(
+    "Carregando outputs…",
+    "A coleção ainda não foi recebida; ausência não é zero.",
+  );
+  loading.setAttribute("role", "status");
+  loading.setAttribute("aria-busy", "true");
+  const retry = empty(
+    "Não foi possível carregar",
+    "Os outputs existentes seriam preservados. Tente novamente.",
+  );
+  const retryMessage = el("p", "help");
+  retryMessage.setAttribute("role", "status");
+  const retryButton = button("Tentar novamente (exemplo)", () => {
+    retryMessage.textContent = "Coleção sintética disponível. Nenhuma requisição enviada.";
+  });
+  retry.append(retryButton, retryMessage);
+  feedback.append(blank, loading, retry);
+  root.append(cards, viewer, feedback);
+  const reprocess = mountReprocess(
+    root,
+    () => active,
+    (value) => {
+      active.revision = value.result_revision;
+      revision = active.revision;
+      filters.render();
+      render(true);
+    },
+  );
+  render();
+  return () => {
+    mounted = false;
+    filters.dispose();
+    reprocess.dispose();
+    root.replaceChildren();
+  };
+}

package/templates/.agents/design/apps/catalog/src/stories/Maker.stories.tsx

@@ -0,0 +1,24 @@
+import { MakerGenerationSpecimen, MakerSpecimen } from "../specimens/MakerSpecimen.js";
+import { makerJobFixtures } from "../specimens/maker-fixtures.js";
+
+export default { title: "Components/Design System Maker", component: MakerSpecimen };
+export const CatalogAndViewer = {};
+export const FiltersAndReprocess = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Filtros/dropdown e diálogo reais do Maker. Escolha o cenário sintético antes de Reprocessar exemplo; avance manualmente a operação dentro do diálogo. Serviços injetados sem POST, score ou captura inventados.",
+      },
+    },
+  },
+};
+export const GenerationStates = {
+  render: () => (
+    <>
+      {makerJobFixtures.map((fixture) => (
+        <MakerGenerationSpecimen key={fixture.state} fixture={fixture} />
+      ))}
+    </>
+  ),
+};

package/templates/.agents/design/apps/catalog/src/stories/WorkspaceStatus.stories.tsx

@@ -10,3 +10,4 @@ export const ProjectSettings = { args: { fixture: workspaceStatusFixtures[0] } }
 export const Missing = { args: { fixture: workspaceStatusFixtures[1] } };
 export const Invalid = { args: { fixture: workspaceStatusFixtures[2] } };
 export const Unavailable = { args: { fixture: workspaceStatusFixtures[3] } };
+export const Degraded = { args: { fixture: workspaceStatusFixtures[4] } };

package/templates/.agents/design/apps/catalog/src/styles/maker-specimen.css

@@ -0,0 +1,285 @@
+.maker-specimen {
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.65;
+}
+.maker-specimen :is(.maker-card-grid, .maker-feedback, .maker-panels, .maker-jobs) {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-block: 24px;
+}
+.maker-specimen :is(.catalog-card, .panel, .empty-state, .maker-generation),
+.maker-specimen.maker-generation {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 24px;
+  background: var(--surface);
+}
+.maker-specimen :is(h2, h3) {
+  margin: 0 0 16px;
+  font-size: 1.25rem;
+  line-height: 1.3;
+  letter-spacing: -0.035em;
+}
+.maker-specimen :is(.meta, .help, .muted) {
+  color: var(--text-muted);
+  overflow-wrap: anywhere;
+}
+.maker-specimen :is(.card-header, .tags, .page-actions, .card-actions, .swatches, .color-grid) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.maker-specimen .badge {
+  background: var(--surface-muted);
+  color: var(--text-muted);
+}
+.maker-specimen :is(.state-collecting, .state-queued, .state-running, .badge-accent) {
+  background: var(--primary-soft);
+  color: var(--primary-ink);
+}
+.maker-specimen :is(.state-partial) {
+  color: var(--warning-ink);
+}
+.maker-specimen :is(.state-ready, .state-completed, .badge-success) {
+  color: var(--success-ink);
+}
+.maker-specimen :is(.state-failed, .error, .badge-error) {
+  color: var(--error-text);
+}
+.maker-specimen :is(.action, button:not(.button)) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 8px 16px;
+  background: var(--surface);
+  color: var(--text);
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+}
+.maker-specimen .primary {
+  background: linear-gradient(135deg, var(--primary) 0%, #72f4fb 100%);
+  color: #042330;
+  border-color: transparent;
+}
+.maker-specimen :is(a, button, input, select, summary, .code-region, .maker-output):focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 4px;
+}
+.maker-specimen :is(.maker-filter-toolbar, .maker-reprocess-fixture) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 8px 16px;
+  margin-block: 24px;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 24px;
+  background: var(--surface);
+}
+.maker-specimen :is(.maker-filter-toolbar, .maker-reprocess-fixture) :is(h3, p) {
+  grid-column: 1 / -1;
+}
+.maker-specimen :is(input, select) {
+  min-width: 0;
+  min-height: 44px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 8px 16px;
+  background: var(--surface);
+  color: var(--text);
+}
+.maker-specimen .catalog-color-filter {
+  position: relative;
+}
+.maker-specimen .catalog-color-filter summary {
+  min-height: 44px;
+  padding: 8px 16px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  cursor: pointer;
+}
+.maker-specimen .catalog-color-options {
+  position: absolute;
+  z-index: 4;
+  width: min(320px, calc(100vw - 64px));
+  max-height: 320px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 16px;
+  background: var(--surface);
+  color: var(--text);
+}
+.maker-specimen .catalog-color-options fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+.maker-specimen .catalog-color-options label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+}
+.maker-specimen .catalog-color-options input {
+  min-height: 0;
+}
+.maker-specimen .filter-color-dot {
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.maker-specimen button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.maker-specimen .management-action svg {
+  width: 24px;
+  height: 24px;
+}
+.maker-specimen .reprocess-dialog {
+  width: min(480px, calc(100vw - 32px));
+  max-height: calc(100dvh - 32px);
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 24px;
+  padding: 24px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+}
+.maker-specimen .reprocess-dialog::backdrop {
+  background: var(--overlay);
+}
+.maker-specimen .reprocess-dialog [hidden] {
+  display: none;
+}
+.maker-specimen .job-spinner {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 999px;
+}
+.maker-specimen .swatch,
+.maker-specimen .color-dot {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: none;
+}
+.maker-specimen .color-candidate {
+  display: grid;
+  gap: 4px;
+}
+.maker-specimen .maker-viewer {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr);
+  gap: 24px;
+  margin-block: 40px;
+}
+.maker-specimen .maker-sidebar {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+.maker-specimen .output-item {
+  display: flex;
+  gap: 8px;
+  min-height: 44px;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 16px;
+  color: var(--text);
+  background: var(--surface);
+  text-decoration: none;
+}
+.maker-specimen .output-item[aria-current] {
+  border-color: var(--primary);
+  border-width: 2px;
+}
+.maker-specimen .output-copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+.maker-specimen .output-icon {
+  color: var(--primary-ink);
+  font-weight: 700;
+}
+.maker-specimen :is(.maker-hero, .maker-generation),
+.maker-specimen.maker-generation {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+.maker-specimen .maker-panels {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.maker-specimen :is(.wide, .maker-generation) {
+  grid-column: 1 / -1;
+}
+.maker-specimen :is(.history-list, form) {
+  display: grid;
+  gap: 8px;
+}
+.maker-specimen .history-item[aria-current] {
+  border-color: var(--primary);
+}
+.maker-specimen .code-region {
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--surface-muted);
+}
+.maker-specimen pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.maker-specimen .kicker {
+  color: var(--primary-ink);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+.theme-dark .maker-specimen :is(.state-partial, .state-ready, .state-completed, .badge-success) {
+  color: var(--text);
+}
+.theme-dark .maker-specimen .output-icon {
+  color: var(--primary);
+}
+.theme-dark .maker-specimen .kicker {
+  color: var(--primary);
+}
+@media (max-width: 760px) {
+  .maker-specimen.maker-generation,
+  .maker-specimen
+    :is(
+      .maker-card-grid,
+      .maker-feedback,
+      .maker-viewer,
+      .maker-hero,
+      .maker-panels,
+      .maker-generation,
+      .maker-jobs,
+      .maker-filter-toolbar,
+      .maker-reprocess-fixture
+    ) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}