@zaip-ai/cli 1.0.4 → 1.0.7

package/templates/.agents/dashboard/modules/operations/src/react/export/export-session.ts

@@ -0,0 +1,194 @@
+import {
+  type ExportSnapshot,
+  exportSnapshotToXlsxParts,
+  StoredZipArchive,
+  type ZipWritable,
+} from "../../../../../packages/data-export/src/index.js";
+export interface ExportState {
+  status: "idle" | "running" | "completed" | "failed";
+  progress: number;
+  error: string | null;
+  message: string | null;
+  completedFiles: readonly string[];
+}
+
+let exportInFlight = false;
+
+type SaveFilePicker = (options: {
+  id: string;
+  startIn: "downloads";
+  suggestedName: string;
+  types: readonly { accept: Record<string, readonly string[]>; description: string }[];
+}) => Promise<FileSystemFileHandle>;
+let savePickerInvocation = 0;
+
+export async function chooseExportDestination(
+  archive: boolean,
+  base: string,
+): Promise<FileSystemFileHandle> {
+  const picker = (globalThis as typeof globalThis & { showSaveFilePicker?: SaveFilePicker })
+    .showSaveFilePicker;
+  if (picker === undefined)
+    throw new Error("Seu navegador não suporta salvar o arquivo de exportação.");
+  const extension = archive ? ".zip" : ".xlsx";
+  return picker({
+    id: `zaip_export_${Date.now().toString(36).slice(-8)}_${(savePickerInvocation++ % 1_679_616).toString(36).padStart(4, "0")}`,
+    startIn: "downloads",
+    suggestedName: `${base}${extension}`,
+    types: [
+      {
+        description: archive ? "Arquivo ZIP" : "Pasta de trabalho Excel",
+        accept: {
+          [archive
+            ? "application/zip"
+            : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]: [extension],
+        },
+      },
+    ],
+  });
+}
+
+export function exportFileBaseName(view: string, now = new Date()): string {
+  const date = Object.fromEntries(
+    new Intl.DateTimeFormat("en-CA", {
+      timeZone: "America/Sao_Paulo",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23",
+    })
+      .formatToParts(now)
+      .filter((part) => part.type !== "literal")
+      .map((part) => [part.type, part.value]),
+  ) as Record<string, string>;
+  const stamp = `${date.year}-${date.month}-${date.day}-${date.hour}-${date.minute}`;
+  return `${stamp}-${
+    view
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/[^a-z0-9]+/gi, "-")
+      .replace(/^-|-$/g, "")
+      .toLowerCase() || "export"
+  }`;
+}
+
+export function exportFileName(view: string, part: number, now = new Date()): string {
+  return `${exportFileBaseName(view, now)}-part-${part}.xlsx`;
+}
+
+export function fileWritable(handle: FileSystemFileHandle): ZipWritable {
+  const init = handle.createWritable().then((stream) => stream.getWriter());
+  return {
+    get ready() {
+      return init.then((writer) => writer.ready);
+    },
+    async write(chunk) {
+      await (await init).write(chunk.slice().buffer as ArrayBuffer);
+    },
+    async close() {
+      await (await init).close();
+    },
+    async abort(reason) {
+      await (await init).abort(reason);
+    },
+  };
+}
+
+function isPickerCancellation(error: unknown): boolean {
+  return (
+    typeof error === "object" && error !== null && "name" in error && error.name === "AbortError"
+  );
+}
+
+export class ExportController {
+  state: ExportState = {
+    status: "idle",
+    progress: 0,
+    error: null,
+    message: null,
+    completedFiles: [],
+  };
+  private readonly listeners = new Set<(state: ExportState) => void>();
+
+  subscribe(listener: (state: ExportState) => void): () => void {
+    this.listeners.add(listener);
+    listener(this.state);
+    return () => this.listeners.delete(listener);
+  }
+
+  private setState(state: ExportState): void {
+    this.state = state;
+    for (const listener of this.listeners) listener(state);
+  }
+
+  async start<T extends Record<string, unknown>>(input: {
+    snapshot: ExportSnapshot<T>;
+    headers: readonly string[];
+    view: string;
+  }): Promise<void> {
+    if (exportInFlight || this.state.status === "running")
+      throw new Error("An export is already running");
+    exportInFlight = true;
+    let running = false;
+    const exportStartedAt = new Date();
+    const base = exportFileBaseName(input.view, exportStartedAt);
+    const completedFiles: string[] = [];
+    try {
+      const archive = input.snapshot.totalRows > 1_000_000;
+      const destination = await chooseExportDestination(archive, base);
+      const writable = fileWritable(destination);
+      running = true;
+      this.setState({
+        status: "running",
+        progress: 0,
+        error: null,
+        message: "Mantenha a página aberta enquanto a exportação é concluída.",
+        completedFiles,
+      });
+      const zip = archive ? new StoredZipArchive(writable) : undefined;
+      await exportSnapshotToXlsxParts({
+        snapshot: input.snapshot,
+        headers: input.headers,
+        writable: (part): ZipWritable => {
+          const name = exportFileName(input.view, part, exportStartedAt);
+          const partWritable = zip?.entry(name) ?? writable;
+          return {
+            ...partWritable,
+            async close() {
+              await partWritable.close();
+            },
+          };
+        },
+        progress: ({ percent }) => {
+          this.setState({ ...this.state, progress: Math.max(this.state.progress, percent) });
+        },
+      });
+      if (zip !== undefined) await zip.close();
+      completedFiles.push(destination.name);
+      // The UI must not announce completion while the process-wide guard still
+      // rejects the next export from another dashboard view.
+      exportInFlight = false;
+      this.setState({ ...this.state, status: "completed", progress: 100, message: null });
+    } catch (error) {
+      if (running) {
+        this.setState({
+          ...this.state,
+          status: "failed",
+          error: error instanceof Error ? error.message : String(error),
+          message: null,
+        });
+      } else if (!isPickerCancellation(error)) {
+        this.setState({
+          ...this.state,
+          status: "failed",
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
+      throw error;
+    } finally {
+      exportInFlight = false;
+    }
+  }
+}

package/templates/.agents/dashboard/modules/operations/src/react/export/export.css

@@ -0,0 +1,31 @@
+.export-progress {
+  max-width: calc(100vw - 2rem);
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  display: grid;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: #172033;
+  color: #fff;
+  border-radius: 0.5rem;
+  z-index: 20;
+}
+.export-progress progress {
+  width: 18rem;
+}
+.export-success {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 20;
+  padding: 0.65rem 0.9rem;
+  border-radius: 0.5rem;
+  background: #198754;
+  color: #fff;
+}
+.excel-export-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}

package/templates/.agents/dashboard/modules/operations/src/react/format-card-created-at.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { formatCardCreatedAt, formatCardFinishedAt } from "./format-card-created-at.js";
+
+describe("card timestamps", () => {
+  it("formats creation and completion labels in Portuguese", () => {
+    const timestamp = "2026-07-14T15:30:45.000Z";
+
+    expect(formatCardCreatedAt(timestamp, "pt-BR")).toMatch(/^Criada · /);
+    expect(formatCardFinishedAt(timestamp, "pt-BR")).toMatch(/^Concluída · /);
+  });
+
+  it("formats the completion label in English", () => {
+    expect(formatCardFinishedAt("2026-07-14T15:30:45.000Z", "en-US")).toMatch(/^Completed · /);
+  });
+
+  it("omits invalid timestamps", () => {
+    expect(formatCardFinishedAt("invalid", "pt-BR")).toBe("");
+  });
+});

package/templates/.agents/dashboard/modules/operations/src/react/format-card-created-at.ts

@@ -0,0 +1,19 @@
+import type { OperationsLocale } from "./status-labels.js";
+
+export function formatCardCreatedAt(value: string, locale: OperationsLocale): string {
+  return formatCardDateTime(value, locale, locale === "pt-BR" ? "Criada" : "Created");
+}
+
+export function formatCardFinishedAt(value: string, locale: OperationsLocale): string {
+  return formatCardDateTime(value, locale, locale === "pt-BR" ? "Concluída" : "Completed");
+}
+
+function formatCardDateTime(value: string, locale: OperationsLocale, label: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const formatted = new Intl.DateTimeFormat(locale, {
+    dateStyle: "short",
+    timeStyle: "medium",
+  }).format(date);
+  return `${label} · ${formatted}`;
+}

package/templates/.agents/dashboard/modules/operations/src/react/format-rounded-duration.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { formatDurationInHours, formatRoundedDuration } from "./format-rounded-duration.js";
+
+describe("formatRoundedDuration", () => {
+  it.each([
+    [6_000, "6 seg"],
+    [379_000, "6 min"],
+    [7_560_000, "2 h"],
+    [86_400_000, "24 h"],
+    [129_600_000, "36 h"],
+    [172_800_000, "48 h"],
+  ])("formats %i milliseconds with one unit", (value, expected) => {
+    expect(formatRoundedDuration(value)).toBe(expected);
+  });
+});
+
+describe("English rounded duration", () => {
+  it("translates the seconds unit", () => {
+    expect(formatRoundedDuration(8_000, "en-US")).toBe("8 sec");
+  });
+});
+
+it("keeps accumulated duration in hours", () => {
+  expect(formatDurationInHours(86_400_000)).toBe("24 h");
+  expect(formatDurationInHours(129_600_000)).toBe("36 h");
+  expect(formatDurationInHours(1_706_590)).toBe("28 min");
+});

package/templates/.agents/dashboard/modules/operations/src/react/format-rounded-duration.ts

@@ -0,0 +1,14 @@
+import type { OperationsLocale } from "./status-labels.js";
+
+export function formatRoundedDuration(
+  durationMs: number,
+  locale: OperationsLocale = "pt-BR",
+): string {
+  if (durationMs >= 3_600_000) return `${Math.round(durationMs / 3_600_000)} h`;
+  if (durationMs >= 60_000) return `${Math.round(durationMs / 60_000)} min`;
+  return `${Math.round(durationMs / 1_000)} ${locale === "pt-BR" ? "seg" : "sec"}`;
+}
+
+export function formatDurationInHours(durationMs: number): string {
+  return formatRoundedDuration(durationMs);
+}

package/templates/.agents/dashboard/modules/operations/src/react/fullscreen-dialog.test.tsx

@@ -0,0 +1,113 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const entityStyles = source("entity-details-dialog.css");
+const operationsStyles = source("operations.css");
+const overviewStyles = source("operations-overview.css");
+const macroStyles = source("macro-planning-dialog.css");
+const entityDialog = source("EntityDetailsDialog.tsx");
+const taskDialog = source("TaskDetailsDialog.tsx");
+const taskBoard = source("TaskBoard.tsx");
+
+describe("viewport entity dialogs", () => {
+  it("covers the viewport and applies a blurred backdrop", () => {
+    const rule = cssRule(entityStyles, "body .operations-status-dialog-backdrop");
+    expect(rule).toContain("width: 100vw");
+    expect(rule).toContain("height: 100dvh");
+    expect(rule).toContain("backdrop-filter: blur(14px)");
+    expect(rule).toContain("padding: 24px");
+  });
+
+  it("keeps the entity content centered and constrained", () => {
+    const rule = cssRule(entityStyles, "body .operations-entity-details");
+    expect(rule).toContain("width: min(980px, 100%)");
+    expect(rule).toContain("max-height: min(760px, 90dvh)");
+    expect(rule).toContain("height: auto");
+    expect(rule).toContain("border-radius: 24px");
+    expect(rule).not.toContain("height: 100%");
+  });
+
+  it.each([
+    [operationsStyles, ".operations-dialog", "width: min(980px, 100%)", "max-height: 90vh"],
+    [
+      overviewStyles,
+      ".operations-status-dialog",
+      "width: min(780px, 100%)",
+      "max-height: min(760px, 90vh)",
+    ],
+    [
+      macroStyles,
+      ".operations-macro-planning-dialog",
+      "width: min(1180px, 100%)",
+      "max-height: min(820px, 90vh)",
+    ],
+  ])("preserves the previous constrained size for task, status and planning dialogs", (styles, selector, expectedWidth, expectedMaxHeight) => {
+    const rule = cssRule(styles, selector);
+    expect(rule).toContain(expectedWidth);
+    expect(rule).toContain(expectedMaxHeight);
+    expect(rule).toContain("border-radius: 24px");
+    expect(rule).not.toContain("height: 100%");
+  });
+
+  it("does not force trace details such as evidence to fill the viewport", () => {
+    expect(operationsStyles).not.toContain("body .trace-backdrop");
+  });
+
+  it("gives task and entity details exactly one dedicated scroll region", () => {
+    expect(taskDialog).toContain('className="operations-dialog-scroll"');
+    expect(entityDialog).toContain('className="operations-entity-details-scroll"');
+    expect(cssRule(entityStyles, ".operations-entity-details-scroll")).toContain(
+      "overflow-y: auto",
+    );
+  });
+
+  it("keeps PRD SPEC actions and usage in dedicated card rows", () => {
+    const cardRule = normalizedRule(
+      cssRuleContaining(macroStyles, ".operations-prd-spec-grid > button", "grid-template-areas"),
+    );
+    expect(cardRule).toContain('grid-template-areas: "index copy action" ". usage usage"');
+    expect(cssRule(macroStyles, ".operations-prd-spec-index")).toContain("grid-area: index");
+    expect(
+      cssRuleContaining(macroStyles, ".operations-prd-spec-copy", "grid-area: copy"),
+    ).toContain("grid-area: copy");
+    expect(cssRule(macroStyles, ".operations-prd-spec-action")).toContain("grid-area: action");
+    expect(
+      cssRule(macroStyles, ".operations-prd-spec-grid .operations-macro-mini-usage"),
+    ).toContain("grid-area: usage");
+  });
+
+  it.each([
+    entityDialog,
+    taskDialog,
+    taskBoard,
+  ])("portals the dialog to the document viewport", (component) => {
+    expect(component).toContain("createPortal(");
+    expect(component).toContain("document.body");
+  });
+});
+
+function source(file: string): string {
+  return readFileSync(new URL(file, import.meta.url), "utf8");
+}
+
+function cssRule(styles: string, selector: string): string {
+  const match = [...styles.matchAll(/([^{}]+)\{([^}]*)\}/g)].find((candidate) =>
+    candidate[1]?.split(",").some((item) => item.trim() === selector),
+  );
+  expect(match, `Missing CSS rule ${selector}`).not.toBeNull();
+  return match?.[2] ?? "";
+}
+
+function cssRuleContaining(styles: string, selector: string, declaration: string): string {
+  const match = [...styles.matchAll(/([^{}]+)\{([^}]*)\}/g)].find(
+    (candidate) =>
+      candidate[1]?.split(",").some((item) => item.trim() === selector) &&
+      candidate[2]?.includes(declaration),
+  );
+  expect(match, `Missing CSS rule ${selector} with ${declaration}`).not.toBeNull();
+  return match?.[2] ?? "";
+}
+
+function normalizedRule(rule: string): string {
+  return rule.replace(/\s+/g, " ").trim();
+}

package/templates/.agents/dashboard/modules/operations/src/react/index.ts

@@ -0,0 +1,10 @@
+export * from "./EntityDetailsDialog.js";
+export * from "./EntityTables.js";
+export * from "./export/ExcelExportAction.js";
+export * from "./MacroBoard.js";
+export * from "./MacroPlanningDialog.js";
+export * from "./OperationsPage.js";
+export * from "./operation-date-range.js";
+export * from "./PrdDocumentDialog.js";
+export * from "./TaskBoard.js";
+export * from "./TaskDetailsDialog.js";

package/templates/.agents/dashboard/modules/operations/src/react/macro-dialog-data.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from "vitest";
+import type { DashboardTaskProjection, MacroProjection } from "../contracts.js";
+import { specsForPrd, tasksForMacro } from "./macro-dialog-data.js";
+
+describe("macro dialog hierarchy", () => {
+  it("lists only SPECs that belong to the selected PRD", () => {
+    const selected = specsForPrd(
+      [macro("SPEC-A", "PRD-1"), macro("SPEC-B", "PRD-2"), macro("SPEC-C", "PRD-1")],
+      "PRD-1",
+    );
+
+    expect(selected.map((spec) => spec.id)).toEqual(["SPEC-A", "SPEC-C"]);
+  });
+
+  it("keeps task identity and observed usage without replacing missing values", () => {
+    const spec = macro("SPEC-A", "PRD-1", ["TASK-1", "TASK-UNKNOWN"]);
+    const task = { id: "TASK-1", title: "Implementar fluxo" } as DashboardTaskProjection;
+    const rows = tasksForMacro(
+      spec,
+      [task],
+      new Map([["TASK-1", { durationMs: 60_000, tokens: 1200, costBrl: 2.5 }]]),
+    );
+
+    expect(rows[0]).toEqual({
+      id: "TASK-1",
+      preview: null,
+      task,
+      usage: { durationMs: 60_000, tokens: 1200, costBrl: 2.5 },
+    });
+    expect(rows[1]).toEqual({
+      id: "TASK-UNKNOWN",
+      preview: null,
+      task: null,
+      usage: undefined,
+    });
+  });
+
+  it("shows PreparedPlan previews before Tasks are materialized", () => {
+    const spec = {
+      ...macro("SPEC-A", "PRD-1"),
+      planned_tasks: [
+        {
+          id: "TASK-PLANNED",
+          title: "Preparar contrato",
+          objective: "Definir a fronteira estável",
+          depends_on: [],
+        },
+      ],
+    };
+
+    expect(tasksForMacro(spec, [], new Map())).toEqual([
+      {
+        id: "TASK-PLANNED",
+        preview: spec.planned_tasks[0],
+        task: null,
+        usage: undefined,
+      },
+    ]);
+  });
+});
+
+function macro(id: string, parentId: string, taskIds: string[] = []): MacroProjection {
+  return {
+    id,
+    kind: "spec",
+    parent_id: parentId,
+    task_ids: taskIds,
+    planned_tasks: [],
+  } as unknown as MacroProjection;
+}

package/templates/.agents/dashboard/modules/operations/src/react/macro-dialog-data.ts

@@ -0,0 +1,24 @@
+import type { DashboardTaskProjection, MacroProjection } from "../contracts.js";
+import type { MacroUsageValues } from "./macro-dialog-usage.js";
+
+export function specsForPrd(specs: readonly MacroProjection[], prdId: string): MacroProjection[] {
+  return specs.filter((spec) => spec.kind === "spec" && spec.parent_id === prdId);
+}
+
+export function tasksForMacro(
+  row: MacroProjection,
+  tasks: readonly DashboardTaskProjection[],
+  totals: ReadonlyMap<string, MacroUsageValues>,
+) {
+  const tasksById = new Map(tasks.map((task) => [task.id, task] as const));
+  const previewsById = new Map(row.planned_tasks.map((preview) => [preview.id, preview] as const));
+  const taskIds = [
+    ...new Set([...row.planned_tasks.map((preview) => preview.id), ...row.task_ids]),
+  ];
+  return taskIds.map((taskId) => ({
+    id: taskId,
+    task: tasksById.get(taskId) ?? null,
+    preview: previewsById.get(taskId) ?? null,
+    usage: totals.get(taskId),
+  }));
+}

package/templates/.agents/dashboard/modules/operations/src/react/macro-dialog-usage.tsx

@@ -0,0 +1,83 @@
+import { formatCompactNumber, formatCurrency } from "@zaip-ai/dashboard-ui";
+import { Clock3, Coins, Zap } from "lucide-react";
+import type { MacroProjection } from "../contracts.js";
+import { formatRoundedDuration } from "./format-rounded-duration.js";
+import type { OperationsLocale } from "./status-labels.js";
+
+export type MacroUsageValues = {
+  durationMs: number | null;
+  tokens: number | null;
+  costBrl: number | null;
+};
+
+export const emptyMacroUsage: MacroUsageValues = {
+  durationMs: null,
+  tokens: null,
+  costBrl: null,
+};
+
+export function macroUsage(row: MacroProjection): MacroUsageValues {
+  return {
+    durationMs: row.duration_ms,
+    tokens: row.usage.total.coverage.tokens > 0 ? row.usage.total.tokens.total : null,
+    costBrl: row.usage.total.coverage.brl > 0 ? row.usage.total.cost.brl : null,
+  };
+}
+
+export function MacroUsageStrip({
+  locale,
+  usage,
+}: {
+  locale: OperationsLocale;
+  usage: MacroUsageValues;
+}) {
+  const items = [
+    {
+      icon: <Clock3 size={17} />,
+      label: locale === "pt-BR" ? "Tempo total" : "Total time",
+      value: usage.durationMs === null ? "—" : formatRoundedDuration(usage.durationMs, locale),
+    },
+    { icon: <Zap size={17} />, label: "Tokens", value: formatCompactNumber(usage.tokens, locale) },
+    {
+      icon: <Coins size={17} />,
+      label: locale === "pt-BR" ? "Custo" : "Cost",
+      value: formatCurrency(usage.costBrl, "BRL", locale),
+    },
+  ];
+  return (
+    <dl className="operations-macro-usage-strip">
+      {items.map((item) => (
+        <div key={item.label}>
+          <span aria-hidden="true">{item.icon}</span>
+          <dt>{item.label}</dt>
+          <dd>{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export function MacroMiniUsage({
+  locale,
+  usage,
+}: {
+  locale: OperationsLocale;
+  usage: MacroUsageValues;
+}) {
+  const values = [
+    usage.durationMs === null ? "—" : formatRoundedDuration(usage.durationMs, locale),
+    formatCompactNumber(usage.tokens, locale),
+    formatCurrency(usage.costBrl, "BRL", locale),
+  ];
+  const labels = locale === "pt-BR" ? ["Tempo", "Tokens", "Custo"] : ["Time", "Tokens", "Cost"];
+  return (
+    <dl className="operations-macro-mini-usage">
+      {labels.map((item, index) => (
+        <div key={item}>
+          <dt>{item}</dt>
+          <dd>{values[index]}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/templates/.agents/dashboard/modules/operations/src/react/macro-planning-dialog-responsive.css

@@ -0,0 +1,74 @@
+@media (max-width: 860px) {
+  .operations-prd-spec-grid {
+    grid-template-columns: 1fr;
+  }
+  .operations-spec-task-list > button {
+    grid-template-columns: 42px minmax(0, 1fr) auto;
+  }
+  .operations-spec-task-list .operations-macro-mini-usage {
+    grid-column: 2 / 4;
+  }
+}
+@media (max-width: 620px) {
+  .operations-macro-dialog-backdrop {
+    padding: 0;
+  }
+  .operations-macro-planning-dialog {
+    border-radius: 0;
+  }
+  .operations-macro-dialog-header {
+    gap: 12px;
+    padding: 22px;
+  }
+  .operations-macro-heading {
+    gap: 11px;
+  }
+  .operations-macro-document-open {
+    margin-left: 0;
+  }
+  .operations-macro-heading-icon {
+    width: 40px;
+    height: 40px;
+    flex-basis: 40px;
+    border-radius: 12px;
+  }
+  .operations-macro-dialog-scroll {
+    gap: 22px;
+    padding: 22px 22px 28px;
+  }
+  .operations-macro-usage-strip,
+  .operations-macro-overview-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .operations-spec-task-list > button {
+    grid-template-columns: 38px minmax(0, 1fr);
+  }
+  .operations-spec-task-list .operations-macro-mini-usage,
+  .operations-spec-task-action {
+    grid-column: 2;
+  }
+  .operations-spec-task-action {
+    justify-self: start;
+  }
+}
+@media (max-width: 430px) {
+  .operations-macro-heading h2 {
+    font-size: 1.25rem;
+  }
+  .operations-macro-usage-strip,
+  .operations-macro-overview-cards {
+    grid-template-columns: 1fr;
+  }
+  .operations-prd-spec-grid > button {
+    grid-template-areas: "index copy" ". usage" ". action";
+    grid-template-columns: 38px minmax(0, 1fr);
+    row-gap: 14px;
+  }
+  .operations-prd-spec-index {
+    width: 38px;
+    height: 38px;
+  }
+  .operations-prd-spec-action {
+    justify-self: start;
+  }
+}