@nextclaw/ui 0.24.2 → 0.24.3

package/src/features/projects/components/project-overview.test.tsx

@@ -2,47 +2,57 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ProjectOverview } from "./project-overview";
 
-vi.mock("@/features/projects/hooks/use-project-work", () => ({
-  useProjectWorkEvents: vi.fn(),
-  useProjectWorkSummary: () => ({
-    data: { total: 4, active: 2, attention: 1, completed: 1 },
-    isLoading: false,
-    isError: false,
+vi.mock(
+  "@/features/projects/hooks/use-project-work",
+  async (importOriginal) => ({
+    ...(await importOriginal()),
+    useProjectWorkEvents: vi.fn(),
+    useProjectWorkSummary: () => ({
+      data: { total: 4, active: 2, attention: 1, completed: 1 },
+      isLoading: false,
+      isError: false,
+    }),
+    useProjectWork: () => ({
+      data: {
+        pages: [
+          {
+            items: [
+              {
+                id: "work-1",
+                title: "Current work",
+                state: { name: "In Progress" },
+              },
+            ],
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    }),
+    useProjectArtifacts: () => ({
+      data: {
+        pages: [
+          {
+            artifacts: [
+              {
+                id: "artifact-1",
+                path: "docs/design.md",
+                label: "Design",
+                workItemTitle: "Current work",
+                createdAt: "2026-09-03T00:00:00.000Z",
+                exists: true,
+              },
+            ],
+            nextCursor: null,
+            total: 1,
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    }),
   }),
-  useProjectWork: () => ({
-    data: {
-      pages: [
-        {
-          items: [
-            {
-              id: "work-1",
-              title: "Current work",
-              state: { name: "In Progress" },
-            },
-          ],
-        },
-      ],
-    },
-    isLoading: false,
-    isError: false,
-  }),
-  useProjectRecentArtifacts: () => ({
-    data: {
-      artifacts: [
-        {
-          id: "artifact-1",
-          path: "docs/design.md",
-          label: "Design",
-          workItemTitle: "Current work",
-          createdAt: "2026-09-03T00:00:00.000Z",
-          exists: true,
-        },
-      ],
-    },
-    isLoading: false,
-    isError: false,
-  }),
-}));
+);
 
 describe("ProjectOverview", () => {
   it("renders current work and recent artifacts as equal wide-layout columns", () => {

package/src/features/projects/components/project-overview.tsx

@@ -1,6 +1,6 @@
 import { formatDateTime, t } from "@/shared/lib/i18n";
 import {
-  useProjectRecentArtifacts,
+  useProjectArtifacts,
   useProjectWork,
   useProjectWorkEvents,
   useProjectWorkSummary,
@@ -25,7 +25,8 @@ export function ProjectOverview({
   useProjectWorkEvents(projectId);
   const summary = useProjectWorkSummary(projectId);
   const work = useProjectWork(projectId, { limit: 5 });
-  const artifacts = useProjectRecentArtifacts(projectId, 5);
+  const artifacts = useProjectArtifacts(projectId, { limit: 5 });
+  const recentArtifacts = artifacts.data?.pages[0]?.artifacts ?? [];
   const recent =
     work.data?.pages.flatMap((page) => page.items).slice(0, 5) ?? [];
   return (
@@ -100,9 +101,9 @@ export function ProjectOverview({
             <p className="py-5 text-sm text-destructive">
               {t("projectsLoadFailed")}
             </p>
-          ) : artifacts.data?.artifacts.length ? (
+          ) : recentArtifacts.length ? (
             <div className="space-y-2">
-              {artifacts.data.artifacts.map((artifact) => (
+              {recentArtifacts.map((artifact) => (
                 <ProjectFilePreviewButton
                   key={artifact.id}
                   available={artifact.exists}

package/src/features/projects/components/project-skills.tsx

@@ -1,27 +1,42 @@
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import type { ProjectSkillMaterial } from "@nextclaw/client-sdk";
 import { formatNumber, t } from "@/shared/lib/i18n";
 import { ProjectEmptyState } from "./project-section";
 
 export function ProjectSkills({
-  snapshot,
+  skills,
+  isLoading,
+  isError,
   onOpen,
 }: {
-  snapshot: ProjectObservationSnapshot;
-  onOpen: (skill: ProjectObservationSnapshot["skills"][number]) => void;
+  skills: ProjectSkillMaterial[];
+  isLoading: boolean;
+  isError: boolean;
+  onOpen: (skill: ProjectSkillMaterial) => void;
 }) {
+  if (isLoading) {
+    return (
+      <p className="py-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </p>
+    );
+  }
+  if (isError) {
+    return (
+      <p className="py-5 text-sm text-destructive">{t("projectsLoadFailed")}</p>
+    );
+  }
   return (
     <section className="min-w-0" aria-label={t("projectsSkills")}>
       <p className="mb-3 text-sm text-muted-foreground">
-        {formatNumber(snapshot.skills.length)} {t("projectsSkillsCountSuffix")}
+        {formatNumber(skills.length)} {t("projectsSkillsCountSuffix")}
       </p>
-      {snapshot.skills.length ? (
+      {skills.length ? (
         <div className="grid min-w-0 gap-3 md:grid-cols-2">
-          {snapshot.skills.map((skill) => (
+          {skills.map((skill) => (
             <button
               type="button"
               key={skill.ref}
-              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors enabled:hover:border-border enabled:hover:bg-muted/30 disabled:cursor-not-allowed"
-              disabled={!skill.readable}
+              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors hover:border-border hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
               onClick={() => onOpen(skill)}
             >
               <h3 className="text-sm font-medium">{skill.name}</h3>
@@ -37,11 +52,6 @@ export function ProjectSkills({
               >
                 {skill.description ?? skill.ref}
               </p>
-              {!skill.readable ? (
-                <p className="mt-2 text-xs text-destructive">
-                  {t("projectsUnavailable")}
-                </p>
-              ) : null}
             </button>
           ))}
         </div>

package/src/features/projects/components/work/project-work-item-drawer.test.tsx

@@ -8,8 +8,9 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/projects/hooks/use-project-work", () => ({
-  useProjectWork: () => ({
-    data: { states: [{ id: "planned", name: "Planned" }] },
+  useProjectWorkEvents: vi.fn(),
+  useProjectWorkStates: () => ({
+    data: [{ id: "planned", name: "Planned" }],
   }),
   useProjectWorkItem: mocks.useProjectWorkItem,
   useProjectWorkActivity: () => ({ data: { activities: [] } }),

package/src/features/projects/components/work/project-work-items.test.tsx

@@ -129,7 +129,17 @@ describe("ProjectWorkItems", () => {
 
     const group = screen.getByRole("button", { name: /Planned.*21/ });
     const count = screen.getByText("21");
-    expect(count.className).toContain("rounded-full");
+    const groupSection = group.closest("section");
+    const workItem = screen.getByRole("button", {
+      name: /Clickable work item/,
+    });
+    expect(groupSection?.className).not.toContain("border");
+    expect(groupSection?.className).not.toContain("rounded-xl");
+    expect(groupSection?.className).not.toContain("bg-muted");
+    expect(workItem.className).toContain("border");
+    expect(workItem.className).toContain("rounded-xl");
+    expect(count.className).not.toContain("rounded-full");
+    expect(count.className).toContain("text-muted-foreground");
     expect(count.className).toContain("tabular-nums");
     fireEvent.click(group);
     expect(group.textContent).toContain("21");
@@ -162,6 +172,8 @@ describe("ProjectWorkItems", () => {
 
     const group = screen.getByRole("region", { name: /Planned|计划中/ });
     expect(group.className).toContain("h-full");
+    expect(group.className).not.toContain("rounded-xl");
+    expect(group.className).not.toContain("bg-muted");
     const cards = screen.getByRole("button", {
       name: /Clickable work item/,
     }).parentElement;

package/src/features/projects/components/work/project-work-items.tsx

@@ -227,14 +227,14 @@ function ProjectWorkStateGroup({
     <section
       className={
         view === "board"
-          ? "flex h-full min-h-0 min-w-0 flex-col overflow-hidden rounded-xl bg-muted/25"
-          : "min-w-0 overflow-hidden rounded-xl border border-border/60"
+          ? "flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+          : "min-w-0"
       }
       aria-label={getProjectWorkStateLabel(state.name)}
     >
       <button
         type="button"
-        className="flex w-full shrink-0 items-center gap-2 bg-muted/30 px-3 py-2.5 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        className="flex w-full shrink-0 items-center gap-2 rounded-lg px-1 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         aria-expanded={!collapsed}
         onClick={() => setCollapsed((value) => !value)}
       >
@@ -247,7 +247,7 @@ function ProjectWorkStateGroup({
         <span className="min-w-0 truncate text-sm font-semibold">
           {getProjectWorkStateLabel(state.name)}
         </span>
-        <span className="inline-flex min-w-6 shrink-0 items-center justify-center rounded-full bg-background/85 px-1.5 py-0.5 text-xs font-semibold tabular-nums text-foreground ring-1 ring-border/60">
+        <span className="ml-0.5 shrink-0 text-xs font-medium tabular-nums text-muted-foreground">
           {total ?? "…"}
         </span>
       </button>
@@ -255,8 +255,8 @@ function ProjectWorkStateGroup({
         <div
           className={
             view === "board"
-              ? "min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3"
-              : "space-y-2 p-3"
+              ? "min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain px-1 pb-3"
+              : "space-y-2 px-1 pb-3"
           }
         >
           <ProjectWorkStateGroupBody
@@ -389,7 +389,7 @@ export function ProjectWorkItems({
         {t("projectsWorkShowDeleted")}
       </label>
       {view === "list" ? (
-        <div className="space-y-2">
+        <div className="space-y-3">
           {listStates.map((state) => (
             <ProjectWorkStateGroup
               key={state.id}

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

@@ -0,0 +1,65 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { PropsWithChildren } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  useProjectAgreement,
+  useProjectSkills,
+} from "@/features/projects/hooks/use-project-materials";
+import { nextclawClient } from "@/shared/lib/api";
+
+function createWrapper() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return function Wrapper({ children }: PropsWithChildren) {
+    return (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+  };
+}
+
+describe("project material queries", () => {
+  beforeEach(() => vi.restoreAllMocks());
+
+  it("loads agreement and skills independently", async () => {
+    const getAgreement = vi
+      .spyOn(nextclawClient.projects, "getAgreement")
+      .mockResolvedValue({ path: "AGENTS.md", available: true });
+    const listProjectSkills = vi
+      .spyOn(nextclawClient.projects, "listProjectSkills")
+      .mockResolvedValue([
+        {
+          ref: "project:alpha",
+          name: "alpha",
+          path: ".agents/skills/alpha/SKILL.md",
+        },
+      ]);
+
+    const agreement = renderHook(() => useProjectAgreement("project-1"), {
+      wrapper: createWrapper(),
+    });
+    const skills = renderHook(() => useProjectSkills("project-1"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(agreement.result.current.isSuccess).toBe(true));
+    await waitFor(() => expect(skills.result.current.isSuccess).toBe(true));
+    expect(getAgreement).toHaveBeenCalledWith("project-1");
+    expect(listProjectSkills).toHaveBeenCalledWith("project-1");
+  });
+
+  it("does not query without a selected project", () => {
+    const getAgreement = vi.spyOn(nextclawClient.projects, "getAgreement");
+    const listProjectSkills = vi.spyOn(
+      nextclawClient.projects,
+      "listProjectSkills",
+    );
+
+    renderHook(() => useProjectAgreement(null), { wrapper: createWrapper() });
+    renderHook(() => useProjectSkills(null), { wrapper: createWrapper() });
+
+    expect(getAgreement).not.toHaveBeenCalled();
+    expect(listProjectSkills).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { nextclawClient } from "@/shared/lib/api";
+
+export const projectAgreementQueryKey = (projectId: string) =>
+  ["project-agreement", projectId] as const;
+export const projectSkillsQueryKey = (projectId: string) =>
+  ["project-skills", projectId] as const;
+
+export function useProjectAgreement(projectId: string | null) {
+  return useQuery({
+    queryKey: projectAgreementQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () => await nextclawClient.projects.getAgreement(projectId!),
+  });
+}
+
+export function useProjectSkills(projectId: string | null) {
+  return useQuery({
+    queryKey: projectSkillsQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listProjectSkills(projectId!),
+  });
+}

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

@@ -6,6 +6,7 @@ import type { ProjectWorkState } from "@nextclaw/client-sdk";
 import {
   sortProjectWorkStates,
   sortProjectWorkStatesForList,
+  useProjectArtifacts,
   useProjectWork,
   useProjectWorkEvents,
 } from "./use-project-work";
@@ -15,11 +16,15 @@ const mocks = vi.hoisted(() => ({
     | 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,
@@ -38,6 +43,12 @@ describe("useProjectWork", () => {
   beforeEach(() => {
     mocks.listWork.mockReset();
     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 () => {
@@ -105,6 +116,51 @@ describe("useProjectWork", () => {
     });
     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", () => {

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

@@ -68,14 +68,20 @@ export function useProjectWorkStates(projectId: string | null) {
   });
 }
 
-export function useProjectRecentArtifacts(projectId: string | null, limit = 5) {
-  return useQuery({
-    queryKey: [...projectWorkArtifactsQueryKey(projectId ?? ""), limit],
+export function useProjectArtifacts(
+  projectId: string | null,
+  input: { limit?: number; query?: string } = {},
+) {
+  return useInfiniteQuery({
+    queryKey: [...projectWorkArtifactsQueryKey(projectId ?? ""), input],
     enabled: Boolean(projectId),
-    queryFn: async () =>
+    initialPageParam: null as string | null,
+    queryFn: async ({ pageParam }) =>
       await nextclawClient.projects.listRecentWorkArtifacts(projectId!, {
-        limit,
+        ...input,
+        ...(pageParam ? { cursor: pageParam } : {}),
       }),
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
   });
 }