Feedback & Roadmap

VibeKit provides a complete customer feedback and public roadmap system. Users can submit bug reports, suggest features, and attach annotated screenshots directly from your app.

Floating Feedback Launcher & Modes

The floating feedback launcher (FloatingWidgetPanel.tsx) sits in the corner of your application, giving users instant access to 4 distinct modes:

• Bug Reports: Form with title, severity level, description, and reproduction steps.
• Feature Requests: User ideas that can feed directly into your public or private roadmap.
• Feedback: Quick sentiment feedback and open-ended impressions.
• Interactive Copilot AI: Embedded chat assistant answering user questions about your product in real time.

Visual Screenshot Annotations & Redaction

When reporting a bug, users can click to capture their screen directly inside the browser using the built-in capture tool (ScreenCaptureOverlay.tsx):

• Highlight & Draw: Users can draw boxes or arrows around problem areas on the screen.
• Privacy Redaction: Users can black out sensitive account information or private text before submitting.
• Secure File Storage: Annotated screenshots are uploaded through the managed storage pipeline (/api/storage/feedback) with verified signed URLs.

Client Diagnostics & Context Recording

Every bug report automatically bundles diagnostic details collected by the client-side recorder (context-recorder.ts):

• Current application URL and route path.
• Operating system, browser family, and viewport screen dimensions.
• Device memory and connection type indicators.
• Recent client console errors, helping developers reproduce bugs instantly without back-and-forth emails.
• Password fields and credit card inputs are screened and omitted automatically.

Public Roadmap & Community Voting

You can expose an interactive voting board (FeedbackBoard.tsx) to involve your community in product decisions:

• Feature Upvoting: Users can upvote feature proposals they want prioritized.
• Anonymous Deduplication: Prevents duplicate voting via browser fingerprinting without requiring visitors to create an account.
• Status Progression: Cards display current roadmap stages: Planned, In Progress, or Completed.

Admin Moderation & Triage Center

Platform administrators manage all submissions through a dedicated console at /app/admin/feedback:

• Private by Default: All incoming submissions arrive privately. Moving an item to the public roadmap requires an explicit administrator approval.
• Triage & Status Updates: Change statuses, leave internal developer notes, or notify users when a requested fix ships.
• Duplicate Merging: Group related bug reports together to keep the board organized.

Instructing Your Agent to Customize Feedback

To adjust categories or embed the board on a custom route, give your coding agent this prompt:

Customize the feedback system for my application:
1. Review the feedback components in features/feedback and features/admin/components/FeedbackList.tsx.
2. Enable the public roadmap board at /roadmap and restrict new submissions to registered users.
3. Test screenshot capture and verify that admin triage works at /app/admin/feedback.
4. Verify with $verify-changes.