feat: add automated screenshot capture for key UI states

[pavsoss]

Summary

Adds automated screenshot capture for key UI states using Playwright.

This PR introduces a lightweight screenshot generation workflow that automatically captures important application views, making it easier to verify UI changes, update documentation, and maintain visual consistency across releases.

Changes

Frontend Updates

• Added data-testid attributes to key UI components for reliable element selection.

• Updated:

  • StatusBar.jsx
  • UploadPanel.jsx
  • PluginsPanel.jsx
  • SettingsPanel.jsx

• Enabled action buttons and panels to be targeted consistently during automated screenshot generation.

Automated Screenshot Capture

• Added frontend/scripts/capture-screenshots.js.

• Uses Playwright Chromium in headless mode to:

  • Launch the application.
  • Navigate through key UI states.
  • Capture screenshots automatically.
  • Save generated images to the repository-level screenshots/ directory.

Captured UI States

• Main Chat View
• Documents / Upload Panel
• Plugins Panel
• Settings Panel

Tooling

• Added Playwright as a development dependency.
• Added a new script:

npm run screenshot

Documentation

• Added docs/screenshots.md with:

  • Installation instructions
  • Playwright setup steps
  • Configuration options
  • Screenshot generation workflow

Testing

Verified locally by:

1. Installing Playwright and Chromium.
2. Running the frontend application.
3. Executing:

npm run screenshot

4. Confirming that all four screenshots are generated successfully in the screenshots/ directory.

Result

Provides an automated and repeatable way to capture important UI states, reducing manual effort when validating interface changes and maintaining project documentation.

Closes #312

[vercel]

@pavsoss is attempting to deploy a commit to the Darshan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[pavsoss]

Hi @imDarshanGK Kindly review it let me know if any changes required. thanks