@zaip-ai/cli 1.0.7 → 1.0.8

package/templates/.agents/dashboard/modules/operations/src/react/period-summary.test.ts

@@ -1,9 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { LEGACY_EFFORT_SNAPSHOT } from "../contracts.js";
-import { effortMetricTotals } from "./execution-metrics.js";
+import { executionMetricTotals } from "./execution-metrics.js";
 import { exportRowsWithDurationHours } from "./export/ExcelExportAction.js";
-import { formatPeriod, periodTotalDurationMs } from "./PeriodSummaryTable.js";
+import { applyFactualPeriodCosts, formatPeriod, periodTotalDurationMs } from "./PeriodSummaryTable.js";
 import {
+  aggregateManifestPeriodSummary,
   aggregatePeriodSummary,
   averagePeriodSummaryRows,
   summarizePeriodRows,
@@ -45,6 +46,16 @@ const data = {
 };
 
 describe("aggregatePeriodSummary", () => {
+  it("uses factual compact USD periods when aggregate-only transport has no Runs", () => {
+    expect(
+      applyFactualPeriodCosts(
+        [{ key: "2026-08", costBrl: null }],
+        "USD",
+        [{ key: "2026-08", estimated_usd: 8.7, estimated_brl: 47.5 }],
+      ),
+    ).toEqual([{ key: "2026-08", costBrl: 8.7 }]);
+  });
+
   it("uses the authoritative daily legacy snapshot once, then only post-cutoff effort", () => {
     const usage = { total: { tokens: { total: null }, cost: { brl: null } } };
     const runs = [
@@ -83,6 +94,16 @@ describe("aggregatePeriodSummary", () => {
 
     expect(cutoff?.durationMs).toBe(5_459_027);
     expect((summarizePeriodRows(rows).durationMs ?? 0) / 3_600_000).toBeCloseTo(63.871028, 6);
+
+    const augustOnly = aggregatePeriodSummary(
+      { prds: [], specs: [], tasks: [], runs },
+      "month",
+      undefined,
+      true,
+      { from: "2026-08-01T03:00:00.000Z", to: "2026-08-06T02:59:59.999Z" },
+    );
+    expect(augustOnly).toHaveLength(1);
+    expect(augustOnly[0]?.durationMs).toBe(14_353_554);
   });
 
   it("keeps the period summary and export on observed source duration only", () => {
@@ -143,13 +164,13 @@ describe("aggregatePeriodSummary", () => {
         usage,
       },
     ];
-    const bigNumber = effortMetricTotals(runs).durationMs;
+    const bigNumber = executionMetricTotals(runs).durationMs;
     const [period] = aggregatePeriodSummary({ prds: [], specs: [], tasks: [], runs }, "day");
 
-    expect(bigNumber).toBe(10_800_000);
+    expect(bigNumber).toBe(3_600_000);
     expect(period?.durationMs).toBe(bigNumber);
     expect(exportRowsWithDurationHours([{ durationMs: period?.durationMs ?? null }])).toEqual([
-      { durationHours: 3 },
+      { durationHours: 1 },
     ]);
   });
 
@@ -214,6 +235,53 @@ describe("aggregatePeriodSummary", () => {
     ]);
   });
 
+  it("counts typed Evidence by observed month and de-duplicates legacy references", () => {
+    const rows = aggregatePeriodSummary(
+      {
+        prds: [],
+        specs: [],
+        tasks: [
+          {
+            created_at: "2026-07-31T12:00:00.000Z",
+            result: { evidence_ids: ["EVD-TYPED", "EVD-LEGACY"] },
+          },
+        ],
+        evidences: [{ id: "EVD-TYPED", observed_at: "2026-08-01T12:00:00.000Z" }],
+        runs: [],
+      },
+      "month",
+    );
+
+    expect(rows.map((row) => [row.key, row.evidences])).toEqual([
+      ["2026-08", 1],
+      ["2026-07", 1],
+    ]);
+  });
+
+  it("counts typed Validation by execution month instead of Task creation month", () => {
+    const rows = aggregatePeriodSummary(
+      {
+        prds: [],
+        specs: [],
+        tasks: [
+          {
+            created_at: "2026-07-31T12:00:00.000Z",
+            result: null,
+            test_count: 99,
+          },
+        ],
+        validations: [{ id: "TEST-TYPED", executed_at: "2026-08-01T12:00:00.000Z" }],
+        runs: [],
+      },
+      "month",
+    );
+
+    expect(rows.map((row) => [row.key, row.tests])).toEqual([
+      ["2026-08", 1],
+      ["2026-07", 0],
+    ]);
+  });
+
   it("uses the America/Sao_Paulo day on both sides of 03:00Z", () => {
     const rows = aggregatePeriodSummary(
       {
@@ -396,15 +464,48 @@ describe("aggregatePeriodSummary", () => {
     );
 
     expect(rows).toEqual([
+      expect.objectContaining({
+        key: "2026-08-02",
+        durationMs: 14 * 3_600_000,
+        tokens: null,
+        costBrl: null,
+      }),
       expect.objectContaining({
         key: "2026-08-01",
-        durationMs: 31 * 3_600_000,
+        durationMs: 17 * 3_600_000,
         tokens: 10,
         costBrl: 1,
       }),
     ]);
   });
 
+  it("cuts observed execution duration at the Sao Paulo midnight boundary", () => {
+    const rows = aggregatePeriodSummary(
+      {
+        prds: [],
+        specs: [],
+        tasks: [],
+        runs: [
+          {
+            id: "RUN-CROSS-MIDNIGHT",
+            phase: "execution",
+            started_at: "2026-08-01T02:30:00.000Z",
+            finished_at: null,
+            duration_ms: 2 * 3_600_000,
+            source_duration_ms: 2 * 3_600_000,
+            usage: { total: { tokens: { total: 1 }, cost: { brl: 1 } } },
+          },
+        ],
+      },
+      "day",
+    );
+
+    expect(rows.map(({ key, durationMs }) => [key, durationMs])).toEqual([
+      ["2026-08-01", 90 * 60_000],
+      ["2026-07-31", 30 * 60_000],
+    ]);
+  });
+
   it("does not double count a duplicated projected Run", () => {
     const run = {
       id: "RUN-1",
@@ -456,6 +557,64 @@ describe("aggregatePeriodSummary", () => {
   });
 });
 
+describe("aggregateManifestPeriodSummary", () => {
+  it("renders quick daily data and rolls it up without replacing unavailable values with zero", () => {
+    const daily = {
+      "2026-08-06": {
+        prds: 0,
+        specs: 0,
+        tasks: 19,
+        validations: 11,
+        evidences: 11,
+        runs: 21,
+        usage: {
+          total_tokens: { known_sum: 28_672_464, unknown: 7 },
+          cost: { known_sum: 146.17493802499996, unknown: 7 },
+        },
+        duration: { known_sum: 3_790_721, unknown: 13 },
+      },
+      "2026-07-31": {
+        prds: 1,
+        specs: 1,
+        tasks: 2,
+        validations: 1,
+        evidences: 1,
+        runs: 1,
+        usage: {
+          total_tokens: { known_sum: 0, unknown: 1 },
+          cost: { known_sum: 0, unknown: 1 },
+        },
+      },
+    };
+    expect(aggregateManifestPeriodSummary(daily, "day")).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          key: "2026-08-06",
+          tasks: 19,
+          runs: 21,
+          tests: 11,
+          evidences: 11,
+          tokens: 28_672_464,
+          costBrl: 146.17493802499996,
+          durationMs: 3_790_721,
+        }),
+        expect.objectContaining({
+          key: "2026-07-31",
+          tokens: null,
+          costBrl: null,
+          durationMs: null,
+        }),
+      ]),
+    );
+    expect(aggregateManifestPeriodSummary(daily, "month")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ key: "2026-08", tasks: 19, runs: 21 })]),
+    );
+    expect(aggregateManifestPeriodSummary(daily, "year")).toEqual(
+      expect.arrayContaining([expect.objectContaining({ key: "2026", tasks: 21, runs: 22 })]),
+    );
+  });
+});
+
 describe("formatPeriod", () => {
   it("keeps monthly periods in sortable YYYY-MM format", () => {
     expect(formatPeriod("2026-06", "month", "pt-BR")).toBe("2026-06");

package/templates/.agents/dashboard/modules/operations/src/react/period-summary.ts

@@ -3,7 +3,7 @@ import {
   LEGACY_EFFORT_DAILY_MS,
   saoPauloPeriodKey,
 } from "../contracts.js";
-import { analyticalDuration, metricRuns } from "./execution-metrics.js";
+import { analyticalDuration, executionMetricRuns, metricRuns } from "./execution-metrics.js";
 
 export type PeriodGranularity = "day" | "month" | "year";
 
@@ -25,6 +25,20 @@ export interface PeriodSummaryRow {
   costBrl: number | null;
 }
 
+export type ManifestDailyPeriod = {
+  prds: number;
+  specs: number;
+  tasks: number;
+  validations: number;
+  evidences: number;
+  runs: number;
+  usage: {
+    total_tokens: { known_sum: number; unknown: number };
+    cost: { known_sum: number; unknown: number };
+  };
+  duration?: { known_sum: number; unknown: number };
+};
+
 interface PeriodSummaryInput {
   prds: readonly { created_at: string | null }[];
   specs: readonly { created_at: string | null }[];
@@ -33,6 +47,8 @@ interface PeriodSummaryInput {
     result: { evidence_ids: string[] } | null;
     test_count?: number;
   }[];
+  evidences?: readonly { id: string; observed_at: string }[];
+  validations?: readonly { id: string; executed_at: string }[];
   runs: readonly {
     id: string;
     task_id?: string | null;
@@ -42,6 +58,8 @@ interface PeriodSummaryInput {
     finished_at: string | null;
     duration_ms: number | null;
     source_duration_ms?: number | null;
+    source_started_at?: string | null;
+    duration_started_at?: string | null;
     duration_provenance?:
       | "observed"
       | "reconciled"
@@ -57,6 +75,7 @@ export function aggregatePeriodSummary(
   granularity: PeriodGranularity,
   resolveRunCostBrl?: (runId: string) => number | null,
   includeLegacyEffort = false,
+  legacyRange?: { from: string | null; to: string | null },
 ): PeriodSummaryRow[] {
   const buckets = new Map<string, PeriodSummaryRow>();
   const evidenceIds = new Map<string, Set<string>>();
@@ -65,7 +84,9 @@ export function aggregatePeriodSummary(
     data.runs,
     granularity,
     includeLegacyEffort,
+    legacyRange,
   );
+  const typedEvidenceIds = new Set((data.evidences ?? []).map((evidence) => evidence.id));
 
   const bucketForKey = (key: string): PeriodSummaryRow => {
     const existing = buckets.get(key);
@@ -108,9 +129,22 @@ export function aggregatePeriodSummary(
     if (bucket === null) continue;
     bucket.tasks += 1;
     bucket.tasksCreated += 1;
-    bucket.tests += task.test_count ?? 0;
+    if (data.validations === undefined) bucket.tests += task.test_count ?? 0;
     const ids = evidenceIds.get(bucket.key);
-    for (const evidenceId of task.result?.evidence_ids ?? []) ids?.add(evidenceId);
+    for (const evidenceId of task.result?.evidence_ids ?? [])
+      if (!typedEvidenceIds.has(evidenceId)) ids?.add(evidenceId);
+  }
+  for (const evidence of data.evidences ?? []) {
+    const bucket = bucketFor(evidence.observed_at);
+    if (bucket !== null) evidenceIds.get(bucket.key)?.add(evidence.id);
+  }
+  const validationIds = new Map<string, Set<string>>();
+  for (const validation of data.validations ?? []) {
+    const bucket = bucketFor(validation.executed_at);
+    if (bucket === null) continue;
+    const ids = validationIds.get(bucket.key) ?? new Set<string>();
+    ids.add(validation.id);
+    validationIds.set(bucket.key, ids);
   }
   // Period usage follows the global card population: every filtered Run phase.
   // Observed duration is intentionally populated below from execution Runs only.
@@ -131,6 +165,10 @@ export function aggregatePeriodSummary(
     const bucket = buckets.get(key);
     if (bucket !== undefined) bucket.evidences = ids.size;
   }
+  for (const [key, ids] of validationIds) {
+    const bucket = buckets.get(key);
+    if (bucket !== undefined) bucket.tests = ids.size;
+  }
   for (const [key, ids] of activeTaskIds) {
     const bucket = buckets.get(key);
     if (bucket !== undefined) {
@@ -144,27 +182,131 @@ export function aggregatePeriodSummary(
   return [...buckets.values()].sort((left, right) => right.key.localeCompare(left.key));
 }
 
+/**
+ * The quick Operations projection deliberately omits individual Runs. Convert
+ * its durable daily manifest aggregates directly instead of treating that
+ * omitted collection as an empty reporting population.
+ */
+export function aggregateManifestPeriodSummary(
+  daily: Readonly<Record<string, ManifestDailyPeriod>>,
+  granularity: PeriodGranularity,
+): PeriodSummaryRow[] {
+  const grouped = new Map<string, PeriodSummaryRow>();
+  for (const [day, period] of Object.entries(daily)) {
+    const key = periodKey(`${day}T12:00:00.000Z`, granularity);
+    if (key === null) continue;
+    const current = grouped.get(key) ?? {
+      key,
+      prds: 0,
+      specs: 0,
+      tasks: 0,
+      tasksCreated: 0,
+      tasksActive: 0,
+      taskDaysActive: 0,
+      runs: 0,
+      tests: 0,
+      evidences: 0,
+      durationMs: null,
+      tokens: null,
+      costBrl: null,
+    };
+    current.prds += period.prds;
+    current.specs += period.specs;
+    current.tasks += period.tasks;
+    current.tasksCreated += period.tasks;
+    current.tasksActive = (current.tasksActive ?? 0) + period.tasks;
+    current.taskDaysActive += period.tasks;
+    current.runs += period.runs;
+    current.tests += period.validations;
+    current.evidences += period.evidences;
+    current.tokens = addObserved(
+      current.tokens,
+      knownMetric(period.runs, period.usage.total_tokens),
+    );
+    current.costBrl = addObserved(current.costBrl, knownMetric(period.runs, period.usage.cost));
+    current.durationMs = addObserved(current.durationMs, knownMetric(period.runs, period.duration));
+    grouped.set(key, current);
+  }
+  return [...grouped.values()].sort((left, right) => right.key.localeCompare(left.key));
+}
+
+function knownMetric(
+  runs: number,
+  metric: { known_sum: number; unknown: number } | undefined,
+): number | null {
+  if (metric === undefined || metric.unknown >= runs) return null;
+  return metric.known_sum;
+}
+
 function aggregateObservedDurationByPeriod(
   runs: PeriodSummaryInput["runs"],
   granularity: PeriodGranularity,
   includeLegacyEffort: boolean,
+  legacyRange?: { from: string | null; to: string | null },
 ): Map<string, number> {
   const durations = new Map<string, number>();
-  for (const run of metricRuns(runs)) {
+  for (const run of executionMetricRuns(runs)) {
     if (includeLegacyEffort && !isAfterLegacyEffortCutoff(run.started_at)) continue;
     const durationMs = analyticalDuration(run);
     if (durationMs === null) continue;
-    const key = periodKey(run.started_at, granularity);
-    if (key !== null) durations.set(key, (durations.get(key) ?? 0) + durationMs);
+    const startedAt = run.source_started_at ?? run.duration_started_at ?? run.started_at;
+    const start = Date.parse(startedAt);
+    if (!Number.isFinite(start)) continue;
+    const end = start + durationMs;
+    let cursor = start;
+    do {
+      const key = periodKey(new Date(cursor).toISOString(), granularity);
+      if (key === null) break;
+      const segmentEnd = Math.min(end, saoPauloPeriodEnd(key, granularity));
+      durations.set(key, (durations.get(key) ?? 0) + segmentEnd - cursor);
+      if (segmentEnd >= end) break;
+      cursor = segmentEnd;
+    } while (cursor <= end);
   }
   if (includeLegacyEffort)
     for (const [day, durationMs] of Object.entries(LEGACY_EFFORT_DAILY_MS)) {
+      const timestamp = Date.parse(`${day}T12:00:00.000Z`);
+      if (
+        (legacyRange?.from !== null &&
+          legacyRange?.from !== undefined &&
+          timestamp < Date.parse(legacyRange.from)) ||
+        (legacyRange?.to !== null &&
+          legacyRange?.to !== undefined &&
+          timestamp > Date.parse(legacyRange.to))
+      ) {
+        continue;
+      }
       const key = periodKey(`${day}T12:00:00.000Z`, granularity);
       if (key !== null) durations.set(key, (durations.get(key) ?? 0) + durationMs);
     }
   return durations;
 }
 
+function saoPauloPeriodEnd(key: string, granularity: PeriodGranularity): number {
+  const [year, month = 1, day = 1] = key.split("-").map(Number);
+  const next = new Date(Date.UTC(year!, month! - 1, day!));
+  if (granularity === "day") next.setUTCDate(next.getUTCDate() + 1);
+  else if (granularity === "month") next.setUTCMonth(next.getUTCMonth() + 1, 1);
+  else next.setUTCFullYear(next.getUTCFullYear() + 1, 0, 1);
+  return saoPauloLocalMidnight(next.getUTCFullYear(), next.getUTCMonth() + 1, next.getUTCDate());
+}
+
+function saoPauloLocalMidnight(year: number, month: number, day: number): number {
+  const utcGuess = Date.UTC(year, month - 1, day);
+  const offset =
+    new Intl.DateTimeFormat("en-US", {
+      timeZone: "America/Sao_Paulo",
+      timeZoneName: "longOffset",
+    })
+      .formatToParts(new Date(utcGuess))
+      .find((part) => part.type === "timeZoneName")?.value ?? "GMT";
+  const match = /^GMT([+-])(\d{2}):(\d{2})$/.exec(offset);
+  if (match === null) return utcGuess;
+  const offsetMs =
+    (Number(match[2]) * 60 + Number(match[3])) * 60_000 * (match[1] === "+" ? 1 : -1);
+  return utcGuess - offsetMs;
+}
+
 export function summarizePeriodRows(
   rows: readonly PeriodSummaryRow[],
 ): Omit<PeriodSummaryRow, "key"> {

package/templates/.agents/dashboard/modules/operations/src/react/popup-localization.test.ts

@@ -19,7 +19,7 @@ describe("operations popup localization", () => {
       model: "Model",
       start: "Start",
       end: "End",
-      duration: "Duration",
+      duration: "Time",
       file: "File",
     });
   });

package/templates/.agents/dashboard/modules/operations/src/react/unified-work-board.css

@@ -113,6 +113,128 @@
   font-size: 0.72rem;
 }
 
+.operations-work-card {
+  cursor: default;
+}
+
+.operations-work-card:hover {
+  transform: none;
+  box-shadow: none;
+}
+
+.operations-work-card-open {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  min-width: 0;
+  gap: 6px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.operations-work-card-first-line {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  min-height: 24px;
+  gap: 6px;
+  /* 2 × 32px controls + 6px gap + 6px breathing room. */
+  padding-right: 76px;
+}
+
+.operations-work-card-open > .operations-work-next,
+.operations-work-card-open > .operations-work-status,
+.operations-work-card-open > .operations-risk {
+  margin-top: 4px;
+}
+
+.operations-work-card-open > strong {
+  flex-basis: 100%;
+  margin-top: 4px;
+}
+
+.operations-work-card {
+  position: relative;
+}
+
+.operations-work-reorder {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.operations-work-reorder button {
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0;
+}
+
+.operations-work-card-open:hover > strong,
+.operations-work-card-open:focus-visible > strong {
+  color: #8fd1ff;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.operations-work-card-open:focus-visible {
+  outline: 2px solid #67e8f9;
+  outline-offset: 4px;
+}
+
+.operations-work-card-open > strong {
+  display: -webkit-box;
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.operations-work-order,
+.operations-work-next {
+  justify-self: start;
+  border-radius: 999px;
+  padding: 3px 7px;
+  font-size: 0.62rem;
+  font-weight: 800;
+}
+
+.operations-work-order {
+  background: rgba(96, 165, 250, 0.16);
+  color: #bfdbfe;
+}
+
+.operations-work-next {
+  background: rgba(34, 211, 238, 0.18);
+  color: #a5f3fc;
+}
+
+.operations-work-reorder {
+  display: flex;
+  gap: 6px;
+}
+
+.operations-work-reorder button {
+  min-width: 32px;
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.7);
+  color: #cbd5e1;
+  cursor: pointer;
+  font: inherit;
+}
+
+.operations-work-reorder button:hover,
+.operations-work-reorder button:focus-visible {
+  border-color: #67e8f9;
+  color: #a5f3fc;
+}
+
 .operations-work-card > small[title] {
   display: block;
   min-width: 0;
@@ -185,3 +307,13 @@
   display: inline-flex;
   white-space: nowrap;
 }
+
+/* Keep the visual buttons compact while retaining a 32px pointer/focus target. */
+.operations-work-card .operations-work-reorder button {
+  box-sizing: border-box;
+  min-width: 32px;
+  width: 32px;
+  min-height: 32px;
+  height: 32px;
+  padding: 0;
+}

package/templates/.agents/dashboard/modules/operations/src/react/unified-work-board.css.test.ts

@@ -0,0 +1,13 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync(new URL("./unified-work-board.css", import.meta.url), "utf8");
+
+describe("UnifiedWorkBoard priority controls", () => {
+  it("reserves at least the two accessible reorder targets and their gap", () => {
+    expect(css).toContain("padding-right: 76px");
+    expect(css).toContain(".operations-work-card .operations-work-reorder button");
+    expect(css).toContain("width: 32px");
+    expect(css).toContain("height: 32px");
+  });
+});

package/templates/.agents/dashboard/modules/operations/src/react/unified-work-board.header.test.ts

@@ -0,0 +1,16 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("./UnifiedWorkBoard.tsx", import.meta.url), "utf8");
+
+describe("UnifiedWorkBoard card header", () => {
+  it("keeps priority controls only in ready and preserves other status badges", () => {
+    const firstLine = source.match(/operations-work-card-first-line[\s\S]*?<\/span>/)?.[0] ?? "";
+    expect(firstLine).toContain("operations-work-order");
+    expect(firstLine).not.toContain("operations-work-kind");
+    expect(source).toContain('stage === "ready" ?');
+    expect(source).toContain('stage !== "ready" ?');
+    expect(source).toContain('draggable={stage === "ready"}');
+    expect(source).toContain("operations-work-status is-${stage}");
+  });
+});

package/templates/.agents/dashboard/modules/operations/src/react/use-infinite-column.ts

@@ -3,26 +3,32 @@ import { useEffect, useRef, useState } from "react";
 /** Each Kanban column owns its own 10-item cursor window. */
 export const COLUMN_PAGE_SIZE = 10;
 
-export function useInfiniteColumn(itemCount: number) {
+export function useInfiniteColumn(
+  itemCount: number,
+  totalCount = itemCount,
+  onLoadMore?: () => void,
+) {
   const [visibleCount, setVisibleCount] = useState(COLUMN_PAGE_SIZE);
   const sentinelRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const sentinel = sentinelRef.current;
-    if (sentinel === null || visibleCount >= itemCount) return;
+    if (sentinel === null || (visibleCount >= itemCount && itemCount >= totalCount)) return;
     const observer = new IntersectionObserver(
       (entries) => {
         if (!entries.some((entry) => entry.isIntersecting)) return;
-        setVisibleCount((current) => Math.min(itemCount, current + COLUMN_PAGE_SIZE));
+        if (visibleCount < itemCount)
+          setVisibleCount((current) => Math.min(itemCount, current + COLUMN_PAGE_SIZE));
+        else if (itemCount < totalCount) onLoadMore?.();
       },
       { rootMargin: "320px 0px" },
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [itemCount, visibleCount]);
+  }, [itemCount, totalCount, visibleCount, onLoadMore]);
 
   return {
-    hasMore: visibleCount < itemCount,
+    hasMore: visibleCount < itemCount || itemCount < totalCount,
     sentinelRef,
     visibleCount: Math.min(visibleCount, itemCount),
   };