JACoB PR for Issue Add 'Research' Tab to Code Visualizer to Display Project-Level Research Items

[jacob-ai-bot[bot]]

Summary:

Description

Enhance the Code Visualizer by adding a new 'Research' tab to the top navigation bar, alongside the existing 'Folder' and 'Architecture' tabs.

When a user clicks on the 'Research' tab:

• Backend:

  • Fetch all project-level research items for the current project from a new TRPC endpoint in the todo router.
  • The endpoint retrieves research objects from the database where:
    • todoId is 0.
    • issueId is 0.
    • projectId matches the current project.
  • If no research items are available:
    • Return an empty array.
    • Initiate the generation of project research items in the background. call getOrCreateResearchForProject with the project id and the codebaseContext items from the database.

• Frontend:

  • Display the research items using the existing Research component from the To-Do details section.
  • Refer to /src/app/dashboard/[org]/[repo]/todos/components/Research.tsx and /src/app/dashboard/[org]/[repo]/todos/components/TodoDetails.tsx for implementation details.
  • add a max-w-5xl and center the research on the page. Start with them collapsed by default. Use the same meadow gradient background as seen in the TodoDetails component. Be sure to 'use client'
  • If no research items are currently available:
  • Display a friendly message:
    "Research items are being generated. Please check again in a few minutes."

Expected Outcome

• A new 'Research' tab is present in the Code Visualizer's navigation bar.
• Clicking the 'Research' tab displays project-level research items using the existing Research component.
• If research items are not available:
  • Users see a message indicating that research items are being generated.
  • The system starts generating research items for the project.
• The interface is consistent with the design and functionality of the existing To-Do details section. @jacob-ai-bot --skip-build

Plan:

Step 1: Edit /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx

Task: Add 'Research' tab to CodebaseVisualizer navigation bar and handle 'research' view mode

Instructions: In the file '/src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx', modify the 'viewMode' state to include 'research' as an additional option. Update the type definition for 'viewMode' to '"folder" | "taxonomy" | "research"'. Add a new button labeled 'Research' in the navigation bar alongside the existing 'Folder' and 'Architecture' tabs. The button should have similar styling and functionality as the existing tabs, and should call 'handleViewModeChange("research")' when clicked.

Implement the logic to handle the 'research' view mode in the component. When 'viewMode' is 'research', do not render the 'Tree' component. Instead, fetch the project-level research items using the TRPC client to call the 'getProjectResearch' endpoint (to be created in another step). Use the 'projectId' prop passed to the component to make the request. Manage loading and error states appropriately.

If research items are available, render them using the existing 'Research' component imported from '/src/app/dashboard/[org]/[repo]/todos/components/Research'. Map over the research items and render each one using the 'Research' component. Add the 'max-w-5xl' class and center the research content on the page. Start with the research items collapsed by default. Use the same meadow gradient background as seen in the 'TodoDetails' component.

If no research items are available, display a friendly message: 'Research items are being generated. Please check again in a few minutes.'

Ensure that the component is correctly importing all required dependencies and that 'use client' is declared at the top of the file.

Exit Criteria: The 'Research' tab is added to the navigation bar. Clicking the 'Research' tab displays project-level research items using the existing 'Research' component, styled consistently with the 'TodoDetails' component. If no research items are available, a friendly message is displayed. The component handles the 'research' view mode correctly.

Step 2: Edit /src/app/dashboard/[org]/[repo]/code-visualizer/Codebase.tsx

Task: Update Codebase.tsx to fetch project ID and pass it to CodebaseVisualizer

Instructions: In the file '/src/app/dashboard/[org]/[repo]/code-visualizer/Codebase.tsx', modify the component to fetch the project ID based on the 'org' and 'repo' parameters. Import 'api.projects.getByOrgRepo' from the TRPC client. Use 'api.projects.getByOrgRepo.useQuery' with 'org' and 'repo' to fetch the project data.

Handle loading and error states appropriately. If the project data is still loading or not available, display a loading indicator or appropriate message. Once the project data is available, extract the 'id' from the project data (e.g., 'const projectId = projectData.id') and pass it as a prop to the 'CodebaseVisualizer' component.

Ensure that the 'CodebaseVisualizer' component receives the 'projectId' prop and can use it to fetch research items.

Exit Criteria: 'Codebase.tsx' fetches the project ID based on 'org' and 'repo', handles loading and error states, and passes the 'projectId' to 'CodebaseVisualizer' as a prop.

Step 3: Edit /src/server/api/routers/todos.ts

Task: Add 'getProjectResearch' endpoint to 'todo' router in TRPC

Instructions: In the file '/src/server/api/routers/todos.ts', add a new procedure to the 'todoRouter' TRPC router named 'getProjectResearch'. Import the 'z' object from 'zod' for input validation, and import the 'getOrCreateResearchForProject' function from the research agent file.

The 'getProjectResearch' procedure should accept an input object containing 'projectId' (number). Validate the input using 'z.object({ projectId: z.number() })'. Implement the procedure to:

• Fetch all research items from the database where 'todoId' is 0, 'issueId' is 0, and 'projectId' matches the provided 'projectId'.
• If research items are found, return them.
• If no research items are available, initiate the generation of project research items in the background by calling 'getOrCreateResearchForProject' with the 'projectId' and the codebase context items from the database. Use an asynchronous call without awaiting it, so it runs in the background.
• Return an empty array.

Ensure proper error handling and input validation in the procedure.

Exit Criteria: The 'getProjectResearch' endpoint is available in the 'todo' TRPC router. It correctly fetches project-level research items and initiates their generation if none are available. The endpoint handles input validation and errors appropriately.

[jacob-ai-bot[bot]]

Hello human! 👋

This PR was created by JACoB to address the issue Add 'Research' Tab to Code Visualizer to Display Project-Level Research Items

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. JACoB will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.