[Feature] Phase 3: Build Split-Pane Web IDE Interface in Next.js

[purvanshjoshi]

[Feature] Phase 3: Build Split-Pane Web IDE Interface in Next.js

Objective

The current Next.js dashboard primarily displays live agent logs. To provide a superior developer experience, we need to redesign the dashboard into a split-pane "Web IDE" where users can browse the codebase natively alongside the LangGraph execution output.

Requirements

1. Layout Redesign: Update dashboard/app/page.tsx to feature a collapsible left sidebar and a main view pane.
2. File Explorer Component:
   • Build a recursive React component that fetches data from the GET /repo/{repo_name}/tree backend API.
   • Utilize standard folder/file icons (e.g., via lucide-react).
3. File Viewer Component:
   • When a user clicks a file in the explorer, fetch the raw text from GET /repo/{repo_name}/file.
   • Display the file contents in the center pane (using a syntax-highlighted block or a minimal code viewer component).
4. Agent Log Integration:
   • The live agent logs should be integrated either as a bottom panel (like an IDE terminal) or a side panel so the user can watch the Automation work while browsing the files.

Acceptance Criteria

• The dashboard successfully fetches and renders the repository file tree on the left.
• Clicking a file accurately loads the content into the main viewing pane.
• The live agent logs remain visible and functional.