@nextclaw/ui 0.23.0 → 0.24.0-beta.0

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

@@ -0,0 +1,253 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type {
+  ObservedRequest,
+  ProjectObservationSnapshot,
+} from "@nextclaw/client-sdk";
+import { toast } from "sonner";
+import { useProjects } from "@/shared/hooks/use-projects";
+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 { ProjectWorkItems } from "@/features/projects/components/project-work-items";
+import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
+import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
+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",
+];
+
+function shouldOfferObservationSetup(
+  sources: ProjectObservationSnapshot["sources"],
+): boolean {
+  const config = sources.find((source) => source.id === "config");
+  return !config || config.status !== "available";
+}
+
+function hasObservedProjectSessions(
+  sources: ProjectObservationSnapshot["sources"],
+): boolean {
+  return (sources.find((source) => source.id === "sessions")?.itemCount ?? 0) > 0;
+}
+
+export function ProjectsPage() {
+  const { projectId, tab: tabParam } = useParams<{ projectId?: string; tab?: string }>();
+  const navigate = useNavigate();
+  const [pendingRequestId, setPendingRequestId] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+  const presenter = usePresenter();
+  const projects = useProjects();
+  const registered = projects.data?.projects ?? [];
+  const selectedProject = registered.find((project) => project.id === projectId) ?? null;
+  const tab: ProjectHomeTab | null = isProjectHomeTab(tabParam) ? tabParam : null;
+  const observation = useProjectObservation(
+    selectedProject?.id ?? null,
+    selectedProject?.rootPath ?? 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">
+        {t("projectsLoading")}
+      </main>
+    );
+  }
+  if (projects.isError) {
+    return (
+      <main className="p-6 text-sm text-destructive">
+        {t("projectsLoadFailed")}: {projects.error.message}
+      </main>
+    );
+  }
+  if (registered.length === 0) {
+    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 snapshot = observation.data;
+  const startObservationSetup = () =>
+    presenter.chatSessionListManager.createSession({
+      projectRoot: selectedProject.rootPath,
+      prompt: t("projectsObservationSetupPrompt"),
+    });
+  const startProjectWork = () =>
+    presenter.chatSessionListManager.createSession({
+      projectRoot: selectedProject.rootPath,
+      prompt: t("projectsStartProjectWorkPrompt"),
+    });
+  const openProjectFile = (path: string, label: string) =>
+    presenter.chatThreadManager.openFilePreview({
+      path,
+      label,
+      viewMode: "preview",
+      previewViewer: "rendered",
+    });
+  return (
+    <>
+    <main className="h-full min-w-0 flex-1 overflow-y-auto p-4 md:p-6">
+      <div className="mx-auto max-w-6xl space-y-4">
+        <header className="flex flex-wrap items-center gap-3">
+          <h1 className="text-xl font-semibold">{t("projectsTitle")}</h1>
+        </header>
+
+        {observation.isLoading ? (
+          <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+            {t("projectsLoading")}
+          </div>
+        ) : null}
+        {observation.isError ? (
+          <div className="rounded-xl border border-destructive/40 bg-destructive/5 p-5 text-sm text-destructive">
+            {t("projectsLoadFailed")}: {observation.error.message}
+          </div>
+        ) : null}
+        {snapshot ? (
+          <>
+            <section className="rounded-2xl border border-border/60 bg-card p-4">
+              <h2 className="text-lg font-semibold">{snapshot.project.name}</h2>
+              {snapshot.project.summary ? (
+                <p className="mt-1 text-sm text-muted-foreground">
+                  {snapshot.project.summary}
+                </p>
+              ) : null}
+              <p className="mt-2 break-all text-xs text-muted-foreground">
+                {snapshot.project.rootPath}
+              </p>
+            </section>
+            <ProjectRequests
+              requests={getOpenProjectRequests(snapshot)}
+              pendingRequestId={pendingRequestId}
+              onReply={reply}
+            />
+            <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
+                  hasProjectSessions={hasObservedProjectSessions(snapshot.sources)}
+                  snapshot={snapshot}
+                  shouldOfferObservationSetup={shouldOfferObservationSetup(snapshot.sources)}
+                  onOpenFile={openProjectFile}
+                  onStartObservationSetup={startObservationSetup}
+                  onStartProjectWork={startProjectWork}
+                />
+              </TabsContent>
+              <TabsContent value="work" className="mt-4">
+                <ProjectWorkItems
+                  hasProjectSessions={hasObservedProjectSessions(snapshot.sources)}
+                  snapshot={snapshot}
+                  shouldOfferObservationSetup={shouldOfferObservationSetup(snapshot.sources)}
+                  onStartObservationSetup={startObservationSetup}
+                  onStartProjectWork={startProjectWork}
+                />
+              </TabsContent>
+              <TabsContent value="artifacts" className="mt-4">
+                <ProjectArtifacts snapshot={snapshot} onOpenFile={openProjectFile} />
+              </TabsContent>
+              <TabsContent value="skills" className="mt-4">
+                <ProjectSkills
+                  snapshot={snapshot}
+                  onOpen={(skill) =>
+                    presenter.chatThreadManager.openFilePreview({
+                      path: skill.path,
+                      label: skill.name,
+                      viewMode: "preview",
+                      previewViewer: "rendered",
+                    })
+                  }
+                />
+              </TabsContent>
+              <TabsContent value="agreement" className="mt-4">
+                <ProjectAgreement snapshot={snapshot} onOpenFile={openProjectFile} />
+              </TabsContent>
+            </Tabs>
+          </>
+        ) : null}
+      </div>
+    </main>
+    <ChatConversationWorkspaceSection
+      layoutMode="desktop"
+      sessionKey={null}
+      projectRoot={selectedProject.rootPath}
+    />
+    </>
+  );
+}

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

@@ -0,0 +1,366 @@
+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 type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { ProjectsPage } from "./project-home-page";
+
+const mocks = vi.hoisted(() => ({
+  useProjects: vi.fn(),
+  useProjectObservation: vi.fn(),
+  openFilePreview: vi.fn(),
+  createSession: 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/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatThreadManager: { openFilePreview: mocks.openFilePreview },
+    chatSessionListManager: { createSession: mocks.createSession },
+  }),
+}));
+vi.mock("@/features/chat/components/conversation/chat-conversation-workspace-section", () => ({
+  ChatConversationWorkspaceSection: () => <div data-testid="project-workspace-preview" />,
+}));
+
+const observedAt = "2026-08-30T00:00:00.000Z";
+const snapshot: ProjectObservationSnapshot = {
+  asOf: observedAt,
+  project: {
+    name: "Research",
+    rootPath: "/tmp/research",
+    context: [{
+      id: "vision",
+      role: "Project vision",
+      source: "docs/VISION.md",
+      accessible: true,
+      reference: {
+        kind: "file-observation",
+        label: "File observation",
+        observedAt,
+        projectRelativePath: "docs/VISION.md",
+      },
+    }],
+  },
+  sources: [
+    {
+      id: "config",
+      label: "Project config",
+      status: "error",
+      itemCount: 0,
+      observedAt,
+      diagnosticIds: ["config:broken"],
+    },
+    {
+      id: "files",
+      label: "Project files",
+      status: "empty",
+      itemCount: 0,
+      observedAt,
+      diagnosticIds: [],
+    },
+    {
+      id: "sessions",
+      label: "Project sessions",
+      status: "empty",
+      itemCount: 0,
+      observedAt,
+      diagnosticIds: [],
+    },
+    {
+      id: "skills",
+      label: "Project Skills",
+      status: "empty",
+      itemCount: 0,
+      observedAt,
+      diagnosticIds: [],
+    },
+  ],
+  workflows: [],
+  runs: [],
+  workItems: [],
+  artifactCategories: [
+    { id: "designs", label: "Designs" },
+    { id: "plans", label: "Plans" },
+  ],
+  artifacts: [
+    {
+      id: "designs:docs/designs/observer.md",
+      path: "docs/designs/observer.md",
+      categoryId: "designs",
+      categoryLabel: "Designs",
+      exists: true,
+      references: [],
+    },
+    {
+      id: "plans:docs/plans/delivery.md",
+      path: "docs/plans/delivery.md",
+      categoryId: "plans",
+      categoryLabel: "Plans",
+      exists: true,
+      references: [],
+    },
+  ],
+  signals: [],
+  requests: [],
+  activity: [],
+  skills: [
+    {
+      ref: "project:research-skill",
+      name: "Research skill",
+      description: "Collects and organizes source material.",
+      source: "project",
+      path: "/tmp/research/.agents/skills/research/SKILL.md",
+      readable: true,
+      reference: {
+        kind: "project-config",
+        label: "Project config",
+        observedAt,
+      },
+    },
+    {
+      ref: "project:unavailable-skill",
+      name: "Unavailable skill",
+      source: "project",
+      path: "/tmp/research/.agents/skills/unavailable/SKILL.md",
+      readable: false,
+      reference: {
+        kind: "project-config",
+        label: "Project config",
+        observedAt,
+      },
+    },
+  ],
+  diagnostics: [
+    {
+      id: "config:broken",
+      source: "config",
+      level: "error",
+      code: "PROJECT_CONFIG_PARSE_FAILED",
+      message: "The project configuration is invalid.",
+    },
+  ],
+  dataQuality: "partial",
+};
+
+describe("ProjectsPage", () => {
+  beforeEach(() => {
+    mocks.createSession.mockReset();
+    mocks.useProjects.mockReturnValue({
+      data: {
+        projects: [
+          {
+            id: "project-research",
+            name: "Research",
+            rootPath: "/tmp/research",
+            createdAt: observedAt,
+            updatedAt: observedAt,
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    });
+    mocks.useProjectObservation.mockReturnValue({
+      data: snapshot,
+      isLoading: false,
+      isError: false,
+    });
+  });
+
+  it("uses the project selected by the sidebar route without rendering another selector", () => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter initialEntries={["/projects/project-research/overview"]}>
+          <Routes>
+            <Route path="/projects/:projectId/:tab" element={<ProjectsPage />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    expect(mocks.useProjectObservation).toHaveBeenCalledWith(
+      "project-research",
+      "/tmp/research",
+    );
+    expect(screen.queryByRole("combobox")).toBeNull();
+    expect(screen.getAllByRole("tab")).toHaveLength(5);
+    expect(screen.getByRole("tab", { name: "Skills" })).toBeTruthy();
+    expect(
+      screen.queryByText(
+        /This project has no configured summary|项目没有配置摘要/,
+      ),
+    ).toBeNull();
+    expect(screen.queryByText(/Partially available|部分可用/)).toBeNull();
+    expect(screen.queryByText(observedAt)).toBeNull();
+    expect(
+      screen.getByText(
+        /Set up project observation first|先建立项目观察配置/,
+      ),
+    ).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: /Let AI set up project observation|让 AI 帮我建立项目观察/,
+      }),
+    );
+    expect(mocks.createSession).toHaveBeenCalledWith({
+      projectRoot: "/tmp/research",
+      prompt: expect.stringMatching(/project observation|项目观察/),
+    });
+    expect(mocks.createSession).toHaveBeenCalledWith(
+      expect.objectContaining({
+        prompt: expect.stringContaining("AGENTS.md"),
+      }),
+    );
+    fireEvent.click(screen.getByRole("button", { name: /docs\/designs\/observer\.md/ }));
+    expect(mocks.openFilePreview).toHaveBeenCalledWith({
+      path: "docs/designs/observer.md",
+      label: "docs/designs/observer.md",
+      viewMode: "preview",
+      previewViewer: "rendered",
+    });
+
+    fireEvent.click(screen.getByRole("tab", { name: /Work items|工作项/ }));
+    expect(
+      screen.queryByRole("heading", { name: /Work items|工作项/ }),
+    ).toBeNull();
+
+    fireEvent.click(screen.getByRole("tab", { name: /Artifacts|产物/ }));
+    expect(
+      screen.queryByRole("heading", { name: /Artifacts|产物/ }),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: /Designs 1/ })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /docs\/plans\/delivery\.md/ })).toBeTruthy();
+    expect(screen.queryByText(/File observed|文件已观测/)).toBeNull();
+
+    fireEvent.click(screen.getByRole("tab", { name: /Skills/ }));
+    expect(screen.getByText("2 skills")).toBeTruthy();
+    expect(screen.queryByRole("heading", { name: "Skills" })).toBeNull();
+    const skillPath = screen.getByText(
+      "/tmp/research/.agents/skills/research/SKILL.md",
+    );
+    expect(skillPath.className).toContain("truncate");
+    expect(skillPath.getAttribute("title")).toBe(
+      "/tmp/research/.agents/skills/research/SKILL.md",
+    );
+    const skillDescription = screen.getByText(
+      "Collects and organizes source material.",
+    );
+    expect(skillDescription.className).toContain("line-clamp-2");
+    expect(skillDescription.getAttribute("title")).toBe(
+      "Collects and organizes source material.",
+    );
+    expect(screen.queryByText(/Readable|可读取/)).toBeNull();
+    expect(screen.getByText(/Unavailable|不可用/)).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /Research skill/ }));
+    expect(mocks.openFilePreview).toHaveBeenCalledWith({
+      path: "/tmp/research/.agents/skills/research/SKILL.md",
+      label: "Research skill",
+      viewMode: "preview",
+      previewViewer: "rendered",
+    });
+
+    fireEvent.click(
+      screen.getByRole("tab", { name: /Working rules|工作约定/ }),
+    );
+    expect(
+      screen.queryByRole("heading", { name: /Working rules|工作约定/ }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("heading", { name: /Vision and context|愿景与上下文/ }),
+    ).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /Project vision/ }));
+    expect(mocks.openFilePreview).toHaveBeenCalledWith({
+      path: "docs/VISION.md",
+      label: "Project vision",
+      viewMode: "preview",
+      previewViewer: "rendered",
+    });
+    expect(screen.getByText("PROJECT_CONFIG_PARSE_FAILED")).toBeTruthy();
+  });
+
+  it("keeps rendering while an older server snapshot has no runs field", () => {
+    const { runs: _runs, ...legacySnapshot } = snapshot;
+    mocks.useProjectObservation.mockReturnValue({
+      data: legacySnapshot as ProjectObservationSnapshot,
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter initialEntries={["/projects/project-research/overview"]}>
+          <Routes>
+            <Route path="/projects/:projectId/:tab" element={<ProjectsPage />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    expect(screen.getAllByRole("tab")).toHaveLength(5);
+    expect(screen.getByText(/No AI-reported activity|暂无 AI 上报动态/)).toBeTruthy();
+  });
+
+  it("asks the user to choose from the sidebar when the route has no registered project", () => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter initialEntries={["/projects"]}>
+          <Routes>
+            <Route path="/projects" element={<ProjectsPage />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    expect(mocks.useProjectObservation).toHaveBeenLastCalledWith(null, null);
+    expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy();
+    expect(screen.queryByRole("combobox")).toBeNull();
+  });
+
+  it("keeps the observation setup entry out of an already configured project", () => {
+    mocks.useProjectObservation.mockReturnValue({
+      data: {
+        ...snapshot,
+        sources: snapshot.sources.map((source) =>
+          source.id === "config" ? { ...source, status: "available" as const } : source,
+        ),
+      },
+      isLoading: false,
+      isError: false,
+    });
+
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <MemoryRouter initialEntries={["/projects/project-research/overview"]}>
+          <Routes>
+            <Route path="/projects/:projectId/:tab" element={<ProjectsPage />} />
+          </Routes>
+        </MemoryRouter>
+      </QueryClientProvider>,
+    );
+
+    expect(
+      screen.queryByRole("button", {
+        name: /Let AI set up project observation|让 AI 帮我建立项目观察/,
+      }),
+    ).toBeNull();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: /Start project work|开始项目工作/,
+      }),
+    );
+    expect(mocks.createSession).toHaveBeenCalledWith({
+      projectRoot: "/tmp/research",
+      prompt: expect.stringMatching(/Start working on this project|请开始处理这个项目/),
+    });
+  });
+});

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