@nextclaw/ui 0.24.1 → 0.24.3

package/src/features/projects/components/work/project-work-items.tsx

@@ -1,21 +1,125 @@
 import { useState } from "react";
-import type { ProjectWorkItemDetail } from "@nextclaw/client-sdk";
-import { LayoutGrid, List, Plus, Settings2 } from "lucide-react";
+import type {
+  ProjectWorkItemListEntry,
+  ProjectWorkState,
+} from "@nextclaw/client-sdk";
+import {
+  CheckCircle2,
+  ChevronDown,
+  ChevronRight,
+  Circle,
+  CircleDashed,
+  CircleX,
+  LayoutGrid,
+  List,
+  Plus,
+  Settings2,
+} from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/shared/components/ui/button";
 import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import {
+  sortProjectWorkStates,
+  sortProjectWorkStatesForList,
   useProjectWork,
   useProjectWorkActions,
+  useProjectWorkEvents,
+  useProjectWorkStates,
 } from "@/features/projects/hooks/use-project-work";
+import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work-state-label.utils";
 import { ProjectWorkStateSettings } from "./project-work-state-settings";
 
+function ProjectWorkStateIcon({
+  startedProgress,
+  state,
+}: {
+  startedProgress: number | null;
+  state: ProjectWorkState;
+}) {
+  if (state.category === "backlog")
+    return (
+      <span
+        aria-hidden="true"
+        data-state-visual="backlog"
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground/65"
+      >
+        <CircleDashed className="h-4 w-4" />
+      </span>
+    );
+  if (state.category === "unstarted")
+    return (
+      <span
+        aria-hidden="true"
+        data-state-visual="unstarted"
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground"
+      >
+        <Circle className="h-4 w-4" strokeWidth={2} />
+      </span>
+    );
+  if (state.category === "completed")
+    return (
+      <span
+        aria-hidden="true"
+        data-state-visual="completed"
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-emerald-600 dark:text-emerald-400"
+      >
+        <CheckCircle2 className="h-4 w-4" strokeWidth={2.25} />
+      </span>
+    );
+  if (state.category === "canceled")
+    return (
+      <span
+        aria-hidden="true"
+        data-state-visual="canceled"
+        className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground/65"
+      >
+        <CircleX className="h-4 w-4" />
+      </span>
+    );
+  const progress = Math.round((startedProgress ?? 0.5) * 100);
+  const tone =
+    progress >= 67
+      ? "text-emerald-600 dark:text-emerald-400"
+      : progress >= 40
+        ? "text-orange-500 dark:text-orange-400"
+        : "text-amber-500 dark:text-amber-400";
+  return (
+    <span
+      aria-hidden="true"
+      data-state-visual="started"
+      className={`inline-flex h-4 w-4 shrink-0 items-center justify-center ${tone}`}
+    >
+      <svg className="h-4 w-4" viewBox="0 0 16 16" fill="none">
+        <circle
+          cx="8"
+          cy="8"
+          r="5.5"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          opacity="0.22"
+        />
+        <circle
+          cx="8"
+          cy="8"
+          r="5.5"
+          pathLength="100"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeDasharray={`${progress} ${100 - progress}`}
+          transform="rotate(-90 8 8)"
+        />
+      </svg>
+    </span>
+  );
+}
+
 function WorkItemButton({
   item,
   onOpen,
 }: {
-  item: ProjectWorkItemDetail;
+  item: ProjectWorkItemListEntry;
   onOpen: () => void;
 }) {
   return (
@@ -26,7 +130,7 @@ function WorkItemButton({
     >
       <span className="block font-medium">{item.title}</span>
       <span className="mt-1 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-        <span>{item.state.name}</span>
+        <span>{getProjectWorkStateLabel(item.state.name)}</span>
         {item.attention !== "none" ? (
           <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-amber-700 dark:text-amber-300">
             {t(`projectsWorkAttention_${item.attention}`)}
@@ -38,6 +142,138 @@ function WorkItemButton({
   );
 }
 
+function ProjectWorkStateGroupBody({
+  hasNextPage,
+  isError,
+  isFetchingNextPage,
+  isLoading,
+  items,
+  onLoadMore,
+  onOpenWorkItem,
+}: {
+  hasNextPage: boolean;
+  isError: boolean;
+  isFetchingNextPage: boolean;
+  isLoading: boolean;
+  items: ProjectWorkItemListEntry[];
+  onLoadMore: () => void;
+  onOpenWorkItem: (workItemId: string) => void;
+}) {
+  if (isLoading)
+    return (
+      <p className="py-3 text-xs text-muted-foreground">
+        {t("projectsLoading")}
+      </p>
+    );
+  if (isError)
+    return (
+      <p className="py-3 text-xs text-destructive">{t("projectsLoadFailed")}</p>
+    );
+  return (
+    <>
+      {items.length ? (
+        items.map((item) => (
+          <WorkItemButton
+            key={item.id}
+            item={item}
+            onOpen={() => onOpenWorkItem(item.id)}
+          />
+        ))
+      ) : (
+        <p className="py-3 text-xs text-muted-foreground">
+          {t("projectsNoData")}
+        </p>
+      )}
+      {hasNextPage ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="w-full"
+          disabled={isFetchingNextPage}
+          onClick={onLoadMore}
+        >
+          {isFetchingNextPage
+            ? t("projectsLoading")
+            : t("projectsWorkLoadMore")}
+        </Button>
+      ) : null}
+    </>
+  );
+}
+
+function ProjectWorkStateGroup({
+  includeDeleted,
+  onOpenWorkItem,
+  state,
+  startedProgress,
+  view,
+}: {
+  includeDeleted: boolean;
+  onOpenWorkItem: (workItemId: string) => void;
+  state: ProjectWorkState;
+  startedProgress: number | null;
+  view: "list" | "board";
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const work = useProjectWork(state.projectId, {
+    stateId: state.id,
+    includeDeleted,
+    limit: 20,
+  });
+  const items = work.data?.pages.flatMap((page) => page.items) ?? [];
+  const total = work.data?.pages[0]?.total;
+  return (
+    <section
+      className={
+        view === "board"
+          ? "flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+          : "min-w-0"
+      }
+      aria-label={getProjectWorkStateLabel(state.name)}
+    >
+      <button
+        type="button"
+        className="flex w-full shrink-0 items-center gap-2 rounded-lg px-1 py-2 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        aria-expanded={!collapsed}
+        onClick={() => setCollapsed((value) => !value)}
+      >
+        {collapsed ? (
+          <ChevronRight className="h-4 w-4 shrink-0" />
+        ) : (
+          <ChevronDown className="h-4 w-4 shrink-0" />
+        )}
+        <ProjectWorkStateIcon state={state} startedProgress={startedProgress} />
+        <span className="min-w-0 truncate text-sm font-semibold">
+          {getProjectWorkStateLabel(state.name)}
+        </span>
+        <span className="ml-0.5 shrink-0 text-xs font-medium tabular-nums text-muted-foreground">
+          {total ?? "…"}
+        </span>
+      </button>
+      {!collapsed ? (
+        <div
+          className={
+            view === "board"
+              ? "min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain px-1 pb-3"
+              : "space-y-2 px-1 pb-3"
+          }
+        >
+          <ProjectWorkStateGroupBody
+            hasNextPage={work.hasNextPage}
+            isError={work.isError}
+            isFetchingNextPage={work.isFetchingNextPage}
+            isLoading={work.isLoading}
+            items={items}
+            onLoadMore={() => void work.fetchNextPage()}
+            onOpenWorkItem={onOpenWorkItem}
+          />
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
 export function ProjectWorkItems({
   onOpenWorkItem,
   projectId,
@@ -49,7 +285,8 @@ export function ProjectWorkItems({
   const [includeDeleted, setIncludeDeleted] = useState(false);
   const [newTitle, setNewTitle] = useState("");
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const work = useProjectWork(projectId, includeDeleted);
+  useProjectWorkEvents(projectId);
+  const states = useProjectWorkStates(projectId);
   const actions = useProjectWorkActions(projectId);
   const create = async () => {
     if (!newTitle.trim()) return;
@@ -67,19 +304,29 @@ export function ProjectWorkItems({
       );
     }
   };
-  if (work.isLoading)
+  if (states.isLoading)
     return (
       <div className="rounded-xl border border-border/60 p-5 text-sm text-muted-foreground">
         {t("projectsLoading")}
       </div>
     );
-  if (work.isError)
+  if (states.isError)
     return (
       <div className="rounded-xl border border-destructive/40 p-5 text-sm text-destructive">
         {t("projectsLoadFailed")}
       </div>
     );
-  const data = work.data!;
+  const sortedStates = sortProjectWorkStates(states.data ?? []);
+  const listStates = sortProjectWorkStatesForList(states.data ?? []);
+  const startedStates = sortedStates.filter(
+    (state) => state.category === "started",
+  );
+  const startedProgressById = new Map(
+    startedStates.map((state, index) => [
+      state.id,
+      (index + 1) / (startedStates.length + 1),
+    ]),
+  );
   return (
     <section aria-label={t("projectsWork")} className="min-w-0 space-y-4">
       <div className="flex flex-wrap items-center gap-2">
@@ -141,58 +388,39 @@ export function ProjectWorkItems({
         />
         {t("projectsWorkShowDeleted")}
       </label>
-      {!data.items.length ? (
-        <div className="rounded-xl border border-dashed border-border/60 p-8 text-center text-sm text-muted-foreground">
-          {t("projectsWorkEmpty")}
-        </div>
-      ) : null}
-      {view === "list" && data.items.length ? (
-        <div className="space-y-2">
-          {data.items.map((item) => (
-            <WorkItemButton
-              key={item.id}
-              item={item}
-              onOpen={() => onOpenWorkItem(item.id)}
+      {view === "list" ? (
+        <div className="space-y-3">
+          {listStates.map((state) => (
+            <ProjectWorkStateGroup
+              key={state.id}
+              state={state}
+              startedProgress={startedProgressById.get(state.id) ?? null}
+              view={view}
+              includeDeleted={includeDeleted}
+              onOpenWorkItem={onOpenWorkItem}
             />
           ))}
         </div>
       ) : null}
-      {view === "board" && data.items.length ? (
-        <div className="grid min-w-0 gap-3 md:grid-cols-2 xl:grid-cols-3">
-          {data.states.map((state) => {
-            const items = data.items.filter(
-              (item) => item.stateId === state.id,
-            );
-            return (
-              <section
-                key={state.id}
-                className="min-w-0 rounded-xl bg-muted/35 p-3"
-              >
-                <div className="mb-3 flex items-center justify-between gap-2">
-                  <h3 className="text-sm font-semibold">{state.name}</h3>
-                  <span className="text-xs text-muted-foreground">
-                    {items.length}
-                  </span>
-                </div>
-                <div className="space-y-2">
-                  {items.map((item) => (
-                    <WorkItemButton
-                      key={item.id}
-                      item={item}
-                      onOpen={() => onOpenWorkItem(item.id)}
-                    />
-                  ))}
-                </div>
-              </section>
-            );
-          })}
+      {view === "board" ? (
+        <div className="grid h-[calc(100dvh-17rem)] min-h-[28rem] max-h-[52rem] min-w-0 auto-cols-[minmax(18rem,1fr)] grid-flow-col items-stretch gap-3 overflow-x-auto overflow-y-hidden pb-2">
+          {sortedStates.map((state) => (
+            <ProjectWorkStateGroup
+              key={state.id}
+              state={state}
+              startedProgress={startedProgressById.get(state.id) ?? null}
+              view={view}
+              includeDeleted={includeDeleted}
+              onOpenWorkItem={onOpenWorkItem}
+            />
+          ))}
         </div>
       ) : null}
       <ProjectWorkStateSettings
         open={settingsOpen}
         onOpenChange={setSettingsOpen}
         projectId={projectId}
-        states={data.states}
+        states={sortedStates}
       />
     </section>
   );

package/src/features/projects/components/work/project-work-state-settings.tsx

@@ -27,6 +27,7 @@ import {
   sortProjectWorkStates,
   useProjectWorkActions,
 } from "@/features/projects/hooks/use-project-work";
+import { getProjectWorkStateLabel } from "@/features/projects/utils/project-work-state-label.utils";
 
 const CATEGORIES: ProjectWorkStateCategory[] = [
   "backlog",
@@ -103,10 +104,13 @@ export function ProjectWorkStateSettings({
               >
                 <Input
                   aria-label={t("projectsWorkStateName")}
-                  defaultValue={state.name}
+                  defaultValue={getProjectWorkStateLabel(state.name)}
                   onBlur={(event) => {
                     const nextName = event.currentTarget.value.trim();
-                    if (nextName && nextName !== state.name)
+                    if (
+                      nextName &&
+                      nextName !== getProjectWorkStateLabel(state.name)
+                    )
                       void run(() =>
                         actions.updateState.mutateAsync({
                           stateId: state.id,
@@ -252,7 +256,7 @@ export function ProjectWorkStateSettings({
                   .filter((state) => state.id !== deleting?.id)
                   .map((state) => (
                     <SelectItem key={state.id} value={state.id}>
-                      {state.name}
+                      {getProjectWorkStateLabel(state.name)}
                     </SelectItem>
                   ))}
               </SelectContent>

package/src/features/projects/hooks/use-project-materials.test.tsx

@@ -0,0 +1,65 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import type { PropsWithChildren } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  useProjectAgreement,
+  useProjectSkills,
+} from "@/features/projects/hooks/use-project-materials";
+import { nextclawClient } from "@/shared/lib/api";
+
+function createWrapper() {
+  const client = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return function Wrapper({ children }: PropsWithChildren) {
+    return (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+  };
+}
+
+describe("project material queries", () => {
+  beforeEach(() => vi.restoreAllMocks());
+
+  it("loads agreement and skills independently", async () => {
+    const getAgreement = vi
+      .spyOn(nextclawClient.projects, "getAgreement")
+      .mockResolvedValue({ path: "AGENTS.md", available: true });
+    const listProjectSkills = vi
+      .spyOn(nextclawClient.projects, "listProjectSkills")
+      .mockResolvedValue([
+        {
+          ref: "project:alpha",
+          name: "alpha",
+          path: ".agents/skills/alpha/SKILL.md",
+        },
+      ]);
+
+    const agreement = renderHook(() => useProjectAgreement("project-1"), {
+      wrapper: createWrapper(),
+    });
+    const skills = renderHook(() => useProjectSkills("project-1"), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(agreement.result.current.isSuccess).toBe(true));
+    await waitFor(() => expect(skills.result.current.isSuccess).toBe(true));
+    expect(getAgreement).toHaveBeenCalledWith("project-1");
+    expect(listProjectSkills).toHaveBeenCalledWith("project-1");
+  });
+
+  it("does not query without a selected project", () => {
+    const getAgreement = vi.spyOn(nextclawClient.projects, "getAgreement");
+    const listProjectSkills = vi.spyOn(
+      nextclawClient.projects,
+      "listProjectSkills",
+    );
+
+    renderHook(() => useProjectAgreement(null), { wrapper: createWrapper() });
+    renderHook(() => useProjectSkills(null), { wrapper: createWrapper() });
+
+    expect(getAgreement).not.toHaveBeenCalled();
+    expect(listProjectSkills).not.toHaveBeenCalled();
+  });
+});

package/src/features/projects/hooks/use-project-materials.ts

@@ -0,0 +1,24 @@
+import { useQuery } from "@tanstack/react-query";
+import { nextclawClient } from "@/shared/lib/api";
+
+export const projectAgreementQueryKey = (projectId: string) =>
+  ["project-agreement", projectId] as const;
+export const projectSkillsQueryKey = (projectId: string) =>
+  ["project-skills", projectId] as const;
+
+export function useProjectAgreement(projectId: string | null) {
+  return useQuery({
+    queryKey: projectAgreementQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () => await nextclawClient.projects.getAgreement(projectId!),
+  });
+}
+
+export function useProjectSkills(projectId: string | null) {
+  return useQuery({
+    queryKey: projectSkillsQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listProjectSkills(projectId!),
+  });
+}