@nextclaw/ui 0.24.2 → 0.25.0

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,
   });
 }
 

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

@@ -1,13 +1,8 @@
 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, useRemoveProject } from "@/shared/hooks/use-projects";
+import { useProjects } from "@/shared/hooks/use-projects";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
-import { Button } from "@/shared/components/ui/button";
-import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import {
   Tabs,
   TabsContent,
@@ -17,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";
@@ -26,18 +20,13 @@ 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[] = [
@@ -55,73 +44,23 @@ export function ProjectsPage() {
   }>();
   const navigate = useNavigate();
   const presenter = usePresenter();
-  const queryClient = useQueryClient();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
-  const projectRemoval = useRemoveProject();
-  const { confirm, ConfirmDialog } = useConfirmDialog();
   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,
-    });
-  };
-  const removeSelectedProject = async () => {
-    if (!selectedProject) return;
-    const confirmed = await confirm({
-      title: `${t("projectsRemoveConfirmTitle")} “${selectedProject.name}”`,
-      description: t("projectsRemoveConfirmDescription"),
-      confirmLabel: t("projectsRemoveConfirmAction"),
-      variant: "destructive",
-    });
-    if (!confirmed) return;
-    try {
-      await projectRemoval.mutateAsync(selectedProject.id);
-      navigate("/projects");
-    } catch {
-      // The mutation owns the visible error and the current project stays open.
-    }
-  };
-
   if (projects.isLoading)
     return (
       <main className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground">
@@ -154,35 +93,16 @@ 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">
         <div className="mx-auto max-w-6xl space-y-4">
-          <header className="flex flex-col gap-3 rounded-2xl border border-border/60 bg-card p-3 sm:flex-row sm:items-start sm:justify-between sm:p-4">
-            <div className="min-w-0">
-              <h1 className="text-lg font-semibold">{selectedProject.name}</h1>
-              <p className="mt-1 break-all text-xs text-muted-foreground">
-                {selectedProject.rootPath}
-              </p>
-            </div>
-            <Button
-              type="button"
-              variant="destructive"
-              size="sm"
-              disabled={projectRemoval.isPending}
-              onClick={() => void removeSelectedProject()}
-            >
-              {t("projectsRemoveFromList")}
-            </Button>
+          <header className="rounded-2xl border border-border/60 bg-card p-3 sm:p-4">
+            <h1 className="text-lg font-semibold">{selectedProject.name}</h1>
+            <p className="mt-1 break-all text-xs text-muted-foreground">
+              {selectedProject.rootPath}
+            </p>
           </header>
-          {snapshot ? (
-            <ProjectRequests
-              requests={getOpenProjectRequests(snapshot)}
-              pendingRequestId={pendingRequestId}
-              onReply={reply}
-            />
-          ) : null}
           <Tabs
             value={tab}
             onValueChange={(value) =>
@@ -218,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>
@@ -267,7 +192,6 @@ export function ProjectsPage() {
         sessionKey={null}
         projectRoot={selectedProject.rootPath}
       />
-      <ConfirmDialog />
     </>
   );
 }