@nextclaw/ui 0.23.0 → 0.24.0-beta.1

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

@@ -0,0 +1,215 @@
+import { useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  CreateProjectWorkItemInput,
+  CreateProjectWorkStateInput,
+  ProjectWorkState,
+  UpdateProjectWorkItemInput,
+  UpdateProjectWorkStateInput,
+} from "@nextclaw/client-sdk";
+import { eventKeys } from "@nextclaw/client-sdk";
+import { nextclawClient } from "@/shared/lib/api";
+
+export const projectWorkQueryKey = (projectId: string) =>
+  ["project-work", projectId] as const;
+export const projectWorkSummaryQueryKey = (projectId: string) =>
+  ["project-work-summary", projectId] as const;
+export const projectWorkItemQueryKey = (
+  projectId: string,
+  workItemId: string,
+) => ["project-work-item", projectId, workItemId] as const;
+export const projectWorkActivityQueryKey = (
+  projectId: string,
+  workItemId: string,
+) => ["project-work-activity", projectId, workItemId] as const;
+
+export function useProjectWork(
+  projectId: string | null,
+  includeDeleted = false,
+) {
+  useProjectWorkEvents(projectId);
+  return useQuery({
+    queryKey: [...projectWorkQueryKey(projectId ?? ""), includeDeleted],
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWork(projectId!, includeDeleted),
+  });
+}
+
+export function useProjectWorkSummary(projectId: string | null) {
+  useProjectWorkEvents(projectId);
+  return useQuery({
+    queryKey: projectWorkSummaryQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.getWorkSummary(projectId!),
+  });
+}
+
+export function useProjectWorkItem(
+  projectId: string | null,
+  workItemId: string | null,
+) {
+  return useQuery({
+    queryKey: projectWorkItemQueryKey(projectId ?? "", workItemId ?? ""),
+    enabled: Boolean(projectId && workItemId),
+    queryFn: async () =>
+      await nextclawClient.projects.getWorkItem(projectId!, workItemId!),
+  });
+}
+
+export function useProjectWorkActivity(
+  projectId: string | null,
+  workItemId: string | null,
+) {
+  return useQuery({
+    queryKey: projectWorkActivityQueryKey(projectId ?? "", workItemId ?? ""),
+    enabled: Boolean(projectId && workItemId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWorkItemActivities(
+        projectId!,
+        workItemId!,
+        { limit: 100 },
+      ),
+  });
+}
+
+export function useProjectWorkActions(projectId: string) {
+  const queryClient = useQueryClient();
+  const refresh = async (workItemId?: string) => {
+    await Promise.all([
+      queryClient.invalidateQueries({
+        queryKey: projectWorkQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkSummaryQueryKey(projectId),
+      }),
+      ...(workItemId
+        ? [
+            queryClient.invalidateQueries({
+              queryKey: projectWorkItemQueryKey(projectId, workItemId),
+            }),
+            queryClient.invalidateQueries({
+              queryKey: projectWorkActivityQueryKey(projectId, workItemId),
+            }),
+          ]
+        : []),
+    ]);
+  };
+  return {
+    createItem: useMutation({
+      mutationFn: async (input: CreateProjectWorkItemInput) =>
+        await nextclawClient.projects.createWorkItem(projectId, input),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    updateItem: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        patch: UpdateProjectWorkItemInput;
+      }) =>
+        await nextclawClient.projects.updateWorkItem(
+          projectId,
+          input.workItemId,
+          input.patch,
+        ),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    deleteItem: useMutation({
+      mutationFn: async (workItemId: string) =>
+        await nextclawClient.projects.deleteWorkItem(projectId, workItemId),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    restoreItem: useMutation({
+      mutationFn: async (workItemId: string) =>
+        await nextclawClient.projects.restoreWorkItem(projectId, workItemId),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    linkArtifact: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        path: string;
+        label?: string;
+      }) =>
+        await nextclawClient.projects.linkWorkItemArtifact(
+          projectId,
+          input.workItemId,
+          { path: input.path, ...(input.label ? { label: input.label } : {}) },
+        ),
+      onSuccess: async (_link, input) => await refresh(input.workItemId),
+    }),
+    unlinkArtifact: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        artifactLinkId: string;
+      }) =>
+        await nextclawClient.projects.unlinkWorkItemArtifact(
+          projectId,
+          input.workItemId,
+          input.artifactLinkId,
+        ),
+      onSuccess: async (_result, input) => await refresh(input.workItemId),
+    }),
+    createState: useMutation({
+      mutationFn: async (input: CreateProjectWorkStateInput) =>
+        await nextclawClient.projects.createWorkState(projectId, input),
+      onSuccess: async () => await refresh(),
+    }),
+    updateState: useMutation({
+      mutationFn: async (input: {
+        stateId: string;
+        patch: UpdateProjectWorkStateInput;
+      }) =>
+        await nextclawClient.projects.updateWorkState(
+          projectId,
+          input.stateId,
+          input.patch,
+        ),
+      onSuccess: async () => await refresh(),
+    }),
+    deleteState: useMutation({
+      mutationFn: async (input: {
+        stateId: string;
+        migrateToStateId?: string | null;
+      }) =>
+        await nextclawClient.projects.deleteWorkState(
+          projectId,
+          input.stateId,
+          input.migrateToStateId,
+        ),
+      onSuccess: async () => await refresh(),
+    }),
+  };
+}
+
+function useProjectWorkEvents(projectId: string | null): void {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!projectId) return;
+    return nextclawClient.eventBus.on(eventKeys.projectWorkChanged, (event) => {
+      if (event.projectId !== projectId) return;
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkQueryKey(projectId),
+      });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkSummaryQueryKey(projectId),
+      });
+      if (event.workItemId) {
+        void queryClient.invalidateQueries({
+          queryKey: projectWorkItemQueryKey(projectId, event.workItemId),
+        });
+        void queryClient.invalidateQueries({
+          queryKey: projectWorkActivityQueryKey(projectId, event.workItemId),
+        });
+      }
+    });
+  }, [projectId, queryClient]);
+}
+
+export function sortProjectWorkStates(
+  states: ProjectWorkState[],
+): ProjectWorkState[] {
+  return [...states].sort(
+    (left, right) =>
+      left.position - right.position || left.name.localeCompare(right.name),
+  );
+}

package/src/features/projects/index.ts

@@ -0,0 +1,2 @@
+/** Public UI boundary for Projects. */
+export { ProjectsPage } from "./pages/project-home-page";

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

@@ -0,0 +1,234 @@
+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";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/shared/components/ui/tabs";
+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";
+import {
+  ChatConversationWorkspaceSection,
+  usePresenter,
+} from "@/features/chat";
+import {
+  projectObservationQueryKey,
+  useProjectObservation,
+} from "@/features/projects/hooks/use-project-observation";
+import {
+  getOpenProjectRequests,
+  isProjectHomeTab,
+  type ProjectHomeTab,
+} from "@/features/projects/presenters/project-home.presenter";
+import {
+  sendProjectRequestResponse,
+  type ProjectRequestDecision,
+} from "@/features/projects/utils/project-request-response.utils";
+
+const PROJECT_TABS: ProjectHomeTab[] = [
+  "overview",
+  "work",
+  "artifacts",
+  "skills",
+  "agreement",
+];
+
+export function ProjectsPage() {
+  const { projectId, tab: tabParam } = useParams<{
+    projectId?: string;
+    tab?: string;
+  }>();
+  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 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">
+        {t("projectsLoading")}
+      </main>
+    );
+  if (projects.isError)
+    return (
+      <main className="p-6 text-sm text-destructive">
+        {t("projectsLoadFailed")}: {projects.error.message}
+      </main>
+    );
+  if (!registered.length)
+    return (
+      <main className="p-6 text-sm text-muted-foreground">
+        {t("projectsEmpty")}
+      </main>
+    );
+  if (!selectedProject || !tab)
+    return (
+      <main className="p-6 text-sm text-muted-foreground">
+        {t("projectsChoose")}
+      </main>
+    );
+
+  const openProjectFile = (path: string, label: string) =>
+    presenter.chatThreadManager.openFilePreview({
+      path,
+      label,
+      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="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) =>
+              navigate(
+                `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
+              )
+            }
+          >
+            <div className="min-w-0 overflow-x-auto pb-1">
+              <TabsList className="w-max">
+                {PROJECT_TABS.map((key) => (
+                  <TabsTrigger key={key} value={key}>
+                    {t(`projects${key[0].toUpperCase()}${key.slice(1)}`)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </div>
+            <TabsContent value="overview" className="mt-4">
+              <ProjectOverview
+                projectId={selectedProject.id}
+                onOpenWorkItem={setSelectedWorkItemId}
+              />
+            </TabsContent>
+            <TabsContent value="work" className="mt-4">
+              <ProjectWorkItems
+                projectId={selectedProject.id}
+                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}
+          </Tabs>
+        </div>
+      </main>
+      <ProjectWorkItemDrawer
+        projectId={selectedProject.id}
+        projectRoot={selectedProject.rootPath}
+        workItemId={selectedWorkItemId}
+        onOpenChange={(open) => {
+          if (!open) setSelectedWorkItemId(null);
+        }}
+        onOpenArtifact={openProjectFile}
+      />
+      <ChatConversationWorkspaceSection
+        layoutMode={isMobile ? "mobile" : "desktop"}
+        sessionKey={null}
+        projectRoot={selectedProject.rootPath}
+      />
+    </>
+  );
+}

package/src/features/projects/pages/projects-page.test.tsx

@@ -0,0 +1,137 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ProjectsPage } from "./project-home-page";
+
+const mocks = vi.hoisted(() => ({
+  drawerProps: vi.fn(),
+  useProjectObservation: vi.fn(),
+  useProjects: vi.fn(),
+}));
+
+vi.mock("@/shared/hooks/use-projects", () => ({
+  useProjects: mocks.useProjects,
+}));
+vi.mock("@/features/projects/hooks/use-project-observation", () => ({
+  projectObservationQueryKey: (projectId: string) => [
+    "project-observation",
+    projectId,
+  ],
+  useProjectObservation: mocks.useProjectObservation,
+}));
+vi.mock("@/features/chat", () => ({
+  ChatConversationWorkspaceSection: () => <div data-testid="workspace" />,
+  usePresenter: () => ({ chatThreadManager: { openFilePreview: vi.fn() } }),
+}));
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: () => ({ isMobile: false }),
+}));
+vi.mock("@/features/projects/components/project-overview", () => ({
+  ProjectOverview: ({
+    onOpenWorkItem,
+  }: {
+    onOpenWorkItem: (id: string) => void;
+  }) => (
+    <button onClick={() => onOpenWorkItem("work-overview")}>
+      Overview work
+    </button>
+  ),
+}));
+vi.mock("@/features/projects/components/work/project-work-items", () => ({
+  ProjectWorkItems: ({
+    onOpenWorkItem,
+  }: {
+    onOpenWorkItem: (id: string) => void;
+  }) => <button onClick={() => onOpenWorkItem("work-list")}>List work</button>,
+}));
+vi.mock("@/features/projects/components/work/project-work-item-drawer", () => ({
+  ProjectWorkItemDrawer: ({ workItemId }: { workItemId: string | null }) => {
+    mocks.drawerProps({ workItemId });
+    return <div data-testid="work-drawer">{workItemId}</div>;
+  },
+}));
+vi.mock("@/features/projects/components/project-artifacts", () => ({
+  ProjectArtifacts: () => <div>Artifact content</div>,
+}));
+vi.mock("@/features/projects/components/project-skills", () => ({
+  ProjectSkills: () => <div>Skills content</div>,
+}));
+vi.mock("@/features/projects/components/project-agreement", () => ({
+  ProjectAgreement: () => <div>Agreement content</div>,
+}));
+vi.mock("@/features/projects/components/project-requests", () => ({
+  ProjectRequests: () => null,
+}));
+
+function renderPage(path: string) {
+  return render(
+    <QueryClientProvider client={new QueryClient()}>
+      <MemoryRouter initialEntries={[path]}>
+        <Routes>
+          <Route path="/projects" element={<ProjectsPage />} />
+          <Route path="/projects/:projectId/:tab" element={<ProjectsPage />} />
+        </Routes>
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("ProjectsPage", () => {
+  beforeEach(() => {
+    mocks.drawerProps.mockReset();
+    mocks.useProjects.mockReturnValue({
+      data: {
+        projects: [
+          { id: "project-1", name: "Research", rootPath: "/tmp/research" },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    });
+    mocks.useProjectObservation.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: false,
+    });
+  });
+
+  it("keeps overview scan-free and opens its work item in the unified drawer", () => {
+    renderPage("/projects/project-1/overview");
+
+    expect(mocks.useProjectObservation).toHaveBeenCalledWith(
+      "project-1",
+      "/tmp/research",
+      false,
+    );
+    expect(screen.getAllByRole("tab")).toHaveLength(5);
+    fireEvent.click(screen.getByRole("button", { name: "Overview work" }));
+    expect(screen.getByTestId("work-drawer").textContent).toBe("work-overview");
+  });
+
+  it("enables legacy observation only for preserved artifact, skill, and agreement surfaces", () => {
+    mocks.useProjectObservation.mockReturnValue({
+      data: { requests: [] },
+      isLoading: false,
+      isError: false,
+    });
+    renderPage("/projects/project-1/artifacts");
+
+    expect(mocks.useProjectObservation).toHaveBeenCalledWith(
+      "project-1",
+      "/tmp/research",
+      true,
+    );
+    expect(screen.getByText("Artifact content")).toBeTruthy();
+    expect(screen.getByRole("tab", { name: /Skills/ })).toBeTruthy();
+    expect(
+      screen.getByRole("tab", { name: /Working rules|工作约定/ }),
+    ).toBeTruthy();
+  });
+
+  it("asks the user to choose from the sidebar when no project route is selected", () => {
+    renderPage("/projects");
+    expect(mocks.useProjectObservation).toHaveBeenCalledWith(null, null, false);
+    expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy();
+  });
+});

package/src/features/projects/presenters/project-home.presenter.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import type { ObservedRequest, ObservedWorkItem, ObservedWorkflow } from "@nextclaw/client-sdk";
+import {
+  canReplyToProjectRequest,
+  createProjectBoardColumns,
+  getScheduledWorkItems,
+  isProjectHomeTab,
+} from "./project-home.presenter";
+
+const reference = {
+  kind: "ai-report" as const,
+  label: "AI report",
+  observedAt: "2026-08-30T00:00:00.000Z",
+};
+
+describe("project home presenter", () => {
+  it("accepts only the project home tabs represented in the route", () => {
+    expect(isProjectHomeTab("overview")).toBe(true);
+    expect(isProjectHomeTab("agreement")).toBe(true);
+    expect(isProjectHomeTab("missing")).toBe(false);
+    expect(isProjectHomeTab(undefined)).toBe(false);
+  });
+
+  it("projects the same work items into board and scheduled views without inventing facts", () => {
+    const workflows: ObservedWorkflow[] = [{
+      id: "research",
+      label: "Research",
+      stages: [{ id: "draft", label: "Draft" }],
+      reference,
+    }];
+    const workItems: ObservedWorkItem[] = [
+      {
+        id: "with-schedule",
+        name: "Scheduled",
+        status: "active",
+        workflowId: "research",
+        stageId: "draft",
+        schedule: { start: "2026-08-30", end: "2026-09-02", milestone: false, dependsOn: [] },
+        updatedAt: reference.observedAt,
+        reference,
+      },
+      {
+        id: "without-schedule",
+        name: "Unscheduled",
+        status: "blocked",
+        updatedAt: reference.observedAt,
+        reference,
+      },
+    ];
+
+    expect(createProjectBoardColumns(workflows, workItems)[0]?.items.map((item) => item.id))
+      .toEqual(["with-schedule"]);
+    expect(getScheduledWorkItems(workItems).map((item) => item.id))
+      .toEqual(["with-schedule"]);
+  });
+
+  it("offers direct replies only for open confirm-reject requests with a source session", () => {
+    const request: ObservedRequest = {
+      id: "approval",
+      status: "open",
+      response: "confirm-reject",
+      prompt: "Ship?",
+      updatedAt: reference.observedAt,
+      reference: { ...reference, sessionId: "session-1" },
+    };
+    expect(canReplyToProjectRequest(request)).toBe(true);
+    expect(canReplyToProjectRequest({ ...request, reply: {
+      decision: "confirmed",
+      sentAt: reference.observedAt,
+      messageId: "response-1",
+    } })).toBe(false);
+    expect(canReplyToProjectRequest({ ...request, reference })).toBe(false);
+  });
+});