🤖 fix: disable project removal when workspaces exist

- Remove project button is now disabled when project has any workspaces
- Shows explanatory tooltip: 'Delete workspace first' (1) or 'Delete all N workspaces first' (N)
- Button uses aria-disabled and cursor-not-allowed styling when disabled
- Updated storybook test to verify disabled state instead of backend error

Author: ammar-agent

src/browser/components/ProjectSidebar.tsx

@@ -559,34 +559,51 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             </TooltipTrigger>
                             <TooltipContent align="end">Manage secrets</TooltipContent>
                           </Tooltip>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <button
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  const buttonElement = event.currentTarget;
-                                  void (async () => {
-                                    const result = await onRemoveProject(projectPath);
-                                    if (!result.success) {
-                                      const error = result.error ?? "Failed to remove project";
-                                      const rect = buttonElement.getBoundingClientRect();
-                                      const anchor = {
-                                        top: rect.top + window.scrollY,
-                                        left: rect.right + 10,
-                                      };
-                                      projectRemoveError.showError(projectPath, error, anchor);
-                                    }
-                                  })();
-                                }}
-                                aria-label={`Remove project ${projectName}`}
-                                data-project-path={projectPath}
-                                className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200"
-                              >
-                                ×
-                              </button>
-                            </TooltipTrigger>
-                            <TooltipContent align="end">Remove project</TooltipContent>
-                          </Tooltip>
+                          {(() => {
+                            const workspaceCount =
+                              sortedWorkspacesByProject.get(projectPath)?.length ?? 0;
+                            const canDelete = workspaceCount === 0;
+                            return (
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <button
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      if (!canDelete) return;
+                                      const buttonElement = event.currentTarget;
+                                      void (async () => {
+                                        const result = await onRemoveProject(projectPath);
+                                        if (!result.success) {
+                                          const error = result.error ?? "Failed to remove project";
+                                          const rect = buttonElement.getBoundingClientRect();
+                                          const anchor = {
+                                            top: rect.top + window.scrollY,
+                                            left: rect.right + 10,
+                                          };
+                                          projectRemoveError.showError(projectPath, error, anchor);
+                                        }
+                                      })();
+                                    }}
+                                    aria-label={`Remove project ${projectName}`}
+                                    aria-disabled={!canDelete}
+                                    data-project-path={projectPath}
+                                    className={`mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200 ${
+                                      canDelete
+                                        ? "text-muted-dark hover:text-danger-light hover:bg-danger-light/10 cursor-pointer"
+                                        : "text-muted cursor-not-allowed"
+                                    }`}
+                                  >
+                                    ×
+                                  </button>
+                                </TooltipTrigger>
+                                <TooltipContent align="end">
+                                  {canDelete
+                                    ? "Remove project"
+                                    : `Delete ${workspaceCount === 1 ? "workspace" : `all ${workspaceCount} workspaces`} first`}
+                                </TooltipContent>
+                              </Tooltip>
+                            );
+                          })()}
                           <button
                             onClick={(event) => {
                               event.stopPropagation();

src/browser/stories/App.errors.stories.tsx

@@ -248,12 +248,12 @@ export const LargeDiff: AppStory = {
 };
 
 /**
- * Project removal error popover.
+ * Project removal disabled when multiple workspaces exist.
  *
- * Shows the error popup when attempting to remove a project that has active workspaces.
- * The play function hovers the project and clicks the remove button to trigger the error.
+ * The remove button is disabled and shows an explanatory tooltip when a project
+ * has more than one workspace. The play function hovers to reveal the disabled state.
  */
-export const ProjectRemovalError: AppStory = {
+export const ProjectRemovalDisabled: AppStory = {
   render: () => (
     <AppWithMocks
       setup={() => {
@@ -268,11 +268,6 @@ export const ProjectRemovalError: AppStory = {
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,
-          onProjectRemove: () => ({
-            success: false,
-            error:
-              "Cannot remove project with active workspaces. Please remove all 2 workspace(s) first.",
-          }),
         });
       }}
     />
@@ -297,16 +292,12 @@ export const ProjectRemovalError: AppStory = {
     // Small delay for hover state to apply
     await new Promise((r) => setTimeout(r, 100));
 
-    // Click the remove button
-    await userEvent.click(removeButton);
+    // Verify the button is disabled
+    if (removeButton.getAttribute("aria-disabled") !== "true") {
+      throw new Error("Remove button should be disabled when project has multiple workspaces");
+    }
 
-    // Wait for the error popover to appear
-    await waitFor(
-      () => {
-        const errorPopover = document.querySelector('[role="alert"]');
-        if (!errorPopover) throw new Error("Error popover not found");
-      },
-      { timeout: 2000 }
-    );
+    // Hover the disabled button to trigger tooltip
+    await userEvent.hover(removeButton);
   },
 };