@nextclaw/ui 0.22.5 → 0.24.0-beta.0

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

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

@@ -0,0 +1,55 @@
+import type {
+  ObservedRequest,
+  ObservedWorkItem,
+  ObservedWorkflow,
+  ProjectObservationSnapshot,
+} from "@nextclaw/client-sdk";
+
+export type ProjectHomeTab = "overview" | "work" | "artifacts" | "skills" | "agreement";
+export type ProjectWorkView = "list" | "board" | "gantt";
+
+export type ProjectBoardColumn = {
+  id: string;
+  label: string;
+  items: ObservedWorkItem[];
+};
+
+export function isProjectHomeTab(value: string | undefined): value is ProjectHomeTab {
+  return value === "overview" || value === "work" || value === "artifacts" || value === "skills" || value === "agreement";
+}
+
+export function createProjectBoardColumns(
+  workflows: readonly ObservedWorkflow[],
+  workItems: readonly ObservedWorkItem[],
+): ProjectBoardColumn[] {
+  return workflows.flatMap((workflow) => workflow.stages.map((stage) => ({
+    id: `${workflow.id}:${stage.id}`,
+    label: stage.label,
+    items: workItems.filter((item) => (
+      item.workflowId === workflow.id && item.stageId === stage.id
+    )),
+  })));
+}
+
+export function getUnstagedWorkItems(
+  workItems: readonly ObservedWorkItem[],
+): ObservedWorkItem[] {
+  return workItems.filter((item) => !item.workflowId || !item.stageId);
+}
+
+export function getScheduledWorkItems(
+  workItems: readonly ObservedWorkItem[],
+): ObservedWorkItem[] {
+  return workItems.filter((item) => item.schedule?.start || item.schedule?.end);
+}
+
+export function canReplyToProjectRequest(request: ObservedRequest): boolean {
+  return request.status === "open"
+    && request.response === "confirm-reject"
+    && Boolean(request.reference.sessionId)
+    && !request.reply;
+}
+
+export function getOpenProjectRequests(snapshot: ProjectObservationSnapshot): ObservedRequest[] {
+  return snapshot.requests.filter((request) => request.status === "open");
+}

package/src/features/projects/utils/project-artifact-view.utils.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import {
+  formatProjectRelativeTime,
+  sortProjectArtifacts,
+} from "./project-artifact-view.utils";
+
+const artifacts = [
+  {
+    id: "older-update",
+    path: "docs/designs/older.md",
+    categoryId: "designs",
+    categoryLabel: "Designs",
+    exists: true,
+    fileCreatedAt: "2026-08-01T00:00:00.000Z",
+    fileUpdatedAt: "2026-08-28T00:00:00.000Z",
+    references: [],
+  },
+  {
+    id: "newer-update",
+    path: "docs/designs/newer.md",
+    categoryId: "designs",
+    categoryLabel: "Designs",
+    exists: true,
+    fileCreatedAt: "2026-08-29T00:00:00.000Z",
+    fileUpdatedAt: "2026-08-30T00:00:00.000Z",
+    references: [],
+  },
+  {
+    id: "untimed",
+    path: "docs/designs/alpha.md",
+    categoryId: "designs",
+    categoryLabel: "Designs",
+    exists: false,
+    references: [],
+  },
+];
+
+describe("project artifact view", () => {
+  it("prioritizes recent updates by default and supports alternate sort orders", () => {
+    expect(sortProjectArtifacts(artifacts).map((artifact) => artifact.id)).toEqual([
+      "newer-update",
+      "older-update",
+      "untimed",
+    ]);
+    expect(sortProjectArtifacts(artifacts, "created-desc").map((artifact) => artifact.id)).toEqual([
+      "newer-update",
+      "older-update",
+      "untimed",
+    ]);
+    expect(sortProjectArtifacts(artifacts, "name").map((artifact) => artifact.id)).toEqual([
+      "untimed",
+      "newer-update",
+      "older-update",
+    ]);
+  });
+
+  it("renders recent timestamps in people-friendly language", () => {
+    const now = new Date("2026-08-30T12:00:00.000Z");
+    expect(formatProjectRelativeTime("2026-08-30T11:57:00.000Z", now)).toBe("3 minutes ago");
+    expect(formatProjectRelativeTime("2026-08-30T09:00:00.000Z", now)).toBe("3 hours ago");
+    expect(formatProjectRelativeTime("2026-08-29T12:00:00.000Z", now)).toBe("Yesterday");
+  });
+});

package/src/features/projects/utils/project-artifact-view.utils.ts

@@ -0,0 +1,62 @@
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { formatDateShort, t } from "@/shared/lib/i18n";
+
+export type ProjectArtifactSort =
+  | "updated-desc"
+  | "updated-asc"
+  | "created-desc"
+  | "name";
+
+export const DEFAULT_PROJECT_ARTIFACT_SORT: ProjectArtifactSort = "updated-desc";
+
+function timestamp(value?: string): number {
+  if (!value) return Number.NEGATIVE_INFINITY;
+  const parsed = new Date(value).getTime();
+  return Number.isNaN(parsed) ? Number.NEGATIVE_INFINITY : parsed;
+}
+
+function byName(
+  left: ProjectObservationSnapshot["artifacts"][number],
+  right: ProjectObservationSnapshot["artifacts"][number],
+): number {
+  return left.path.localeCompare(right.path);
+}
+
+export function sortProjectArtifacts(
+  artifacts: ProjectObservationSnapshot["artifacts"],
+  sort: ProjectArtifactSort = DEFAULT_PROJECT_ARTIFACT_SORT,
+): ProjectObservationSnapshot["artifacts"] {
+  return [...artifacts].sort((left, right) => {
+    if (sort === "name") return byName(left, right);
+    const leftTimestamp = timestamp(
+      sort === "created-desc"
+        ? left.fileCreatedAt ?? left.fileUpdatedAt
+        : left.fileUpdatedAt ?? left.fileCreatedAt,
+    );
+    const rightTimestamp = timestamp(
+      sort === "created-desc"
+        ? right.fileCreatedAt ?? right.fileUpdatedAt
+        : right.fileUpdatedAt ?? right.fileCreatedAt,
+    );
+    const order = sort === "updated-asc"
+      ? leftTimestamp - rightTimestamp
+      : rightTimestamp - leftTimestamp;
+    return order || byName(left, right);
+  });
+}
+
+export function formatProjectRelativeTime(value?: string, now: Date = new Date()): string {
+  if (!value) return "-";
+  const date = new Date(value);
+  const differenceMs = now.getTime() - date.getTime();
+  if (Number.isNaN(date.getTime())) return value;
+  if (differenceMs < 60_000) return t("projectsTimeJustNow");
+  const minutes = Math.floor(differenceMs / 60_000);
+  if (minutes < 60) return t("projectsTimeMinutesAgo").replace("{count}", String(minutes));
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return t("projectsTimeHoursAgo").replace("{count}", String(hours));
+  const days = Math.floor(hours / 24);
+  if (days === 1) return t("projectsTimeYesterday");
+  if (days < 7) return t("projectsTimeDaysAgo").replace("{count}", String(days));
+  return formatDateShort(value);
+}

package/src/features/projects/utils/project-request-response.utils.test.ts

@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { nextclawClient } from "@/shared/lib/api";
+import { sendProjectRequestResponse } from "./project-request-response.utils";
+
+vi.mock("@/shared/lib/api", () => ({
+  nextclawClient: { agentRuns: { send: vi.fn() } },
+}));
+
+describe("sendProjectRequestResponse", () => {
+  beforeEach(() => vi.mocked(nextclawClient.agentRuns.send).mockReset());
+
+  it("sends a stable, traceable reply through the existing agent-run ingress", async () => {
+    vi.mocked(nextclawClient.agentRuns.send).mockResolvedValue({
+      delivery: "queued",
+      runId: null,
+      sessionId: "session-1",
+      userMessageId: "project-response-approve-release-confirmed",
+      assistantMessageId: null,
+    });
+
+    await sendProjectRequestResponse({
+      requestId: "approve-release",
+      sessionId: "session-1",
+      decision: "confirmed",
+      prompt: "继续发布 v1",
+    });
+
+    expect(nextclawClient.agentRuns.send).toHaveBeenCalledWith(expect.objectContaining({
+      sessionId: "session-1",
+      idempotencyKey: "project-response-approve-release-confirmed",
+      delivery: "prefer-steer",
+      message: expect.objectContaining({
+        id: "project-response-approve-release-confirmed",
+        metadata: {
+          project_observation_response: {
+            protocol: "nextclaw.project/v1",
+            requestId: "approve-release",
+            decision: "confirmed",
+          },
+        },
+      }),
+    }));
+  });
+});