@nextclaw/ui 0.24.0-beta.0 → 0.24.0-beta.1

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

@@ -0,0 +1,285 @@
+import { useState } from "react";
+import type {
+  ProjectWorkState,
+  ProjectWorkStateCategory,
+} from "@nextclaw/client-sdk";
+import { ChevronDown, ChevronUp, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/components/ui/dialog";
+import { Input } from "@/shared/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/components/ui/select";
+import { t } from "@/shared/lib/i18n";
+import {
+  sortProjectWorkStates,
+  useProjectWorkActions,
+} from "@/features/projects/hooks/use-project-work";
+
+const CATEGORIES: ProjectWorkStateCategory[] = [
+  "backlog",
+  "unstarted",
+  "started",
+  "completed",
+  "canceled",
+];
+
+export function ProjectWorkStateSettings({
+  open,
+  onOpenChange,
+  projectId,
+  states,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  states: ProjectWorkState[];
+}) {
+  const actions = useProjectWorkActions(projectId);
+  const sorted = sortProjectWorkStates(states);
+  const [name, setName] = useState("");
+  const [category, setCategory] =
+    useState<ProjectWorkStateCategory>("unstarted");
+  const [deleting, setDeleting] = useState<ProjectWorkState | null>(null);
+  const [migrateToStateId, setMigrateToStateId] = useState<string>("");
+  const run = async (action: () => Promise<unknown>) => {
+    try {
+      await action();
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("projectsWorkActionFailed"),
+      );
+    }
+  };
+  const create = async () => {
+    if (!name.trim()) return;
+    await run(async () => {
+      await actions.createState.mutateAsync({ name: name.trim(), category });
+      setName("");
+    });
+  };
+  const move = async (index: number, direction: -1 | 1) => {
+    const current = sorted[index];
+    const target = sorted[index + direction];
+    if (!current || !target) return;
+    await run(async () => {
+      await actions.updateState.mutateAsync({
+        stateId: current.id,
+        patch: { position: target.position },
+      });
+      await actions.updateState.mutateAsync({
+        stateId: target.id,
+        patch: { position: current.position },
+      });
+    });
+  };
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{t("projectsWorkStateSettings")}</DialogTitle>
+            <DialogDescription>
+              {t("projectsWorkStateSettingsDescription")}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            {sorted.map((state, index) => (
+              <div
+                key={state.id}
+                className="grid gap-2 rounded-xl border border-border/60 p-3 sm:grid-cols-[1fr_11rem_auto]"
+              >
+                <Input
+                  aria-label={t("projectsWorkStateName")}
+                  defaultValue={state.name}
+                  onBlur={(event) => {
+                    const nextName = event.currentTarget.value.trim();
+                    if (nextName && nextName !== state.name)
+                      void run(() =>
+                        actions.updateState.mutateAsync({
+                          stateId: state.id,
+                          patch: { name: nextName },
+                        }),
+                      );
+                  }}
+                />
+                <Select
+                  value={state.category}
+                  onValueChange={(value) =>
+                    void run(() =>
+                      actions.updateState.mutateAsync({
+                        stateId: state.id,
+                        patch: { category: value as ProjectWorkStateCategory },
+                      }),
+                    )
+                  }
+                >
+                  <SelectTrigger aria-label={t("projectsWorkStateCategory")}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CATEGORIES.map((value) => (
+                      <SelectItem key={value} value={value}>
+                        {t(`projectsWorkCategory_${value}`)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <div className="flex items-center justify-end gap-1">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label={t("projectsMoveUp")}
+                    disabled={index === 0}
+                    onClick={() => void move(index, -1)}
+                  >
+                    <ChevronUp className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label={t("projectsMoveDown")}
+                    disabled={index === sorted.length - 1}
+                    onClick={() => void move(index, 1)}
+                  >
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label={t("projectsDeleteState")}
+                    disabled={sorted.length <= 1}
+                    onClick={() => {
+                      setDeleting(state);
+                      setMigrateToStateId("");
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+                <label className="flex items-center gap-2 text-xs text-muted-foreground sm:col-span-3">
+                  <input
+                    type="radio"
+                    name="default-state"
+                    checked={state.isDefault}
+                    onChange={() =>
+                      void run(() =>
+                        actions.updateState.mutateAsync({
+                          stateId: state.id,
+                          patch: { isDefault: true },
+                        }),
+                      )
+                    }
+                  />
+                  {t("projectsWorkDefaultState")}
+                </label>
+              </div>
+            ))}
+          </div>
+          <div className="grid gap-2 border-t border-border/60 pt-4 sm:grid-cols-[1fr_11rem_auto]">
+            <Input
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t("projectsWorkNewState")}
+            />
+            <Select
+              value={category}
+              onValueChange={(value) =>
+                setCategory(value as ProjectWorkStateCategory)
+              }
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CATEGORIES.map((value) => (
+                  <SelectItem key={value} value={value}>
+                    {t(`projectsWorkCategory_${value}`)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              onClick={() => void create()}
+              disabled={!name.trim() || actions.createState.isPending}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              {t("projectsAdd")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+      <Dialog
+        open={Boolean(deleting)}
+        onOpenChange={(next) => {
+          if (!next) setDeleting(null);
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("projectsDeleteState")}</DialogTitle>
+            <DialogDescription>
+              {t("projectsDeleteStateDescription")}
+            </DialogDescription>
+          </DialogHeader>
+          <div>
+            <p className="mb-2 text-xs text-muted-foreground">
+              {t("projectsWorkStateMigration")}
+            </p>
+            <Select
+              value={migrateToStateId}
+              onValueChange={setMigrateToStateId}
+            >
+              <SelectTrigger>
+                <SelectValue
+                  placeholder={t("projectsWorkStateMigrationOptional")}
+                />
+              </SelectTrigger>
+              <SelectContent>
+                {sorted
+                  .filter((state) => state.id !== deleting?.id)
+                  .map((state) => (
+                    <SelectItem key={state.id} value={state.id}>
+                      {state.name}
+                    </SelectItem>
+                  ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleting(null)}>
+              {t("cancel")}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                if (deleting)
+                  void run(async () => {
+                    await actions.deleteState.mutateAsync({
+                      stateId: deleting.id,
+                      migrateToStateId: migrateToStateId || null,
+                    });
+                    setDeleting(null);
+                  });
+              }}
+            >
+              {t("projectsDelete")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

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

@@ -1,13 +1,14 @@
 import { useEffect } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { NcpEventType, type NcpEndpointEvent } from "@nextclaw/ncp";
-import { eventKeys, type ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import {
+  eventKeys,
+  type ProjectObservationSnapshot,
+} from "@nextclaw/client-sdk";
 import { nextclawClient } from "@/shared/lib/api";
 
-export const projectObservationQueryKey = (projectId: string) => [
-  "project-observation",
-  projectId,
-] as const;
+export const projectObservationQueryKey = (projectId: string) =>
+  ["project-observation", projectId] as const;
 
 const REFRESHING_NCP_EVENTS = new Set<NcpEventType>([
   NcpEventType.MessageTextEnd,
@@ -21,22 +22,35 @@ const REFRESHING_NCP_EVENTS = new Set<NcpEventType>([
 ]);
 
 const readNcpEventSessionId = (event: NcpEndpointEvent): string | null => {
-  if (!("payload" in event) || !event.payload || typeof event.payload !== "object" || !("sessionId" in event.payload)) {
+  if (
+    !("payload" in event) ||
+    !event.payload ||
+    typeof event.payload !== "object" ||
+    !("sessionId" in event.payload)
+  ) {
     return null;
   }
   const { sessionId } = event.payload;
-  return typeof sessionId === "string" && sessionId.trim() ? sessionId.trim() : null;
+  return typeof sessionId === "string" && sessionId.trim()
+    ? sessionId.trim()
+    : null;
 };
 
-const readProjectRoot = (metadata: Record<string, unknown> | undefined): string | null => {
+const readProjectRoot = (
+  metadata: Record<string, unknown> | undefined,
+): string | null => {
   const value = metadata?.project_root ?? metadata?.projectRoot;
   return typeof value === "string" && value.trim() ? value.trim() : null;
 };
 
-export function useProjectObservation(projectId: string | null, projectRoot: string | null) {
+export function useProjectObservation(
+  projectId: string | null,
+  projectRoot: string | null,
+  enabled = true,
+) {
   const queryClient = useQueryClient();
   useEffect(() => {
-    if (!projectId || !projectRoot) return;
+    if (!enabled || !projectId || !projectRoot) return;
     const queryKey = projectObservationQueryKey(projectId);
     let refreshTimer: ReturnType<typeof setTimeout> | null = null;
     const scheduleRefresh = () => {
@@ -47,11 +61,16 @@ export function useProjectObservation(projectId: string | null, projectRoot: str
       }, 100);
     };
     const hasObservedSession = (sessionId: string): boolean => {
-      const snapshot = queryClient.getQueryData<ProjectObservationSnapshot>(queryKey);
+      const snapshot =
+        queryClient.getQueryData<ProjectObservationSnapshot>(queryKey);
       return Boolean(
-        snapshot?.runs?.some((run) => run.sessionId === sessionId)
-        || snapshot?.workItems.some((item) => item.reference.sessionId === sessionId)
-        || snapshot?.activity.some((activity) => activity.reference.sessionId === sessionId),
+        snapshot?.runs?.some((run) => run.sessionId === sessionId) ||
+        snapshot?.workItems.some(
+          (item) => item.reference.sessionId === sessionId,
+        ) ||
+        snapshot?.activity.some(
+          (activity) => activity.reference.sessionId === sessionId,
+        ),
       );
     };
     const unsubscribers = [
@@ -60,26 +79,37 @@ export function useProjectObservation(projectId: string | null, projectRoot: str
         const sessionId = readNcpEventSessionId(event);
         if (sessionId && hasObservedSession(sessionId)) scheduleRefresh();
       }),
-      nextclawClient.eventBus.on(eventKeys.sessionRunStatus, ({ sessionKey }) => {
-        if (hasObservedSession(sessionKey)) scheduleRefresh();
-      }),
-      nextclawClient.eventBus.on(eventKeys.sessionSummaryUpsert, ({ summary }) => {
-        if (readProjectRoot(summary.metadata) === projectRoot) scheduleRefresh();
-      }),
-      nextclawClient.eventBus.on(eventKeys.sessionSummaryDelete, ({ sessionKey }) => {
-        if (hasObservedSession(sessionKey)) scheduleRefresh();
-      }),
+      nextclawClient.eventBus.on(
+        eventKeys.sessionRunStatus,
+        ({ sessionKey }) => {
+          if (hasObservedSession(sessionKey)) scheduleRefresh();
+        },
+      ),
+      nextclawClient.eventBus.on(
+        eventKeys.sessionSummaryUpsert,
+        ({ summary }) => {
+          if (readProjectRoot(summary.metadata) === projectRoot)
+            scheduleRefresh();
+        },
+      ),
+      nextclawClient.eventBus.on(
+        eventKeys.sessionSummaryDelete,
+        ({ sessionKey }) => {
+          if (hasObservedSession(sessionKey)) scheduleRefresh();
+        },
+      ),
     ];
     return () => {
       if (refreshTimer) clearTimeout(refreshTimer);
       for (const unsubscribe of unsubscribers) unsubscribe();
     };
-  }, [projectId, projectRoot, queryClient]);
+  }, [enabled, projectId, projectRoot, queryClient]);
 
   return useQuery({
     queryKey: projectObservationQueryKey(projectId ?? ""),
-    enabled: Boolean(projectId),
+    enabled: enabled && Boolean(projectId),
     staleTime: 5_000,
-    queryFn: async () => await nextclawClient.projects.getObservation(projectId!),
+    queryFn: async () =>
+      await nextclawClient.projects.getObservation(projectId!),
   });
 }

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

@@ -0,0 +1,58 @@
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useProjectWork } from "./use-project-work";
+
+const mocks = vi.hoisted(() => ({
+  handler: null as
+    | null
+    | ((event: { projectId: string; workItemId?: string }) => void),
+  listWork: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/api", () => ({
+  nextclawClient: {
+    projects: { listWork: mocks.listWork },
+    eventBus: {
+      on: (
+        _key: unknown,
+        handler: (event: { projectId: string; workItemId?: string }) => void,
+      ) => {
+        mocks.handler = handler;
+        return () => {
+          mocks.handler = null;
+        };
+      },
+    },
+  },
+}));
+
+describe("useProjectWork", () => {
+  beforeEach(() => {
+    mocks.listWork.mockReset();
+    mocks.listWork.mockResolvedValue({ items: [], states: [], total: 0 });
+  });
+
+  it("refreshes the project query from committed work events only for the matching project", async () => {
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={client}>{children}</QueryClientProvider>
+    );
+    const { unmount } = renderHook(() => useProjectWork("project-1"), {
+      wrapper,
+    });
+    await waitFor(() => expect(mocks.listWork).toHaveBeenCalledTimes(1));
+
+    mocks.handler?.({ projectId: "project-2" });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(mocks.listWork).toHaveBeenCalledTimes(1);
+
+    mocks.handler?.({ projectId: "project-1", workItemId: "work-1" });
+    await waitFor(() => expect(mocks.listWork).toHaveBeenCalledTimes(2));
+    unmount();
+    expect(mocks.handler).toBeNull();
+  });
+});

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

@@ -0,0 +1,215 @@
+import { useEffect } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  CreateProjectWorkItemInput,
+  CreateProjectWorkStateInput,
+  ProjectWorkState,
+  UpdateProjectWorkItemInput,
+  UpdateProjectWorkStateInput,
+} from "@nextclaw/client-sdk";
+import { eventKeys } from "@nextclaw/client-sdk";
+import { nextclawClient } from "@/shared/lib/api";
+
+export const projectWorkQueryKey = (projectId: string) =>
+  ["project-work", projectId] as const;
+export const projectWorkSummaryQueryKey = (projectId: string) =>
+  ["project-work-summary", projectId] as const;
+export const projectWorkItemQueryKey = (
+  projectId: string,
+  workItemId: string,
+) => ["project-work-item", projectId, workItemId] as const;
+export const projectWorkActivityQueryKey = (
+  projectId: string,
+  workItemId: string,
+) => ["project-work-activity", projectId, workItemId] as const;
+
+export function useProjectWork(
+  projectId: string | null,
+  includeDeleted = false,
+) {
+  useProjectWorkEvents(projectId);
+  return useQuery({
+    queryKey: [...projectWorkQueryKey(projectId ?? ""), includeDeleted],
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWork(projectId!, includeDeleted),
+  });
+}
+
+export function useProjectWorkSummary(projectId: string | null) {
+  useProjectWorkEvents(projectId);
+  return useQuery({
+    queryKey: projectWorkSummaryQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.getWorkSummary(projectId!),
+  });
+}
+
+export function useProjectWorkItem(
+  projectId: string | null,
+  workItemId: string | null,
+) {
+  return useQuery({
+    queryKey: projectWorkItemQueryKey(projectId ?? "", workItemId ?? ""),
+    enabled: Boolean(projectId && workItemId),
+    queryFn: async () =>
+      await nextclawClient.projects.getWorkItem(projectId!, workItemId!),
+  });
+}
+
+export function useProjectWorkActivity(
+  projectId: string | null,
+  workItemId: string | null,
+) {
+  return useQuery({
+    queryKey: projectWorkActivityQueryKey(projectId ?? "", workItemId ?? ""),
+    enabled: Boolean(projectId && workItemId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWorkItemActivities(
+        projectId!,
+        workItemId!,
+        { limit: 100 },
+      ),
+  });
+}
+
+export function useProjectWorkActions(projectId: string) {
+  const queryClient = useQueryClient();
+  const refresh = async (workItemId?: string) => {
+    await Promise.all([
+      queryClient.invalidateQueries({
+        queryKey: projectWorkQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkSummaryQueryKey(projectId),
+      }),
+      ...(workItemId
+        ? [
+            queryClient.invalidateQueries({
+              queryKey: projectWorkItemQueryKey(projectId, workItemId),
+            }),
+            queryClient.invalidateQueries({
+              queryKey: projectWorkActivityQueryKey(projectId, workItemId),
+            }),
+          ]
+        : []),
+    ]);
+  };
+  return {
+    createItem: useMutation({
+      mutationFn: async (input: CreateProjectWorkItemInput) =>
+        await nextclawClient.projects.createWorkItem(projectId, input),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    updateItem: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        patch: UpdateProjectWorkItemInput;
+      }) =>
+        await nextclawClient.projects.updateWorkItem(
+          projectId,
+          input.workItemId,
+          input.patch,
+        ),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    deleteItem: useMutation({
+      mutationFn: async (workItemId: string) =>
+        await nextclawClient.projects.deleteWorkItem(projectId, workItemId),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    restoreItem: useMutation({
+      mutationFn: async (workItemId: string) =>
+        await nextclawClient.projects.restoreWorkItem(projectId, workItemId),
+      onSuccess: async (item) => await refresh(item.id),
+    }),
+    linkArtifact: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        path: string;
+        label?: string;
+      }) =>
+        await nextclawClient.projects.linkWorkItemArtifact(
+          projectId,
+          input.workItemId,
+          { path: input.path, ...(input.label ? { label: input.label } : {}) },
+        ),
+      onSuccess: async (_link, input) => await refresh(input.workItemId),
+    }),
+    unlinkArtifact: useMutation({
+      mutationFn: async (input: {
+        workItemId: string;
+        artifactLinkId: string;
+      }) =>
+        await nextclawClient.projects.unlinkWorkItemArtifact(
+          projectId,
+          input.workItemId,
+          input.artifactLinkId,
+        ),
+      onSuccess: async (_result, input) => await refresh(input.workItemId),
+    }),
+    createState: useMutation({
+      mutationFn: async (input: CreateProjectWorkStateInput) =>
+        await nextclawClient.projects.createWorkState(projectId, input),
+      onSuccess: async () => await refresh(),
+    }),
+    updateState: useMutation({
+      mutationFn: async (input: {
+        stateId: string;
+        patch: UpdateProjectWorkStateInput;
+      }) =>
+        await nextclawClient.projects.updateWorkState(
+          projectId,
+          input.stateId,
+          input.patch,
+        ),
+      onSuccess: async () => await refresh(),
+    }),
+    deleteState: useMutation({
+      mutationFn: async (input: {
+        stateId: string;
+        migrateToStateId?: string | null;
+      }) =>
+        await nextclawClient.projects.deleteWorkState(
+          projectId,
+          input.stateId,
+          input.migrateToStateId,
+        ),
+      onSuccess: async () => await refresh(),
+    }),
+  };
+}
+
+function useProjectWorkEvents(projectId: string | null): void {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!projectId) return;
+    return nextclawClient.eventBus.on(eventKeys.projectWorkChanged, (event) => {
+      if (event.projectId !== projectId) return;
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkQueryKey(projectId),
+      });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkSummaryQueryKey(projectId),
+      });
+      if (event.workItemId) {
+        void queryClient.invalidateQueries({
+          queryKey: projectWorkItemQueryKey(projectId, event.workItemId),
+        });
+        void queryClient.invalidateQueries({
+          queryKey: projectWorkActivityQueryKey(projectId, event.workItemId),
+        });
+      }
+    });
+  }, [projectId, queryClient]);
+}
+
+export function sortProjectWorkStates(
+  states: ProjectWorkState[],
+): ProjectWorkState[] {
+  return [...states].sort(
+    (left, right) =>
+      left.position - right.position || left.name.localeCompare(right.name),
+  );
+}