89 lines
2.7 KiB
Markdown
89 lines
2.7 KiB
Markdown
# Screenshot Guide
|
||
|
||
This document explains how to capture and update the README screenshots so they stay in sync with the UI.
|
||
|
||
## Screenshots in the README
|
||
|
||
| File | Section | Description |
|
||
|------|---------|-------------|
|
||
| `docs/mission-control-overview.png` | Dashboard Overview | Main dashboard view |
|
||
| `docs/mission-control-agents.png` | Agents Panel | Active agents list |
|
||
| `docs/mission-control-memory-graph.png` | Memory Graph | Agent memory graph |
|
||
|
||
## When to Refresh
|
||
|
||
Screenshots should be updated when:
|
||
|
||
- A new page, panel, or major UI component is added
|
||
- An existing page layout changes noticeably
|
||
- The color scheme or branding updates
|
||
- A GitHub Actions `screenshot-drift` label is applied to a PR (see [automation](#automation))
|
||
|
||
## How to Take New Screenshots
|
||
|
||
### Prerequisites
|
||
|
||
- Mission Control running locally (`pnpm dev` or Docker)
|
||
- Browser with at least 1440×900 viewport recommended
|
||
|
||
### Steps
|
||
|
||
1. **Start the app** (with some sample data for a realistic view):
|
||
|
||
```bash
|
||
pnpm dev
|
||
# or
|
||
docker compose up
|
||
```
|
||
|
||
2. **Seed sample data** (optional but recommended for non-empty screenshots):
|
||
|
||
```bash
|
||
pnpm seed # if a seed script exists, otherwise populate via UI
|
||
```
|
||
|
||
3. **Navigate to each page** and take a screenshot:
|
||
|
||
| Screenshot | URL | Notes |
|
||
|-----------|-----|-------|
|
||
| `mission-control-overview.png` | `/` | Main dashboard, full page |
|
||
| `mission-control-agents.png` | `/agents` | Agents panel open |
|
||
| `mission-control-memory-graph.png` | `/memory` | Memory graph with nodes |
|
||
|
||
4. **Crop and optimise** to reduce file size:
|
||
|
||
```bash
|
||
# macOS
|
||
pngcrush -reduce -brute input.png output.png
|
||
|
||
# Linux
|
||
optipng -o5 input.png
|
||
# or
|
||
pngquant --quality=80-95 --output output.png input.png
|
||
```
|
||
|
||
5. **Replace the files** under `docs/` and commit:
|
||
|
||
```bash
|
||
cp ~/Downloads/dashboard.png docs/mission-control-overview.png
|
||
git add docs/
|
||
git commit -m "docs: refresh README screenshots"
|
||
```
|
||
|
||
## Automation
|
||
|
||
The repository has a GitHub Actions workflow (`.github/workflows/screenshot-drift.yml`) that:
|
||
|
||
- Detects changes to files under `src/app/`, `src/components/`, and `public/`
|
||
- Adds a `screenshot-drift` label to the PR as a reminder
|
||
- Posts a checklist comment listing which screenshots may need updating
|
||
|
||
This does **not** auto-capture screenshots — it just flags the PR so a human can decide whether the change is visually significant enough to warrant a refresh.
|
||
|
||
## Tips
|
||
|
||
- Use a consistent browser zoom level (100%) and window size
|
||
- Hide bookmarks bar and dev tools before capturing
|
||
- Light mode and dark mode screenshots can coexist — add a `*-dark.png` variant if useful
|
||
- Prefer PNG for UI screenshots (lossless); JPEG for photos/illustrations
|