@nextclaw/ui 0.24.1 → 0.24.3

package/src/features/projects/hooks/use-project-work.test.tsx

@@ -1,19 +1,30 @@
 import type { ReactNode } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { renderHook, waitFor } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { useProjectWork } from "./use-project-work";
+import type { ProjectWorkState } from "@nextclaw/client-sdk";
+import {
+  sortProjectWorkStates,
+  sortProjectWorkStatesForList,
+  useProjectArtifacts,
+  useProjectWork,
+  useProjectWorkEvents,
+} from "./use-project-work";
 
 const mocks = vi.hoisted(() => ({
   handler: null as
     | null
     | ((event: { projectId: string; workItemId?: string }) => void),
   listWork: vi.fn(),
+  listRecentWorkArtifacts: vi.fn(),
 }));
 
 vi.mock("@/shared/lib/api", () => ({
   nextclawClient: {
-    projects: { listWork: mocks.listWork },
+    projects: {
+      listWork: mocks.listWork,
+      listRecentWorkArtifacts: mocks.listRecentWorkArtifacts,
+    },
     eventBus: {
       on: (
         _key: unknown,
@@ -31,7 +42,13 @@ vi.mock("@/shared/lib/api", () => ({
 describe("useProjectWork", () => {
   beforeEach(() => {
     mocks.listWork.mockReset();
-    mocks.listWork.mockResolvedValue({ items: [], states: [], total: 0 });
+    mocks.listWork.mockResolvedValue({ items: [], nextCursor: null, total: 0 });
+    mocks.listRecentWorkArtifacts.mockReset();
+    mocks.listRecentWorkArtifacts.mockResolvedValue({
+      artifacts: [],
+      nextCursor: null,
+      total: 0,
+    });
   });
 
   it("refreshes the project query from committed work events only for the matching project", async () => {
@@ -41,9 +58,15 @@ describe("useProjectWork", () => {
     const wrapper = ({ children }: { children: ReactNode }) => (
       <QueryClientProvider client={client}>{children}</QueryClientProvider>
     );
-    const { unmount } = renderHook(() => useProjectWork("project-1"), {
-      wrapper,
-    });
+    const { unmount } = renderHook(
+      () => {
+        useProjectWorkEvents("project-1");
+        return useProjectWork("project-1", { stateId: "planned", limit: 20 });
+      },
+      {
+        wrapper,
+      },
+    );
     await waitFor(() => expect(mocks.listWork).toHaveBeenCalledTimes(1));
 
     mocks.handler?.({ projectId: "project-2" });
@@ -55,4 +78,139 @@ describe("useProjectWork", () => {
     unmount();
     expect(mocks.handler).toBeNull();
   });
+
+  it("loads the next opaque cursor without changing the state-scoped query", async () => {
+    mocks.listWork
+      .mockResolvedValueOnce({
+        items: [{ id: "one" }],
+        nextCursor: "next",
+        total: 2,
+      })
+      .mockResolvedValueOnce({
+        items: [{ id: "two" }],
+        nextCursor: null,
+        total: 2,
+      });
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+    const { result } = renderHook(
+      () => useProjectWork("project-1", { stateId: "planned", limit: 20 }),
+      { wrapper },
+    );
+    await waitFor(() => expect(result.current.hasNextPage).toBe(true));
+
+    await act(async () => await result.current.fetchNextPage());
+
+    expect(mocks.listWork).toHaveBeenNthCalledWith(1, "project-1", {
+      stateId: "planned",
+      limit: 20,
+    });
+    expect(mocks.listWork).toHaveBeenNthCalledWith(2, "project-1", {
+      stateId: "planned",
+      limit: 20,
+      cursor: "next",
+    });
+    await waitFor(() => expect(result.current.data?.pages).toHaveLength(2));
+  });
+
+  it("loads filtered artifacts through the paginated project-work owner", async () => {
+    mocks.listRecentWorkArtifacts
+      .mockResolvedValueOnce({
+        artifacts: [{ id: "one", path: "docs/report.md" }],
+        nextCursor: "artifact-next",
+        total: 2,
+      })
+      .mockResolvedValueOnce({
+        artifacts: [{ id: "two", path: "docs/report-final.md" }],
+        nextCursor: null,
+        total: 2,
+      });
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+    const { result } = renderHook(
+      () => useProjectArtifacts("project-1", { limit: 20, query: "report" }),
+      { wrapper },
+    );
+    await waitFor(() => expect(result.current.hasNextPage).toBe(true));
+
+    await act(async () => await result.current.fetchNextPage());
+
+    expect(mocks.listRecentWorkArtifacts).toHaveBeenNthCalledWith(
+      1,
+      "project-1",
+      {
+        limit: 20,
+        query: "report",
+      },
+    );
+    expect(mocks.listRecentWorkArtifacts).toHaveBeenNthCalledWith(
+      2,
+      "project-1",
+      {
+        limit: 20,
+        query: "report",
+        cursor: "artifact-next",
+      },
+    );
+  });
+});
+
+describe("project work state ordering", () => {
+  const state = (
+    name: string,
+    category: ProjectWorkState["category"],
+    position: number,
+  ): ProjectWorkState => ({
+    id: name,
+    projectId: "project-1",
+    name,
+    category,
+    position,
+    isDefault: false,
+    createdAt: "2026-09-01T00:00:00.000Z",
+    updatedAt: "2026-09-01T00:00:00.000Z",
+  });
+  const states = [
+    state("Backlog", "backlog", 0),
+    state("Planned", "unstarted", 1),
+    state("In Progress", "started", 2),
+    state("In Review", "started", 3),
+    state("Awaiting Acceptance", "started", 4),
+    state("Completed", "completed", 5),
+    state("Canceled", "canceled", 6),
+  ];
+
+  it("surfaces active states closest to done in list view", () => {
+    expect(
+      sortProjectWorkStatesForList(states).map(({ name }) => name),
+    ).toEqual([
+      "Awaiting Acceptance",
+      "In Review",
+      "In Progress",
+      "Planned",
+      "Backlog",
+      "Completed",
+      "Canceled",
+    ]);
+  });
+
+  it("keeps workflow order for board and state settings", () => {
+    expect(sortProjectWorkStates(states).map(({ name }) => name)).toEqual([
+      "Backlog",
+      "Planned",
+      "In Progress",
+      "In Review",
+      "Awaiting Acceptance",
+      "Completed",
+      "Canceled",
+    ]);
+  });
 });

package/src/features/projects/hooks/use-project-work.ts

@@ -1,9 +1,15 @@
 import { useEffect } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import type {
   CreateProjectWorkItemInput,
   CreateProjectWorkStateInput,
   ProjectWorkState,
+  ProjectWorkListInput,
   UpdateProjectWorkItemInput,
   UpdateProjectWorkStateInput,
 } from "@nextclaw/client-sdk";
@@ -14,6 +20,10 @@ export const projectWorkQueryKey = (projectId: string) =>
   ["project-work", projectId] as const;
 export const projectWorkSummaryQueryKey = (projectId: string) =>
   ["project-work-summary", projectId] as const;
+export const projectWorkStatesQueryKey = (projectId: string) =>
+  ["project-work-states", projectId] as const;
+export const projectWorkArtifactsQueryKey = (projectId: string) =>
+  ["project-work-artifacts", projectId] as const;
 export const projectWorkItemQueryKey = (
   projectId: string,
   workItemId: string,
@@ -25,19 +35,22 @@ export const projectWorkActivityQueryKey = (
 
 export function useProjectWork(
   projectId: string | null,
-  includeDeleted = false,
+  input: Omit<ProjectWorkListInput, "cursor"> = {},
 ) {
-  useProjectWorkEvents(projectId);
-  return useQuery({
-    queryKey: [...projectWorkQueryKey(projectId ?? ""), includeDeleted],
+  return useInfiniteQuery({
+    queryKey: [...projectWorkQueryKey(projectId ?? ""), input],
     enabled: Boolean(projectId),
-    queryFn: async () =>
-      await nextclawClient.projects.listWork(projectId!, includeDeleted),
+    initialPageParam: null as string | null,
+    queryFn: async ({ pageParam }) =>
+      await nextclawClient.projects.listWork(projectId!, {
+        ...input,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
   });
 }
 
 export function useProjectWorkSummary(projectId: string | null) {
-  useProjectWorkEvents(projectId);
   return useQuery({
     queryKey: projectWorkSummaryQueryKey(projectId ?? ""),
     enabled: Boolean(projectId),
@@ -46,6 +59,32 @@ export function useProjectWorkSummary(projectId: string | null) {
   });
 }
 
+export function useProjectWorkStates(projectId: string | null) {
+  return useQuery({
+    queryKey: projectWorkStatesQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWorkStates(projectId!),
+  });
+}
+
+export function useProjectArtifacts(
+  projectId: string | null,
+  input: { limit?: number; query?: string } = {},
+) {
+  return useInfiniteQuery({
+    queryKey: [...projectWorkArtifactsQueryKey(projectId ?? ""), input],
+    enabled: Boolean(projectId),
+    initialPageParam: null as string | null,
+    queryFn: async ({ pageParam }) =>
+      await nextclawClient.projects.listRecentWorkArtifacts(projectId!, {
+        ...input,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+  });
+}
+
 export function useProjectWorkItem(
   projectId: string | null,
   workItemId: string | null,
@@ -84,6 +123,12 @@ export function useProjectWorkActions(projectId: string) {
       queryClient.invalidateQueries({
         queryKey: projectWorkSummaryQueryKey(projectId),
       }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkStatesQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkArtifactsQueryKey(projectId),
+      }),
       ...(workItemId
         ? [
             queryClient.invalidateQueries({
@@ -181,7 +226,7 @@ export function useProjectWorkActions(projectId: string) {
   };
 }
 
-function useProjectWorkEvents(projectId: string | null): void {
+export function useProjectWorkEvents(projectId: string | null): void {
   const queryClient = useQueryClient();
   useEffect(() => {
     if (!projectId) return;
@@ -193,6 +238,12 @@ function useProjectWorkEvents(projectId: string | null): void {
       void queryClient.invalidateQueries({
         queryKey: projectWorkSummaryQueryKey(projectId),
       });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkStatesQueryKey(projectId),
+      });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkArtifactsQueryKey(projectId),
+      });
       if (event.workItemId) {
         void queryClient.invalidateQueries({
           queryKey: projectWorkItemQueryKey(projectId, event.workItemId),
@@ -213,3 +264,31 @@ export function sortProjectWorkStates(
       left.position - right.position || left.name.localeCompare(right.name),
   );
 }
+
+const LIST_CATEGORY_ORDER: Readonly<
+  Record<ProjectWorkState["category"], number>
+> = {
+  started: 0,
+  unstarted: 1,
+  backlog: 2,
+  completed: 3,
+  canceled: 4,
+};
+
+export function sortProjectWorkStatesForList(
+  states: ProjectWorkState[],
+): ProjectWorkState[] {
+  return [...states].sort((left, right) => {
+    const categoryOrder =
+      LIST_CATEGORY_ORDER[left.category] - LIST_CATEGORY_ORDER[right.category];
+    if (categoryOrder !== 0) return categoryOrder;
+    if (left.category === "completed" || left.category === "canceled") {
+      return (
+        left.position - right.position || left.name.localeCompare(right.name)
+      );
+    }
+    return (
+      right.position - left.position || left.name.localeCompare(right.name)
+    );
+  });
+}

package/src/features/projects/pages/project-home-page.tsx

@@ -1,8 +1,5 @@
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import type { ObservedRequest } from "@nextclaw/client-sdk";
-import { toast } from "sonner";
 import { useProjects } from "@/shared/hooks/use-projects";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
@@ -15,7 +12,6 @@ import {
 import { ProjectAgreement } from "@/features/projects/components/project-agreement";
 import { ProjectArtifacts } from "@/features/projects/components/project-artifacts";
 import { ProjectOverview } from "@/features/projects/components/project-overview";
-import { ProjectRequests } from "@/features/projects/components/project-requests";
 import { ProjectSkills } from "@/features/projects/components/project-skills";
 import { ProjectWorkItemDrawer } from "@/features/projects/components/work/project-work-item-drawer";
 import { ProjectWorkItems } from "@/features/projects/components/work/project-work-items";
@@ -24,18 +20,14 @@ import {
   usePresenter,
 } from "@/features/chat";
 import {
-  projectObservationQueryKey,
-  useProjectObservation,
-} from "@/features/projects/hooks/use-project-observation";
+  useProjectAgreement,
+  useProjectSkills,
+} from "@/features/projects/hooks/use-project-materials";
 import {
-  getOpenProjectRequests,
   isProjectHomeTab,
   type ProjectHomeTab,
 } from "@/features/projects/presenters/project-home.presenter";
-import {
-  sendProjectRequestResponse,
-  type ProjectRequestDecision,
-} from "@/features/projects/utils/project-request-response.utils";
+import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
 
 const PROJECT_TABS: ProjectHomeTab[] = [
   "overview",
@@ -52,55 +44,23 @@ export function ProjectsPage() {
   }>();
   const navigate = useNavigate();
   const presenter = usePresenter();
-  const queryClient = useQueryClient();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
   const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
     null,
   );
-  const [pendingRequestId, setPendingRequestId] = useState<string | null>(null);
   const registered = projects.data?.projects ?? [];
   const selectedProject =
     registered.find((project) => project.id === projectId) ?? null;
   const tab: ProjectHomeTab | null = isProjectHomeTab(tabParam)
     ? tabParam
     : null;
-  const needsObservation =
-    tab === "artifacts" || tab === "skills" || tab === "agreement";
-  const observation = useProjectObservation(
-    selectedProject?.id ?? null,
-    selectedProject?.rootPath ?? null,
-    needsObservation,
+  const agreement = useProjectAgreement(
+    tab === "agreement" ? (selectedProject?.id ?? null) : null,
+  );
+  const skills = useProjectSkills(
+    tab === "skills" ? (selectedProject?.id ?? null) : null,
   );
-  const response = useMutation({
-    mutationFn: sendProjectRequestResponse,
-    onMutate: (input) => setPendingRequestId(input.requestId),
-    onSuccess: async () => {
-      if (selectedProject)
-        await queryClient.invalidateQueries({
-          queryKey: projectObservationQueryKey(selectedProject.id),
-        });
-      toast.success(t("projectsResponseSent"));
-    },
-    onError: (error) =>
-      toast.error(
-        `${t("projectsResponseFailed")}: ${error instanceof Error ? error.message : String(error)}`,
-      ),
-    onSettled: () => setPendingRequestId(null),
-  });
-  const reply = (
-    request: ObservedRequest,
-    decision: ProjectRequestDecision,
-  ) => {
-    if (!request.reference.sessionId) return;
-    response.mutate({
-      requestId: request.id,
-      sessionId: request.reference.sessionId,
-      decision,
-      prompt: request.prompt,
-    });
-  };
-
   if (projects.isLoading)
     return (
       <main className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
@@ -133,7 +93,6 @@ export function ProjectsPage() {
       viewMode: "preview",
       previewViewer: "rendered",
     });
-  const snapshot = observation.data;
   return (
     <>
       <main className="h-full min-w-0 flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
@@ -144,13 +103,6 @@ export function ProjectsPage() {
               {selectedProject.rootPath}
             </p>
           </header>
-          {snapshot ? (
-            <ProjectRequests
-              requests={getOpenProjectRequests(snapshot)}
-              pendingRequestId={pendingRequestId}
-              onReply={reply}
-            />
-          ) : null}
           <Tabs
             value={tab}
             onValueChange={(value) =>
@@ -171,6 +123,12 @@ export function ProjectsPage() {
             <TabsContent value="overview" className="mt-4">
               <ProjectOverview
                 projectId={selectedProject.id}
+                onOpenArtifact={(path, label) =>
+                  openProjectFile(
+                    joinProjectPath(selectedProject.rootPath, path),
+                    label,
+                  )
+                }
                 onOpenWorkItem={setSelectedWorkItemId}
               />
             </TabsContent>
@@ -180,38 +138,43 @@ export function ProjectsPage() {
                 onOpenWorkItem={setSelectedWorkItemId}
               />
             </TabsContent>
-            {needsObservation && observation.isLoading ? (
-              <div className="mt-4 rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
-                {t("projectsLoading")}
-              </div>
-            ) : null}
-            {needsObservation && observation.isError ? (
-              <div className="mt-4 rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
-                {t("projectsLoadFailed")}: {observation.error.message}
-              </div>
-            ) : null}
-            {snapshot ? (
-              <>
-                <TabsContent value="artifacts" className="mt-4">
-                  <ProjectArtifacts
-                    snapshot={snapshot}
-                    onOpenFile={openProjectFile}
-                  />
-                </TabsContent>
-                <TabsContent value="skills" className="mt-4">
-                  <ProjectSkills
-                    snapshot={snapshot}
-                    onOpen={(skill) => openProjectFile(skill.path, skill.name)}
-                  />
-                </TabsContent>
-                <TabsContent value="agreement" className="mt-4">
-                  <ProjectAgreement
-                    snapshot={snapshot}
-                    onOpenFile={openProjectFile}
-                  />
-                </TabsContent>
-              </>
-            ) : null}
+            <TabsContent value="artifacts" className="mt-4">
+              <ProjectArtifacts
+                projectId={selectedProject.id}
+                onOpenFile={(path, label) =>
+                  openProjectFile(
+                    joinProjectPath(selectedProject.rootPath, path),
+                    label,
+                  )
+                }
+              />
+            </TabsContent>
+            <TabsContent value="skills" className="mt-4">
+              <ProjectSkills
+                skills={skills.data ?? []}
+                isLoading={skills.isLoading}
+                isError={skills.isError}
+                onOpen={(skill) =>
+                  openProjectFile(
+                    joinProjectPath(selectedProject.rootPath, skill.path),
+                    skill.name,
+                  )
+                }
+              />
+            </TabsContent>
+            <TabsContent value="agreement" className="mt-4">
+              <ProjectAgreement
+                agreement={agreement.data}
+                isLoading={agreement.isLoading}
+                isError={agreement.isError}
+                onOpenFile={(path, label) =>
+                  openProjectFile(
+                    joinProjectPath(selectedProject.rootPath, path),
+                    label,
+                  )
+                }
+              />
+            </TabsContent>
           </Tabs>
         </div>
       </main>