@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,491 @@
+import { DataTable, formatDateTime } from "@zaip-ai/dashboard-ui";
+import { useState } from "react";
+import type {
+  ChangeProjection,
+  DecisionProjection,
+  ExecutionProjection,
+  RunProjection,
+} from "../contracts.js";
+import { buildConversationRows } from "./conversation-rows.js";
+import { EntityDetailsDialog } from "./EntityDetailsDialog.js";
+import { formatOperationDuration, operationalDurationMs } from "./operation-duration.js";
+import type { OperationsLocale } from "./status-labels.js";
+import { sortByDateDesc } from "./table-order.js";
+
+export function ChangeTable({
+  rows,
+  locale,
+}: {
+  rows: readonly ChangeProjection[];
+  locale: OperationsLocale;
+}) {
+  const [selected, setSelected] = useState<ChangeProjection | null>(null);
+  const orderedRows = sortByDateDesc(rows, (row) => row.created_at);
+  return (
+    <>
+      <DataTable
+        columns={[
+          { key: "created", label: "Criada", render: (row) => formatDateTime(row.created_at) },
+          {
+            key: "title",
+            label: "Change",
+            render: (row) => (
+              <>
+                <strong>{row.title}</strong>
+                <small>{row.id}</small>
+              </>
+            ),
+          },
+          { key: "status", label: "Status", render: (row) => <StatusBadge status={row.status} /> },
+          { key: "risk", label: "Risco", render: (row) => <RiskBadge risk={row.risk} /> },
+          { key: "tasks", label: "Tasks", render: (row) => row.task_ids.length, align: "right" },
+          { key: "path", label: "Arquivo", render: (row) => row.artifact_path },
+        ]}
+        locale={locale}
+        rowKey={(row) => row.id}
+        onRowClick={setSelected}
+        rows={orderedRows}
+        showColumnInfo
+        sortable
+      />
+      {selected ? (
+        <EntityDetailsDialog
+          details={{ kind: "change", row: selected }}
+          locale={locale}
+          onClose={() => setSelected(null)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+export function ExecutionTable({
+  rows,
+  locale,
+}: {
+  rows: readonly ExecutionProjection[];
+  locale: OperationsLocale;
+}) {
+  const [selected, setSelected] = useState<ExecutionProjection | null>(null);
+  const [kind, setKind] = useState<"all" | "interaction" | "delivery">("all");
+  const orderedRows = sortByDateDesc(
+    rows.filter((row) => kind === "all" || row.kind === kind),
+    (row) => row.created_at,
+  );
+  return (
+    <>
+      <div className="operations-execution-table">
+        <div className="operations-toolbar operations-run-kind-toolbar">
+          <nav aria-label={locale === "pt-BR" ? "Tipo de execução" : "Execution type"}>
+            {(["all", "interaction", "delivery"] as const).map((value) => (
+              <button
+                className={kind === value ? "is-active" : undefined}
+                key={value}
+                onClick={() => setKind(value)}
+                type="button"
+              >
+                {executionKindLabel(value, locale)}
+              </button>
+            ))}
+          </nav>
+        </div>
+        <DataTable
+          columns={[
+            {
+              key: "created",
+              label: "Data de criação",
+              render: (row) => formatDateTime(row.created_at),
+            },
+            {
+              key: "id",
+              label: locale === "pt-BR" ? "Execução" : "Execution",
+              render: (row) => (
+                <>
+                  <strong>{executionKindLabel(row.kind ?? "delivery", locale)}</strong>
+                  <small>{row.id}</small>
+                </>
+              ),
+            },
+            {
+              key: "status",
+              label: "Status",
+              render: (row) => <StatusBadge status={row.status} />,
+            },
+            {
+              key: "origin",
+              label: "Origem",
+              render: (row) => (
+                <EntryBadge
+                  entrypoint={row.origin.type === "interaction" ? "conversation" : row.origin.type}
+                />
+              ),
+            },
+            {
+              key: "duration",
+              label: locale === "pt-BR" ? "Tempo de execução" : "Execution time",
+              render: (row) => formatOperationDuration(row.duration_ms, locale),
+              align: "right",
+            },
+            {
+              key: "runs",
+              label: locale === "pt-BR" ? "Invocações do orquestrador" : "Orchestrator invocations",
+              render: (row) => displayedExecutionCount(row.orchestrator_run_count),
+              align: "right",
+            },
+            {
+              key: "subruns",
+              label: locale === "pt-BR" ? "Invocações delegadas" : "Delegated invocations",
+              render: (row) => displayedExecutionCount(row.subagent_run_count),
+              align: "right",
+            },
+            {
+              key: "finalizers",
+              label: locale === "pt-BR" ? "Finalizadores" : "Finalizers",
+              render: (row) =>
+                `${displayedExecutionCount(row.finalized_task_count)}/${displayedExecutionCount(row.task_count)}`,
+              align: "right",
+            },
+            {
+              key: "tasks",
+              label: locale === "pt-BR" ? "Tarefas" : "Tasks",
+              render: (row) => displayedExecutionCount(row.task_count),
+              align: "right",
+            },
+            {
+              key: "specs",
+              label: "SPEC",
+              render: (row) => displayedExecutionCount(row.spec_count),
+              align: "right",
+            },
+            {
+              key: "prds",
+              label: "PRD",
+              render: (row) => displayedExecutionCount(row.prd_count),
+              align: "right",
+            },
+          ]}
+          locale={locale}
+          rowKey={(row) => row.id}
+          onRowClick={setSelected}
+          rows={orderedRows}
+          showColumnInfo
+          sortable
+        />
+      </div>
+      {selected ? (
+        <EntityDetailsDialog
+          details={{ kind: "execution", row: selected }}
+          locale={locale}
+          onClose={() => setSelected(null)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function executionKindLabel(
+  kind: "all" | "interaction" | "delivery",
+  locale: OperationsLocale,
+): string {
+  if (locale === "pt-BR") {
+    return kind === "all"
+      ? "Todas"
+      : kind === "interaction"
+        ? "Interações"
+        : "Execuções de entrega";
+  }
+  return kind === "all" ? "All" : kind === "interaction" ? "Interactions" : "Delivery executions";
+}
+
+/**
+ * Older local-dashboard sessions can retain an Operations projection produced
+ * before execution relationship counts were added. Never render those cells as
+ * blank: a missing count represents no known linked item, not an absent value.
+ */
+export function displayedExecutionCount(value: number | null | undefined): number {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : 0;
+}
+
+export function displayedRunAgent(row: Pick<RunProjection, "agent" | "agent_name">): string {
+  if (row.agent.toLowerCase() === "codex") return "codex";
+  const value = row.agent_name || row.agent;
+  return value;
+}
+
+export function runPhaseLabel(phase: string, locale: OperationsLocale): string {
+  if (locale !== "pt-BR") return phase;
+  return phase === "conversation"
+    ? "Conversa"
+    : phase === "planning"
+      ? "Planejamento"
+      : phase === "execution"
+        ? "Execução"
+        : phase;
+}
+
+export function RunTable({
+  rows,
+  locale,
+}: {
+  rows: readonly RunProjection[];
+  locale: OperationsLocale;
+}) {
+  const [selected, setSelected] = useState<RunProjection | null>(null);
+  const [kind, setKind] = useState<"all" | RunProjection["run_kind"]>("all");
+  const orderedRows = sortByDateDesc(
+    rows.filter((row) => kind === "all" || row.run_kind === kind),
+    (row) => row.started_at,
+  );
+  return (
+    <>
+      <div className="operations-toolbar operations-run-kind-toolbar">
+        <nav aria-label={locale === "pt-BR" ? "Tipo de chamada de agente" : "Agent call type"}>
+          {(["all", "run", "subrun"] as const).map((value) => (
+            <button
+              className={kind === value ? "is-active" : undefined}
+              key={value}
+              onClick={() => setKind(value)}
+              type="button"
+            >
+              {value === "all"
+                ? locale === "pt-BR"
+                  ? "Todas"
+                  : "All"
+                : value === "run"
+                  ? locale === "pt-BR"
+                    ? "Invocações do orquestrador"
+                    : "Orchestrator invocations"
+                  : locale === "pt-BR"
+                    ? "Invocações delegadas"
+                    : "Delegated invocations"}
+            </button>
+          ))}
+        </nav>
+      </div>
+      <DataTable
+        columns={[
+          {
+            key: "created",
+            label: "Data de criação",
+            render: (row) => formatDateTime(row.started_at),
+          },
+          {
+            key: "id",
+            label: locale === "pt-BR" ? "Invocação" : "Agent invocation",
+            render: (row) => (
+              <>
+                <strong>{row.id}</strong>
+                <small>{row.parent_run_id ?? row.task_id ?? row.conversation_id}</small>
+              </>
+            ),
+          },
+          {
+            key: "kind",
+            label: locale === "pt-BR" ? "Tipo" : "Type",
+            render: (row) =>
+              row.run_kind === "run"
+                ? locale === "pt-BR"
+                  ? "Invocação do orquestrador"
+                  : "Orchestrator invocation"
+                : locale === "pt-BR"
+                  ? "Invocação delegada"
+                  : "Delegated invocation",
+          },
+          {
+            key: "agent",
+            label: locale === "pt-BR" ? "Agente" : "Agent",
+            render: (row) => <strong>{displayedRunAgent(row)}</strong>,
+          },
+          { key: "status", label: "Status", render: (row) => <StatusBadge status={row.status} /> },
+          {
+            key: "origin",
+            label: locale === "pt-BR" ? "Origem" : "Origin",
+            render: (row) => <EntryBadge entrypoint={row.entrypoint} />,
+          },
+          {
+            key: "phase",
+            label: locale === "pt-BR" ? "Propósito" : "Purpose",
+            render: (row) => runPurposeLabel(row.run_purpose, locale),
+          },
+          {
+            key: "duration",
+            label: "Duração",
+            render: (row) => formatOperationDuration(operationalDurationMs(row), locale),
+          },
+        ]}
+        locale={locale}
+        rowKey={(row) => row.id}
+        onRowClick={setSelected}
+        rows={orderedRows}
+        showColumnInfo
+        sortable
+      />
+      {selected ? (
+        <EntityDetailsDialog
+          details={{ kind: "run", row: selected }}
+          locale={locale}
+          onClose={() => setSelected(null)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function runPurposeLabel(purpose: RunProjection["run_purpose"], locale: OperationsLocale): string {
+  if (locale !== "pt-BR") return purpose;
+  return {
+    intake: "Entrada",
+    orchestration: "Orquestração",
+    execution: "Execução",
+    review: "Revisão",
+    audit: "Auditoria",
+    finalization: "Finalização",
+  }[purpose];
+}
+
+export function ConversationTable({
+  rows,
+  executions,
+  locale,
+}: {
+  rows: readonly RunProjection[];
+  executions: readonly ExecutionProjection[];
+  locale: OperationsLocale;
+}) {
+  const conversations = buildConversationRows(executions, rows);
+  return (
+    <DataTable
+      columns={[
+        {
+          key: "created",
+          label: locale === "pt-BR" ? "Data e hora" : "Date and time",
+          render: (row) => formatDateTime(row.latest_started_at),
+        },
+        {
+          key: "conversation",
+          label: locale === "pt-BR" ? "Conversa" : "Conversation",
+          render: (row) => <strong>{row.id}</strong>,
+        },
+        { key: "status", label: "Status", render: (row) => <StatusBadge status={row.status} /> },
+        {
+          key: "runs",
+          label: locale === "pt-BR" ? "Invocações" : "Invocations",
+          render: (row) => row.run_count,
+          align: "right",
+        },
+        {
+          key: "executions",
+          label: locale === "pt-BR" ? "Execuções" : "Executions",
+          render: (row) => row.execution_count,
+          align: "right",
+        },
+        {
+          key: "duration",
+          label: locale === "pt-BR" ? "Duração" : "Duration",
+          render: (row) => formatOperationDuration(row.duration_ms, locale),
+        },
+        {
+          key: "models",
+          label: locale === "pt-BR" ? "Modelos" : "Models",
+          render: (row) => (row.models.length > 0 ? row.models.join(", ") : "—"),
+        },
+      ]}
+      locale={locale}
+      rowKey={(row) => row.id}
+      rows={conversations}
+      showColumnInfo
+      sortable
+    />
+  );
+}
+
+export function DecisionTable({
+  rows,
+  locale,
+}: {
+  rows: readonly DecisionProjection[];
+  locale: OperationsLocale;
+}) {
+  const [selected, setSelected] = useState<DecisionProjection | null>(null);
+  const orderedRows = sortByDateDesc(rows, (row) => row.created_at);
+  return (
+    <>
+      <DataTable
+        columns={[
+          {
+            key: "date",
+            label: "Data de criação",
+            render: (row) => formatDateTime(row.created_at),
+          },
+          {
+            key: "title",
+            label: "Decisão",
+            render: (row) => (
+              <>
+                <strong>{row.title}</strong>
+                <small>{row.id}</small>
+              </>
+            ),
+          },
+          {
+            key: "origin",
+            label: "Origem",
+            render: (row) => <DecisionOriginBadge origin={row.origin} />,
+          },
+          {
+            key: "stage",
+            label: "Fase",
+            render: (row) => <DecisionStageBadge scopeType={row.scope_type} />,
+          },
+          { key: "scope", label: "Escopo", render: (row) => `${row.scope_type}: ${row.scope_id}` },
+        ]}
+        locale={locale}
+        rowKey={(row) => row.id}
+        onRowClick={setSelected}
+        rows={orderedRows}
+        showColumnInfo
+        sortable
+      />
+      {selected ? (
+        <EntityDetailsDialog
+          details={{ kind: "decision", row: selected }}
+          locale={locale}
+          onClose={() => setSelected(null)}
+        />
+      ) : null}
+    </>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  return <span className={`operations-table-status is-${status}`}>{status}</span>;
+}
+
+function RiskBadge({ risk }: { risk: string }) {
+  return <span className={`operations-table-risk is-${risk}`}>{risk}</span>;
+}
+
+function EntryBadge({ entrypoint }: { entrypoint: RunProjection["entrypoint"] }) {
+  const label =
+    entrypoint === "prd"
+      ? "PRD"
+      : entrypoint === "spec"
+        ? "SPEC"
+        : entrypoint === "task"
+          ? "Tarefa"
+          : "Conversa";
+  return <span className={`operations-table-entry is-${entrypoint}`}>{label}</span>;
+}
+
+function DecisionOriginBadge({ origin }: { origin: DecisionProjection["origin"] }) {
+  return <span className={`operations-table-decision-origin is-${origin}`}>{origin}</span>;
+}
+
+function DecisionStageBadge({ scopeType }: { scopeType: DecisionProjection["scope_type"] }) {
+  const stage = scopeType === "change" ? "planning" : "execution";
+  return (
+    <span className={`operations-table-stage is-${stage}`}>
+      {stage === "planning" ? "Planejamento" : "Execução"}
+    </span>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import type { MacroProjection } from "../contracts.js";
+import { filterMacroColumnRows } from "./MacroBoard.js";
+
+const rows = [
+  {
+    id: "PRD-2026-07-ALPHA",
+    title: "Portal de operações",
+    artifact_path: ".agents/records/prds/alpha.md",
+    lifecycle_status: "active",
+    work_status: "executing",
+  },
+  {
+    id: "PRD-2026-07-BETA",
+    title: "Monitor de custos",
+    artifact_path: ".agents/records/prds/beta.md",
+    lifecycle_status: "delivered",
+    work_status: "completed",
+  },
+] as MacroProjection[];
+
+describe("macro board column search", () => {
+  it("filters PRDs and SPECs by title or ID without changing their order", () => {
+    expect(filterMacroColumnRows(rows, "custos")).toEqual([rows[1]]);
+    expect(filterMacroColumnRows(rows, "ALPHA")).toEqual([rows[0]]);
+    expect(filterMacroColumnRows(rows, "  ")).toEqual(rows);
+  });
+});