@nextclaw/ui 0.24.2 → 0.24.3

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

@@ -1,4 +1,4 @@
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import type { ProjectAgreementMaterial } from "@nextclaw/client-sdk";
 import { t } from "@/shared/lib/i18n";
 import {
   ProjectEmptyState,
@@ -7,86 +7,45 @@ import {
 } from "./project-section";
 
 export function ProjectAgreement({
-  snapshot,
+  agreement,
+  isLoading,
+  isError,
   onOpenFile,
 }: {
-  snapshot: ProjectObservationSnapshot;
+  agreement?: ProjectAgreementMaterial;
+  isLoading: boolean;
+  isError: boolean;
   onOpenFile: (path: string, label: string) => void;
 }) {
   return (
-    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
-      <ProjectSection title={t("projectsVisionAndContext")}>
-        {snapshot.project.summary ? (
-          <p className="mb-4 text-sm">{snapshot.project.summary}</p>
-        ) : null}
-        {snapshot.project.context.length ? (
-          <div className="divide-y divide-border/60">
-            {snapshot.project.context.map((context) => (
-              <ProjectContextReference
-                key={context.id}
-                context={context}
-                onOpenFile={onOpenFile}
-              />
-            ))}
-          </div>
-        ) : (
-          <ProjectEmptyState>{t("projectsNoContext")}</ProjectEmptyState>
-        )}
-      </ProjectSection>
-      <ProjectSection title={t("projectsSourceHealth")}>
-        <div className="space-y-2">
-          {snapshot.sources.map((source) => (
-            <div
-              key={source.id}
-              className="flex items-center justify-between gap-3 rounded-xl bg-muted/45 p-3 text-sm"
-            >
-              <span>{source.label}</span>
-              <span className="text-muted-foreground">
-                {t(`projectsSource_${source.status}`)} · {source.itemCount}
-              </span>
-            </div>
-          ))}
-        </div>
-        {snapshot.diagnostics.length ? (
-          <div className="mt-4 space-y-2 border-t border-border/60 pt-4">
-            {snapshot.diagnostics.map((diagnostic) => (
-              <div
-                key={diagnostic.id}
-                className="rounded-xl bg-muted/35 p-3 text-sm"
-              >
-                <p className="font-medium">{diagnostic.code}</p>
-                <p className="mt-1 text-xs text-muted-foreground">
-                  {diagnostic.message}
-                </p>
-              </div>
-            ))}
-          </div>
-        ) : null}
-      </ProjectSection>
-    </div>
-  );
-}
-
-function ProjectContextReference({
-  context,
-  onOpenFile,
-}: {
-  context: ProjectObservationSnapshot["project"]["context"][number];
-  onOpenFile: (path: string, label: string) => void;
-}) {
-  const { accessible, role, source } = context;
-  return (
-    <ProjectFilePreviewButton
-      available={accessible}
-      path={source}
-      label={role}
-      onOpen={onOpenFile}
-      className="block w-full py-3 text-left first:pt-0 enabled:hover:text-foreground enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
-    >
-      <span className="block text-sm font-medium">{role}</span>
-      <span className="mt-1 block truncate text-xs text-muted-foreground">
-        {source}{!accessible ? ` · ${t("projectsUnavailable")}` : ""}
-      </span>
-    </ProjectFilePreviewButton>
+    <ProjectSection title={t("projectsAgreementFile")}>
+      <p className="mb-4 text-sm text-muted-foreground">
+        {t("projectsAgreementDescription")}
+      </p>
+      {isLoading ? (
+        <p className="py-5 text-sm text-muted-foreground">
+          {t("projectsLoading")}
+        </p>
+      ) : isError ? (
+        <p className="py-5 text-sm text-destructive">
+          {t("projectsLoadFailed")}
+        </p>
+      ) : agreement?.available ? (
+        <ProjectFilePreviewButton
+          available
+          path={agreement.path}
+          label={agreement.path}
+          onOpen={onOpenFile}
+          className="block w-full rounded-xl bg-muted/45 p-3 text-left transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+        >
+          <span className="block text-sm font-medium">{agreement.path}</span>
+          <span className="mt-1 block text-xs text-muted-foreground">
+            {t("projectsAgreementOpen")}
+          </span>
+        </ProjectFilePreviewButton>
+      ) : (
+        <ProjectEmptyState>{t("projectsNoAgreement")}</ProjectEmptyState>
+      )}
+    </ProjectSection>
   );
 }

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

@@ -1,77 +1,105 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
 import { ProjectArtifacts } from "./project-artifacts";
 
-const observedAt = "2026-08-30T00:00:00.000Z";
-const designs = Array.from({ length: 11 }, (_, index) => ({
-  id: `design-${index + 1}`,
-  path: `docs/designs/${index + 1}.md`,
-  categoryId: "designs",
-  categoryLabel: "Designs",
-  exists: true,
-  fileUpdatedAt: `2026-08-${String(index + 1).padStart(2, "0")}T00:00:00.000Z`,
-  references: [],
-}));
+const useProjectArtifacts = vi.fn();
 
-const snapshot: ProjectObservationSnapshot = {
-  asOf: observedAt,
-  project: { name: "Research", rootPath: "/tmp/research", context: [] },
-  sources: [],
-  workflows: [],
-  runs: [],
-  workItems: [],
-  artifactCategories: [
-    { id: "plans", label: "Plans" },
-    { id: "designs", label: "Designs" },
-  ],
-  artifacts: [
-    ...designs,
-    {
-      id: "plan-1",
-      path: "docs/plans/delivery.md",
-      categoryId: "plans",
-      categoryLabel: "Plans",
-      exists: true,
-      fileUpdatedAt: "2026-08-30T00:00:00.000Z",
-      references: [],
-    },
-  ],
-  signals: [],
-  requests: [],
-  activity: [],
-  skills: [],
-  diagnostics: [],
-  dataQuality: "complete",
-};
+vi.mock(
+  "@/features/projects/hooks/use-project-work",
+  async (importOriginal) => ({
+    ...(await importOriginal()),
+    useProjectArtifacts: (...args: unknown[]) => useProjectArtifacts(...args),
+  }),
+);
 
 describe("ProjectArtifacts", () => {
-  it("groups in configuration order, expands incrementally, filters, and opens the selected file", () => {
+  it("loads linked artifacts, searches through the owner, and opens available files", () => {
+    useProjectArtifacts.mockReturnValue({
+      data: {
+        pages: [
+          {
+            artifacts: [
+              {
+                id: "artifact-1",
+                path: "docs/design.md",
+                label: "Design",
+                workItemTitle: "Current work",
+                createdAt: "2026-09-03T00:00:00.000Z",
+                exists: true,
+              },
+            ],
+            total: 1,
+            nextCursor: null,
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+      hasNextPage: false,
+    });
     const onOpenFile = vi.fn();
-    render(<ProjectArtifacts snapshot={snapshot} onOpenFile={onOpenFile} />);
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={onOpenFile} />);
+
+    fireEvent.click(screen.getByRole("button", { name: /Design/ }));
+    expect(onOpenFile).toHaveBeenCalledWith("docs/design.md", "Design");
+
+    fireEvent.change(screen.getByPlaceholderText(/Search artifacts|搜索产物/), {
+      target: { value: "report" },
+    });
+    expect(useProjectArtifacts).toHaveBeenLastCalledWith("project-1", {
+      limit: 20,
+      query: "report",
+    });
+  });
 
-    const groupHeaders = screen.getAllByRole("button", { name: /Plans 1|Designs 11/ });
-    expect(groupHeaders.map((header) => header.getAttribute("aria-label"))).toEqual([
-      "Plans 1",
-      "Designs 11",
-    ]);
-    expect(screen.getByTitle("docs/designs/11.md")).toBeTruthy();
-    expect(screen.queryByTitle("docs/designs/1.md")).toBeNull();
+  it("explains that artifacts come from work-item links", () => {
+    useProjectArtifacts.mockReturnValue({
+      data: { pages: [{ artifacts: [], total: 0, nextCursor: null }] },
+      isLoading: false,
+      isError: false,
+      hasNextPage: false,
+    });
 
-    fireEvent.click(screen.getByRole("button", { name: /Show more \(1\)/ }));
-    expect(screen.getByTitle("docs/designs/1.md")).toBeTruthy();
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={vi.fn()} />);
 
-    fireEvent.change(screen.getByPlaceholderText("Search artifacts"), {
-      target: { value: "delivery" },
+    expect(
+      screen.getByText(/Link a file from a work item|从工作项关联文件/),
+    ).toBeTruthy();
+  });
+
+  it("keeps missing links visible and loads the next page explicitly", () => {
+    const fetchNextPage = vi.fn();
+    useProjectArtifacts.mockReturnValue({
+      data: {
+        pages: [
+          {
+            artifacts: [
+              {
+                id: "artifact-missing",
+                path: "docs/missing.md",
+                label: null,
+                workItemTitle: "Archived work",
+                createdAt: "2026-09-03T00:00:00.000Z",
+                exists: false,
+              },
+            ],
+            total: 21,
+            nextCursor: "next",
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+      hasNextPage: true,
+      isFetchingNextPage: false,
+      fetchNextPage,
     });
-    expect(screen.queryByRole("button", { name: /Designs 11/ })).toBeNull();
-    expect(screen.getByTitle("docs/plans/delivery.md")).toBeTruthy();
-    fireEvent.click(screen.getByTitle("docs/plans/delivery.md"));
-    expect(onOpenFile).toHaveBeenCalledWith("docs/plans/delivery.md", "docs/plans/delivery.md");
 
-    const plansHeader = screen.getByRole("button", { name: /Plans 1/ });
-    fireEvent.click(plansHeader);
-    expect(plansHeader.getAttribute("aria-expanded")).toBe("false");
-    expect(screen.queryByTitle("docs/plans/delivery.md")).toBeNull();
+    render(<ProjectArtifacts projectId="project-1" onOpenFile={vi.fn()} />);
+
+    expect(screen.getByText(/Currently unavailable|暂不可用/)).toBeTruthy();
+    expect(screen.queryByRole("button", { name: /missing\.md/ })).toBeNull();
+    fireEvent.click(screen.getByRole("button", { name: /Show more|显示更多/ }));
+    expect(fetchNextPage).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -1,187 +1,108 @@
-import { useMemo, useState } from "react";
-import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { useState } from "react";
+import { useProjectArtifacts } from "@/features/projects/hooks/use-project-work";
+import { formatProjectRelativeTime } from "@/features/projects/utils/project-artifact-view.utils";
 import { formatDateTime, formatNumber, t } from "@/shared/lib/i18n";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/components/ui/select";
 import { ProjectEmptyState, ProjectFilePreviewButton } from "./project-section";
-import {
-  DEFAULT_PROJECT_ARTIFACT_SORT,
-  formatProjectRelativeTime,
-  sortProjectArtifacts,
-  type ProjectArtifactSort,
-} from "../utils/project-artifact-view.utils";
 
-const INITIAL_VISIBLE_COUNT = 10;
-
-type ArtifactGroup = {
-  id: string;
-  label: string;
-  artifacts: ProjectObservationSnapshot["artifacts"];
-};
-
-function createArtifactGroups(
-  snapshot: ProjectObservationSnapshot,
-  query: string,
-  sort: ProjectArtifactSort,
-): ArtifactGroup[] {
-  const normalizedQuery = query.trim().toLocaleLowerCase();
-  const filteredArtifacts = normalizedQuery
-    ? snapshot.artifacts.filter((artifact) => artifact.path.toLocaleLowerCase().includes(normalizedQuery))
-    : snapshot.artifacts;
-  const artifacts = sortProjectArtifacts(filteredArtifacts, sort);
-  const artifactsByCategory = new Map<string, ProjectObservationSnapshot["artifacts"]>();
-  for (const artifact of artifacts) {
-    const group = artifactsByCategory.get(artifact.categoryId) ?? [];
-    group.push(artifact);
-    artifactsByCategory.set(artifact.categoryId, group);
-  }
-  const configuredCategories = snapshot.artifactCategories ?? [];
-  const configuredIds = new Set(configuredCategories.map((category) => category.id));
-  const groups = configuredCategories.flatMap((category) => {
-    const groupArtifacts = artifactsByCategory.get(category.id) ?? [];
-    return groupArtifacts.length ? [{ ...category, artifacts: groupArtifacts }] : [];
-  });
-  const unconfiguredGroups = [...artifactsByCategory.entries()]
-    .filter(([categoryId]) => !configuredIds.has(categoryId))
-    .map(([id, groupArtifacts]) => ({
-      id,
-      label: groupArtifacts[0]?.categoryLabel ?? id,
-      artifacts: groupArtifacts,
-    }))
-    .sort((left, right) => left.label.localeCompare(right.label));
-  return [...groups, ...unconfiguredGroups];
-}
+const PAGE_SIZE = 20;
 
 export function ProjectArtifacts({
-  snapshot,
+  projectId,
   onOpenFile,
 }: {
-  snapshot: ProjectObservationSnapshot;
+  projectId: string;
   onOpenFile: (path: string, label: string) => void;
 }) {
   const [query, setQuery] = useState("");
-  const [sort, setSort] = useState<ProjectArtifactSort>(DEFAULT_PROJECT_ARTIFACT_SORT);
-  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set());
-  const [visibleCounts, setVisibleCounts] = useState<Record<string, number>>({});
-  const groups = useMemo(() => createArtifactGroups(snapshot, query, sort), [query, snapshot, sort]);
-  const canSortByCreated = snapshot.artifacts.some((artifact) => artifact.fileCreatedAt);
+  const artifacts = useProjectArtifacts(projectId, {
+    limit: PAGE_SIZE,
+    ...(query.trim() ? { query: query.trim() } : {}),
+  });
+  const pages = artifacts.data?.pages ?? [];
+  const items = pages.flatMap((page) => page.artifacts);
+  const total = pages[0]?.total ?? 0;
 
-  if (!snapshot.artifacts.length) {
-    return <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>;
+  if (artifacts.isLoading) {
+    return (
+      <p className="py-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </p>
+    );
+  }
+  if (artifacts.isError) {
+    return (
+      <p className="py-5 text-sm text-destructive">{t("projectsLoadFailed")}</p>
+    );
   }
 
   return (
     <section className="min-w-0" aria-label={t("projectsArtifacts")}>
       <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
         <p className="text-sm text-muted-foreground">
-          {formatNumber(snapshot.artifacts.length)} {t("projectsArtifactsCountSuffix")}
+          {formatNumber(total)} {t("projectsArtifactsCountSuffix")}
         </p>
-        <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
-          <Select value={sort} onValueChange={(value) => setSort(value as ProjectArtifactSort)}>
-            <SelectTrigger aria-label={t("projectsArtifactsSort")} className="h-8 w-32 rounded-lg">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="updated-desc">{t("projectsArtifactsSortUpdatedDesc")}</SelectItem>
-              <SelectItem value="updated-asc">{t("projectsArtifactsSortUpdatedAsc")}</SelectItem>
-              {canSortByCreated ? (
-                <SelectItem value="created-desc">{t("projectsArtifactsSortCreatedDesc")}</SelectItem>
-              ) : null}
-              <SelectItem value="name">{t("projectsArtifactsSortName")}</SelectItem>
-            </SelectContent>
-          </Select>
-          <input
-            type="search"
-            value={query}
-            className="h-8 min-w-0 flex-1 rounded-lg border border-border/60 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-border sm:w-60"
-            placeholder={t("projectsArtifactsSearchPlaceholder")}
-            onChange={(event) => {
-              setQuery(event.target.value);
-              setVisibleCounts({});
-            }}
-          />
-        </div>
+        <input
+          type="search"
+          value={query}
+          className="h-8 w-full min-w-0 rounded-lg border border-border/60 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground sm:w-60"
+          placeholder={t("projectsArtifactsSearchPlaceholder")}
+          onChange={(event) => setQuery(event.target.value)}
+        />
       </div>
-      {groups.length ? (
-        <div className="space-y-2">
-          {groups.map((group) => {
-            const collapsed = collapsedGroups.has(group.id);
-            const visibleCount = visibleCounts[group.id] ?? INITIAL_VISIBLE_COUNT;
-            const visibleArtifacts = group.artifacts.slice(0, visibleCount);
-            return (
-              <section key={group.id} className="overflow-hidden rounded-xl border border-border/60">
-                <button
-                  type="button"
-                  className="flex w-full items-center justify-between gap-3 bg-muted/30 px-3 py-2.5 text-left text-sm transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-                  aria-label={`${group.label} ${formatNumber(group.artifacts.length)}`}
-                  aria-expanded={!collapsed}
-                  onClick={() => setCollapsedGroups((current) => {
-                    const next = new Set(current);
-                    if (next.has(group.id)) next.delete(group.id);
-                    else next.add(group.id);
-                    return next;
-                  })}
+      {items.length ? (
+        <div className="overflow-hidden rounded-xl border border-border/60">
+          <div className="divide-y divide-border/60">
+            {items.map((artifact) => (
+              <ProjectFilePreviewButton
+                key={artifact.id}
+                available={artifact.exists}
+                path={artifact.path}
+                label={artifact.label ?? artifact.path}
+                onOpen={onOpenFile}
+                className="flex w-full min-w-0 items-center gap-3 px-3 py-3 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
+              >
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate font-medium">
+                    {artifact.label ?? artifact.path}
+                  </span>
+                  <span className="mt-1 block truncate text-xs text-muted-foreground">
+                    {artifact.path} · {artifact.workItemTitle}
+                  </span>
+                </span>
+                <time
+                  className="shrink-0 text-xs text-muted-foreground"
+                  dateTime={artifact.createdAt}
+                  title={formatDateTime(artifact.createdAt)}
                 >
-                  <span className="min-w-0 truncate font-medium">{group.label}</span>
-                  <span className="shrink-0 text-xs text-muted-foreground">
-                    {formatNumber(group.artifacts.length)} {collapsed ? "▸" : "▾"}
+                  {formatProjectRelativeTime(artifact.createdAt)}
+                </time>
+                {!artifact.exists ? (
+                  <span className="shrink-0 text-xs text-destructive">
+                    {t("projectsUnavailable")}
                   </span>
-                </button>
-                {!collapsed ? (
-                  <div className="divide-y divide-border/60">
-                    {visibleArtifacts.map((artifact) => (
-                      <ProjectFilePreviewButton
-                        key={artifact.id}
-                        available={artifact.exists}
-                        path={artifact.path}
-                        label={artifact.path}
-                        onOpen={onOpenFile}
-                        className="flex w-full min-w-0 items-center gap-3 px-3 py-2.5 text-left text-sm transition-colors enabled:hover:bg-[var(--interaction-hover)] enabled:focus-visible:outline-none enabled:focus-visible:ring-1 enabled:focus-visible:ring-border"
-                      >
-                        <span className="min-w-0 flex-1 truncate">{artifact.path}</span>
-                        {artifact.fileUpdatedAt ? (
-                          <time
-                            className="shrink-0 text-xs text-muted-foreground"
-                            dateTime={artifact.fileUpdatedAt}
-                            title={formatDateTime(artifact.fileUpdatedAt)}
-                          >
-                            {formatProjectRelativeTime(artifact.fileUpdatedAt)}
-                          </time>
-                        ) : null}
-                        {!artifact.exists ? (
-                          <span className="shrink-0 text-xs text-destructive">
-                            {t("projectsUnavailable")}
-                          </span>
-                        ) : null}
-                      </ProjectFilePreviewButton>
-                    ))}
-                    {group.artifacts.length > visibleArtifacts.length ? (
-                      <button
-                        type="button"
-                        className="w-full px-3 py-2.5 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
-                        onClick={() => setVisibleCounts((current) => ({
-                          ...current,
-                          [group.id]: visibleCount + INITIAL_VISIBLE_COUNT,
-                        }))}
-                      >
-                        {t("projectsArtifactsShowMore")} ({formatNumber(
-                          Math.min(INITIAL_VISIBLE_COUNT, group.artifacts.length - visibleArtifacts.length),
-                        )})
-                      </button>
-                    ) : null}
-                  </div>
                 ) : null}
-              </section>
-            );
-          })}
+              </ProjectFilePreviewButton>
+            ))}
+          </div>
+          {artifacts.hasNextPage ? (
+            <button
+              type="button"
+              className="w-full border-t border-border/60 px-3 py-2.5 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+              disabled={artifacts.isFetchingNextPage}
+              onClick={() => void artifacts.fetchNextPage()}
+            >
+              {artifacts.isFetchingNextPage
+                ? t("projectsLoading")
+                : t("projectsArtifactsShowMore")}
+            </button>
+          ) : null}
         </div>
       ) : (
-        <ProjectEmptyState>{t("projectsArtifactsNoMatches")}</ProjectEmptyState>
+        <ProjectEmptyState>
+          {query.trim()
+            ? t("projectsArtifactsNoMatches")
+            : t("projectsNoArtifacts")}
+        </ProjectEmptyState>
       )}
     </section>
   );

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

@@ -0,0 +1,80 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectAgreement } from "./project-agreement";
+import { ProjectSkills } from "./project-skills";
+
+describe("project materials", () => {
+  it("opens the root agreement and renders a missing-file empty state", () => {
+    const onOpenFile = vi.fn();
+    const { rerender } = render(
+      <ProjectAgreement
+        agreement={{ path: "AGENTS.md", available: true }}
+        isLoading={false}
+        isError={false}
+        onOpenFile={onOpenFile}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /AGENTS\.md/ }));
+    expect(onOpenFile).toHaveBeenCalledWith("AGENTS.md", "AGENTS.md");
+
+    rerender(
+      <ProjectAgreement
+        agreement={{ path: "AGENTS.md", available: false }}
+        isLoading={false}
+        isError={false}
+        onOpenFile={onOpenFile}
+      />,
+    );
+    expect(
+      screen.getByText(/No AGENTS\.md exists|还没有 AGENTS\.md/),
+    ).toBeTruthy();
+  });
+
+  it("opens project skills from the fixed source and renders an empty state", () => {
+    const onOpen = vi.fn();
+    const skill = {
+      ref: "project:alpha",
+      name: "alpha",
+      description: "Alpha project skill",
+      path: ".agents/skills/alpha/SKILL.md",
+    };
+    const { rerender } = render(
+      <ProjectSkills
+        skills={[skill]}
+        isLoading={false}
+        isError={false}
+        onOpen={onOpen}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: /alpha/ }));
+    expect(onOpen).toHaveBeenCalledWith(skill);
+
+    rerender(
+      <ProjectSkills
+        skills={[]}
+        isLoading={false}
+        isError={false}
+        onOpen={onOpen}
+      />,
+    );
+    expect(
+      screen.getByText(/No project Skills found|暂无项目 Skills/),
+    ).toBeTruthy();
+  });
+
+  it("shows bounded loading and error states", () => {
+    const { rerender } = render(
+      <ProjectSkills skills={[]} isLoading isError={false} onOpen={vi.fn()} />,
+    );
+    expect(screen.getByText(/Loading project|正在读取项目/)).toBeTruthy();
+
+    rerender(
+      <ProjectSkills skills={[]} isLoading={false} isError onOpen={vi.fn()} />,
+    );
+    expect(
+      screen.getByText(/Failed to load project|项目读取失败/),
+    ).toBeTruthy();
+  });
+});