Skip to content

feat(webui): implement AI Copilot sidebar and resolve CORS blockers#1318

Closed
Makeepan-dev wants to merge 1 commit intocybertec-postgresql:masterfrom
Makeepan-dev:feat/ai-copilot-ui-integration
Closed

feat(webui): implement AI Copilot sidebar and resolve CORS blockers#1318
Makeepan-dev wants to merge 1 commit intocybertec-postgresql:masterfrom
Makeepan-dev:feat/ai-copilot-ui-integration

Conversation

@Makeepan-dev
Copy link
Contributor

Description

I have implemented the initial frontend infrastructure and UI components for the AI Copilot feature. This PR establishes the bridge between the global navigation and the new AI-driven sidebar, while also resolving local development blockers.

#Key Changes:

AppBar Integration: Added an IconButton with the AutoAwesome icon to serve as the entry point for the AI suite.

State Management: Implemented "State Lifting" in App.tsx to synchronize the AppBar toggle with the CopilotDrawer visibility.

CopilotDrawer (New): Created a premium-styled, responsive sidebar using MUI Drawer, featuring a gradient header and a scrollable message area.

CORS Middleware Update: Modified internal/webserver/webserver.go to allow cross-origin requests, enabling the React frontend (Vite/RSPack) to communicate with the Go backend during local development.

Motivation:
To provide a seamless, modern user interface for database insights as outlined in my GSoC 2026 proposal.

AI & Automation Policy

  • I am the human author and take full personal responsibility for every change in this PR.
  • No AI or automated generative tool was used in any part of this PR OR I have disclosed all tool(s) below.

AI/automation tools used (leave blank if none):
Drafted architectural logic and UI component structure with the assistance of Gemini.
Used AI to refine the Material UI (MUI) styling and TypeScript definitions for better type safety.

Checklist

  • Code compiles and existing tests pass locally.
  • New or updated tests are included where applicable.
  • Documentation is updated where applicable.
    Before UI changes (2)
    After UI Changes (2)
    Copilot placeholder

@Makeepan-dev
Copy link
Contributor Author

I have completed the initial UI foundation for the AI Copilot feature. My goal with this PR was to establish a clean entry point and a "premium" feel for the assistant without disrupting the existing pgwatch3 dashboard flow.

What I’ve delivered in this PR:

Trigger UI: Added a dedicated IconButton in the AppBar using the AutoAwesome icon.

State Logic: Implemented React "State Lifting" in App.tsx to toggle the sidebar.

CopilotDrawer Component: A new, responsive MUI Drawer with a custom gradient header and a scrollable chat area.

Dev Blocker Fix: Updated internal/webserver/webserver.go to handle CORS issues, which was preventing the React frontend from talking to the Go backend on different local ports.

@pashagolub
Copy link
Collaborator

webui is admin. copilot must be TUI.

@pashagolub pashagolub closed this Mar 20, 2026
@pashagolub pashagolub self-assigned this Mar 20, 2026
@pashagolub pashagolub added the wontfix This will not be worked on label Mar 20, 2026
@Makeepan-dev
Copy link
Contributor Author

Understood, Pavlo. Thank you for the clarification! I see that you want to keep the WebUI for admin tasks and move the Copilot to a TUI. I will pivot my GSoC proposal to focus on building a Go-based Terminal User Interface for the Copilot. I'll look into using libraries like Bubble Tea to keep it modern and interactive.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

wontfix This will not be worked on

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants