@zaip-ai/cli 1.0.7 → 1.3.0

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

@@ -0,0 +1,151 @@
+import type { ProjectOverview } from "./dashboard-api.js";
+import {
+  type StackComponentId,
+  type StackComponentsDraft,
+  stackComponentDefinitions,
+} from "./project-settings-model.js";
+
+type Locale = "pt-BR" | "en-US";
+
+const componentLabels: Record<StackComponentId, { pt: string; en: string }> = {
+  primary_language: { pt: "Linguagem principal", en: "Primary language" },
+  backend_runtime: { pt: "Runtime backend", en: "Backend runtime" },
+  backend_api: { pt: "Framework backend / API", en: "Backend framework / API" },
+  query_builder: { pt: "Query builder", en: "Query builder" },
+  database: { pt: "Banco de dados", en: "Database" },
+  auth_storage: { pt: "Autenticação e Storage", en: "Authentication and Storage" },
+  cache_messaging: { pt: "Cache e mensageria", en: "Cache and messaging" },
+  async_queue: { pt: "Filas e processamento assíncrono", en: "Queues and async processing" },
+  backend_infrastructure: { pt: "Infraestrutura backend", en: "Backend infrastructure" },
+  web_framework: { pt: "Framework do Web App", en: "Web App framework" },
+  web_language: { pt: "Linguagem do Web App", en: "Web App language" },
+  web_build: { pt: "Build do Web App", en: "Web App build" },
+  frontend_hosting: { pt: "Hospedagem do frontend", en: "Frontend hosting" },
+  site_framework: { pt: "Framework do site", en: "Site framework" },
+  site_language: { pt: "Linguagem do site", en: "Site language" },
+  site_islands: { pt: "Componentes interativos", en: "Interactive components" },
+  site_build: { pt: "Build do site", en: "Site build" },
+  site_hosting: { pt: "Hospedagem do site", en: "Site hosting" },
+};
+
+export function StackComponentEditor({
+  components,
+  locale,
+  onChange,
+  referenceHint,
+  versionHint,
+}: {
+  components: StackComponentsDraft;
+  locale: Locale;
+  onChange: (components: StackComponentsDraft) => void;
+  referenceHint: string;
+  versionHint: string;
+}) {
+  const groups = [
+    { scope: "backend", title: locale === "pt-BR" ? "Backend e dados" : "Backend and data" },
+    { scope: "frontend", title: "Web App" },
+    {
+      scope: "site",
+      title: locale === "pt-BR" ? "Site e landing pages" : "Site and landing pages",
+    },
+  ] as const;
+  const update = (
+    id: StackComponentId,
+    field: keyof StackComponentsDraft[StackComponentId],
+    value: string,
+  ) => onChange({ ...components, [id]: { ...components[id], [field]: value } });
+  return (
+    <div className="project-stack-editor">
+      {groups.map((group) => (
+        <section key={group.scope}>
+          <h3>{group.title}</h3>
+          <div className="project-stack-table">
+            <div className="project-stack-table-head" aria-hidden="true">
+              <span>Item</span>
+              <span>{locale === "pt-BR" ? "Tecnologia" : "Technology"}</span>
+              <span>{locale === "pt-BR" ? "Versão exata" : "Exact version"}</span>
+              <span>
+                {locale === "pt-BR" ? "Pacote / imagem / serviço" : "Package / image / service"}
+              </span>
+            </div>
+            {stackComponentDefinitions
+              .filter((definition) => definition.scope === group.scope)
+              .map((definition) => (
+                <div className="project-stack-row" key={definition.id}>
+                  <strong>
+                    {componentLabels[definition.id][locale === "pt-BR" ? "pt" : "en"]}
+                  </strong>
+                  <input
+                    aria-label={`${componentLabels[definition.id].pt}: tecnologia`}
+                    value={components[definition.id].name}
+                    onChange={(event) => update(definition.id, "name", event.target.value)}
+                  />
+                  <input
+                    aria-label={`${componentLabels[definition.id].pt}: versão exata`}
+                    inputMode="decimal"
+                    placeholder="x.y.z"
+                    value={components[definition.id].version}
+                    onChange={(event) => update(definition.id, "version", event.target.value)}
+                  />
+                  <input
+                    aria-label={`${componentLabels[definition.id].pt}: referência`}
+                    placeholder="npm:pacote ou service:nome"
+                    value={components[definition.id].reference}
+                    onChange={(event) => update(definition.id, "reference", event.target.value)}
+                  />
+                </div>
+              ))}
+          </div>
+        </section>
+      ))}
+      <div className="project-stack-format-help">
+        <p>
+          <strong>{locale === "pt-BR" ? "Formato da versão:" : "Version format:"}</strong>{" "}
+          {versionHint}
+        </p>
+        <p>
+          <strong>{locale === "pt-BR" ? "Formato da referência:" : "Reference format:"}</strong>{" "}
+          {referenceHint}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function StackVersions({
+  components,
+  text,
+}: {
+  components: ProjectOverview["stack_components"];
+  text: {
+    versions: string;
+    versionUnavailable: string;
+    exact: string;
+    constraint: string;
+  };
+}) {
+  if (components.length === 0) return null;
+  return (
+    <section className="project-stack-versions" aria-label={text.versions}>
+      <h3>{text.versions}</h3>
+      <div>
+        {components.map((component) => (
+          <article key={component.name}>
+            <div className="project-stack-version-identity">
+              <strong>{component.name}</strong>
+              <code>{component.version ?? text.versionUnavailable}</code>
+            </div>
+            <span className={`is-${component.verification}`}>
+              {component.verification === "exact"
+                ? text.exact
+                : component.verification === "constraint"
+                  ? text.constraint
+                  : text.versionUnavailable}
+            </span>
+            {component.source ? <small>{component.source}</small> : null}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/.agents/dashboard/apps/frontend/src/TraceabilityWorkspace.test.ts

@@ -0,0 +1,37 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { filterTraceabilityTasks, traceabilityTaskOptionId } from "./TraceabilityWorkspace.js";
+
+describe("TraceabilityWorkspace task search", () => {
+  const tasks = [
+    { id: "TASK-ALPHA", title: "Preparar lançamento", created_at: "2026-08-10T12:00:00.000Z" },
+    { id: "TASK-BETA", title: "Revisar contrato", created_at: "2026-08-11T12:00:00.000Z" },
+  ] as never[];
+
+  it("filters tasks by either title or ID", () => {
+    expect(filterTraceabilityTasks(tasks, "lançamento").map((task) => task.id)).toEqual([
+      "TASK-ALPHA",
+    ]);
+    expect(filterTraceabilityTasks(tasks, "beta").map((task) => task.id)).toEqual(["TASK-BETA"]);
+    expect(filterTraceabilityTasks(tasks, "missing")).toEqual([]);
+  });
+
+  it("keeps selection and keyboard interaction accessible", () => {
+    const source = readFileSync(new URL("TraceabilityWorkspace.tsx", import.meta.url), "utf8");
+
+    expect(source).toContain("onSelectTask(task.id)");
+    expect(source).toContain('role="combobox"');
+    expect(source).toContain('role="listbox"');
+    expect(source).toContain('role="option"');
+    expect(source).toContain('event.key === "Enter"');
+    expect(source).toContain('event.key === "ArrowDown"');
+    expect(source).toContain("setActiveIndex");
+    expect(source).toContain("aria-activedescendant");
+    expect(source).toContain("traceabilityTaskOptionId(activeTaskId)");
+    expect(source).toContain('role="status"');
+  });
+
+  it("exposes the Arrow-key active task through a stable option ID", () => {
+    expect(traceabilityTaskOptionId("TASK-ALPHA")).toBe("traceability-task-option-TASK-ALPHA");
+  });
+});

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

@@ -1,8 +1,26 @@
 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 { useEffect, useMemo, useState } from "react";
 import "./traceability-workspace.css";
 
+type TraceabilityTask = OperationsProjection["tasks"][number];
+
+export function filterTraceabilityTasks(
+  tasks: readonly TraceabilityTask[],
+  query: string,
+): TraceabilityTask[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  if (normalizedQuery === "") return [...tasks];
+  return tasks.filter((task) =>
+    `${task.title} ${task.id}`.toLocaleLowerCase().includes(normalizedQuery),
+  );
+}
+
+export function traceabilityTaskOptionId(taskId: string): string {
+  return `traceability-task-option-${taskId}`;
+}
+
 export function TraceabilityWorkspace({
   locale,
   loadingTaskId,
@@ -27,22 +45,106 @@ export function TraceabilityWorkspace({
   const sortedTasks = [...tasks].sort(
     (a, b) => Date.parse(b.created_at) - Date.parse(a.created_at),
   );
+  const selectedTask = sortedTasks.find((task) => task.id === selectedTaskId);
+  const [query, setQuery] = useState(() => selectedTask?.title ?? selectedTaskId);
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const filteredTasks = useMemo(
+    () => filterTraceabilityTasks(sortedTasks, query),
+    [query, sortedTasks],
+  );
+  const searchInputId = "traceability-task-search";
+  const resultsId = "traceability-task-results";
+  const taskLabel = locale === "pt-BR" ? "Task selecionada" : "Selected task";
+  const searchLabel =
+    locale === "pt-BR" ? "Buscar task por nome ou ID" : "Search task by name or ID";
+  const activeTaskId = isListOpen ? filteredTasks[activeIndex]?.id : undefined;
+
+  useEffect(() => {
+    setQuery(selectedTask?.title ?? selectedTaskId);
+    setActiveIndex(0);
+  }, [selectedTask?.title, selectedTaskId]);
+
+  const selectTask = (task: TraceabilityTask) => {
+    setQuery(task.title);
+    setIsListOpen(false);
+    onSelectTask(task.id);
+  };
+
+  const onSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setIsListOpen(true);
+      setActiveIndex((index) => Math.min(index + 1, Math.max(0, filteredTasks.length - 1)));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setIsListOpen(true);
+      setActiveIndex((index) => Math.max(0, index - 1));
+    } else if (event.key === "Enter" && isListOpen) {
+      const task = filteredTasks[activeIndex];
+      if (task !== undefined) {
+        event.preventDefault();
+        selectTask(task);
+      }
+    } else if (event.key === "Escape") {
+      setIsListOpen(false);
+    }
+  };
   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>
+          <label htmlFor={searchInputId}>{taskLabel}</label>
+          <input
+            aria-activedescendant={
+              activeTaskId === undefined ? undefined : traceabilityTaskOptionId(activeTaskId)
+            }
+            aria-autocomplete="list"
+            aria-controls={resultsId}
+            aria-expanded={isListOpen}
+            aria-label={searchLabel}
+            id={searchInputId}
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setActiveIndex(0);
+              setIsListOpen(true);
+            }}
+            onFocus={() => setIsListOpen(true)}
+            onKeyDown={onSearchKeyDown}
+            role="combobox"
+            type="search"
+            value={query}
+          />
+          {isListOpen ? (
+            <div
+              aria-label={searchLabel}
+              className="traceability-task-results"
+              id={resultsId}
+              role="listbox"
+            >
+              {filteredTasks.length > 0 ? (
+                filteredTasks.map((task, index) => (
+                  <div key={task.id} role="presentation">
+                    <button
+                      aria-selected={task.id === selectedTaskId}
+                      className={index === activeIndex ? "is-active" : undefined}
+                      id={traceabilityTaskOptionId(task.id)}
+                      onClick={() => selectTask(task)}
+                      role="option"
+                      type="button"
+                    >
+                      <strong>{task.title}</strong>
+                      <small>{task.id}</small>
+                    </button>
+                  </div>
+                ))
+              ) : (
+                <div className="traceability-task-no-results" role="status">
+                  {locale === "pt-BR" ? "Nenhuma task encontrada." : "No tasks found."}
+                </div>
+              )}
+            </div>
+          ) : null}
         </div>
         <small>
           {locale === "pt-BR"

package/templates/.agents/dashboard/apps/frontend/src/app-preferences.ts

@@ -0,0 +1,15 @@
+import type { CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
+import type { DashboardView } from "./DashboardCapabilityNav.js";
+
+const legacyCostMonitorPath = "/zaip-cost-monitor";
+export const sessionTokenKey = "zaip-dashboard-session-token";
+export const localeKey = "zaip-dashboard-locale";
+export const currencyKey = "zaip-dashboard-currency";
+
+export function savedLocale(): CostLocale {
+  return window.localStorage.getItem(localeKey) === "en-US" ? "en-US" : "pt-BR";
+}
+
+export function initialDashboardView(pathname: string): DashboardView | null {
+  return pathname.replace(/\/+$/, "") === legacyCostMonitorPath ? "cost-monitor" : null;
+}

package/templates/.agents/dashboard/apps/frontend/src/app-session-token.ts

@@ -0,0 +1,20 @@
+import { sessionTokenKey } from "./app-preferences.js";
+
+export function readDashboardSessionToken(): string {
+  const url = new URL(window.location.href);
+  const suppliedToken = url.searchParams.get("token");
+  const sessionToken =
+    suppliedToken ??
+    window.localStorage.getItem(sessionTokenKey) ??
+    window.sessionStorage.getItem(sessionTokenKey) ??
+    "";
+  if (sessionToken) {
+    window.localStorage.setItem(sessionTokenKey, sessionToken);
+    window.sessionStorage.setItem(sessionTokenKey, sessionToken);
+  }
+  if (url.searchParams.has("token")) {
+    url.searchParams.delete("token");
+    window.history.replaceState(null, "", `${url.pathname}${url.search}${url.hash}`);
+  }
+  return sessionToken;
+}

package/templates/.agents/dashboard/apps/frontend/src/cost-calculation-guide.css

@@ -0,0 +1,267 @@
+.cost-guide {
+  min-height: 100vh;
+  padding: clamp(18px, 4vw, 56px);
+  color: #eaf3ff;
+  background: radial-gradient(circle at 80% 0, #00b0f01a, transparent 34%), #070b13;
+}
+
+.cost-guide > header,
+.cost-guide-controls,
+.cost-guide-section,
+.cost-guide-final-note {
+  width: min(1160px, 100%);
+  margin-inline: auto;
+}
+
+.cost-guide > header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.cost-guide small {
+  color: #7dd3fc;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+}
+
+.cost-guide h1 {
+  margin: 8px 0;
+  font-size: clamp(2rem, 4vw, 3.25rem);
+}
+
+.cost-guide h2,
+.cost-guide h3 {
+  margin-top: 0;
+}
+
+.cost-guide p {
+  color: #a9b8ca;
+  line-height: 1.6;
+}
+
+.cost-guide button,
+.cost-guide select {
+  padding: 11px 14px;
+  color: #eaf3ff;
+  background: #101a2a;
+  border: 1px solid #36506e;
+  border-radius: 11px;
+}
+
+.cost-guide button {
+  cursor: pointer;
+}
+
+.cost-guide-controls {
+  display: flex;
+  gap: 14px;
+  margin-block: 28px;
+}
+
+.cost-guide-controls label {
+  display: grid;
+  gap: 7px;
+  color: #9fb8d4;
+  font-size: 0.82rem;
+}
+
+.cost-guide-section {
+  margin-block: 22px;
+  padding: clamp(18px, 3vw, 28px);
+  background: #0c1421;
+  border: 1px solid #24354b;
+  border-radius: 18px;
+}
+
+.cost-guide-section-heading {
+  max-width: 780px;
+  margin-bottom: 20px;
+}
+
+.cost-guide-section-heading p {
+  margin-bottom: 0;
+}
+
+.cost-guide-table-wrap {
+  overflow-x: auto;
+}
+
+.cost-guide table {
+  width: 100%;
+  min-width: 650px;
+  border-collapse: collapse;
+}
+
+.cost-guide caption {
+  padding: 0 0 12px;
+  color: #7dd3fc;
+  text-align: left;
+}
+
+.cost-guide th,
+.cost-guide td {
+  padding: 12px;
+  text-align: left;
+  border-bottom: 1px solid #25364b;
+}
+
+.cost-guide thead {
+  color: #7dd3fc;
+}
+
+.cost-guide-blocks {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.cost-guide-blocks article,
+.cost-guide-example-card {
+  padding: 18px;
+  background: #0f1a2a;
+  border: 1px solid #263c55;
+  border-radius: 14px;
+}
+
+.cost-guide-blocks strong {
+  color: #ddecff;
+}
+
+.cost-guide-blocks p {
+  margin: 8px 0 0;
+  font-size: 0.92rem;
+}
+
+.cost-guide-example-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.cost-guide-calculation {
+  display: grid;
+  gap: 4px;
+}
+
+.cost-guide-calculation-head,
+.cost-guide-calculation-line {
+  display: grid;
+  grid-template-columns: minmax(95px, 0.7fr) minmax(260px, 2fr) minmax(90px, 0.7fr);
+  gap: 12px;
+  align-items: center;
+}
+
+.cost-guide-calculation-head {
+  color: #7890aa;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.cost-guide-calculation-line {
+  padding-block: 9px;
+  border-bottom: 1px solid #223348;
+}
+
+.cost-guide-calculation-line code,
+.cost-guide-speed code {
+  color: #b9d5ee;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 0.78rem;
+  white-space: normal;
+}
+
+.cost-guide-calculation-line > span,
+.cost-guide-calculation-total > span {
+  text-align: right;
+}
+
+.cost-guide-calculation-total {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 14px;
+  color: #7dd3fc;
+  font-size: 1.05rem;
+}
+
+.cost-guide-speed,
+.cost-guide-context-summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 20px;
+  margin-top: 16px;
+  padding: 14px 16px;
+  background: #0b1b2b;
+  border: 1px solid #285579;
+  border-radius: 13px;
+}
+
+.cost-guide-speed strong {
+  color: #7dd3fc;
+  font-size: 1.3rem;
+}
+
+.cost-guide-context-summary {
+  margin-bottom: 18px;
+  color: #adc3d9;
+}
+
+.cost-guide-unavailable,
+.cost-guide-unavailable-combination {
+  padding: 16px;
+  color: #fcd34d !important;
+  background: #2a210b66;
+  border: 1px solid #8a6b22;
+  border-radius: 12px;
+}
+
+.cost-guide-unavailable-combination {
+  margin-top: 18px;
+}
+
+.cost-guide-unavailable-combination p {
+  margin: 6px 0 0;
+}
+
+.cost-guide-final-note {
+  box-sizing: border-box;
+  padding: 20px;
+  color: #d7e8fa;
+  line-height: 1.6;
+  background: #0c1726;
+  border-left: 4px solid #38bdf8;
+  border-radius: 8px 14px 14px 8px;
+}
+
+@media (max-width: 900px) {
+  .cost-guide-example-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .cost-guide > header,
+  .cost-guide-controls {
+    flex-direction: column;
+  }
+
+  .cost-guide-blocks {
+    grid-template-columns: 1fr;
+  }
+
+  .cost-guide-calculation-head {
+    display: none;
+  }
+
+  .cost-guide-calculation-line {
+    grid-template-columns: 1fr;
+    gap: 5px;
+  }
+
+  .cost-guide-calculation-line > span {
+    text-align: left;
+  }
+}