🤖 fix: show removeProject errors in UI instead of only console

- Changed removeProject to return { success, error } result instead of void
- Added projectRemoveError state and showProjectRemoveError helper in ProjectSidebar
- Display error popup near the remove button when project removal fails
- Matches existing pattern used for workspace removal errors

_Generated with mux_

Author: ammar-agent

src/browser/App.tsx

@@ -190,11 +190,11 @@ function AppInner() {
   const openWorkspaceInTerminal = useOpenTerminal();
 
   const handleRemoveProject = useCallback(
-    async (path: string) => {
+    async (path: string): Promise<{ success: boolean; error?: string }> => {
       if (selectedWorkspace?.projectPath === path) {
         setSelectedWorkspace(null);
       }
-      await removeProject(path);
+      return removeProject(path);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedWorkspace, setSelectedWorkspace]

src/browser/components/ProjectSidebar.tsx

@@ -246,6 +246,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     position: { top: number; left: number };
   } | null>(null);
   const removeErrorTimeoutRef = useRef<number | null>(null);
+  const [projectRemoveError, setProjectRemoveError] = useState<{
+    projectPath: string;
+    error: string;
+    position: { top: number; left: number };
+  } | null>(null);
+  const projectRemoveErrorTimeoutRef = useRef<number | null>(null);
   const [secretsModalState, setSecretsModalState] = useState<{
     isOpen: boolean;
     projectPath: string;
@@ -317,6 +323,39 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
     };
   }, []);
 
+  const showProjectRemoveError = useCallback(
+    (projectPath: string, error: string, anchor?: { top: number; left: number }) => {
+      if (projectRemoveErrorTimeoutRef.current) {
+        window.clearTimeout(projectRemoveErrorTimeoutRef.current);
+      }
+
+      const position = anchor ?? {
+        top: window.scrollY + 32,
+        left: Math.max(window.innerWidth - 420, 16),
+      };
+
+      setProjectRemoveError({
+        projectPath,
+        error,
+        position,
+      });
+
+      projectRemoveErrorTimeoutRef.current = window.setTimeout(() => {
+        setProjectRemoveError(null);
+        projectRemoveErrorTimeoutRef.current = null;
+      }, 5000);
+    },
+    []
+  );
+
+  useEffect(() => {
+    return () => {
+      if (projectRemoveErrorTimeoutRef.current) {
+        window.clearTimeout(projectRemoveErrorTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const handleRemoveWorkspace = useCallback(
     async (workspaceId: string, buttonElement: HTMLElement) => {
       // Mark workspace as being deleted for UI feedback
@@ -577,7 +616,19 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             <button
                               onClick={(event) => {
                                 event.stopPropagation();
-                                void onRemoveProject(projectPath);
+                                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,
+                                    };
+                                    showProjectRemoveError(projectPath, error, anchor);
+                                  }
+                                })();
                               }}
                               title="Remove project"
                               aria-label={`Remove project ${projectName}`}
@@ -762,6 +813,19 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
               </div>,
               document.body
             )}
+          {projectRemoveError &&
+            createPortal(
+              <div
+                className="bg-error-bg border-error text-error font-monospace pointer-events-auto fixed z-[10000] max-w-96 rounded-md border p-3 px-4 text-xs leading-[1.4] break-words whitespace-pre-wrap shadow-[0_4px_16px_rgba(0,0,0,0.5)]"
+                style={{
+                  top: `${projectRemoveError.position.top}px`,
+                  left: `${projectRemoveError.position.left}px`,
+                }}
+              >
+                Failed to remove project: {projectRemoveError.error}
+              </div>,
+              document.body
+            )}
         </div>
       </DndProvider>
     </RenameProvider>

src/browser/contexts/ProjectContext.tsx

@@ -27,7 +27,7 @@ export interface ProjectContext {
   projects: Map<string, ProjectConfig>;
   refreshProjects: () => Promise<void>;
   addProject: (normalizedPath: string, projectConfig: ProjectConfig) => void;
-  removeProject: (path: string) => Promise<void>;
+  removeProject: (path: string) => Promise<{ success: boolean; error?: string }>;
 
   // Project creation modal
   isProjectCreateModalOpen: boolean;
@@ -94,8 +94,8 @@ export function ProjectProvider(props: { children: ReactNode }) {
   }, []);
 
   const removeProject = useCallback(
-    async (path: string) => {
-      if (!api) return;
+    async (path: string): Promise<{ success: boolean; error?: string }> => {
+      if (!api) return { success: false, error: "API not connected" };
       try {
         const result = await api.projects.remove({ projectPath: path });
         if (result.success) {
@@ -104,11 +104,15 @@ export function ProjectProvider(props: { children: ReactNode }) {
             next.delete(path);
             return next;
           });
+          return { success: true };
         } else {
           console.error("Failed to remove project:", result.error);
+          return { success: false, error: result.error };
         }
       } catch (error) {
-        console.error("Failed to remove project:", error);
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.error("Failed to remove project:", errorMessage);
+        return { success: false, error: errorMessage };
       }
     },
     [api]