@zaip-ai/cli 1.0.4 → 1.0.7

package/templates/.agents/dashboard/apps/frontend/src/TraceabilityWorkspace.tsx

@@ -0,0 +1,72 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import type { TaskTrace } from "@zaip-ai/dashboard-traceability/contracts";
+import { TaskTracePanel } from "@zaip-ai/dashboard-traceability/react";
+import "./traceability-workspace.css";
+
+export function TraceabilityWorkspace({
+  locale,
+  loadingTaskId,
+  onSelectTask,
+  onOpenChange,
+  onOpenPrd,
+  onOpenSpec,
+  selectedTaskId,
+  tasks,
+  trace,
+}: {
+  locale: "pt-BR" | "en-US";
+  loadingTaskId: string | null;
+  onSelectTask: (taskId: string) => void;
+  onOpenChange: (changeId: string) => void;
+  onOpenPrd: (prdId: string) => void;
+  onOpenSpec: (specId: string) => void;
+  selectedTaskId: string;
+  tasks: OperationsProjection["tasks"];
+  trace: TaskTrace | null;
+}) {
+  const sortedTasks = [...tasks].sort(
+    (a, b) => Date.parse(b.created_at) - Date.parse(a.created_at),
+  );
+  return (
+    <section className="traceability-workspace">
+      <header>
+        <div>
+          <span>{locale === "pt-BR" ? "Task selecionada" : "Selected task"}</span>
+          <select
+            aria-label={locale === "pt-BR" ? "Selecionar task por nome" : "Select task by name"}
+            onChange={(event) => onSelectTask(event.target.value)}
+            value={selectedTaskId}
+          >
+            {sortedTasks.map((task) => (
+              <option key={task.id} value={task.id}>
+                {task.title}
+              </option>
+            ))}
+          </select>
+        </div>
+        <small>
+          {locale === "pt-BR"
+            ? "Selecione pelo nome para visualizar o ciclo completo sem precisar do ID."
+            : "Select by name to inspect the complete lifecycle without knowing the ID."}
+        </small>
+      </header>
+      {loadingTaskId ? (
+        <div aria-live="polite" className="traceability-workspace-loading">
+          {locale === "pt-BR" ? "Carregando as 6 etapas…" : "Loading all 6 stages…"}
+        </div>
+      ) : trace ? (
+        <TaskTracePanel
+          embedded
+          locale={locale}
+          onClose={() => undefined}
+          onOpenChange={onOpenChange}
+          onOpenPrd={onOpenPrd}
+          onOpenSpec={onOpenSpec}
+          trace={trace}
+        />
+      ) : (
+        <p>{locale === "pt-BR" ? "Nenhuma task disponível." : "No task available."}</p>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,660 @@
+.agent-catalog-page,
+.agent-catalog-state {
+  min-height: 100vh;
+  background: #f5f7fb;
+  color: #0f172a;
+  padding: 40px;
+}
+
+.agent-catalog-header,
+.agent-catalog-error,
+.agent-catalog-success,
+.agent-catalog-grid {
+  max-width: 1440px;
+  margin-inline: auto;
+}
+
+.agent-catalog-header {
+  margin-bottom: 24px;
+}
+
+.agent-catalog-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.agent-catalog-header-copy p,
+.agent-catalog-state p {
+  margin: 0 0 8px;
+  color: #006b91;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-header-copy h1,
+.agent-catalog-state h1 {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  letter-spacing: -0.035em;
+}
+
+.agent-catalog-header-copy > span {
+  display: block;
+  margin-top: 10px;
+  color: #526176;
+  line-height: 1.65;
+}
+
+.agent-catalog-back,
+.agent-catalog-add,
+.agent-catalog-edit,
+.agent-catalog-save,
+.agent-catalog-cancel,
+.agent-catalog-state button {
+  min-height: 44px;
+  border: 1px solid rgba(0, 176, 240, 0.45);
+  border-radius: 999px;
+  background: transparent;
+  color: #006b91;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 10px 20px;
+}
+
+.agent-catalog-add,
+.agent-catalog-save {
+  border-color: transparent;
+  background: linear-gradient(135deg, #00b0f0 0%, #72f4fb 100%);
+  color: #042330;
+}
+
+.agent-catalog-error,
+.agent-catalog-success {
+  border-radius: 16px;
+  padding: 16px 18px;
+}
+
+.agent-catalog-error,
+.agent-catalog-success {
+  margin-bottom: 20px;
+}
+
+.agent-catalog-error {
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  background: #fff1f2;
+  color: #b91c1c;
+}
+
+.agent-catalog-success {
+  border: 1px solid rgba(22, 163, 74, 0.3);
+  background: #f0fdf4;
+  color: #166534;
+}
+
+.agent-catalog-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
+  gap: 16px;
+}
+
+.agent-catalog-card {
+  display: flex;
+  min-height: 250px;
+  overflow: hidden;
+  flex-direction: column;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
+}
+
+.agent-catalog-card-portrait {
+  position: relative;
+  display: grid;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+
+.agent-catalog-card-portrait img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  object-fit: contain;
+}
+
+.agent-catalog-photo-preview {
+  display: grid;
+  width: min(100%, 220px);
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid #dbe4ef;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.agent-catalog-photo-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.agent-catalog-card-heading {
+  border-bottom: 1px solid #dbe4ef;
+  background: linear-gradient(145deg, rgba(0, 176, 240, 0.08), transparent 70%);
+  padding: 18px 20px 16px;
+}
+
+.agent-catalog-card-title {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.agent-catalog-card-title > span {
+  width: fit-content;
+  border-radius: 999px;
+  padding: 4px 9px;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-card-title .is-framework {
+  background: rgba(0, 176, 240, 0.12);
+  color: #006b91;
+}
+
+.agent-catalog-card-title .is-custom {
+  background: #ecfdf5;
+  color: #166534;
+}
+
+.agent-catalog-card h2,
+.agent-catalog-modal h2,
+.agent-catalog-modal h3,
+.agent-catalog-card p,
+.agent-catalog-modal p {
+  margin: 0;
+}
+
+.agent-catalog-card h2 {
+  overflow: hidden;
+  color: #0f172a;
+  font-size: 1rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-catalog-card-title code {
+  overflow: hidden;
+  color: #526176;
+  font-size: 0.72rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-catalog-card-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 16px;
+  padding: 18px 20px 20px;
+}
+
+.agent-catalog-card-prompt {
+  display: -webkit-box;
+  min-height: calc(1.5em * 3);
+  overflow: hidden;
+  color: #526176;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
+.agent-catalog-runtime-summary {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.agent-catalog-runtime-summary > div {
+  min-width: 0;
+  border: 1px solid #dbe4ef;
+  border-radius: 12px;
+  background: #f8fafc;
+  padding: 9px 10px;
+}
+
+.agent-catalog-runtime-summary dt {
+  color: #64748b;
+  font-size: 0.65rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-runtime-summary dd {
+  overflow: hidden;
+  margin: 4px 0 0;
+  color: #0f172a;
+  font-size: 0.8rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-catalog-edit {
+  width: 100%;
+  margin-top: auto;
+}
+
+.agent-catalog-modal-backdrop {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  display: grid;
+  overflow-y: auto;
+  place-items: center;
+  background: rgba(10, 14, 23, 0.72);
+  padding: 24px;
+}
+
+.agent-catalog-modal {
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 720px);
+  max-height: min(90vh, 880px);
+  overflow: hidden;
+  border: 1px solid #dbe4ef;
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
+}
+
+.agent-catalog-modal-header,
+.agent-catalog-modal-actions {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 20px 24px;
+}
+
+.agent-catalog-modal-header {
+  border-bottom: 1px solid #dbe4ef;
+  background: linear-gradient(145deg, rgba(0, 176, 240, 0.08), transparent 68%);
+}
+
+.agent-catalog-modal-header > div {
+  display: grid;
+  gap: 6px;
+}
+
+.agent-catalog-modal-header span {
+  color: #006b91;
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-modal-header h2 {
+  color: #0f172a;
+  font-size: 1.4rem;
+  letter-spacing: -0.025em;
+}
+
+.agent-catalog-modal-header p {
+  max-width: 560px;
+  color: #526176;
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
+.agent-catalog-modal-close {
+  display: grid;
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+  border: 1px solid #dbe4ef;
+  border-radius: 999px;
+  background: #fff;
+  color: #526176;
+  cursor: pointer;
+  font-size: 1.5rem;
+  place-items: center;
+}
+
+.agent-catalog-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 24px 24px;
+}
+
+.agent-catalog-card-section {
+  display: grid;
+  gap: 14px;
+  padding-top: 20px;
+}
+
+.agent-catalog-card-section + .agent-catalog-card-section {
+  border-top: 1px solid #e2e8f0;
+  margin-top: 20px;
+}
+
+.agent-catalog-card-section h3 {
+  color: #0f172a;
+  font-size: 0.9rem;
+}
+
+.agent-catalog-section-heading {
+  display: grid;
+  gap: 4px;
+}
+
+.agent-catalog-section-heading p {
+  color: #526176;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.agent-catalog-card-lock {
+  border: 1px solid rgba(0, 176, 240, 0.24);
+  border-radius: 12px;
+  background: rgba(0, 176, 240, 0.06);
+  color: #006b91;
+  font-size: 0.82rem;
+  font-weight: 650;
+  line-height: 1.45;
+  margin-top: 20px;
+  padding: 10px 12px;
+}
+
+.agent-catalog-modal label {
+  display: grid;
+  gap: 7px;
+  min-width: 0;
+}
+
+.agent-catalog-modal label > span {
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-modal input,
+.agent-catalog-modal textarea,
+.agent-catalog-modal select {
+  width: 100%;
+  min-height: 44px;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 16px;
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+  padding: 11px 13px;
+}
+
+.agent-catalog-modal textarea {
+  resize: vertical;
+}
+
+.agent-catalog-modal input:disabled,
+.agent-catalog-modal textarea:disabled {
+  background: #f8fafc;
+  color: #64748b;
+  cursor: not-allowed;
+}
+
+.agent-catalog-modal small {
+  color: #64748b;
+  line-height: 1.4;
+}
+
+.agent-catalog-capability-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.agent-catalog-capability-badges button {
+  border: 1px solid rgba(0, 176, 240, 0.45);
+  border-radius: 999px;
+  background: rgba(0, 176, 240, 0.06);
+  color: #006b91;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.78rem;
+  padding: 6px 10px;
+}
+
+.agent-catalog-technical-details dl {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+}
+
+.agent-catalog-technical-details dl > div {
+  border: 1px solid #dbe4ef;
+  border-radius: 8px;
+  background: #f8fafc;
+  padding: 10px;
+}
+
+.agent-catalog-technical-details dt {
+  color: #526176;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.agent-catalog-technical-details dd {
+  overflow-wrap: anywhere;
+  margin: 5px 0 0;
+  color: #0f172a;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 0.78rem;
+  line-height: 1.45;
+}
+
+.agent-catalog-model-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.agent-catalog-modal-actions {
+  align-items: center;
+  border-top: 1px solid #dbe4ef;
+  background: #f8fafc;
+  padding-bottom: 32px;
+}
+
+.agent-catalog-modal-actions > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-catalog-remove {
+  min-height: 44px;
+  border: 1px solid rgba(220, 38, 38, 0.35);
+  border-radius: 999px;
+  background: transparent;
+  color: #b91c1c;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  padding: 10px 16px;
+}
+
+.agent-catalog-save:disabled,
+.agent-catalog-cancel:disabled,
+.agent-catalog-remove:disabled,
+.agent-catalog-modal-close:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.agent-catalog-back:focus-visible,
+.agent-catalog-add:focus-visible,
+.agent-catalog-edit:focus-visible,
+.agent-catalog-save:focus-visible,
+.agent-catalog-cancel:focus-visible,
+.agent-catalog-remove:focus-visible,
+.agent-catalog-modal-close:focus-visible,
+.agent-catalog-modal input:focus-visible,
+.agent-catalog-modal textarea:focus-visible,
+.agent-catalog-modal select:focus-visible {
+  outline: 3px solid rgba(0, 176, 240, 0.42);
+  outline-offset: 2px;
+}
+
+@media (max-width: 720px) {
+  .agent-catalog-page,
+  .agent-catalog-state {
+    padding: 24px 16px;
+  }
+
+  .agent-catalog-header-actions {
+    align-items: stretch;
+  }
+
+  .agent-catalog-header-actions button {
+    flex: 1;
+  }
+
+  .agent-catalog-card-portrait {
+    min-height: 200px;
+  }
+
+  .agent-catalog-modal-backdrop {
+    align-items: end;
+    padding: 0;
+  }
+
+  .agent-catalog-modal {
+    width: 100%;
+    max-height: 94vh;
+    border-radius: 24px 24px 0 0;
+  }
+
+  .agent-catalog-modal-header,
+  .agent-catalog-modal-actions {
+    padding-inline: 18px;
+  }
+
+  .agent-catalog-modal-actions {
+    padding-bottom: 24px;
+  }
+
+  .agent-catalog-modal-body {
+    padding-inline: 18px;
+  }
+
+  .agent-catalog-model-row {
+    grid-template-columns: 1fr;
+  }
+
+  .agent-catalog-modal-actions {
+    align-items: stretch;
+    flex-direction: column-reverse;
+  }
+
+  .agent-catalog-modal-actions > div,
+  .agent-catalog-modal-actions button {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .agent-catalog-modal-backdrop {
+    scroll-behavior: auto;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .agent-catalog-page,
+  .agent-catalog-state {
+    background: #0a0e17;
+    color: #f1f5f9;
+  }
+
+  .agent-catalog-header-copy > span,
+  .agent-catalog-card-prompt,
+  .agent-catalog-modal-header p,
+  .agent-catalog-section-heading p,
+  .agent-catalog-modal small {
+    color: #94a3b8;
+  }
+
+  .agent-catalog-card,
+  .agent-catalog-modal {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: #111827;
+    box-shadow: none;
+  }
+
+  .agent-catalog-card-heading,
+  .agent-catalog-modal-header {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: linear-gradient(145deg, rgba(0, 176, 240, 0.12), transparent 70%);
+  }
+
+  .agent-catalog-card h2,
+  .agent-catalog-modal h2,
+  .agent-catalog-modal h3,
+  .agent-catalog-runtime-summary dd {
+    color: #f1f5f9;
+  }
+
+  .agent-catalog-card-title code {
+    color: #94a3b8;
+  }
+
+  .agent-catalog-runtime-summary > div,
+  .agent-catalog-modal-actions {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: #0a0e17;
+  }
+
+  .agent-catalog-card-section + .agent-catalog-card-section {
+    border-top-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .agent-catalog-card-lock {
+    border-color: rgba(0, 176, 240, 0.34);
+    background: rgba(0, 176, 240, 0.1);
+    color: #72f4fb;
+  }
+
+  .agent-catalog-modal input,
+  .agent-catalog-modal textarea,
+  .agent-catalog-modal select,
+  .agent-catalog-modal-close {
+    border-color: rgba(255, 255, 255, 0.16);
+    background: #0a0e17;
+    color: #f1f5f9;
+  }
+
+  .agent-catalog-modal input:disabled,
+  .agent-catalog-modal textarea:disabled {
+    background: rgba(255, 255, 255, 0.05);
+    color: #94a3b8;
+  }
+}