docs: refresh app view screenshots and add manual capture workflow#41
Conversation
Reviewer's GuideAdds a documented, reproducible workflow for generating and tracking app UI screenshots, including a new docs screenshot generator script, updated Playwright capture logic to support the Processed Output panel and configurable output directories, and new docs/manual test entries describing usage. Sequence diagram for the docs screenshots refresh workflowsequenceDiagram
actor Developer
participant Make as make
participant Npm as npm_cli
participant ScriptsIndex as scripts_index_js
participant Utils as utils_js
participant DocsScript as generate_doc_screenshots_js
participant CaptureScript as capture_ui_screenshot_js
participant Playwright as Playwright_chromium
participant App as Electron_app_renderer
Developer->>Make: make docs-screenshots
Make->>ScriptsIndex: node scripts/index.js docs-screenshots
ScriptsIndex->>Utils: runNpmScript docs:screenshots
Utils->>Npm: npm run docs:screenshots
Npm->>DocsScript: node scripts/generate-doc-screenshots.js
DocsScript->>CaptureScript: spawnSync with UI_SCREENSHOT_DIR and UI_SCREENSHOT_NAME
CaptureScript->>Playwright: launch chromium
Playwright->>App: open app at UI_SCREENSHOT_PORT
CaptureScript->>App: navigate and setup mockElectronApi
CaptureScript->>App: capture config and source panel screenshots
CaptureScript->>App: waitFor processSelectedFilesButton enabled
CaptureScript->>App: click processSelectedFilesButton
CaptureScript->>App: waitFor processedTabActive and processedContent
CaptureScript->>App: capture processedTab screenshot
CaptureScript-->>DocsScript: screenshots in dist/docs/screenshots
DocsScript->>DocsScript: verify expected screenshots exist
DocsScript->>DocsScript: copy to docs/images/*.png
DocsScript-->>Developer: Docs screenshots refreshed successfully
Flow diagram for configurable screenshot capture and docs image generationflowchart LR
subgraph CaptureFlow[UI screenshot capture]
A[Start capture_ui_screenshot_js] --> B[Resolve ROOT_DIR]
B --> C[Resolve UI_SCREENSHOT_DIR via resolveOutputDirectory]
C --> D[Validate directory is inside ROOT_DIR]
D --> E[Build SCREENSHOTS paths including processedTab]
E --> F[Launch Playwright chromium]
F --> G[Load app at UI_SCREENSHOT_PORT]
G --> H[Setup mockElectronApi
analyzeRepository
processRepository]
H --> I[Capture config and source panel screenshots]
I --> J[Set viewport to desktop size]
J --> K[Wait for processSelectedFilesButton enabled]
K --> L[Click processSelectedFilesButton]
L --> M[Wait for processedTabActive and processedContent]
M --> N[Capture processedTab screenshot]
N --> O[Write files to UI_SCREENSHOT_DIR]
end
subgraph DocsGeneration[Docs screenshot generation]
P[Start generate_doc_screenshots_js] --> Q[Set TEMP_SCREENSHOT_DIR]
Q --> R[Spawn capture_ui_screenshot_js
with UI_SCREENSHOT_DIR and UI_SCREENSHOT_NAME]
R --> S[Ensure capture exited with status 0]
S --> T[Ensure docs/images exists]
T --> U[For each mapping
from temporary name
to docs image name]
U --> V{Source screenshot exists?}
V -- No --> W[Fail with error]
V -- Yes --> X[Copy file to docs/images]
X --> U
W --> Y[Exit with failure]
X --> Z[All screenshots updated]
end
O --> R
Z --> AA[Docs images ready for APP_VIEWS_md]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Review Summary by QodoAdd reproducible UI screenshot capture workflow for documentation WalkthroughsDescription• Add reproducible workflow to capture and refresh UI panel screenshots • Extend screenshot capture to include Processed Output panel state • Create new docs/APP_VIEWS.md page with tracked UI screenshots • Add npm run docs:screenshots command for automated screenshot generation • Enhance mock Electron API to support file analysis and processing workflows Diagramflowchart LR
A["npm run docs:screenshots"] --> B["generate-doc-screenshots.js"]
B --> C["capture-ui-screenshot.js"]
C --> D["Playwright Browser"]
D --> E["Mock Electron API"]
E --> F["Temp Screenshots"]
F --> G["docs/images/"]
G --> H["docs/APP_VIEWS.md"]
File Changes1. scripts/capture-ui-screenshot.js
|
Summary of ChangesHello @Mehdi-Bl, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the project's documentation by creating a new page dedicated to application UI screenshots. It establishes a robust, automated system for generating and maintaining these screenshots, ensuring they accurately reflect the current state of the user interface. This improvement streamlines the documentation update process and provides clear visual references for users and developers. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 WalkthroughWalkthroughAdds automated documentation screenshot generation: new Make and npm targets, scripts to capture UI screenshots (including processed-tab), a generator to copy images into docs, markdown lint tooling, and related docs/tests updates. Changes
Sequence DiagramsequenceDiagram
participant User
participant Build as "npm/Make"
participant Gen as "generate-doc-screenshots.js"
participant Capture as "capture-ui-screenshot.js"
participant MockE as "Mock Electron API"
participant FS as "File System"
User->>Build: npm run docs:screenshots
Build->>Gen: spawn with env (UI_SCREENSHOT_DIR, NAME, PORT)
Gen->>Capture: run capture script
Capture->>MockE: analyzeRepository(selectedFiles)
MockE-->>Capture: filesInfo (paths, tokens, isBinary)
Capture->>MockE: processRepository(filesInfo, exportFormat)
MockE-->>Capture: processed content + metadata
Capture->>FS: write screenshots to temp dir
Capture-->>Gen: exit status
Gen->>FS: copy temp screenshots -> docs/images/
Gen-->>User: log completion
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've found 1 issue
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `scripts/capture-ui-screenshot.js:380-387` </location>
<code_context>
- stats: {
- totalFiles: 0,
- totalTokens: 0,
+ analyzeRepository: async (options = {}) => {
+ const selectedFilePaths = Array.isArray(options?.selectedFiles) ? options.selectedFiles : [];
+ const filesInfo = selectedFilePaths.map((filePath, index) => {
+ const normalizedPath = String(filePath);
+ const relativePath = normalizedPath.startsWith(`${mockRootPath}/`)
+ ? normalizedPath.slice(mockRootPath.length + 1)
+ : normalizedPath;
+ return {
+ path: relativePath,
+ tokens: 120 * (index + 1),
</code_context>
<issue_to_address>
**issue (bug_risk):** Path prefix stripping in `analyzeRepository` is not Windows-safe.
Using `normalizedPath.startsWith(`${mockRootPath}/`)` bakes in a forward slash and will fail when `mockRootPath` contains backslashes on Windows. Instead, derive the relative path with `path.relative(mockRootPath, normalizedPath)` and use that (e.g., rejecting results that start with `'..'` or are absolute), so this logic stays path-separator agnostic and works on all platforms, including for QA/docs screenshot generation on Windows.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| analyzeRepository: async (options = {}) => { | ||
| const selectedFilePaths = Array.isArray(options?.selectedFiles) ? options.selectedFiles : []; | ||
| const filesInfo = selectedFilePaths.map((filePath, index) => { | ||
| const normalizedPath = String(filePath); | ||
| const relativePath = normalizedPath.startsWith(`${mockRootPath}/`) | ||
| ? normalizedPath.slice(mockRootPath.length + 1) | ||
| : normalizedPath; | ||
| return { |
There was a problem hiding this comment.
issue (bug_risk): Path prefix stripping in analyzeRepository is not Windows-safe.
Using normalizedPath.startsWith(${mockRootPath}/) bakes in a forward slash and will fail when mockRootPath contains backslashes on Windows. Instead, derive the relative path with path.relative(mockRootPath, normalizedPath) and use that (e.g., rejecting results that start with '..' or are absolute), so this logic stays path-separator agnostic and works on all platforms, including for QA/docs screenshot generation on Windows.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request is a great addition, introducing a reproducible workflow for generating and updating documentation screenshots. The new scripts are well-structured, and the extension of the Playwright harness to cover more UI states is a valuable improvement. I have one minor suggestion to improve the formatting of mock data generation.
| '# Repository Analysis', | ||
| '', | ||
| ...filesInfo.map( | ||
| (file) => `## ${file.path}\n\n\`\`\`ts\n// Preview for ${file.path}\n\`\`\`\nTokens: ${file.tokens}\n` |
There was a problem hiding this comment.
The mock data generation for the markdown format includes a trailing newline (\n) at the end of each file's section. When these sections are joined by \n, it results in an extra blank line between each file's output in the final mock content. Removing the trailing newline will produce a more cleanly formatted output.
| (file) => `## ${file.path}\n\n\`\`\`ts\n// Preview for ${file.path}\n\`\`\`\nTokens: ${file.tokens}\n` | |
| (file) => `## ${file.path}\n\n\`\`\`ts\n// Preview for ${file.path}\n\`\`\`\nTokens: ${file.tokens}` |
Code Review by Qodo
1. Docs screenshots miss CSS build
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
| "predocs:screenshots": "npm run build:ts && npm run build:webpack", | ||
| "docs:screenshots": "node scripts/generate-doc-screenshots.js", |
There was a problem hiding this comment.
1. Docs screenshots miss css build 🐞 Bug ⛯ Reliability
• predocs:screenshots builds TS + webpack, but does not build src/renderer/output.css even though the renderer HTML always loads it. • On a clean checkout or after CSS changes, npm run docs:screenshots can generate unstyled/misleading screenshots (or stale styling), undermining the purpose of the docs images.
Agent Prompt
### Issue description
`npm run docs:screenshots` can run without producing/updating `src/renderer/output.css`, even though the renderer HTML depends on it. This can yield unstyled or stale UI screenshots.
### Issue Context
`src/renderer/index.html` loads `output.css`, and the dev workflow treats CSS generation as a separate step.
### Fix Focus Areas
- package.json[29-37]
- scripts/generate-doc-screenshots.js[26-43]
### Suggested change
Update `predocs:screenshots` to include CSS build, e.g.
- `"predocs:screenshots": "npm run build:ts && npm run build:css && npm run build:webpack"`
(Alternatively/additionally) have `generate-doc-screenshots.js` call `npm run build:css` before spawning the capture script.
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.Scanned FilesNone |
1 participant
Summary
docs/APP_VIEWS.md)npm run docs:screenshots,make docs-screenshots)tests/manual/docs-ui-screenshots.mdValidation
Notes
docs/images/Summary by Sourcery
Add a reproducible workflow to generate and track up-to-date UI screenshots for key app panels in documentation.
New Features:
Enhancements:
Tests:
Summary by CodeRabbit
New Features
Documentation
Chores