@zaip-ai/cli 1.0.8 → 1.3.1

package/templates/.agents/dashboard/apps/frontend/src/dashboard-api.ts

@@ -10,7 +10,6 @@ import type {
   TaskDetailProjection,
 } from "@zaip-ai/dashboard-operations/contracts";
 import type { TaskTrace } from "@zaip-ai/dashboard-traceability/contracts";
-
 export interface ReconciliationBlockedItem {
   id: string;
   reason: string | null;
@@ -56,7 +55,6 @@ export interface SqliteViewPage {
   totals?: Record<string, unknown>;
   rows: Array<Record<string, unknown>>;
 }
-
 export type OperationsScope = "quick" | "overview" | "detail";
 export type WorkBoardStage =
   | "definition"
@@ -73,7 +71,13 @@ export interface OperationsBoardPage {
   stage: WorkBoardStage;
   offset: number;
   total: number;
-  totals_by_kind: { all: number; task: number; prd: number; spec: number };
+  totals_by_kind: {
+    all: number;
+    task: number;
+    "standalone-task": number;
+    prd: number;
+    spec: number;
+  };
   prds: MacroProjection[];
   specs: MacroProjection[];
   tasks: DashboardTaskProjection[];
@@ -246,6 +250,7 @@ export class DashboardApiClient {
       origin?: string;
       workType?: string;
       priority?: string;
+      kind?: string;
     } = {},
     signal?: AbortSignal,
   ): Promise<SqliteViewPage> {
@@ -261,6 +266,7 @@ export class DashboardApiClient {
     if (options.origin) query.set("origin", options.origin);
     if (options.workType) query.set("workType", options.workType);
     if (options.priority) query.set("priority", options.priority);
+    if (options.kind) query.set("kind", options.kind);
     return this.get(withPeriod(`/api/v2/sqlite-views?${query.toString()}`, period), signal);
   }
 
@@ -423,6 +429,21 @@ export class DashboardApiClient {
     );
   }
 
+  refreshProjection(
+    currency: "BRL" | "USD" = "BRL",
+    period?: { from: string | null; to: string | null },
+  ): Promise<{
+    operations: OperationsProjection;
+    costs: CostMonitorProjection;
+    dashboard?: { title: string; repository_name: string };
+    projection: { source_latest_at: string | null; served_at: string };
+  }> {
+    return this.post(
+      withPeriod(`${dashboardApiPaths.refreshProjection}?currency=${currency}`, period),
+      reconciliationRequestTimeoutMs,
+    );
+  }
+
   task(taskId: string): Promise<TaskDetailProjection> {
     return this.get(dashboardApiPaths.task(taskId));
   }
@@ -434,11 +455,9 @@ export class DashboardApiClient {
   spec(specId: string): Promise<SpecDetailProjection> {
     return this.get(dashboardApiPaths.spec(specId));
   }
-
-  taskTrace(taskId: string): Promise<TaskTrace> {
-    return this.get(dashboardApiPaths.taskTrace(taskId));
+  taskTrace(taskId: string, signal?: AbortSignal): Promise<TaskTrace> {
+    return this.get(dashboardApiPaths.taskTrace(taskId), signal);
   }
-
   pricing(): Promise<PricingCatalog> {
     return this.get("/api/v2/pricing");
   }
@@ -572,9 +591,9 @@ function operationsPageParams(
 }
 
 export const dashboardRequestTimeoutMs = 60_000;
-// The local runtime permits reconciliation for up to two minutes. Keep a small
-// transport margin so the browser never cancels a valid server-side operation.
-export const reconciliationRequestTimeoutMs = 125_000;
+// The command may use two minutes plus a projection rebuild; keep enough
+// transport margin to avoid false browser failures after healthy reconciliation.
+export const reconciliationRequestTimeoutMs = 180_000;
 
 export async function fetchWithTimeout(
   path: string,

package/templates/.agents/dashboard/apps/frontend/src/operations-period-render.test.ts

@@ -94,12 +94,12 @@ describe("App-owned Operations period render", () => {
     expect(css).toContain("prefers-reduced-motion: reduce");
   });
 
-  it("uses the same global loading gate for snapshot, page, and board requests", () => {
+  it("reserves the global gate for a period replacement, not secondary pages", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
     expect(app).toContain("const globalLoadingPending =");
-    expect(app).toContain("loadingArea !== null");
-    expect(app).toContain("entityPage.loading");
-    expect(app).toContain("Object.values(boardStates).some((state) => state.loading)");
+    expect(app).toContain("periodTransitionPending ||");
+    expect(app).not.toContain("entityPage.loading ||");
+    expect(app).not.toContain("Object.values(boardStates).some((state) => state.loading)");
     expect(app).toContain("<PeriodTransitionShell pending={globalLoadingPending}>");
   });
 });

package/templates/.agents/dashboard/apps/frontend/src/overview-status-page.test.ts

@@ -6,8 +6,10 @@ const source = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
 describe("overview status page loading", () => {
   it("requests a dedicated stage and kind page instead of reusing the mixed board page", () => {
     expect(source).toContain("const loadOverviewStatusPage");
-    expect(source).toContain("api.operationsBoard(period, stage, offset, { kind })");
-    expect(source).toContain("kind === \"task\" ? page.tasks : kind === \"spec\" ? page.specs : page.prds");
+    expect(source).toContain('kind: kind === "task" ? "all-tasks" : kind');
+    expect(source).toContain(
+      'kind === "task" ? page.tasks : kind === "spec" ? page.specs : page.prds',
+    );
   });
 
   it("keeps a dedicated collection paginated by the loaded typed rows", () => {

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

@@ -20,33 +20,34 @@
 
 .project-settings-state-card {
   display: grid;
+  gap: 12px;
   justify-items: center;
-  max-width: 580px;
+  max-width: 420px;
   border: 1px solid #dbe4ef;
   border-radius: 24px;
-  padding: clamp(32px, 6vw, 56px);
+  padding: clamp(32px, 6vw, 48px);
   background: #fff;
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
   text-align: center;
 }
 
 .project-settings-loader {
-  width: 42px;
-  height: 42px;
-  margin-bottom: 20px;
-  border: 4px solid rgba(0, 176, 240, 0.18);
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(0, 176, 240, 0.18);
   border-top-color: #00b0f0;
   border-radius: 50%;
   animation: project-settings-spin 0.8s linear infinite;
 }
 
 .project-settings-state-card h1 {
-  max-width: 16ch;
+  max-width: 18ch;
+  font-size: clamp(1.75rem, 5vw, 2.25rem);
 }
 
 .project-settings-state-card button {
   width: auto;
-  margin-top: 26px;
+  margin-top: 12px;
 }
 
 .project-settings-header {
@@ -59,7 +60,7 @@
 
 .project-settings-header p,
 .project-settings-state p {
-  margin: 0 0 8px;
+  margin: 0;
   color: #006b91;
   font-size: 0.75rem;
   font-weight: 700;
@@ -406,15 +407,18 @@
 
 .project-stack-versions > div {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
 .project-stack-versions article {
   display: grid;
-  grid-template-columns: minmax(150px, 1.1fr) minmax(92px, 0.55fr) auto minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "identity badge"
+    "source source";
+  gap: 7px 12px;
+  align-items: start;
   min-width: 0;
   border: 1px solid #dbe4ef;
   border-radius: 12px;
@@ -422,13 +426,22 @@
   background: #f8fafc;
 }
 
-.project-stack-versions article strong {
+.project-stack-version-identity {
+  display: flex;
+  grid-area: identity;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.project-stack-version-identity strong {
   min-width: 0;
   color: #334155;
   font-size: 0.8rem;
 }
 
-.project-stack-versions article code {
+.project-stack-version-identity code {
+  flex: none;
   min-width: 0;
   color: #0f172a;
   font-size: 0.8rem;
@@ -436,6 +449,7 @@
 }
 
 .project-stack-versions article small {
+  grid-area: source;
   min-width: 0;
   color: #64748b;
   font-size: 0.68rem;
@@ -444,6 +458,7 @@
 }
 
 .project-stack-versions article span {
+  grid-area: badge;
   width: fit-content;
   border-radius: 999px;
   padding: 3px 6px;
@@ -726,29 +741,24 @@
 
   .project-stack-versions article {
     grid-template-areas:
-      "name badge"
-      "version source";
+      "identity badge"
+      "source source";
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 6px 10px;
     align-items: start;
     padding: 10px 12px;
   }
 
-  .project-stack-versions article strong {
-    grid-area: name;
-  }
-
-  .project-stack-versions article code {
-    grid-area: version;
+  .project-stack-versions > div {
+    grid-template-columns: 1fr;
   }
 
   .project-stack-versions article span {
-    grid-area: badge;
+    align-self: start;
   }
 
   .project-stack-versions article small {
-    grid-area: source;
-    text-align: right;
+    text-align: left;
   }
 
   .project-stack-table {

package/templates/.agents/dashboard/apps/frontend/src/project-settings.test.ts

@@ -34,8 +34,8 @@ const config: ProjectConfigSettings = {
 
 describe("project settings form mapping", () => {
   it("renders a canonical framework SemVer as a short major.minor label", () => {
-    expect(shortFrameworkVersion("1.0.8")).toBe("v1.0");
-    expect(shortFrameworkVersion("v1.0.8")).toBe("v1.0");
+    expect(shortFrameworkVersion("1.3.0")).toBe("v1.3");
+    expect(shortFrameworkVersion("v1.3.0")).toBe("v1.3");
     expect(shortFrameworkVersion("1.0")).toBeNull();
   });
 

package/templates/.agents/dashboard/apps/frontend/src/snapshot-banner-semantics.test.ts

@@ -6,25 +6,60 @@ describe("snapshot update banner semantics", () => {
   it("delays the notice, then hides it on dismiss or completed initial load", () => {
     expect(snapshotNoticeDelayMs).toBe(1_500);
     // A fast first-fold load completes before the delay and never flashes.
-    expect(shouldShowSnapshotNotice({ snapshotUpdating: true, initialDataPending: true, dismissed: false, delayElapsed: false })).toBe(false);
+    expect(
+      shouldShowSnapshotNotice({
+        snapshotUpdating: true,
+        initialDataPending: true,
+        dismissed: false,
+        delayElapsed: false,
+      }),
+    ).toBe(false);
     // A genuinely slow initial read receives the helpful stale-snapshot notice.
-    expect(shouldShowSnapshotNotice({ snapshotUpdating: true, initialDataPending: true, dismissed: false, delayElapsed: true })).toBe(true);
-    expect(shouldShowSnapshotNotice({ snapshotUpdating: true, initialDataPending: true, dismissed: true, delayElapsed: true })).toBe(false);
-    expect(shouldShowSnapshotNotice({ snapshotUpdating: true, initialDataPending: false, dismissed: false, delayElapsed: true })).toBe(false);
+    expect(
+      shouldShowSnapshotNotice({
+        snapshotUpdating: true,
+        initialDataPending: true,
+        dismissed: false,
+        delayElapsed: true,
+      }),
+    ).toBe(true);
+    expect(
+      shouldShowSnapshotNotice({
+        snapshotUpdating: true,
+        initialDataPending: true,
+        dismissed: true,
+        delayElapsed: true,
+      }),
+    ).toBe(false);
+    expect(
+      shouldShowSnapshotNotice({
+        snapshotUpdating: true,
+        initialDataPending: false,
+        dismissed: false,
+        delayElapsed: true,
+      }),
+    ).toBe(false);
   });
 
   it("presents a stale local snapshot as neutral status and reserves alert red for errors", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
     const boundary = readFileSync(new URL("./AppLoadingBoundary.tsx", import.meta.url), "utf8");
+    const overlays = readFileSync(new URL("./AppOverlays.tsx", import.meta.url), "utf8");
     const styles = readFileSync(new URL("./styles.css", import.meta.url), "utf8");
-    const snapshot = app.slice(app.indexOf("const initialDataPending"), app.indexOf("const renderedOperations"));
+    const snapshot = app.slice(
+      app.indexOf("const initialDataPending"),
+      app.indexOf("const renderedOperations"),
+    );
+    const compactSnapshot = snapshot.replace(/\s+/g, " ");
     const error = app.slice(app.indexOf("{error ?"), app.indexOf("{/* Cost Monitor boundary"));
 
     expect(snapshot).toContain('className="app-notice app-snapshot-status" role="status"');
     expect(snapshot).toContain('aria-live="polite"');
     expect(snapshot).toContain("shouldShowSnapshotNotice({");
     expect(snapshot).toContain("delayElapsed: snapshotNoticeDelayElapsed,");
-    expect(snapshot).toContain("window.setTimeout(() => setSnapshotNoticeDelayElapsed(true), snapshotNoticeDelayMs)");
+    expect(compactSnapshot).toMatch(
+      /window\.setTimeout\(\s*\(\) => setSnapshotNoticeDelayElapsed\(true\),\s*snapshotNoticeDelayMs,?\s*\)/,
+    );
     expect(snapshot).toContain("return () => window.clearTimeout(timeout);");
     expect(snapshot).toContain("setSnapshotNoticeDismissed(true)");
     expect(snapshot).toContain('"Fechar aviso de atualização do snapshot"');
@@ -36,7 +71,13 @@ describe("snapshot update banner semantics", () => {
     expect(error).toContain('aria-live="assertive"');
     expect(error).toContain('"Fechar erro"');
     expect(error).toContain('"Dismiss error"');
+    expect(overlays).not.toContain('role="alert"');
+    expect(overlays).not.toContain('className="app-warning"');
+    expect(overlays).not.toContain("startupReconciliation");
+    expect(overlays).not.toContain('"Fechar aviso de reconciliação"');
+    expect(overlays).not.toContain('"Dismiss reconciliation notice"');
     expect(styles).toContain(".app-snapshot-status {");
+    expect(styles).toContain(".app-refresh-status-close {");
     expect(styles).toContain("background: rgba(8, 47, 73, 0.96);");
     expect(styles).toContain(".app-warning.app-error {");
     expect(styles).toContain("background: rgba(69, 16, 16, 0.96);");

package/templates/.agents/dashboard/apps/frontend/src/snapshot-coherence.test.ts

@@ -2,6 +2,7 @@ import { readFileSync } from "node:fs";
 import { describe, expect, it } from "vitest";
 import { isCurrentDashboardRequest, mergeBoardPages, needsAtomicCostSnapshot } from "./App.js";
 import { loadAtomicCostSnapshot } from "./snapshot-coherence.js";
+import { projectionRefreshDebounceMs, shouldRefreshVisibleProjection } from "./use-app-effects.js";
 
 describe("atomic Cost snapshot loading", () => {
   it("keeps Operations, Cost, and cards on one source generation while the source moves", async () => {
@@ -47,12 +48,18 @@ describe("atomic Cost snapshot loading", () => {
     expect(costSelection).not.toContain("loadOperationsDetails");
   });
 
-  it("opens the global overlay while the Cost page loads a selected group", () => {
+  it("never blocks the dashboard or starts a full snapshot for a paged Cost request", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
-    const globalGate = app.slice(app.indexOf("const globalLoadingPending"), app.indexOf("const renderedOperations"));
-    expect(app).toContain("const [costSurfaceLoading, setCostSurfaceLoading] = useState(false);");
-    expect(globalGate).toContain("costSurfaceLoading");
-    expect(globalGate).toContain('loadingArea !== "costs"');
+    const globalGate = app.slice(
+      app.indexOf("const globalLoadingPending"),
+      app.indexOf("const renderedOperations"),
+    );
+    expect(app).toContain("const [, setCostSurfaceLoading] = useState(false);");
+    expect(globalGate).not.toContain("costSurfaceLoading");
+    expect(globalGate).not.toContain("operationsSurfaceLoading");
+    expect(globalGate).not.toContain("entityPage.loading");
+    expect(app).not.toContain("api.snapshot(currency, period)");
+    expect(app).not.toContain("useIdleCostPrefetch");
   });
 
   it("does not request Cost Monitor while the initial route is Operations", () => {
@@ -94,6 +101,46 @@ describe("atomic Cost snapshot loading", () => {
     expect(app).toContain('setLoadingArea("costs")');
   });
 
+  it("coalesces focus and visibility events into one non-reconciling projection refresh", () => {
+    expect(
+      shouldRefreshVisibleProjection({
+        visibilityState: "visible",
+        inFlight: false,
+        lastRefreshAt: 0,
+        now: projectionRefreshDebounceMs,
+      }),
+    ).toBe(true);
+    expect(
+      shouldRefreshVisibleProjection({
+        visibilityState: "visible",
+        inFlight: false,
+        lastRefreshAt: projectionRefreshDebounceMs,
+        now: projectionRefreshDebounceMs + 1,
+      }),
+    ).toBe(false);
+    expect(
+      shouldRefreshVisibleProjection({
+        visibilityState: "hidden",
+        inFlight: false,
+        lastRefreshAt: 0,
+        now: projectionRefreshDebounceMs * 2,
+      }),
+    ).toBe(false);
+    const effects = readFileSync(new URL("./use-app-effects.ts", import.meta.url), "utf8");
+    expect(effects).toContain('window.addEventListener("focus", refreshVisibleProjection)');
+    expect(effects).toContain(
+      'document.addEventListener("visibilitychange", refreshVisibleProjection)',
+    );
+    expect(effects).not.toContain("setInterval");
+    expect(effects).toContain("void refresh(false, false, true)");
+  });
+
+  it("does not reconcile open work automatically", () => {
+    const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
+    expect(app).not.toContain("startupReconciliation");
+    expect(app).toContain("await refresh(false, reconcileOpenWork, !reconcileOpenWork)");
+  });
+
   it("removes the global Cost detail request and keeps stale request guards", () => {
     const app = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
     const costPage = readFileSync(
@@ -193,13 +240,16 @@ describe("atomic Cost snapshot loading", () => {
       app.indexOf("const loadCostDetails"),
     );
 
-    expect(boardHydration).toContain("for (const stage of initialWorkBoardStages)");
-    expect(boardHydration).toContain("window.requestIdleCallback(hydrateBoard)");
-    expect(boardHydration).toContain("window.setTimeout(hydrateBoard, 0)");
+    expect(boardHydration).toContain("offset += 3");
+    expect(boardHydration).toContain(
+      "await Promise.all(batch.map((stage) => loadMoreBoard(stage)))",
+    );
+    expect(boardHydration).toContain("window.requestIdleCallback(() => void hydrateBoard())");
+    expect(boardHydration).toContain("window.setTimeout(() => void hydrateBoard(), 0)");
     expect(boardHydration).toContain("!boardInitialPageRef.current.has(stage)");
     expect(boardHydration).toContain("boardInitialPageRef.current.add(stage)");
     expect(boardHydration).toContain("!boardInFlightRef.current.has(stage)");
-    expect(boardHydration).toContain("void loadMoreBoard(stage)");
+    expect(boardHydration).toContain("boardInitialPageRef.current.add(stage)");
   });
 
   it("merges concurrent board pages without replacing rows from another stage", () => {

package/templates/.agents/dashboard/apps/frontend/src/sqlite-page-export.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from "vitest";
+import { allSqliteExportPages } from "./sqlite-page-export.js";
+
+describe("complete SQLite export", () => {
+  it("exports every filtered page, even when the visual page contains only ten rows", async () => {
+    const second = vi.fn().mockResolvedValue({
+      offset: 100,
+      total_count: 145,
+      has_more: false,
+      rows: Array.from({ length: 45 }, (_, id) => ({ id: `standalone-${id}` })),
+    });
+    const first = {
+      offset: 0,
+      total_count: 145,
+      has_more: true,
+      rows: Array.from({ length: 100 }, (_, id) => ({ id: `standalone-${id}` })),
+    };
+    const pages = [] as Array<readonly { id: string }[]>;
+    for await (const page of allSqliteExportPages(first, second)) pages.push(page);
+
+    expect(pages.flat()).toHaveLength(145);
+    expect(second).toHaveBeenCalledWith(100);
+  });
+
+  it("keeps the active PRD or standalone-task kind in the export source", async () => {
+    const source = await import("node:fs/promises").then(({ readFile }) =>
+      readFile(new URL("./use-operations-detail-export.ts", import.meta.url), "utf8"),
+    );
+    expect(source).toContain('source === "operations_work_list" && filters.kind');
+    expect(source).toContain("limit: 100");
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/sqlite-page-export.ts

@@ -0,0 +1,21 @@
+export type SqliteExportPage<Row extends Record<string, unknown>> = {
+  offset: number;
+  total_count: number;
+  has_more: boolean;
+  rows: readonly Row[];
+};
+
+/** Export transport deliberately follows every server page, unlike the UI. */
+export async function* allSqliteExportPages<Row extends Record<string, unknown>>(
+  firstPage: SqliteExportPage<Row>,
+  loadPage: (offset: number) => Promise<SqliteExportPage<Row>>,
+): AsyncGenerator<readonly Row[]> {
+  let page = firstPage;
+  while (true) {
+    if (page.rows.length === 0) return;
+    yield page.rows;
+    const nextOffset = page.offset + page.rows.length;
+    if (!page.has_more || nextOffset >= page.total_count) return;
+    page = await loadPage(nextOffset);
+  }
+}

package/templates/.agents/dashboard/apps/frontend/src/styles.css

@@ -438,6 +438,25 @@ select:focus-visible {
   font-size: 0.78rem;
 }
 
+.app-refresh-status-close {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 5px;
+  color: #cbd5e1;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.app-refresh-status-close:hover,
+.app-refresh-status-close:focus-visible {
+  color: #f8fafc;
+  background: rgba(148, 163, 184, 0.16);
+}
+
 .app-reconciliation-result {
   position: fixed;
   z-index: 80;

package/templates/.agents/dashboard/apps/frontend/src/traceability-task-pagination.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import {
+  appendTraceabilityTaskPage,
+  nextTraceabilityVisibleCount,
+  traceabilityTaskPageSize,
+} from "./traceability-task-pagination.js";
+
+describe("traceability task pagination", () => {
+  it("advances offsets through the API total while preserving unique tasks", () => {
+    const task = (id: string) => ({ id, title: id }) as never;
+    const first = appendTraceabilityTaskPage({
+      cursor: { offset: 0, stageIndex: 0 },
+      page: { tasks: [task("TASK-1"), task("TASK-2")], total: 3 } as never,
+      tasks: [],
+    });
+    const second = appendTraceabilityTaskPage({
+      cursor: first.cursor,
+      page: { tasks: [task("TASK-2"), task("TASK-3")], total: 3 } as never,
+      tasks: first.tasks,
+    });
+
+    expect(first.cursor).toEqual({ offset: 2, stageIndex: 0 });
+    expect(second.cursor).toEqual({ offset: 0, stageIndex: 1 });
+    expect(second.tasks.map((item) => item.id)).toEqual(["TASK-1", "TASK-2", "TASK-3"]);
+  });
+
+  it("advances the rendered list by a deterministic concise batch", () => {
+    expect(traceabilityTaskPageSize).toBe(10);
+    expect(nextTraceabilityVisibleCount(12, 30, 12)).toBe(24);
+    expect(nextTraceabilityVisibleCount(24, 30, 12)).toBe(30);
+  });
+});

package/templates/.agents/dashboard/apps/frontend/src/traceability-task-pagination.ts

@@ -0,0 +1,36 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import type { OperationsBoardPage } from "./dashboard-api.js";
+
+/** The selector is a navigation aid, not a full task export. */
+export const traceabilityTaskPageSize = 10;
+
+export type TraceabilityTaskCursor = { offset: number; stageIndex: number };
+
+export function appendTraceabilityTaskPage({
+  cursor,
+  page,
+  tasks,
+}: {
+  cursor: TraceabilityTaskCursor;
+  page: OperationsBoardPage;
+  tasks: OperationsProjection["tasks"];
+}): { cursor: TraceabilityTaskCursor; tasks: OperationsProjection["tasks"] } {
+  const tasksById = new Map(tasks.map((task) => [task.id, task]));
+  for (const task of page.tasks) tasksById.set(task.id, task);
+  const nextOffset = cursor.offset + page.tasks.length;
+  return {
+    tasks: [...tasksById.values()],
+    cursor:
+      page.tasks.length === 0 || nextOffset >= page.total
+        ? { offset: 0, stageIndex: cursor.stageIndex + 1 }
+        : { ...cursor, offset: nextOffset },
+  };
+}
+
+export function nextTraceabilityVisibleCount(
+  visibleCount: number,
+  totalCount: number,
+  batchSize: number,
+): number {
+  return Math.min(totalCount, visibleCount + batchSize);
+}

package/templates/.agents/dashboard/apps/frontend/src/traceability-workspace.css

@@ -63,13 +63,17 @@
   outline: none;
   background: rgba(56, 189, 248, 0.15);
 }
-.traceability-task-results button small,
-.traceability-task-no-results {
+.traceability-task-no-results,
+.traceability-task-pagination-status {
   color: #a8b6c9;
 }
 .traceability-task-no-results {
   padding: 12px;
 }
+.traceability-task-pagination-status {
+  margin: 0;
+  font-size: 0.78rem;
+}
 .traceability-workspace > header small {
   max-width: 360px;
   color: #71829a;