@nextclaw/ui 0.24.0 → 0.24.2

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

@@ -1,9 +1,15 @@
 import { useEffect } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import type {
   CreateProjectWorkItemInput,
   CreateProjectWorkStateInput,
   ProjectWorkState,
+  ProjectWorkListInput,
   UpdateProjectWorkItemInput,
   UpdateProjectWorkStateInput,
 } from "@nextclaw/client-sdk";
@@ -14,6 +20,10 @@ export const projectWorkQueryKey = (projectId: string) =>
   ["project-work", projectId] as const;
 export const projectWorkSummaryQueryKey = (projectId: string) =>
   ["project-work-summary", projectId] as const;
+export const projectWorkStatesQueryKey = (projectId: string) =>
+  ["project-work-states", projectId] as const;
+export const projectWorkArtifactsQueryKey = (projectId: string) =>
+  ["project-work-artifacts", projectId] as const;
 export const projectWorkItemQueryKey = (
   projectId: string,
   workItemId: string,
@@ -25,19 +35,22 @@ export const projectWorkActivityQueryKey = (
 
 export function useProjectWork(
   projectId: string | null,
-  includeDeleted = false,
+  input: Omit<ProjectWorkListInput, "cursor"> = {},
 ) {
-  useProjectWorkEvents(projectId);
-  return useQuery({
-    queryKey: [...projectWorkQueryKey(projectId ?? ""), includeDeleted],
+  return useInfiniteQuery({
+    queryKey: [...projectWorkQueryKey(projectId ?? ""), input],
     enabled: Boolean(projectId),
-    queryFn: async () =>
-      await nextclawClient.projects.listWork(projectId!, includeDeleted),
+    initialPageParam: null as string | null,
+    queryFn: async ({ pageParam }) =>
+      await nextclawClient.projects.listWork(projectId!, {
+        ...input,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      }),
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
   });
 }
 
 export function useProjectWorkSummary(projectId: string | null) {
-  useProjectWorkEvents(projectId);
   return useQuery({
     queryKey: projectWorkSummaryQueryKey(projectId ?? ""),
     enabled: Boolean(projectId),
@@ -46,6 +59,26 @@ export function useProjectWorkSummary(projectId: string | null) {
   });
 }
 
+export function useProjectWorkStates(projectId: string | null) {
+  return useQuery({
+    queryKey: projectWorkStatesQueryKey(projectId ?? ""),
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listWorkStates(projectId!),
+  });
+}
+
+export function useProjectRecentArtifacts(projectId: string | null, limit = 5) {
+  return useQuery({
+    queryKey: [...projectWorkArtifactsQueryKey(projectId ?? ""), limit],
+    enabled: Boolean(projectId),
+    queryFn: async () =>
+      await nextclawClient.projects.listRecentWorkArtifacts(projectId!, {
+        limit,
+      }),
+  });
+}
+
 export function useProjectWorkItem(
   projectId: string | null,
   workItemId: string | null,
@@ -84,6 +117,12 @@ export function useProjectWorkActions(projectId: string) {
       queryClient.invalidateQueries({
         queryKey: projectWorkSummaryQueryKey(projectId),
       }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkStatesQueryKey(projectId),
+      }),
+      queryClient.invalidateQueries({
+        queryKey: projectWorkArtifactsQueryKey(projectId),
+      }),
       ...(workItemId
         ? [
             queryClient.invalidateQueries({
@@ -181,7 +220,7 @@ export function useProjectWorkActions(projectId: string) {
   };
 }
 
-function useProjectWorkEvents(projectId: string | null): void {
+export function useProjectWorkEvents(projectId: string | null): void {
   const queryClient = useQueryClient();
   useEffect(() => {
     if (!projectId) return;
@@ -193,6 +232,12 @@ function useProjectWorkEvents(projectId: string | null): void {
       void queryClient.invalidateQueries({
         queryKey: projectWorkSummaryQueryKey(projectId),
       });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkStatesQueryKey(projectId),
+      });
+      void queryClient.invalidateQueries({
+        queryKey: projectWorkArtifactsQueryKey(projectId),
+      });
       if (event.workItemId) {
         void queryClient.invalidateQueries({
           queryKey: projectWorkItemQueryKey(projectId, event.workItemId),
@@ -213,3 +258,31 @@ export function sortProjectWorkStates(
       left.position - right.position || left.name.localeCompare(right.name),
   );
 }
+
+const LIST_CATEGORY_ORDER: Readonly<
+  Record<ProjectWorkState["category"], number>
+> = {
+  started: 0,
+  unstarted: 1,
+  backlog: 2,
+  completed: 3,
+  canceled: 4,
+};
+
+export function sortProjectWorkStatesForList(
+  states: ProjectWorkState[],
+): ProjectWorkState[] {
+  return [...states].sort((left, right) => {
+    const categoryOrder =
+      LIST_CATEGORY_ORDER[left.category] - LIST_CATEGORY_ORDER[right.category];
+    if (categoryOrder !== 0) return categoryOrder;
+    if (left.category === "completed" || left.category === "canceled") {
+      return (
+        left.position - right.position || left.name.localeCompare(right.name)
+      );
+    }
+    return (
+      right.position - left.position || left.name.localeCompare(right.name)
+    );
+  });
+}

package/src/features/projects/pages/project-home-page.tsx

@@ -3,9 +3,11 @@ import { useNavigate, useParams } from "react-router-dom";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import type { ObservedRequest } from "@nextclaw/client-sdk";
 import { toast } from "sonner";
-import { useProjects } from "@/shared/hooks/use-projects";
+import { useProjects, useRemoveProject } from "@/shared/hooks/use-projects";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
+import { Button } from "@/shared/components/ui/button";
+import { useConfirmDialog } from "@/shared/hooks/use-confirm-dialog";
 import {
   Tabs,
   TabsContent,
@@ -36,6 +38,7 @@ import {
   sendProjectRequestResponse,
   type ProjectRequestDecision,
 } from "@/features/projects/utils/project-request-response.utils";
+import { joinProjectPath } from "@/features/projects/utils/project-artifact-view.utils";
 
 const PROJECT_TABS: ProjectHomeTab[] = [
   "overview",
@@ -55,6 +58,8 @@ export function ProjectsPage() {
   const queryClient = useQueryClient();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
+  const projectRemoval = useRemoveProject();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
   const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
     null,
   );
@@ -100,6 +105,22 @@ export function ProjectsPage() {
       prompt: request.prompt,
     });
   };
+  const removeSelectedProject = async () => {
+    if (!selectedProject) return;
+    const confirmed = await confirm({
+      title: `${t("projectsRemoveConfirmTitle")} “${selectedProject.name}”`,
+      description: t("projectsRemoveConfirmDescription"),
+      confirmLabel: t("projectsRemoveConfirmAction"),
+      variant: "destructive",
+    });
+    if (!confirmed) return;
+    try {
+      await projectRemoval.mutateAsync(selectedProject.id);
+      navigate("/projects");
+    } catch {
+      // The mutation owns the visible error and the current project stays open.
+    }
+  };
 
   if (projects.isLoading)
     return (
@@ -138,11 +159,22 @@ export function ProjectsPage() {
     <>
       <main className="h-full min-w-0 flex-1 overflow-y-auto p-3 sm:p-4 md:p-6">
         <div className="mx-auto max-w-6xl space-y-4">
-          <header className="rounded-2xl border border-border/60 bg-card p-3 sm:p-4">
-            <h1 className="text-lg font-semibold">{selectedProject.name}</h1>
-            <p className="mt-1 break-all text-xs text-muted-foreground">
-              {selectedProject.rootPath}
-            </p>
+          <header className="flex flex-col gap-3 rounded-2xl border border-border/60 bg-card p-3 sm:flex-row sm:items-start sm:justify-between sm:p-4">
+            <div className="min-w-0">
+              <h1 className="text-lg font-semibold">{selectedProject.name}</h1>
+              <p className="mt-1 break-all text-xs text-muted-foreground">
+                {selectedProject.rootPath}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="destructive"
+              size="sm"
+              disabled={projectRemoval.isPending}
+              onClick={() => void removeSelectedProject()}
+            >
+              {t("projectsRemoveFromList")}
+            </Button>
           </header>
           {snapshot ? (
             <ProjectRequests
@@ -171,6 +203,12 @@ export function ProjectsPage() {
             <TabsContent value="overview" className="mt-4">
               <ProjectOverview
                 projectId={selectedProject.id}
+                onOpenArtifact={(path, label) =>
+                  openProjectFile(
+                    joinProjectPath(selectedProject.rootPath, path),
+                    label,
+                  )
+                }
                 onOpenWorkItem={setSelectedWorkItemId}
               />
             </TabsContent>
@@ -229,6 +267,7 @@ export function ProjectsPage() {
         sessionKey={null}
         projectRoot={selectedProject.rootPath}
       />
+      <ConfirmDialog />
     </>
   );
 }

package/src/features/projects/pages/projects-page.test.tsx

@@ -5,13 +5,25 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ProjectsPage } from "./project-home-page";
 
 const mocks = vi.hoisted(() => ({
+  confirm: vi.fn(),
   drawerProps: vi.fn(),
+  removeProject: vi.fn(),
   useProjectObservation: vi.fn(),
   useProjects: vi.fn(),
 }));
 
 vi.mock("@/shared/hooks/use-projects", () => ({
   useProjects: mocks.useProjects,
+  useRemoveProject: () => ({
+    mutateAsync: mocks.removeProject,
+    isPending: false,
+  }),
+}));
+vi.mock("@/shared/hooks/use-confirm-dialog", () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => <div data-testid="confirm-dialog" />,
+  }),
 }));
 vi.mock("@/features/projects/hooks/use-project-observation", () => ({
   projectObservationQueryKey: (projectId: string) => [
@@ -80,6 +92,10 @@ function renderPage(path: string) {
 describe("ProjectsPage", () => {
   beforeEach(() => {
     mocks.drawerProps.mockReset();
+    mocks.confirm.mockReset();
+    mocks.confirm.mockResolvedValue(true);
+    mocks.removeProject.mockReset();
+    mocks.removeProject.mockResolvedValue(undefined);
     mocks.useProjects.mockReturnValue({
       data: {
         projects: [
@@ -134,4 +150,44 @@ describe("ProjectsPage", () => {
     expect(mocks.useProjectObservation).toHaveBeenCalledWith(null, null, false);
     expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy();
   });
+
+  it("explains the impact before removing a project and returns to project selection", async () => {
+    renderPage("/projects/project-1/overview");
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: /Remove from project list|从项目列表移除/,
+      }),
+    );
+
+    await vi.waitFor(() =>
+      expect(mocks.confirm).toHaveBeenCalledWith(
+        expect.objectContaining({
+          description: expect.stringMatching(/local folder|本地目录/),
+          variant: "destructive",
+        }),
+      ),
+    );
+    await vi.waitFor(() =>
+      expect(mocks.removeProject).toHaveBeenCalledWith("project-1"),
+    );
+    await vi.waitFor(() =>
+      expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy(),
+    );
+  });
+
+  it("keeps the project when removal is cancelled", async () => {
+    mocks.confirm.mockResolvedValue(false);
+    renderPage("/projects/project-1/overview");
+
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: /Remove from project list|从项目列表移除/,
+      }),
+    );
+
+    await vi.waitFor(() => expect(mocks.confirm).toHaveBeenCalledOnce());
+    expect(mocks.removeProject).not.toHaveBeenCalled();
+    expect(screen.getByText("Research")).toBeTruthy();
+  });
 });

package/src/features/projects/utils/project-artifact-view.utils.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import {
   formatProjectRelativeTime,
+  joinProjectPath,
   sortProjectArtifacts,
 } from "./project-artifact-view.utils";
 
@@ -37,27 +38,38 @@ const artifacts = [
 
 describe("project artifact view", () => {
   it("prioritizes recent updates by default and supports alternate sort orders", () => {
-    expect(sortProjectArtifacts(artifacts).map((artifact) => artifact.id)).toEqual([
-      "newer-update",
-      "older-update",
-      "untimed",
-    ]);
-    expect(sortProjectArtifacts(artifacts, "created-desc").map((artifact) => artifact.id)).toEqual([
-      "newer-update",
-      "older-update",
-      "untimed",
-    ]);
-    expect(sortProjectArtifacts(artifacts, "name").map((artifact) => artifact.id)).toEqual([
-      "untimed",
-      "newer-update",
-      "older-update",
-    ]);
+    expect(
+      sortProjectArtifacts(artifacts).map((artifact) => artifact.id),
+    ).toEqual(["newer-update", "older-update", "untimed"]);
+    expect(
+      sortProjectArtifacts(artifacts, "created-desc").map(
+        (artifact) => artifact.id,
+      ),
+    ).toEqual(["newer-update", "older-update", "untimed"]);
+    expect(
+      sortProjectArtifacts(artifacts, "name").map((artifact) => artifact.id),
+    ).toEqual(["untimed", "newer-update", "older-update"]);
   });
 
   it("renders recent timestamps in people-friendly language", () => {
     const now = new Date("2026-08-30T12:00:00.000Z");
-    expect(formatProjectRelativeTime("2026-08-30T11:57:00.000Z", now)).toBe("3 minutes ago");
-    expect(formatProjectRelativeTime("2026-08-30T09:00:00.000Z", now)).toBe("3 hours ago");
-    expect(formatProjectRelativeTime("2026-08-29T12:00:00.000Z", now)).toBe("Yesterday");
+    expect(formatProjectRelativeTime("2026-08-30T11:57:00.000Z", now)).toBe(
+      "3 minutes ago",
+    );
+    expect(formatProjectRelativeTime("2026-08-30T09:00:00.000Z", now)).toBe(
+      "3 hours ago",
+    );
+    expect(formatProjectRelativeTime("2026-08-29T12:00:00.000Z", now)).toBe(
+      "Yesterday",
+    );
+  });
+
+  it("joins project-relative artifact paths across host path styles", () => {
+    expect(joinProjectPath("/tmp/project", "docs/design.md")).toBe(
+      "/tmp/project/docs/design.md",
+    );
+    expect(joinProjectPath("C:\\project\\", "docs/design.md")).toBe(
+      "C:\\project\\docs/design.md",
+    );
   });
 });

package/src/features/projects/utils/project-artifact-view.utils.ts

@@ -7,7 +7,17 @@ export type ProjectArtifactSort =
   | "created-desc"
   | "name";
 
-export const DEFAULT_PROJECT_ARTIFACT_SORT: ProjectArtifactSort = "updated-desc";
+export const DEFAULT_PROJECT_ARTIFACT_SORT: ProjectArtifactSort =
+  "updated-desc";
+
+export function joinProjectPath(
+  rootPath: string,
+  relativePath: string,
+): string {
+  const separator =
+    rootPath.endsWith("/") || rootPath.endsWith("\\") ? "" : "/";
+  return `${rootPath}${separator}${relativePath}`;
+}
 
 function timestamp(value?: string): number {
   if (!value) return Number.NEGATIVE_INFINITY;
@@ -30,33 +40,40 @@ export function sortProjectArtifacts(
     if (sort === "name") return byName(left, right);
     const leftTimestamp = timestamp(
       sort === "created-desc"
-        ? left.fileCreatedAt ?? left.fileUpdatedAt
-        : left.fileUpdatedAt ?? left.fileCreatedAt,
+        ? (left.fileCreatedAt ?? left.fileUpdatedAt)
+        : (left.fileUpdatedAt ?? left.fileCreatedAt),
     );
     const rightTimestamp = timestamp(
       sort === "created-desc"
-        ? right.fileCreatedAt ?? right.fileUpdatedAt
-        : right.fileUpdatedAt ?? right.fileCreatedAt,
+        ? (right.fileCreatedAt ?? right.fileUpdatedAt)
+        : (right.fileUpdatedAt ?? right.fileCreatedAt),
     );
-    const order = sort === "updated-asc"
-      ? leftTimestamp - rightTimestamp
-      : rightTimestamp - leftTimestamp;
+    const order =
+      sort === "updated-asc"
+        ? leftTimestamp - rightTimestamp
+        : rightTimestamp - leftTimestamp;
     return order || byName(left, right);
   });
 }
 
-export function formatProjectRelativeTime(value?: string, now: Date = new Date()): string {
+export function formatProjectRelativeTime(
+  value?: string,
+  now: Date = new Date(),
+): string {
   if (!value) return "-";
   const date = new Date(value);
   const differenceMs = now.getTime() - date.getTime();
   if (Number.isNaN(date.getTime())) return value;
   if (differenceMs < 60_000) return t("projectsTimeJustNow");
   const minutes = Math.floor(differenceMs / 60_000);
-  if (minutes < 60) return t("projectsTimeMinutesAgo").replace("{count}", String(minutes));
+  if (minutes < 60)
+    return t("projectsTimeMinutesAgo").replace("{count}", String(minutes));
   const hours = Math.floor(minutes / 60);
-  if (hours < 24) return t("projectsTimeHoursAgo").replace("{count}", String(hours));
+  if (hours < 24)
+    return t("projectsTimeHoursAgo").replace("{count}", String(hours));
   const days = Math.floor(hours / 24);
   if (days === 1) return t("projectsTimeYesterday");
-  if (days < 7) return t("projectsTimeDaysAgo").replace("{count}", String(days));
+  if (days < 7)
+    return t("projectsTimeDaysAgo").replace("{count}", String(days));
   return formatDateShort(value);
 }

package/src/features/projects/utils/project-work-state-label.utils.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { getProjectWorkStateLabel } from "./project-work-state-label.utils";
+
+describe("getProjectWorkStateLabel", () => {
+  it.each([
+    ["Backlog", "待整理"],
+    ["Planned", "已计划"],
+    ["In Progress", "进行中"],
+    ["In Review", "评审中"],
+    ["Awaiting Acceptance", "等待验收"],
+    ["Completed", "已完成"],
+    ["Canceled", "已取消"],
+  ])("localizes the built-in %s state", (name, expected) => {
+    expect(getProjectWorkStateLabel(name, "zh")).toBe(expected);
+  });
+
+  it("keeps custom state names unchanged", () => {
+    expect(getProjectWorkStateLabel("Ready to publish", "zh")).toBe(
+      "Ready to publish",
+    );
+  });
+
+  it("keeps the built-in English labels in English", () => {
+    expect(getProjectWorkStateLabel("Awaiting Acceptance", "en")).toBe(
+      "Awaiting Acceptance",
+    );
+  });
+});

package/src/features/projects/utils/project-work-state-label.utils.ts

@@ -0,0 +1,20 @@
+import { t, type I18nLanguage } from "@/shared/lib/i18n";
+
+const DEFAULT_STATE_MESSAGE_KEYS: Readonly<Record<string, string>> = {
+  Backlog: "projectsWorkState_backlog",
+  Planned: "projectsWorkState_planned",
+  "In Progress": "projectsWorkState_inProgress",
+  "In Review": "projectsWorkState_inReview",
+  "Awaiting Acceptance": "projectsWorkState_awaitingAcceptance",
+  Completed: "projectsWorkState_completed",
+  Canceled: "projectsWorkState_canceled",
+};
+
+export function getProjectWorkStateLabel(
+  name: string,
+  language?: I18nLanguage,
+): string {
+  const messageKey = DEFAULT_STATE_MESSAGE_KEYS[name];
+  if (!messageKey) return name;
+  return language ? t(messageKey, language) : t(messageKey);
+}

package/src/features/service-apps/index.ts

@@ -1,3 +1,3 @@
-export { ServiceActionAuthorizationDialog } from '@/features/service-apps/components/service-action-authorization-dialog';
-export { ServiceActionAuthorizationManager } from '@/features/service-apps/managers/service-action-authorization.manager';
-export { ServiceAppsPanel } from '@/features/service-apps/components/service-apps-panel';
+export async function loadServiceAppsPanel() {
+  return await import('@/features/service-apps/components/service-apps-panel');
+}

package/src/main.tsx

@@ -4,8 +4,11 @@ import { BrowserRouter, MemoryRouter } from 'react-router-dom';
 import App from './app';
 import { I18nProvider } from '@/components/providers/I18nProvider';
 import { ThemeProvider } from '@/components/providers/ThemeProvider';
+import { installMainI18nCatalog } from '@/shared/lib/i18n';
 import './index.css';
 
+await installMainI18nCatalog();
+
 const AppRouter = window.nextclawDesktop?.platform === 'win32' ? MemoryRouter : BrowserRouter;
 const root = createRoot(document.getElementById('root')!);
 

package/src/shared/hooks/use-auth-status.ts

@@ -0,0 +1,49 @@
+import { useRef } from 'react';
+import { useQuery } from "@tanstack/react-query";
+import { fetchAuthStatus, type AuthStatusView } from "@/shared/lib/api";
+import { isTransientRuntimeConnectionErrorMessage } from "@/shared/lib/transport";
+
+const AUTH_STATUS_BOOTSTRAP_PROBE_POLICY = {
+  maxRetries: 8,
+  startupTimeoutMs: 2_000,
+  settledTimeoutMs: 5_000,
+  retryBaseDelayMs: 500,
+  retryMaxDelayMs: 3_000,
+} as const;
+
+export function isTransientAuthStatusBootstrapError(error: unknown): boolean {
+  return error instanceof Error && isTransientRuntimeConnectionErrorMessage(error.message);
+}
+
+export function shouldRetryAuthStatusBootstrap(failureCount: number, error: unknown): boolean {
+  return failureCount < AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.maxRetries &&
+    isTransientAuthStatusBootstrapError(error);
+}
+
+export function resolveAuthStatusBootstrapRetryDelay(failureCount: number): number {
+  return Math.min(
+    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryMaxDelayMs,
+    AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.retryBaseDelayMs * 2 ** Math.max(0, failureCount - 1),
+  );
+}
+
+export function useAuthStatus() {
+  const bootstrapSettled = useRef(false);
+  const query = useQuery<AuthStatusView>({
+    queryKey: ["auth-status"],
+    queryFn: async () => {
+      const status = await fetchAuthStatus({
+        timeoutMs: bootstrapSettled.current
+        ? AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.settledTimeoutMs
+        : AUTH_STATUS_BOOTSTRAP_PROBE_POLICY.startupTimeoutMs,
+      });
+      bootstrapSettled.current = true;
+      return status;
+    },
+    staleTime: 5_000,
+    retry: shouldRetryAuthStatusBootstrap,
+    retryDelay: resolveAuthStatusBootstrapRetryDelay,
+  });
+
+  return query;
+}

package/src/shared/hooks/use-projects.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { addExistingProject, createProject, fetchProjects } from "@/shared/lib/api";
+import { addExistingProject, createProject, fetchProjects, removeProject } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 
 const PROJECTS_QUERY_KEY = ["projects"] as const;
@@ -41,3 +41,17 @@ export function useAddExistingProject() {
     },
   });
 }
+
+export function useRemoveProject() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: removeProject,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: PROJECTS_QUERY_KEY });
+      toast.success(t("projectsRemoveSuccess"));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t("projectsRemoveFailed")}: ${error.message}`);
+    },
+  });
+}

package/src/shared/lib/api/projects/project.utils.ts

@@ -19,3 +19,7 @@ export async function addExistingProject(
 ): Promise<ProjectView> {
   return await nextclawClient.projects.addExisting(input);
 }
+
+export async function removeProject(projectId: string): Promise<ProjectView> {
+  return await nextclawClient.projects.remove(projectId, projectId);
+}