@nextclaw/ui 0.23.0 → 0.24.0-beta.1

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,81 @@
+import { t } from "@/shared/lib/i18n";
+import {
+  useProjectWork,
+  useProjectWorkSummary,
+} from "@/features/projects/hooks/use-project-work";
+
+export function ProjectOverview({
+  projectId,
+  onOpenWorkItem,
+}: {
+  projectId: string;
+  onOpenWorkItem: (workItemId: string) => void;
+}) {
+  const summary = useProjectWorkSummary(projectId);
+  const work = useProjectWork(projectId);
+  if (summary.isLoading || work.isLoading)
+    return (
+      <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
+        {t("projectsLoading")}
+      </div>
+    );
+  if (summary.isError || work.isError)
+    return (
+      <div className="rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
+        {t("projectsLoadFailed")}
+      </div>
+    );
+  const recent = work.data!.items.slice(0, 5);
+  return (
+    <div className="space-y-5">
+      <section
+        className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
+        aria-label={t("projectsWorkSummary")}
+      >
+        {(
+          [
+            ["projectsWorkTotal", summary.data!.total],
+            ["projectsWorkActive", summary.data!.active],
+            ["projectsWorkNeedsAttention", summary.data!.attention],
+            ["projectsWorkCompleted", summary.data!.completed],
+          ] as const
+        ).map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-xl border border-border/60 bg-card p-4"
+          >
+            <div className="text-2xl font-semibold">{value}</div>
+            <div className="mt-1 text-xs text-muted-foreground">{t(label)}</div>
+          </div>
+        ))}
+      </section>
+      <section>
+        <h2 className="mb-3 text-sm font-semibold">
+          {t("projectsWorkRecentlyUpdated")}
+        </h2>
+        <div className="space-y-2">
+          {recent.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className="flex w-full items-center justify-between gap-3 rounded-xl border border-border/60 bg-card px-4 py-3 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+              onClick={() => onOpenWorkItem(item.id)}
+            >
+              <span className="min-w-0 truncate text-sm font-medium">
+                {item.title}
+              </span>
+              <span className="shrink-0 text-xs text-muted-foreground">
+                {item.state.name}
+              </span>
+            </button>
+          ))}
+          {!recent.length ? (
+            <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
+              {t("projectsWorkEmpty")}
+            </div>
+          ) : null}
+        </div>
+      </section>
+    </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>
+  );
+}

package/src/features/projects/components/work/project-work-item-drawer.test.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ProjectWorkItemDrawer } from "./project-work-item-drawer";
+
+const mocks = vi.hoisted(() => ({
+  updateItem: vi.fn(),
+  useProjectWorkItem: vi.fn(),
+}));
+
+vi.mock("@/features/projects/hooks/use-project-work", () => ({
+  useProjectWork: () => ({
+    data: { states: [{ id: "planned", name: "Planned" }] },
+  }),
+  useProjectWorkItem: mocks.useProjectWorkItem,
+  useProjectWorkActivity: () => ({ data: { activities: [] } }),
+  useProjectWorkActions: () => ({
+    updateItem: { mutateAsync: mocks.updateItem, isPending: false },
+    deleteItem: { mutateAsync: vi.fn() },
+    restoreItem: { mutateAsync: vi.fn() },
+    linkArtifact: { mutateAsync: vi.fn(), isPending: false },
+    unlinkArtifact: { mutateAsync: vi.fn() },
+  }),
+}));
+
+describe("ProjectWorkItemDrawer", () => {
+  it("renders details in a right-side dialog and opens linked artifacts", () => {
+    mocks.useProjectWorkItem.mockReturnValue({
+      isLoading: false,
+      isError: false,
+      data: {
+        id: "work-1",
+        projectId: "project-1",
+        title: "Drawer details",
+        description: "Durable details",
+        stateId: "planned",
+        state: { id: "planned", name: "Planned" },
+        attention: "none",
+        version: 1,
+        deletedAt: null,
+        artifacts: [
+          { id: "artifact-1", path: "docs/design.md", label: "Design" },
+        ],
+      },
+    });
+    const onOpenArtifact = vi.fn();
+
+    render(
+      <ProjectWorkItemDrawer
+        projectId="project-1"
+        projectRoot="/tmp/project"
+        workItemId="work-1"
+        onOpenChange={vi.fn()}
+        onOpenArtifact={onOpenArtifact}
+      />,
+    );
+
+    expect(screen.getByRole("dialog")).toBeTruthy();
+    expect(screen.getByDisplayValue("Drawer details")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: /Design/ }));
+    expect(onOpenArtifact).toHaveBeenCalledWith(
+      "/tmp/project/docs/design.md",
+      "Design",
+    );
+  });
+});