# Screenshots and demo assets

This directory holds the binary assets the README and docs reference. The full
auto-generated inventory is intentionally kept here even when only a subset of
screenshots is embedded in the main docs pages; the extra captures are review
assets for release notes, downstream docs, and UI drift checks.

There are two sources of screenshots:

1. **`auto/`** — generated by `pnpm screenshots`. The harness lives at
   `apps/desktop/tests/screenshots.ts` and reuses the smoke-test
   Electron launcher (`apps/desktop/tests/smoke-helpers.ts`) so the
   screenshots run against an isolated branded `Open Cowork Smoke`
   profile and never touch the developer's real sessions, keys, or
   project paths. Every PNG in `auto/` is regenerated on each run, so
   commits should treat them as build output that can be replaced by
   re-running the harness.
2. **Top-level files in this directory** — manually captured assets
   (animated GIFs, marketing shots, anything the harness can't produce
   deterministically). Add these only when the auto set can't cover
   the surface.

## Regenerating the auto screenshots

```bash
pnpm screenshots
```

This runs `pnpm build:shared`, `pnpm build` (renderer), and
`pnpm build:electron` (main + preload typecheck) before driving the
packaged renderer through Playwright. Output viewport is `1600×1000`
at `deviceScaleFactor=1`, dark mode, written to `docs/assets/auto/`.

To capture from an already-packaged app bundle instead of the local
Electron test runner, pass `OPEN_COWORK_SCREENSHOT_EXECUTABLE`:

```bash
OPEN_COWORK_SCREENSHOT_EXECUTABLE="apps/desktop/release/mac-arm64/Open Cowork.app" pnpm screenshots
```

## What the auto set covers

Top-level pages: `home`, `agents`, `capabilities-tools`,
`capabilities-skills`, `workflows-overview`, `chat-thread`.

Sub-views: `agents-template-picker`, `agents-builder`,
`agents-builder-detail`, `capabilities-tool-detail`,
`capabilities-add-tool`, `capabilities-add-skill`, `chat-mention-picker`,
`sidebar-search`, `workflows-template`, `workflows-detail`.

Settings tabs: `settings-appearance`, `settings-models`,
`settings-permissions`, `settings-workflows`, `settings-storage`.

## Auto screenshot inventory

| Surface | Screenshot |
| --- | --- |
| Home | [`auto/home.png`](auto/home.png) |
| Chat thread | [`auto/chat-thread.png`](auto/chat-thread.png) |
| Chat mention picker | [`auto/chat-mention-picker.png`](auto/chat-mention-picker.png) |
| Sidebar search | [`auto/sidebar-search.png`](auto/sidebar-search.png) |
| Agents overview | [`auto/agents.png`](auto/agents.png) |
| Agents template picker | [`auto/agents-template-picker.png`](auto/agents-template-picker.png) |
| Agent builder | [`auto/agents-builder.png`](auto/agents-builder.png) |
| Agent builder detail | [`auto/agents-builder-detail.png`](auto/agents-builder-detail.png) |
| Tools overview | [`auto/capabilities-tools.png`](auto/capabilities-tools.png) |
| Skills overview | [`auto/capabilities-skills.png`](auto/capabilities-skills.png) |
| Tool detail | [`auto/capabilities-tool-detail.png`](auto/capabilities-tool-detail.png) |
| Add tool | [`auto/capabilities-add-tool.png`](auto/capabilities-add-tool.png) |
| Add skill | [`auto/capabilities-add-skill.png`](auto/capabilities-add-skill.png) |
| Workflows overview | [`auto/workflows-overview.png`](auto/workflows-overview.png) |
| Workflow template | [`auto/workflows-template.png`](auto/workflows-template.png) |
| Workflow detail | [`auto/workflows-detail.png`](auto/workflows-detail.png) |
| Settings appearance | [`auto/settings-appearance.png`](auto/settings-appearance.png) |
| Settings models | [`auto/settings-models.png`](auto/settings-models.png) |
| Settings permissions | [`auto/settings-permissions.png`](auto/settings-permissions.png) |
| Settings workflows | [`auto/settings-workflows.png`](auto/settings-workflows.png) |
| Settings storage | [`auto/settings-storage.png`](auto/settings-storage.png) |

## Capture guidelines for manual assets

- Use the packaged macOS build against the isolated `smoke`-branded
  HOME (see `apps/desktop/tests/smoke-helpers.ts`) so screenshots
  don't leak a real project path, API key, or session title.
- Theme: dark — the auto set is dark-only and manual additions should
  match unless a light pair is explicitly needed.
- Trim menu bar / dock / other chrome with a screenshot tool rather
  than cropping the PNG post-hoc — preserves the native hi-DPI
  density.
- Compress PNGs with `oxipng -o 4` or `pngcrush -brute` before
  committing; the CI docs build does not pipeline this.
- GIFs should not loop aggressively — one pass + final frame hold.
  If the captured GIF is over 5MB, re-encode at a lower frame rate
  (12 fps is usually fine for UI demos).

## License

The images are MIT-licensed along with the rest of the repo. Don't
include screenshots that show third-party trademarks (customer logos,
competitor screenshots) without explicit consent.
