@nextclaw/ui 0.23.0 → 0.24.0-beta.0

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

@@ -0,0 +1,77 @@
+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 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",
+};
+
+describe("ProjectArtifacts", () => {
+  it("groups in configuration order, expands incrementally, filters, and opens the selected file", () => {
+    const onOpenFile = vi.fn();
+    render(<ProjectArtifacts snapshot={snapshot} onOpenFile={onOpenFile} />);
+
+    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();
+
+    fireEvent.click(screen.getByRole("button", { name: /Show more \(1\)/ }));
+    expect(screen.getByTitle("docs/designs/1.md")).toBeTruthy();
+
+    fireEvent.change(screen.getByPlaceholderText("Search artifacts"), {
+      target: { value: "delivery" },
+    });
+    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();
+  });
+});

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

@@ -0,0 +1,188 @@
+import { useMemo, useState } from "react";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+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];
+}
+
+export function ProjectArtifacts({
+  snapshot,
+  onOpenFile,
+}: {
+  snapshot: ProjectObservationSnapshot;
+  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);
+
+  if (!snapshot.artifacts.length) {
+    return <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>;
+  }
+
+  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")}
+        </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>
+      </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;
+                  })}
+                >
+                  <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 ? "▸" : "▾"}
+                  </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>
+            );
+          })}
+        </div>
+      ) : (
+        <ProjectEmptyState>{t("projectsArtifactsNoMatches")}</ProjectEmptyState>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,150 @@
+import { Link } from "react-router-dom";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { Button } from "@/shared/components/ui/button";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import {
+  ProjectEmptyState,
+  ProjectFilePreviewButton,
+  ProjectSection,
+} from "./project-section";
+import {
+  DEFAULT_PROJECT_ARTIFACT_SORT,
+  formatProjectRelativeTime,
+  sortProjectArtifacts,
+} from "../utils/project-artifact-view.utils";
+import { ProjectRuns } from "./project-runs";
+
+export function ProjectOverview({
+  hasProjectSessions,
+  snapshot,
+  onStartObservationSetup,
+  onStartProjectWork,
+  onOpenFile,
+  shouldOfferObservationSetup,
+}: {
+  hasProjectSessions: boolean;
+  snapshot: ProjectObservationSnapshot;
+  onStartObservationSetup: () => void;
+  onStartProjectWork: () => void;
+  onOpenFile: (path: string, label: string) => void;
+  shouldOfferObservationSetup: boolean;
+}) {
+  const openSignals = snapshot.signals.filter((signal) => signal.status === "open");
+  const recentArtifacts = sortProjectArtifacts(snapshot.artifacts, DEFAULT_PROJECT_ARTIFACT_SORT).slice(0, 5);
+  const recentActivity = [...snapshot.activity]
+    .sort((left, right) => right.at.localeCompare(left.at))
+    .slice(0, 6);
+  return (
+    <div className="grid min-w-0 gap-4 lg:grid-cols-2">
+      {shouldOfferObservationSetup ? (
+        <ProjectSection title={t("projectsObservationSetupTitle")} className="lg:col-span-2">
+          <p className="text-sm text-muted-foreground">
+            {t("projectsObservationSetupDescription")}
+          </p>
+          <button
+            type="button"
+            className="mt-3 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            onClick={onStartObservationSetup}
+          >
+            {t("projectsObservationSetupAction")}
+          </button>
+        </ProjectSection>
+      ) : null}
+      {(snapshot.runs?.length ?? 0) > 0 ? (
+        <ProjectSection title={t("projectsAiActivity")} className="lg:col-span-2">
+          <ProjectRuns limit={5} snapshot={snapshot} />
+        </ProjectSection>
+      ) : null}
+      <ProjectSection title={t("projectsAttention")}>
+        {openSignals.length ? (
+          <div className="space-y-2">
+            {openSignals.map((signal) => (
+              <div key={signal.id} className="rounded-xl bg-muted/45 p-3 text-sm">
+                <p className="font-medium">{signal.message}</p>
+                <p className="mt-1 text-xs text-muted-foreground">{signal.reference.label} · {signal.level}</p>
+              </div>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoAttention")}</ProjectEmptyState>}
+      </ProjectSection>
+      <ProjectSection title={t("projectsWork")}>
+        {snapshot.workItems.length ? (
+          <div className="space-y-2">
+            {snapshot.workItems.slice(0, 5).map((item) => (
+              <div key={item.id} className="rounded-xl bg-muted/45 p-3 text-sm">
+                <p className="font-medium">{item.name}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {item.reference.label} · {t(`projectsStatus_${item.status}`)}
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <>
+            <ProjectEmptyState>
+              {t(
+                shouldOfferObservationSetup
+                  ? "projectsWorkNeedsSetup"
+                  : hasProjectSessions
+                    ? "projectsWorkNoReports"
+                    : "projectsWorkNoSessions",
+              )}
+            </ProjectEmptyState>
+            {!shouldOfferObservationSetup ? (
+              <Button size="sm" variant="outline" onClick={onStartProjectWork}>
+                {t("projectsStartProjectWork")}
+              </Button>
+            ) : null}
+          </>
+        )}
+      </ProjectSection>
+      <ProjectSection title={t("projectsArtifacts")}>
+        {recentArtifacts.length ? (
+          <div className="space-y-2">
+            {recentArtifacts.map((artifact) => (
+              <ProjectFilePreviewButton
+                key={artifact.id}
+                available={artifact.exists}
+                path={artifact.path}
+                label={artifact.path}
+                onOpen={onOpenFile}
+                className="block w-full rounded-xl bg-muted/45 p-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="block truncate font-medium">{artifact.path}</span>
+                <span className="mt-1 block text-xs text-muted-foreground">
+                  {artifact.categoryLabel}
+                  {artifact.fileUpdatedAt ? (
+                    <time dateTime={artifact.fileUpdatedAt} title={formatDateTime(artifact.fileUpdatedAt)}>
+                      {` · ${formatProjectRelativeTime(artifact.fileUpdatedAt)}`}
+                    </time>
+                  ) : null}
+                  {!artifact.exists ? ` · ${t("projectsUnavailable")}` : ""}
+                </span>
+              </ProjectFilePreviewButton>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoArtifacts")}</ProjectEmptyState>}
+      </ProjectSection>
+      <ProjectSection title={t("projectsActivity")}>
+        {recentActivity.length ? (
+          <div className="space-y-3">
+            {recentActivity.map((activity) => (
+              <div key={activity.id} className="text-sm">
+                <p>{activity.message}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {activity.reference.sessionId ? (
+                    <Link className="underline underline-offset-2" to={`/chat/${encodeURIComponent(activity.reference.sessionId)}`}>
+                      {activity.reference.label}
+                    </Link>
+                  ) : activity.reference.label} · <time dateTime={activity.at} title={formatDateTime(activity.at)}>
+                    {formatProjectRelativeTime(activity.at)}
+                  </time>
+                </p>
+              </div>
+            ))}
+          </div>
+        ) : <ProjectEmptyState>{t("projectsNoActivity")}</ProjectEmptyState>}
+      </ProjectSection>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Link } from "react-router-dom";
+import type { ObservedRequest } from "@nextclaw/client-sdk";
+import { Button, buttonVariants } from "@/shared/components/ui/button";
+import { t } from "@/shared/lib/i18n";
+import { canReplyToProjectRequest } from "@/features/projects/presenters/project-home.presenter";
+import type { ProjectRequestDecision } from "@/features/projects/utils/project-request-response.utils";
+import { ProjectSection } from "./project-section";
+
+export function ProjectRequests({
+  requests,
+  pendingRequestId,
+  onReply,
+}: {
+  requests: ObservedRequest[];
+  pendingRequestId: string | null;
+  onReply: (request: ObservedRequest, decision: ProjectRequestDecision) => void;
+}) {
+  if (requests.length === 0) return null;
+  return (
+    <ProjectSection title={t("projectsRequests")}>
+      <div className="space-y-2">
+        {requests.map((request) => {
+          const { id, prompt, reference: { label, sessionId }, reply } = request;
+          const isPending = pendingRequestId === id;
+          return (
+            <div key={id} className="flex flex-wrap items-center gap-2 rounded-xl bg-muted/45 p-3">
+              <div className="min-w-48 flex-1">
+                <p className="text-sm font-medium">{prompt}</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {reply ? t("projectsResponseWaiting") : label}
+                </p>
+              </div>
+              {canReplyToProjectRequest(request) ? (
+                <>
+                  <Button size="sm" disabled={isPending} onClick={() => onReply(request, "confirmed")}>
+                    {t("projectsConfirm")}
+                  </Button>
+                  <Button size="sm" variant="outline" disabled={isPending} onClick={() => onReply(request, "rejected")}>
+                    {t("projectsReject")}
+                  </Button>
+                </>
+              ) : null}
+              {sessionId ? (
+                <Link
+                  className={buttonVariants({ size: "sm", variant: "ghost" })}
+                  to={`/chat/${encodeURIComponent(sessionId)}`}
+                >
+                  {t("projectsOpenSession")}
+                </Link>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </ProjectSection>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { Link } from "react-router-dom";
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { formatDateTime, t } from "@/shared/lib/i18n";
+import { formatProjectRelativeTime } from "@/features/projects/utils/project-artifact-view.utils";
+
+export function ProjectRuns({
+  limit,
+  snapshot,
+}: {
+  limit?: number;
+  snapshot: ProjectObservationSnapshot;
+}) {
+  const availableRuns = snapshot.runs ?? [];
+  const runs = limit === undefined ? availableRuns : availableRuns.slice(0, limit);
+  if (!runs.length) return null;
+
+  return (
+    <div className="space-y-2">
+      {runs.map((run) => {
+        const workItem = run.workItemId
+          ? snapshot.workItems.find((item) => item.id === run.workItemId)
+          : undefined;
+        const workflow = workItem?.workflowId
+          ? snapshot.workflows.find((item) => item.id === workItem.workflowId)
+          : undefined;
+        const stage = workItem?.stageId
+          ? workflow?.stages.find((item) => item.id === workItem.stageId)
+          : undefined;
+        const identity = [run.agentId, run.model].filter(Boolean).join(" · ");
+        return (
+          <Link
+            key={run.sessionId}
+            className="block rounded-xl bg-muted/45 p-3 text-sm transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            to={`/chat/${encodeURIComponent(run.sessionId)}`}
+          >
+            <span className="flex min-w-0 items-center justify-between gap-3">
+              <span className="truncate font-medium">
+                {run.label ?? workItem?.name ?? t("projectsAiRun")}
+              </span>
+              <span className="shrink-0 text-xs text-muted-foreground">
+                {t(`projectsRunState_${run.state}`)}
+              </span>
+            </span>
+            <span className="mt-1 block truncate text-xs text-muted-foreground">
+              {workItem
+                ? `${workItem.name}${stage ? ` · ${stage.label}` : ""}`
+                : t("projectsRunUnreported")}
+            </span>
+            <span className="mt-1 block truncate text-xs text-muted-foreground">
+              {identity ? `${identity} · ` : ""}
+              <time dateTime={run.updatedAt} title={formatDateTime(run.updatedAt)}>
+                {formatProjectRelativeTime(run.updatedAt)}
+              </time>
+            </span>
+          </Link>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/shared/components/ui/card";
+
+export function ProjectSection({
+  title,
+  children,
+  className = "",
+}: {
+  title: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card hover={false} surface="flat" className={className}>
+      <CardHeader className="p-4 pb-3">
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">{children}</CardContent>
+    </Card>
+  );
+}
+
+export function ProjectEmptyState({ children }: { children: ReactNode }) {
+  return <p className="py-5 text-sm text-muted-foreground">{children}</p>;
+}
+
+export function ProjectFilePreviewButton({
+  available,
+  children,
+  className,
+  label,
+  onOpen,
+  path,
+}: {
+  available: boolean;
+  children: ReactNode;
+  className: string;
+  label: string;
+  onOpen: (path: string, label: string) => void;
+  path: string;
+}) {
+  if (!available) {
+    return <div className={className}>{children}</div>;
+  }
+  return (
+    <button
+      type="button"
+      className={className}
+      title={path}
+      onClick={() => onOpen(path, label)}
+    >
+      {children}
+    </button>
+  );
+}

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

@@ -0,0 +1,53 @@
+import type { ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { formatNumber, t } from "@/shared/lib/i18n";
+import { ProjectEmptyState } from "./project-section";
+
+export function ProjectSkills({
+  snapshot,
+  onOpen,
+}: {
+  snapshot: ProjectObservationSnapshot;
+  onOpen: (skill: ProjectObservationSnapshot["skills"][number]) => void;
+}) {
+  return (
+    <section className="min-w-0" aria-label={t("projectsSkills")}>
+      <p className="mb-3 text-sm text-muted-foreground">
+        {formatNumber(snapshot.skills.length)} {t("projectsSkillsCountSuffix")}
+      </p>
+      {snapshot.skills.length ? (
+        <div className="grid min-w-0 gap-3 md:grid-cols-2">
+          {snapshot.skills.map((skill) => (
+            <button
+              type="button"
+              key={skill.ref}
+              className="min-w-0 rounded-xl border border-border/60 p-3 text-left transition-colors enabled:hover:border-border enabled:hover:bg-muted/30 disabled:cursor-not-allowed"
+              disabled={!skill.readable}
+              onClick={() => onOpen(skill)}
+            >
+              <h3 className="text-sm font-medium">{skill.name}</h3>
+              <p
+                className="mt-1 truncate text-xs text-muted-foreground"
+                title={skill.path}
+              >
+                {skill.path}
+              </p>
+              <p
+                className="mt-2 line-clamp-2 text-xs text-muted-foreground"
+                title={skill.description ?? skill.ref}
+              >
+                {skill.description ?? skill.ref}
+              </p>
+              {!skill.readable ? (
+                <p className="mt-2 text-xs text-destructive">
+                  {t("projectsUnavailable")}
+                </p>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ) : (
+        <ProjectEmptyState>{t("projectsNoSkills")}</ProjectEmptyState>
+      )}
+    </section>
+  );
+}