@nextclaw/ui 0.23.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.test.tsx

@@ -0,0 +1,93 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { NcpEventType } from "@nextclaw/ncp";
+import { eventKeys, type ProjectObservationSnapshot } from "@nextclaw/client-sdk";
+import { EventBus } from "@nextclaw/shared";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { nextclawClient } from "@/shared/lib/api";
+import { useProjectObservation } from "./use-project-observation";
+
+const mocks = vi.hoisted(() => ({ getObservation: vi.fn() }));
+
+vi.mock("@/shared/lib/api", () => ({
+  nextclawClient: {
+    eventBus: new EventBus(),
+    projects: { getObservation: mocks.getObservation },
+  },
+}));
+
+const observedAt = "2026-08-31T00:00:00.000Z";
+const snapshot: ProjectObservationSnapshot = {
+  asOf: observedAt,
+  project: { name: "Demo", rootPath: "/tmp/demo", context: [] },
+  sources: [],
+  workflows: [],
+  runs: [{
+    sessionId: "session-1",
+    state: "running",
+    updatedAt: observedAt,
+    reference: {
+      kind: "system-record",
+      label: "Session run",
+      observedAt,
+      sessionId: "session-1",
+    },
+  }],
+  workItems: [],
+  artifactCategories: [],
+  artifacts: [],
+  signals: [],
+  requests: [],
+  activity: [],
+  skills: [],
+  diagnostics: [],
+  dataQuality: "complete",
+};
+
+afterEach(() => {
+  vi.useRealTimers();
+  mocks.getObservation.mockReset();
+});
+
+describe("useProjectObservation", () => {
+  it("refreshes only for the active project's session lifecycle", async () => {
+    mocks.getObservation.mockResolvedValue(snapshot);
+    const queryClient = new QueryClient({
+      defaultOptions: { queries: { retry: false } },
+    });
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+    const { result } = renderHook(
+      () => useProjectObservation("project-1", "/tmp/demo"),
+      { wrapper },
+    );
+    await waitFor(() => expect(result.current.data).toEqual(snapshot));
+
+    act(() => {
+      nextclawClient.eventBus.emit(eventKeys.sessionSummaryUpsert, {
+        summary: {
+          sessionId: "other-session",
+          messageCount: 0,
+          updatedAt: observedAt,
+          metadata: { project_root: "/tmp/other" },
+        },
+      });
+    });
+    await new Promise((resolve) => setTimeout(resolve, 150));
+    expect(mocks.getObservation).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      nextclawClient.eventBus.emit(eventKeys.ncpEvent, {
+        type: NcpEventType.MessageTextDelta,
+        payload: {
+          sessionId: "session-1",
+          messageId: "assistant-1",
+          delta: '[nextclaw.project/v1 id=wi_7km4q2x9dn name="Live work" stage=exploration]',
+        },
+      });
+    });
+    await waitFor(() => expect(mocks.getObservation).toHaveBeenCalledTimes(2));
+  });
+});

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

@@ -0,0 +1,115 @@
+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 { nextclawClient } from "@/shared/lib/api";
+
+export const projectObservationQueryKey = (projectId: string) =>
+  ["project-observation", projectId] as const;
+
+const REFRESHING_NCP_EVENTS = new Set<NcpEventType>([
+  NcpEventType.MessageTextEnd,
+  NcpEventType.MessageTextDelta,
+  NcpEventType.MessageCompleted,
+  NcpEventType.MessageFailed,
+  NcpEventType.MessageAbort,
+  NcpEventType.RunStarted,
+  NcpEventType.RunFinished,
+  NcpEventType.RunError,
+]);
+
+const readNcpEventSessionId = (event: NcpEndpointEvent): string | null => {
+  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;
+};
+
+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,
+  enabled = true,
+) {
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    if (!enabled || !projectId || !projectRoot) return;
+    const queryKey = projectObservationQueryKey(projectId);
+    let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+    const scheduleRefresh = () => {
+      if (refreshTimer) return;
+      refreshTimer = setTimeout(() => {
+        refreshTimer = null;
+        void queryClient.invalidateQueries({ queryKey, exact: true });
+      }, 100);
+    };
+    const hasObservedSession = (sessionId: string): boolean => {
+      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,
+        ),
+      );
+    };
+    const unsubscribers = [
+      nextclawClient.eventBus.on(eventKeys.ncpEvent, (event) => {
+        if (!REFRESHING_NCP_EVENTS.has(event.type)) return;
+        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();
+        },
+      ),
+    ];
+    return () => {
+      if (refreshTimer) clearTimeout(refreshTimer);
+      for (const unsubscribe of unsubscribers) unsubscribe();
+    };
+  }, [enabled, projectId, projectRoot, queryClient]);
+
+  return useQuery({
+    queryKey: projectObservationQueryKey(projectId ?? ""),
+    enabled: enabled && Boolean(projectId),
+    staleTime: 5_000,
+    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();
+  });
+});