perf(board): load pages incrementally and patch live changes

apps/api/src/task/controllers/get-task.ts

@@ -1,15 +1,30 @@
-import { eq } from "drizzle-orm";
+import { boundedTaskRead } from "../bounded-read";
+import { alias } from "drizzle-orm/pg-core";
+import { boardDescription, descriptionDeferred } from "../description-pages";
+import { getSubtaskCounts } from "../get-subtask-counts";
+import { and, eq, sql } from "drizzle-orm";
 import { HTTPException } from "hono/http-exception";
 import db from "../../database";
-import { taskTable, userTable } from "../../database/schema";
+import {
+  taskTable,
+  userTable,
+  projectTable,
+  taskRelationTable,
+} from "../../database/schema";
 
-async function getTask(taskId: string) {
+async function getTask(taskId: string, board = false) {
   const task = await db
     .select({
       id: taskTable.id,
       title: taskTable.title,
       number: taskTable.number,
-      description: taskTable.description,
+      description: board ? boardDescription : taskTable.description,
+      ...(board
+        ? {
+            descriptionDeferred,
+            workspaceId: sql<string>`(select ${projectTable.workspaceId} from ${projectTable} where ${projectTable.id} = ${taskTable.projectId})`,
+          }
+        : {}),
       status: taskTable.status,
       priority: taskTable.priority,
       startDate: taskTable.startDate,
@@ -32,7 +47,36 @@ async function getTask(taskId: string) {
     });
   }
 
-  return task[0];
+  const { workspaceId, ...result } = task[0];
+  if (!board || !workspaceId) return result;
+  const parent = alias(taskTable, "parent");
+  const parents = await db
+    .selectDistinct({ id: parent.id })
+    .from(taskRelationTable)
+    .innerJoin(parent, eq(taskRelationTable.sourceTaskId, parent.id))
+    .where(
+      and(
+        eq(taskRelationTable.targetTaskId, taskId),
+        eq(taskRelationTable.relationType, "subtask"),
+        eq(parent.projectId, result.projectId),
+      ),
+    );
+  const counts = await boundedTaskRead((tx) =>
+    getSubtaskCounts(
+      tx,
+      [taskId, ...parents.map((task) => task.id)],
+      workspaceId,
+      false,
+    ),
+  );
+  return {
+    ...result,
+    subtaskCounts: counts.get(taskId) ?? { completed: 0, total: 0 },
+    parentSubtaskCounts: parents.map(({ id }) => ({
+      taskId: id,
+      ...(counts.get(id) ?? { completed: 0, total: 0 }),
+    })),
+  };
 }
 
 export default getTask;

apps/api/src/task/index.ts

@@ -251,9 +251,13 @@ const getTaskRoute = createRoute({
   path: "/{id}",
   tags: ["Tasks"],
   summary: "Get task",
-  description: "Get a single task by ID, with its assignee's name resolved.",
+  description:
+    "Get a single task by ID, with its assignee name. The board view omits descriptions above 64 KiB and includes task and same-project parent subtask progress.",
   middleware: [workspaceAccess.fromTask()] as const,
-  request: { params: taskParam },
+  request: {
+    params: taskParam,
+    query: z.object({ view: z.enum(["detail", "board"]).optional() }),
+  },
   responses: {
     200: jsonResponse("Task details", taskWithAssigneeSchema),
     400: errorResponse(
@@ -806,7 +810,7 @@ const task = apiRouter<BaseVariables & { workspaceId: string }>()
   .openapi(getTaskRoute, async (c) => {
     const { id } = c.req.valid("param");
 
-    const task = await getTask(id);
+    const task = await getTask(id, c.req.valid("query").view === "board");
 
     return c.json(task, 200);
   })

apps/api/src/task/response.ts

@@ -37,6 +37,18 @@ export const taskSchema = z
 
 export const taskWithAssigneeSchema = taskSchema
   .extend({
+    subtaskCounts: z
+      .object({ completed: z.number(), total: z.number() })
+      .optional(),
+    parentSubtaskCounts: z
+      .array(
+        z.object({
+          taskId: z.string(),
+          completed: z.number(),
+          total: z.number(),
+        }),
+      )
+      .optional(),
     assigneeName: z.string().nullable(),
     assigneeId: z.string().nullable(),
   })

apps/docs/openapi.json

@@ -1024,6 +1024,43 @@
           {
             "type": "object",
             "properties": {
+              "subtaskCounts": {
+                "type": "object",
+                "properties": {
+                  "completed": {
+                    "type": "number"
+                  },
+                  "total": {
+                    "type": "number"
+                  }
+                },
+                "required": [
+                  "completed",
+                  "total"
+                ]
+              },
+              "parentSubtaskCounts": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "taskId": {
+                      "type": "string"
+                    },
+                    "completed": {
+                      "type": "number"
+                    },
+                    "total": {
+                      "type": "number"
+                    }
+                  },
+                  "required": [
+                    "taskId",
+                    "completed",
+                    "total"
+                  ]
+                }
+              },
               "assigneeName": {
                 "type": [
                   "string",
@@ -9012,7 +9049,7 @@
           "Tasks"
         ],
         "summary": "Get task",
-        "description": "Get a single task by ID, with its assignee's name resolved.",
+        "description": "Get a single task by ID, with its assignee name. The board view omits descriptions above 64 KiB and includes task and same-project parent subtask progress.",
         "parameters": [
           {
             "schema": {
@@ -9021,6 +9058,18 @@
             "required": true,
             "name": "id",
             "in": "path"
+          },
+          {
+            "schema": {
+              "type": "string",
+              "enum": [
+                "detail",
+                "board"
+              ]
+            },
+            "required": false,
+            "name": "view",
+            "in": "query"
           }
         ],
         "responses": {

apps/web/src/components/kanban-board/index.tsx

@@ -1,3 +1,4 @@
+import { markBoardCacheChanged } from "@/lib/board-cache-version";
 import {
   closestCorners,
   DndContext,
@@ -166,14 +167,21 @@ function KanbanBoard({
     const activeId = active.id.toString();
     const overId = over.id.toString();
 
-    if (isReordering) return;
+    if (
+      isReordering ||
+      queryClient.getQueryState(["tasks", project.id])?.fetchStatus ===
+        "fetching"
+    )
+      return;
     const canonical =
       queryClient.getQueryData<ProjectWithTasks>(["tasks", project.id]) ??
       (storedProject?.id === project.id ? storedProject : undefined);
     if (!canonical) return;
 
     const moved = moveBoardTask(canonical, activeId, overId, sortedByNumber);
     if (!moved || !moved.tasks.length) return;
+    for (const task of moved.tasks)
+      markBoardCacheChanged(queryClient, project.id, task.id);
     setProject(moved.project);
     queryClient.setQueryData(["tasks", project.id], moved.project);
     reorder({ projectId: project.id, tasks: moved.tasks });

apps/web/src/fetchers/project/get-public-project.ts

@@ -1,5 +1,5 @@
 import { client } from "@kaneo/libs";
-import type { InferRequestType } from "hono/client";
+import type { InferRequestType, InferResponseType } from "hono/client";
 import { loadBoardPages } from "@/fetchers/task/load-board-pages";
 import { HttpError } from "@/lib/http-error";
 export type GetPublicProjectRequest = InferRequestType<
@@ -8,23 +8,33 @@ export type GetPublicProjectRequest = InferRequestType<
 async function getPublicProject(
   { id }: GetPublicProjectRequest,
   signal?: AbortSignal,
+  onProgress?: (
+    board: Omit<
+      InferResponseType<(typeof client)["public-project"][":id"]["$get"], 200>,
+      "pagination"
+    >,
+  ) => void,
 ) {
-  return loadBoardPages(async (page, relatedPage) => {
-    const response = await client["public-project"][":id"].$get(
-      {
-        param: { id },
-        query: {
-          page: String(page),
-          limit: "100",
-          ...(relatedPage ? { relatedPage: String(relatedPage) } : {}),
+  return loadBoardPages(
+    async (page, relatedPage) => {
+      const response = await client["public-project"][":id"].$get(
+        {
+          param: { id },
+          query: {
+            page: String(page),
+            limit: "100",
+            ...(relatedPage ? { relatedPage: String(relatedPage) } : {}),
+          },
         },
-      },
-      { init: { signal } },
-    );
-    if (!response.ok)
-      throw new HttpError(response.status, await response.text());
-    const { pagination, ...data } = await response.json();
-    return { data, pagination };
-  }, signal);
+        { init: { signal } },
+      );
+      if (!response.ok)
+        throw new HttpError(response.status, await response.text());
+      const { pagination, ...data } = await response.json();
+      return { data, pagination };
+    },
+    signal,
+    onProgress,
+  );
 }
 export default getPublicProject;

apps/web/src/fetchers/task/get-task.ts

@@ -6,8 +6,11 @@ export type GetTaskRequest = InferRequestType<
   (typeof client)["task"][":id"]["$get"]
 >["param"];
 
-async function getTask(taskId: string) {
-  const response = await client.task[":id"].$get({ param: { id: taskId } });
+async function getTask(taskId: string, view: "detail" | "board" = "detail") {
+  const response = await client.task[":id"].$get({
+    param: { id: taskId },
+    query: { view },
+  });
 
   if (!response.ok) {
     throw new HttpError(response.status, await response.text());

apps/web/src/fetchers/task/get-tasks.ts

@@ -1,23 +1,37 @@
 import { client } from "@kaneo/libs";
+import type { InferResponseType } from "hono/client";
 import { HttpError } from "@/lib/http-error";
 import { loadBoardPages } from "./load-board-pages";
 
-async function getTasks(projectId: string, signal?: AbortSignal) {
-  return loadBoardPages(async (page, relatedPage) => {
-    const response = await client.task.tasks[":projectId"].$get(
-      {
-        param: { projectId },
-        query: {
-          page: String(page),
-          limit: "100",
-          ...(relatedPage ? { relatedPage: String(relatedPage) } : {}),
+async function getTasks(
+  projectId: string,
+  signal?: AbortSignal,
+  onProgress?: (
+    board: InferResponseType<
+      (typeof client)["task"]["tasks"][":projectId"]["$get"],
+      200
+    >["data"],
+  ) => void,
+) {
+  return loadBoardPages(
+    async (page, relatedPage) => {
+      const response = await client.task.tasks[":projectId"].$get(
+        {
+          param: { projectId },
+          query: {
+            page: String(page),
+            limit: "100",
+            ...(relatedPage ? { relatedPage: String(relatedPage) } : {}),
+          },
         },
-      },
-      { init: { signal } },
-    );
-    if (!response.ok)
-      throw new HttpError(response.status, "Failed to fetch tasks");
-    return response.json();
-  }, signal);
+        { init: { signal } },
+      );
+      if (!response.ok)
+        throw new HttpError(response.status, "Failed to fetch tasks");
+      return response.json();
+    },
+    signal,
+    onProgress,
+  );
 }
 export default getTasks;

apps/web/src/fetchers/task/load-board-pages.test.ts

@@ -58,6 +58,32 @@ function page(number: number, totalPages = 3) {
   };
 }
 describe("complete board loading through bounded pages", () => {
+  it("publishes the first page before a slow continuation and keeps snapshots immutable", async () => {
+    let finish!: (value: ReturnType<typeof page>) => void;
+    const snapshots: ProjectWithTasks[] = [];
+    const load = vi
+      .fn()
+      .mockResolvedValueOnce(page(1, 2))
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            finish = resolve;
+          }),
+      );
+    const loading = loadBoardPages(load, undefined, (board) =>
+      snapshots.push(board),
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(snapshots[0].columns[0].tasks.map((task) => task.id)).toEqual(["1"]);
+    finish(page(2, 2));
+    await loading;
+    expect(snapshots.at(-1)?.columns[0].tasks.map((task) => task.id)).toEqual([
+      "1",
+      "2",
+    ]);
+    expect(snapshots[0].columns[0].tasks).toHaveLength(1);
+  });
   it("loads sequentially and merges every column, planned and archived task with its complete fields", async () => {
     let active = 0;
     let peak = 0;