@zaip-ai/cli 1.0.6 → 1.0.7

package/templates/.agents/dashboard/modules/operations/src/react/TaskBoard.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it } from "vitest";
+import type { DashboardTaskProjection, RunProjection } from "../contracts.js";
+import { taskBoardStatus, taskTotals } from "./TaskBoard.js";
+
+describe("taskBoardStatus", () => {
+  it.each([
+    "draft",
+    "planned",
+  ] as const)("keeps a Task-first %s in its canonical status", (status) => {
+    expect(taskBoardStatus({ status, spec_id: null } as DashboardTaskProjection)).toBe(status);
+  });
+
+  it.each([
+    "draft",
+    "planned",
+  ] as const)("keeps a SPEC child %s in its canonical pre-execution stage", (status) => {
+    expect(taskBoardStatus({ status, spec_id: "SPEC-1" } as DashboardTaskProjection)).toBe(status);
+  });
+
+  it("moves a Task to execution only when its canonical status is executing", () => {
+    expect(taskBoardStatus({ status: "executing", spec_id: null } as DashboardTaskProjection)).toBe(
+      "executing",
+    );
+  });
+
+  it.each([
+    "verifying",
+    "completed",
+    "blocked",
+    "failed",
+    "cancelled",
+  ] as const)("keeps the Task-first terminal or post-execution status %s", (status) => {
+    expect(taskBoardStatus({ status, spec_id: null } as DashboardTaskProjection)).toBe(status);
+  });
+});
+
+describe("taskTotals", () => {
+  it("aggregates only measured Run duration and never derives processing time from the clock", () => {
+    const totals = taskTotals([
+      run({
+        duration_ms: 60_000,
+        status: "completed",
+        tokens: 120,
+        costBrl: 0.5,
+      }),
+      run({
+        duration_ms: null,
+        status: "running",
+        started_at: "2026-07-15T03:28:00.000Z",
+        tokens: null,
+        costBrl: null,
+      }),
+    ]);
+
+    expect(totals.get("TASK-1")).toEqual({
+      durationMs: 60_000,
+      tokens: 120,
+      costBrl: 0.5,
+    });
+  });
+
+  it("keeps unmeasured tokens and cost unavailable", () => {
+    const totals = taskTotals([
+      run({ duration_ms: 30_000, status: "completed", tokens: null, costBrl: null }),
+    ]);
+
+    expect(totals.get("TASK-1")).toEqual({
+      durationMs: 30_000,
+      tokens: null,
+      costBrl: null,
+    });
+  });
+
+  it("does not count an intake Run as Task execution time", () => {
+    const totals = taskTotals([
+      run({
+        duration_ms: null,
+        execution_id: null,
+        phase: "conversation",
+        started_at: "2026-07-15T03:20:00.000Z",
+        status: "running",
+        tokens: null,
+        costBrl: null,
+      }),
+    ]);
+
+    expect(totals.has("TASK-1")).toBe(true);
+  });
+
+  it("uses embedded manifest telemetry when the overview omits detailed Runs", () => {
+    const totals = taskTotals(
+      [],
+      [
+        {
+          id: "TASK-1",
+          telemetry: { duration_ms: 90_000, tokens: 240, cost_brl: 1.25 },
+        } as DashboardTaskProjection,
+      ],
+    );
+
+    expect(totals.get("TASK-1")).toEqual({
+      durationMs: 90_000,
+      tokens: 240,
+      costBrl: 1.25,
+    });
+  });
+});
+
+function run({
+  costBrl,
+  duration_ms,
+  execution_id = "EXEC-1",
+  phase = "execution",
+  started_at = "2026-07-15T03:20:00.000Z",
+  status,
+  tokens,
+}: {
+  costBrl: number | null;
+  duration_ms: number | null;
+  execution_id?: string | null;
+  phase?: string;
+  started_at?: string;
+  status: RunProjection["status"];
+  tokens: number | null;
+}): RunProjection {
+  return {
+    id: `RUN-${status}`,
+    task_id: "TASK-1",
+    execution_id,
+    phase,
+    status,
+    started_at,
+    duration_ms,
+    usage: {
+      total: {
+        tokens: { total: tokens },
+        cost: { brl: costBrl },
+      },
+    },
+  } as RunProjection;
+}

package/templates/.agents/dashboard/modules/operations/src/react/TaskBoard.tsx

@@ -0,0 +1,352 @@
+import { formatCompactNumber, formatCurrency } from "@zaip-ai/dashboard-ui";
+import { useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import type {
+  ChangeProjection,
+  DashboardTaskProjection,
+  RunProjection,
+  TaskStatus,
+} from "../contracts.js";
+import { cardElapsedTime } from "./card-elapsed-time.js";
+import { formatCardCreatedAt, formatCardFinishedAt } from "./format-card-created-at.js";
+import { formatRoundedDuration } from "./format-rounded-duration.js";
+import { formatOperationDuration, operationalDurationMs } from "./operation-duration.js";
+import { sortByCreatedAtDescending } from "./sort-by-created-at.js";
+import { type OperationsLocale, riskLabel, statusLabel } from "./status-labels.js";
+import { type TaskOrigin, taskOrigin, taskOriginLabel } from "./task-origin.js";
+import { useCurrentTime } from "./use-current-time.js";
+import { useInfiniteColumn } from "./use-infinite-column.js";
+import "./card-elapsed-time.css";
+import "./card-type-colors.css";
+import "./task-origin-badge.css";
+
+export const taskStatusColumns: readonly TaskStatus[] = [
+  "draft",
+  "planned",
+  "executing",
+  "verifying",
+  "completed",
+  "blocked",
+  "failed",
+  "cancelled",
+];
+
+export function TaskBoard({
+  changes,
+  locale,
+  runs,
+  tasks,
+  onOpenTask,
+}: {
+  changes: readonly ChangeProjection[];
+  locale: OperationsLocale;
+  runs: readonly RunProjection[];
+  tasks: readonly DashboardTaskProjection[];
+  onOpenTask: (taskId: string) => Promise<boolean>;
+}) {
+  const nowMs = useCurrentTime();
+  const totalsByTask = useMemo(() => taskTotals(runs, tasks), [runs, tasks]);
+  const originsByTask = useMemo(
+    () => new Map(tasks.map((task) => [task.id, taskOrigin(task, changes)])),
+    [changes, tasks],
+  );
+  const [selectedStatus, setSelectedStatus] = useState<TaskStatus | null>(null);
+  const [dialogQuery, setDialogQuery] = useState("");
+  const selectedRows =
+    selectedStatus === null
+      ? []
+      : sortByCreatedAtDescending(tasks.filter((task) => taskBoardStatus(task) === selectedStatus));
+  return (
+    <>
+      <section aria-label="Quadro de tasks" className="operations-board">
+        {taskStatusColumns.map((status) => {
+          const rows = sortByCreatedAtDescending(
+            tasks.filter((task) => taskBoardStatus(task) === status),
+          );
+          return (
+            <TaskColumn
+              key={status}
+              locale={locale}
+              nowMs={nowMs}
+              onOpenColumn={() => {
+                setDialogQuery("");
+                setSelectedStatus(status);
+              }}
+              onOpenTask={onOpenTask}
+              rows={rows}
+              status={status}
+              totalsByTask={totalsByTask}
+              originsByTask={originsByTask}
+            />
+          );
+        })}
+      </section>
+      {selectedStatus === null ? null : (
+        <ColumnTasksDialog
+          locale={locale}
+          onClose={() => setSelectedStatus(null)}
+          onOpenTask={(taskId) => {
+            setSelectedStatus(null);
+            void onOpenTask(taskId);
+          }}
+          onQueryChange={setDialogQuery}
+          query={dialogQuery}
+          rows={selectedRows}
+          status={selectedStatus}
+        />
+      )}
+    </>
+  );
+}
+
+export function taskBoardStatus(task: DashboardTaskProjection): TaskStatus {
+  return task.status;
+}
+
+function TaskColumn({
+  locale,
+  nowMs,
+  onOpenColumn,
+  onOpenTask,
+  rows,
+  status,
+  totalsByTask,
+  originsByTask,
+}: {
+  locale: OperationsLocale;
+  nowMs: number;
+  onOpenColumn: () => void;
+  onOpenTask: (taskId: string) => void;
+  rows: readonly DashboardTaskProjection[];
+  status: TaskStatus;
+  totalsByTask: ReadonlyMap<string, Totals>;
+  originsByTask: ReadonlyMap<string, TaskOrigin>;
+}) {
+  const { hasMore, sentinelRef, visibleCount } = useInfiniteColumn(rows.length);
+  return (
+    <article className={`operations-column is-${status}`}>
+      <header>
+        <button className="operations-column-trigger" onClick={onOpenColumn} type="button">
+          {statusLabel(status, locale)}
+        </button>
+        <button
+          aria-label={`${rows.length} ${locale === "pt-BR" ? "tarefas" : "tasks"} — ${statusLabel(status, locale)}`}
+          className="operations-column-count"
+          onClick={onOpenColumn}
+          type="button"
+        >
+          {rows.length}
+        </button>
+      </header>
+      <div className="operations-column-body">
+        {rows.slice(0, visibleCount).map((task) => {
+          const elapsed = cardElapsedTime(task.created_at, task.status, locale, nowMs);
+          const origin = originsByTask.get(task.id) ?? "task";
+          return (
+            <button
+              className={`operations-task-card is-kind-${origin} is-risk-${task.risk}`}
+              key={task.id}
+              onClick={() => onOpenTask(task.id)}
+              type="button"
+            >
+              <span className={`operations-risk is-${task.risk}`}>
+                {riskLabel(task.risk, locale)}
+              </span>
+              <strong title={task.title}>{task.title}</strong>
+              <small className="operations-task-id" title={task.id}>
+                {task.id}
+              </small>
+              <small className="operations-card-created">
+                {formatCardCreatedAt(task.created_at, locale)}
+              </small>
+              {task.status === "completed" && task.finished_at !== null ? (
+                <small className="operations-card-created">
+                  {formatCardFinishedAt(task.finished_at, locale)}
+                </small>
+              ) : null}
+              {elapsed === null ? null : (
+                <span className={`operations-elapsed-badge${elapsed.alert ? " is-alert" : ""}`}>
+                  {elapsed.label}
+                </span>
+              )}
+              <span className={`operations-task-origin-badge is-${origin}`}>
+                {taskOriginLabel(origin)}
+              </span>
+              <TaskUsage locale={locale} totals={totalsByTask.get(task.id)} />
+              <progress max={100} value={task.progress} />
+            </button>
+          );
+        })}
+        {rows.length === 0 ? <p className="operations-empty">Sem tasks</p> : null}
+        {hasMore ? (
+          <div className="operations-infinite-sentinel" ref={sentinelRef}>
+            {locale === "pt-BR"
+              ? `${visibleCount} de ${rows.length} · carregando mais…`
+              : `${visibleCount} of ${rows.length} · loading more…`}
+          </div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
+
+function ColumnTasksDialog({
+  locale,
+  onClose,
+  onOpenTask,
+  onQueryChange,
+  query,
+  rows,
+  status,
+}: {
+  locale: OperationsLocale;
+  onClose: () => void;
+  onOpenTask: (taskId: string) => void;
+  onQueryChange: (query: string) => void;
+  query: string;
+  rows: readonly DashboardTaskProjection[];
+  status: TaskStatus;
+}) {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const filteredRows = rows.filter(
+    (task) =>
+      normalizedQuery.length === 0 ||
+      [task.id, task.title, task.short_name, task.objective, task.change_id, task.spec_id].some(
+        (value) => value?.toLocaleLowerCase().includes(normalizedQuery),
+      ),
+  );
+  const taskLabel = locale === "pt-BR" ? "tarefas" : "tasks";
+  return createPortal(
+    <dialog
+      className="operations-status-dialog-backdrop"
+      onMouseDown={(event) => {
+        if (event.currentTarget === event.target) onClose();
+      }}
+      open
+    >
+      <section
+        aria-label={`${statusLabel(status, locale)} — ${rows.length} ${taskLabel}`}
+        aria-modal="true"
+        className="operations-status-dialog"
+        role="dialog"
+      >
+        <header>
+          <div>
+            <span>{locale === "pt-BR" ? "Coluna de tarefas" : "Task column"}</span>
+            <h2>{statusLabel(status, locale)}</h2>
+            <p>
+              {rows.length} {taskLabel}
+            </p>
+          </div>
+          <button
+            aria-label={locale === "pt-BR" ? "Fechar" : "Close"}
+            onClick={onClose}
+            type="button"
+          >
+            ×
+          </button>
+        </header>
+        <label className="operations-status-dialog-search">
+          <span>{locale === "pt-BR" ? "Buscar tarefas" : "Search tasks"}</span>
+          <input
+            autoFocus
+            onChange={(event) => onQueryChange(event.target.value)}
+            placeholder={locale === "pt-BR" ? "Título, ID ou objetivo" : "Title, ID, or objective"}
+            type="search"
+            value={query}
+          />
+        </label>
+        <div className="operations-status-task-list">
+          {filteredRows.map((task) => (
+            <button key={task.id} onClick={() => onOpenTask(task.id)} type="button">
+              <span className="operations-status-task-main">
+                <strong>{task.title}</strong>
+                <small>{task.id}</small>
+              </span>
+              <span className={`operations-risk is-${task.risk}`}>
+                {riskLabel(task.risk, locale)}
+              </span>
+              <span className="operations-status-task-action">
+                {locale === "pt-BR" ? "Ver detalhes" : "View details"} →
+              </span>
+            </button>
+          ))}
+          {filteredRows.length === 0 ? (
+            <p className="operations-empty">
+              {locale === "pt-BR"
+                ? "Nenhuma tarefa encontrada nesta coluna."
+                : "No tasks found in this column."}
+            </p>
+          ) : null}
+        </div>
+      </section>
+    </dialog>,
+    document.body,
+  );
+}
+
+type Totals = { durationMs: number | null; tokens: number | null; costBrl: number | null };
+
+export function taskTotals(
+  runs: readonly RunProjection[],
+  tasks: readonly DashboardTaskProjection[] = [],
+): Map<string, Totals> {
+  if (runs.length === 0) {
+    return new Map(
+      tasks.flatMap((task) =>
+        task.telemetry === null || task.telemetry === undefined
+          ? []
+          : [
+              [
+                task.id,
+                {
+                  durationMs: task.telemetry.duration_ms,
+                  tokens: task.telemetry.tokens,
+                  costBrl: task.telemetry.cost_brl,
+                },
+              ] as const,
+            ],
+      ),
+    );
+  }
+  const totals = new Map<string, Totals>();
+  for (const run of runs) {
+    if (run.task_id === null) continue;
+    const current = totals.get(run.task_id) ?? { durationMs: null, tokens: null, costBrl: null };
+    totals.set(run.task_id, {
+      durationMs: sumObserved(
+        current.durationMs,
+        run.phase === "execution" && run.parent_run_id == null ? operationalDurationMs(run) : null,
+      ),
+      tokens: sumObserved(current.tokens, run.usage.total.tokens.total),
+      costBrl: sumObserved(current.costBrl, run.usage.total.cost.brl),
+    });
+  }
+  return totals;
+}
+
+function sumObserved(current: number | null, next: number | null): number | null {
+  if (current === null && next === null) return null;
+  return (current ?? 0) + (next ?? 0);
+}
+
+function TaskUsage({ locale, totals }: { locale: OperationsLocale; totals: Totals | undefined }) {
+  const labels = locale === "pt-BR" ? ["Tempo", "Tokens", "Custo"] : ["Time", "Tokens", "Cost"];
+  const values = [
+    totals?.durationMs == null
+      ? formatOperationDuration(null, locale)
+      : formatRoundedDuration(totals.durationMs),
+    totals?.tokens == null ? "—" : formatCompactNumber(totals.tokens),
+    totals?.costBrl == null ? "—" : formatCurrency(totals.costBrl, "BRL"),
+  ];
+  return (
+    <dl className="operations-task-usage">
+      {labels.map((label, index) => (
+        <div key={label}>
+          <dt>{label}</dt>
+          <dd>{values[index]}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/templates/.agents/dashboard/modules/operations/src/react/TaskDetailsDialog.tsx

@@ -0,0 +1,134 @@
+import { formatCompactNumber, formatDateTime } from "@zaip-ai/dashboard-ui";
+import { createPortal } from "react-dom";
+import type { OperationsProjection, TaskDetailProjection } from "../contracts.js";
+import { formatOperationDuration, operationalDurationMs } from "./operation-duration.js";
+import { type OperationsLocale, riskLabel, statusLabel } from "./status-labels.js";
+
+export function TaskDetailsDialog({
+  detail,
+  operations,
+  locale = "pt-BR",
+  onClose,
+  onOpenTrace,
+}: {
+  detail: TaskDetailProjection;
+  operations: OperationsProjection;
+  locale?: OperationsLocale;
+  onClose: () => void;
+  onOpenTrace: (taskId: string) => void;
+}) {
+  const copy = taskDetailsCopy(locale);
+  const runs = operations.runs.filter((run) => run.task_id === detail.task.id);
+  const decisions = operations.decisions.filter(
+    (decision) => decision.scope_type === "change" && decision.scope_id === detail.task.change_id,
+  );
+  const operationalDurations = runs
+    .filter((run) => run.phase === "execution" && run.parent_run_id == null)
+    .flatMap((run) => {
+      const durationMs = operationalDurationMs(run);
+      return durationMs === null ? [] : [durationMs];
+    });
+  const duration =
+    operationalDurations.length === 0
+      ? null
+      : operationalDurations.reduce((total, durationMs) => total + durationMs, 0);
+  const tokens = runs.reduce((total, run) => total + (run.usage.total.tokens.total ?? 0), 0);
+  return createPortal(
+    <div className="operations-dialog-backdrop">
+      <section aria-label={copy.aria} aria-modal="true" className="operations-dialog" role="dialog">
+        <header>
+          <div>
+            <small>{detail.task.id}</small>
+            <h2>{detail.task.title}</h2>
+            <p>{detail.task.objective}</p>
+          </div>
+          <button aria-label={copy.close} onClick={onClose} type="button">
+            ×
+          </button>
+        </header>
+        <div className="operations-dialog-scroll">
+          <dl className="operations-detail-grid">
+            <Detail label={copy.status} value={statusLabel(detail.task.status, locale)} />
+            <Detail label={copy.risk} value={riskLabel(detail.task.risk, locale)} />
+            <Detail label="SPEC" value={detail.task.spec_id ?? "Task-first"} />
+            <Detail label="Change" value={detail.task.change_id} />
+            <Detail label="Runs" value={String(runs.length)} />
+            <Detail label={copy.duration} value={formatOperationDuration(duration, locale)} />
+            <Detail label="Tokens" value={formatCompactNumber(tokens || null, locale)} />
+            <Detail label={copy.updated} value={formatDateTime(detail.task.updated_at, locale)} />
+          </dl>
+          <section>
+            <h3>{copy.acceptanceCriteria}</h3>
+            <div className="operations-tags">
+              {detail.task.acceptance_ids.map((id) => (
+                <span key={id}>{id}</span>
+              ))}
+            </div>
+          </section>
+          <section>
+            <h3>{copy.decisions}</h3>
+            {decisions.length === 0 ? (
+              <p>{copy.noDecisions}</p>
+            ) : (
+              decisions.map((decision) => (
+                <p key={decision.id}>
+                  <strong>{decision.origin}:</strong> {decision.title}
+                </p>
+              ))
+            )}
+          </section>
+          <section>
+            <h3>{copy.description}</h3>
+            <pre>{detail.body}</pre>
+          </section>
+        </div>
+        <footer>
+          <span>{detail.artifact_path}</span>
+          <button onClick={() => onOpenTrace(detail.task.id)} type="button">
+            {copy.openTraceability}
+          </button>
+        </footer>
+      </section>
+    </div>,
+    document.body,
+  );
+}
+
+export function taskDetailsCopy(locale: OperationsLocale) {
+  return locale === "pt-BR"
+    ? {
+        aria: "Detalhes da task",
+        close: "Fechar",
+        status: "Status",
+        risk: "Risco",
+        duration: "Duração",
+        updated: "Atualizada",
+        acceptanceCriteria: "Critérios de aceite",
+        decisions: "Decisões",
+        noDecisions: "Nenhuma decisão registrada.",
+        description: "Descrição",
+        openTraceability: "Abrir rastreabilidade",
+      }
+    : {
+        aria: "Task details",
+        close: "Close",
+        status: "Status",
+        risk: "Risk",
+        duration: "Duration",
+        updated: "Updated",
+        acceptanceCriteria: "Acceptance criteria",
+        decisions: "Decisions",
+        noDecisions: "No decisions recorded.",
+        description: "Description",
+        openTraceability: "Open traceability",
+      };
+}
+
+function Detail({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}