[MRG] Improve the web UI to use the sync backend API

[huangyz0918]

User description

How to test the UI?

Backend

1. mle new <project_name>
2. cd <project_name>
3. run mle integrate, to integrate with your Github
4. run mle serve to start the server

UI

1. cd <MLE-Agent>/web to enter the web source code folder
2. pnpm I & pnpm run dev to start the local web UI

---

PR Type

Enhancement, Bug fix

---

Description

• Enhanced the report generation process with more detailed sections and improved filtering of Google Calendar events.
• Added both synchronous and asynchronous endpoints for report generation in the server application, with error handling.
• Improved the web UI by adding a loading spinner and better feedback messages during report generation.
• Simplified the report generation function in the workflow module to directly return the report.
• Removed the GitHub username prompt from the CLI integration setup.
• Downgraded the @uiw/react-md-editor dependency version in the web application.

---

Changes walkthrough 📝

	Relevant files
Enhancement	reporter.py Enhance report generation with detailed sections and filtering mle/agents/reporter.py Enhanced report generation with more detailed sections. Improved filtering of Google Calendar events. Updated reference format in JSON mode prompt. Modified output format for related work. +14/-17  summarizer.py Update GitHub references and related work format                  mle/agents/summarizer.py Corrected GitHub capitalization in comments. Updated related work format to include titles and links. +5/-5      app.py Add synchronous and asynchronous report generation endpoints mle/server/app.py Added synchronous report generation endpoint. Introduced error handling for report generation. Created asynchronous report generation endpoint. +39/-2    report.py Simplify report generation function return                              mle/workflow/report.py Simplified report generation function to return the report. +1/-3      cli.py Remove GitHub username prompt from CLI integration              mle/cli.py Removed GitHub username prompt from integration setup. +1/-3      page.tsx Enhance UI with loading spinner and improved feedback        web/app/page.tsx Added loading spinner for report generation. Improved feedback messages for report generation. Adjusted markdown formatting for TODO sections. +15/-6
Dependencies	package.json Downgrade `@uiw/react-md-editor` dependency version            web/package.json Downgraded @uiw/react-md-editor dependency version. +1/-1
Additional files (token-limit)	pnpm-lock.yaml ...                                                                                                            web/pnpm-lock.yaml ... +754/-835

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Code Clarity The new system prompt text added in lines 26-39 is quite verbose and complex. Consider simplifying the language or breaking down the responsibilities into smaller, more manageable functions to improve readability and maintainability. Error Handling The error handling in the synchronous report generation endpoint (lines 87-105) could be improved by logging the error details before raising the HTTPException. This would help in debugging and maintaining logs for the errors that occur. UI Feedback The addition of a loading spinner (lines 129-131) is a good UX improvement. However, ensure that the spinner's visibility is properly managed to avoid it being stuck in the loading state in case of errors or no data scenarios.

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Add checks to prevent KeyError in list comprehension Ensure that the list comprehension does not result in a KeyError by checking if 'title' and 'link' keys exist in the dictionary. mle/agents/reporter.py [104] -info_prompt += f"- {work['title']} ({work['link']})\n" +if 'title' in work and 'link' in work: + info_prompt += f"- {work['title']} ({work['link']})\n" +else: + info_prompt += "Missing title or link in work item\n" Suggestion importance[1-10]: 9 Why: The suggestion effectively prevents a potential KeyError, which is a significant improvement for ensuring the code's reliability and robustness when processing data.	9
	Add null checking for 'result' to prevent potential runtime errors Add error handling for the case when the 'result' field is undefined to prevent runtime errors. web/app/page.tsx [104-110] -if (result.result) { +if (result && result.result) { setReportData(result.result); const markdownContent = convertToMarkdown(result.result); setReportContent(markdownContent); message.success('Report generated successfully'); } else { message.info('Report generation completed, but no data returned'); } Suggestion importance[1-10]: 8 Why: This suggestion addresses a potential runtime error by adding null checking, which is crucial for preventing application crashes and improving robustness.	8
Enhancement	Correct a grammatical error in the text Replace the ambiguous phrase "as more as possible" with "as many as possible" to correct the grammatical error and improve clarity. mle/agents/reporter.py [39] -8. You can generate as more as possible details to make sure the report is informative and has great progress. +8. You can generate as many as possible details to make sure the report is informative and has great progress. Suggestion importance[1-10]: 7 Why: The suggestion correctly identifies and fixes a grammatical error, improving the clarity of the text. However, it is a minor enhancement and does not address a critical issue.	7
Best practice	Use specific exceptions for better error handling Replace the generic exception handling with a more specific exception type to improve error handling and debugging. mle/server/app.py [105] -except Exception as e: +except SpecificExceptionType as e: # Replace SpecificExceptionType with the actual expected exception type raise HTTPException(status_code=500, detail=f"Error in report generation process: {e}") Suggestion importance[1-10]: 5 Why: The suggestion promotes best practices by recommending specific exception handling, which can improve debugging. However, it lacks specificity regarding which exception type to use, limiting its immediate applicability.	5

[huangyz0918]

Also downgrade the @uiw/react-md-editor to fix the display issue.